Файл: Основы программирования на языке HTML. ТЕХНОЛОГИИ ПРОГРАММИРОВАНИЯ.pdf
Добавлен: 14.03.2024
Просмотров: 33
Скачиваний: 0
background — сюда можно написать ссылку на картинку и она будет фоном ячейки. Не используйте этот атрибут. Есть CSS для этого.
bgcolor — здесь можно написать цвет фона ячейки. Не используйте этот атрибут. Есть CSS для этого.
bordercolor — Здесь можно задать цвет рамки ячейки. Не используйте этот атрибут. Есть CSS для этого.
char — указывает по каком символу будет происходить выравнивание в столбце.
charoff — указывает относительно какого символа будет происходить смещение ячейки.
colspan — укажите какое числе столбцов должна занять эта ячейка.
headers — Позволяет связать ячейки с заголовком.
height — здесь вы можете указать высоту строки. Не используйте этот атрибут. Есть CSS для этого.
nowrap — укажите этот атрибут и будет запрос на перенос строк внутри ячейки. Не используйте этот атрибут. Есть CSS для этого.
rowspan — укажите какое число строк должна занимать эта ячейка.
scope — Позволяет связать ячейки простой таблицы с заголовками в речевых web-browserах.
valign — даёт понять каким будет выравнивание содержимого ячейки по вертикали.
width — здесь можно указать ширину ячейки. Не используйте этот атрибут. Есть CSS для этого.
У этого элемента ещё имеются универсальные аттрибуты и события.
<iframe> — Элемент iframe создает плавающий фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы.
Элемент iframe является контеийнером, содержание которого игнорируется web-browserами, не поддерживающими данный элемент. Для таких web-browserов можно указать альтернативный текст, который увидят пользователи.
Синтаксисс
<iframe>…Ваш web-browser не поддерживает iframe…</iframe>
Аттрибуты
align — Определяет как фрейм будет выравниваться по краю, а также способ обтекания его текстом.
allowtransparency — Устанавливает прозрачный фон фрейма, через который виден фон страницы.
frameborder — Устанавливает, отображать границу вокруг фрейма или нет.
height — Высота фрейма.
hspace — Горизонтальный отступ от фрейма до окружающего контента.
marginheight — Отступ сверху и снизу от содержания до границы фрейма.
marginwidth — Отступ слева и справа от содержания до границы фрейма.
name — Имя фрейма.
sandbox — Позволяет задать ряд ограничений на контент загружаемый во фрейме.
scrolling — Способ отображения полосы прокрутки во фрейме.
seamless — Определяет, что содержимое фрейма должно отображаться так, словно оно является частью документа.
src — Путь к файлу, содержимое которого будет загружаться во фрейм.
srcdoc — Хранит содержимое фрейма непосредственно в атрибуте.
vspace — Вертикальный отступ от фрейма до окружающего контента.
width — Ширина фрейма.
У этого элемента ещё имеются универсальные аттрибуты и события.
<form> — Элемент form добавляет форму на web-странице. Форма раньше являлась основным способом обмена данными межде сервером и пользовтелем. На сегодняшний день используется в качеству удобной обертки с удобным API. Так в осовном используется чтобы получить валидный каркас с исзодными данным для отправки даных на сервер, добавления нативных уведомлений валидации, ловли событий на форме и прочего. Раньше возможность обратится к тега input/textarea/checkbox была только через форму. Но это было давно и уже стало неправдой.
Количетсов форм на одной странице не ограничено, но нельзя вкладывать форму в форму, так как браузер скорее всего не поймет когда какая форма закончилась. Плюс ко всему браузер может отправить запрос на один сервер только два в одной паралели, так что сабмиттеть больше двух форм за раз не имеет смысла (а вообще лечше делать последовательную отправку, чтобы не было коллизий и все было очевидно, тупо, просто и наглядно)
Для того чтобы отправить форму на сервер в атрибутах обязательно должно быть указын не пустой action, а внутри формы находиться кнопка Submit, которую можно сделать различными способами (от нативных кнопок input type=submit и button, до написания собственных механизов сабмита в скриптах) или можно в рамках формы нажать Enter. Это будет аналогом нажатия на кнопку submit. Если конечно другой разработчик не запретил данного действия в скриптах.
Как уже и говорилось, когда мы сабмитим форму на сервер, то браузер собирает данные и отправляет их по адресу указанному в action. Web-browser собирает и подготавливает данные из формы: формирует или простой список из пар «ключ=значение» или генерируерт formidable структуру для POST запросов. Но сейчас возьмем простой вариант и отправим некоторые данные с помощью метода GET запроса. Он будет выглядеть так:
https://www.helloworld.org/someAction?ключ=значение&ключ2=значение2
Параметры в виде ключ=значение перечисляются после спе знака — вопросительного — указанного после URI основной программы, которая должна будет обработать наш запрос и дать ответ (ну или не дать и вернуть ошибку). Разделяются же параметры между собой с помощью амперсанда &. Большинство бразуеров не умеер нормально представлять ссылки с нелатинскими символами, поэтому все они преобразуются в шестнадцатеричное представление (в формат %HH, где HH — шестнадцатеричный код для значения ASCII-символа), а все пробелы заменяется на плюсы (+), чтобы не было разрывов строки.
Внутри формы могут распологаться любые другие теги (кроме другой формы) и сама форма не имеет внешнего вида, рамак и прочего, если иного не указано вами в стилях.
Синтаксисс
<form action="URL" method=”GET”>
...
</form>
Аттрибуты
accept-charset — дает понять какую кодировку поймет сервер при отправке.
action — адресс удаленного сервера, который будет обрабатывать ваш запрос.
autocomplete — если в текущее поле вводятся очень важные и секурные данные, то лучше отключите возможность автозаполнения. А ещё иногда браузер некорекктно по именам распознает какие данные надо подставить и в таком случае лучше будет отключить данную функцию (чтобы на место вашего имени и фамилии не писался ваш никнейм с порнхаба)
enctype — Способ кодирования данных form’ы.
method — метод, которым будет отправлена форма. Основные 4: GET/POST/PUT/DELETE.
name — устанавливает имя form’ы.
novalidate — отменяет проверку форму нативными срерсдтвами валиации браузера. К примеру, когда у вас самописная валидация на скриптах и валидация барузероем будет только мешать.
target — имя другого окна, таба или фрейма куда выведется результат ответа формы.
У этого элемента ещё имеются универсальные аттрибуты и события.
<fieldset> — Элемент fieldset является собой удобный, но забытый всеми тег, что умеет объединять поля в группы. Пи необходимости можно заблокировать сразу все поля внутри филдсета добавив один атрибут к этому филдсету, вместо того, чтоы добавлять этот атриут к каждому полю.
Web-browserы для удобства восприятия информации отображают специальные рамки вокруг fieldset. Вид этой рамки зависит от используемой ОС, а также используемого web-browserа.
Синтаксисс
<form>
<fieldset>...</fieldset>
</form>
Аттрибуты
disabled — делает элемент и всё его содержимое недоступным для любого взаимодействия. При сабмите формы это поле не будет отправлено на сервер.
form — устанавливает связь между элементом и формой, если указать идентификатор формы в данном атрибуте.
title — краткое описание объекта, которое будет видно только на десктопах и при наведении на элемент и задержании курсора на пару секунд. Почти не нужно, так как 90% офисного планктона не знают, что такие подсказочки вообще могут появляться в принципе.
У этого элемента ещё имеются универсальные аттрибуты и события.
<label> — Элемент label связывет своё содержимое с элементом input/textarea/select. Обычно это делает для более удобного перехода к полю или изменения его значения. К примеру, чтобы не нахимать на маленький квадратик/кружочек чекбокса/радиобаттона мы можем связать их с текстовым лейблом и нажимая не текст будет нажиматься сам элемент. Он служит вроде ссылка для перехода и активации вышеназванных элементов.
Обычно используется два способа связывания лейбла и элемента формы: первый – это когда в специальный атрибут лейбла for мы вписываем id нужного элемента. Второй, более простой, подразумевает помещение элемента форму внутрь лейбла. Последний вариант используется повсеместно для создания чекбоксов и радиобатонов.
Синтаксисс
<input id="идентификатор"><label for="идентификатор"> Текст </label>
<label><input type="..."> Текст</label>
Аттрибуты
accesskey — с помощью заданной клавиши в этом атрибуте позволяет получить доступ к элементу при помощи нажатия указанной клавиши и специальной клавиши, которая у каждого браузера своя.
for — как раз тот самый атрибут, куда следует указать идентификатор необходимого для связки элемента.
<input> — Элемент input является одним из основных элементов, необходимых для взаимодействия с пользователем и одним из самых разносторонних. По сути он принимает одну из трёх простейших форм: текстовое поле с различными правилами ввода, флажки и взаимоисключащие переключатели. Обычно этот элемент используется в рамках контейнера form, чтобы в дальнейшем отправить значение этого поля на сервер, но в современном мире отправкой на сервер занимается скриптовый язык JavaScript, а поле input нужно исключительно для взаимодействия с пользователем.
Самый важный аттрибут этого элемента, от котого зависит его внешний вид и/или функциональность — type. Далее мы расмотрим основные виды типов этого элемента: просто текстовое поле (type=text), поле с скрытым содержимым – с паролем (type=password), поле-переключатель (type=radio), поле-флажок (type=checkbox), скрытое поле (type=hidden), которое всё равно будет будет отправляться на сервер, кнопка (type=button), кнопка для сабмита form’ы (type=submit), кнопка для возврата формы в изначальное состояние (type=reset), поле для выбора и хранения файла (type=file) и кнопка с изображением (type=image). У каждого из этих полей есть свой список аттрибутов влияющих на их поведение. Кроме того, в HTML5 добавлено еще более десятка новых элементов. В основном это текстовые поля с определенными масками поведения (типа корректного ввода email, telephone, date, etc.)
Синтаксисс
<input аттрибуты />
Аттрибуты
accept — здесь можно указать какие типы файлов будут принимать type=file. Файлы с другим расширением не будут иметь возможности выбраться на системном уровне.
accesskey — с помощью заданной клавиши в этом атрибуте позволяет получить доступ к элементу при помощи нажатия указанной клавиши и специальной клавиши, которая у каждого браузера своя.
align — задает как будет выравниваться изображение в type=image
alt — текст для изображения, который обязателен в угоду доступности восприятия. Слабовидящие люди с помощью спец программ читают сайты и для них картинки ничего не значат, поэтому надо граммотно их описывать.
autocomplete — если в текущее поле вводятся очень важные и секурные данные, то лучше отключите возможность автозаполнения. А ещё иногда браузер некорекктно по именам распознает какие данные надо подставить и в таком случае лучше будет отключить данную функцию (чтобы на место вашего имени и фамилии не писался ваш никнейм с порнхаба)
autofocus — автоматически после рендера страницы фокусируется на элементе с этим атрибутом.
border — устсаналвивает в пикселях толщина рамочки вокруг изображения. Лучше не использовать вообзе изображение с type=image, но если уж вас приперло, то задайте рамочку с помощью CSS.
checked — атрибут true/false для checkbox/radio который задает значение выбранности или нет для этих элементов.
disabled — делает элемент и всё его содержимое недоступным для любого взаимодействия. При сабмите формы это поле не будет отправлено на сервер.
form — здесь вы можете указать к какой форме относится кнопка, если она находится вне формы.
formaction — принудительно указывает по какому адресу будет происходить сабмит формы. Редко-используемая фича, желательно её избегать.
formenctype — принудительно указывает кодировку в котром отправлять данные на сервер. Не использовать. Плохой стиль.
formmethod — принудительно указывает каким методом отправить данные формы на сервер. Не использовать. Плохой стиль.
formnovalidate — если у элементов формы используются нативные методы проверки валидности, то данное свойство отклчит их проверку при сабмите формы. Не использовать. Плохой стиль.
formtarget — после сабмита откроет ответ с сервера в фрейме или новом окне.
list — Указывает на список вариантов, которые можно выбирать при вводе текста.
max — атрибут, который указывает встроенным в браузер технологиям валидации, что в данном поле value не должно превышать значение этого атрибута. Работает для чисел и дат. В текущей реализиации браузер просто запретит ввод больше чем положено.
maxlength — атрибут, который указывает встроенным в браузер технологиям валидации, что количество символов в данном поле не должно превышать значение этого атрибута. В текущей реализиации браузер просто запретит ввод больше чем положено.
min — Нижнее значение для ввода числа или даты.
multiple — Позволяет загрузить несколько файлов одновременно.
