HTML-формы являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.
Веб-формы состоят из набора текстовых полей, кнопок, списков и других элементов управления, которые активизируются щелчком мыши. Технически формы передают данные от пользователя удаленному серверу.
Для получения и обработки данных форм используются языки веб-программирования, такие как PHP , Perl .
До появления HTML5 веб-формы представляли собой набор нескольких элементов , , завершающихся кнопкой . Для стилизации форм в разных браузерах приходилось прилагать немало усилий. Кроме того, формы требовали применения JavaScript для проверки введенных данных, а также были лишены специфических типов полей ввода для указания повседневной информации типа дат, адресов электронной почты и URL-адресов.
HTML5-формы решили большинство этих распространенных проблем благодаря наличию новых атрибутов, предоставив возможность изменять внешний вид элементов форм за счет CSS3 .
Рис. 1. Улучшенные веб-формы с помощью HTML5 Создание HTML5-формы 1. ЭлементОснову любой формы составляет элемент ... . Он не предусматривает ввод данных, так как является контейнером, удерживая вместе все элементы управления формы – поля . Атрибуты этого элемента содержат информацию, общую для всех полей формы, поэтому в одну форму нужно включать поля, объединенные логически.
accept-charset | Значение атрибута представляет собой разделенный пробелами список кодировок символов , которые будут использоваться для отправки формы, например, . |
action | Обязательный атрибут
, который указывает url обработчика формы на сервере, которому передаются данные. Представляет из себя файл (например, action.php), в котором описано, что нужно делать с данными формы. Если значение атрибута не будет указано, то после перезагрузки страницы элементы формы примут значения по умолчанию. В случае, если вся работа будет выполняться на стороне клиента сценариями JavaScript, то для атрибута action можно указать значение # . Также можно сделать так, чтобы заполненная посетителем форма приходила вам на почту. Для этого нужно внести следующую запись: |
autocomplete | |
enctype | Используется для указания MIME
-типа данных, отправляемых вместе с формой, например, enctype="multipart/form-data" . Указывается только в случае method="post" . application/x-www-form-urlencoded — тип содержимого по умолчанию, указывает на то, что передаваемые данные представляют список URL-кодированных переменных формы. Символы пробела (ASCII 32) будут закодированы как + , а специальный символ, например, такой как! будет закодирован шестнадцатиричной форме как %21 . multipart/form-data — используется для отправки форм, содержащих файлы, не-ASCII данные и бинарные данные, состоит из нескольких частей, каждая из которых представляет содержимое отдельного элемента формы. text/plain — указывает на то, что передается обычный (не html) текст. |
method | Задает способ передачи данных формы. Метод get передает данные на сервер через адресную строку браузера. При формировании запроса к серверу все переменные и их значения формируют последовательность вида www.anysite.ru/form.php?var1=1&var2=2 . Имена и значения переменных присоединяются к адресу сервера после знака? и разделяются между собой знаком & . Все специальные символы и буквы, отличные от латинских, кодируются в формате %nn , пробел заменяется на + . Этот метод нужно использовать, если вы не передаете больших объемов информации. Если вместе с формой предполагается отправка какого-либо файла, этот метод не подойдет. Метод post применяется для пересылки данных больших объемов, а также конфиденциальной информации и паролей. Данные, отправляемые с помощью этого метода, не видны в заголовке URL, так как они содержатся в теле сообщения. |
name | Задает имя формы , которое будет использоваться для доступа к элементам формы через сценарии, например, name="opros" . |
novalidate | Отключает проверку в кнопке для отправки формы. Атрибут используется без указания значения |
target | Указывает окно, в которое будет направлена информация: _blank — новое окно _self — тот же фрейм _parent — родительский фрейм (если он существует, если нет — то в текущий) _top — окно верхнего уровня по отношению к данному фрейму. Если вызов происходит не из дочернего фрейма, то в тот же фрейм. |
Элемент ... предназначен для группировки элементов, связанных друг с другом, разделяя таким образом форму на логические фрагменты.
Каждой группе элементов можно присвоить название с помощью элемента , который идет сразу за тегом . Название группы проявляется слева в верхней границе . Например, если в элементе хранится контактная информация:
Контактная информация
Имя *
Рис. 2. Группировка элементов формы с помощью
disabled | Если атрибут присутствует, то группа связанных элементов формы, находящихся внутри контейнера , отключены для заполнения и редактирования. Используется для ограничения доступа к некоторым полям формы, содержащих ранее введенные данные. Атрибут используется без указания значения — . |
form | в этом же документе. Указывает на одну или несколько форм, к которым принадлежит данная группа элементов. На данный момент атрибут не поддерживается ни одним браузером. |
name | Определяет имя , которое будет использоваться для ссылки на элементы в JavaScript, или для ссылки на данные формы после заполнения и отправки формы. Является аналогом атрибута id . |
Элемент создает большинство полей формы. Атрибуты элемента отличаются в зависимости от типа поля, для создания которого используется этот элемент.
С помощью css-стилей можно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение. Ширина поля задается свойством width .
accept | Определяет тип файла, разрешенных для отправки на сервер. Указывается только для . Возможные значения: file_extension — разрешает загрузку файлов с указанным расширением, например, accept=".gif" , accept=".pdf" , accept=".doc" audio/* — разрешает загрузку аудиофайлов video/* — разрешает загрузку видеофайлов image/* — разрешает загрузку изображений media_type — указывает на медиа-тип загружаемых файлов. |
alt | Определяет альтернативный текст для изображений, указывается только для . |
autocomplete | Отвечает за запоминание введенных в текстовое поле значений и автоподстановку их при последующем вводе: on — означает, что поле не защищено, и его значение можно сохранять и извлекать, off — отключает автозаполнение для полей форм. |
autofocus | Позволяет сделать так, чтобы в загружаемой форме то или иное поле ввода уже имело фокус (было выбрано), являясь готовым к вводу значения. |
checked | Атрибут проверяет, установлен ли флажок по умолчанию при загрузке страницы для полей типа type="checkbox" и type="radio" . |
disabled | |
form | Значение атрибута должно быть равно атрибуту id элемента в этом же документе. Определяет одну или несколько форм, которым принадлежит данное поле формы. |
formaction | Задает url файла, который будет обрабатывать введенные в поля данные при отправке формы. Задается только для полей типа type="submit" и type="image" . Атрибут переопределяет значение атрибута action самой формы. |
formenctype | Определяет, как будут кодироваться данные полей формы при отправке на сервер. Переопределяет значение атрибута enctype формы. Задается только для полей типа type="submit" и type="image" . Варианты: application/-x-www-form-urlencoded — значение по умолчанию. Все символы кодируются перед отправкой (пробелы заменяются на символ + , специальные символы преобразуются в значения ASCII HEX) multipart/form-data — символы не кодируются text/plain — пробелы заменяются на символ + , а специальные символы не кодируются. |
formmethod | Атрибут определяет метод, который браузер будет использовать для отправки данных формы на сервер. Задается только для полей типа type="submit" и type="image" . Переопределяет значение атрибута method формы. Варианты: get — значение по умолчанию. Данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер: URL?имя=значение&имя=значение post — данные формы отправляются в виде http-запроса. |
formnovalidate | Определяет, что данные полей формы не должны проверяться при отправке формы. Переопределяет значение атрибута novalidate формы. Можно использовать без указания значения атрибута. |
formtarget | Определяет, где выводить ответ, полученный после отправки формы. Задается только для полей типа type="submit" и type="image" . Переопределяет значение атрибута target формы. _parent – загружает ответ в родительский фрейм _top – загружает ответ во весь экран framename – загружает ответ во фрейм с указанным именем. |
height | Значение атрибута содержит количество пикселей без указания единицы измерения. Устанавливает высоту поля формы типа type="image" , например, . Рекомендуется одновременно устанавливать как высоту, так и ширину поля. |
list | Является ссылкой на элемент , содержит его id .Позволяет предоставить пользователю несколько вариантов на выбор, когда он начинает вводить значение в соответствующем поле. |
max | Позволяет ограничить допустимый ввод числовых данных максимальным значением, значение атрибута может содержать целое или дробное число. Рекомендуется использовать этот атрибут вместе с атрибутом min . Работает со следующими типами полей: number , range , date , datetime , datetime-local , month , time и week . |
maxlength | Атрибут задает максимальное количество символов, вводимых в поле. Значение по умолчанию 524288 символов. |
min | Позволяет ограничить допустимый ввод числовых данных минимальным значением. |
multiple | Позволяет пользователю ввести несколько значений атрибутов, разделяя их запятой. Применяется в отношении файлов и адресов электронной почты. Указывается без значения атрибута. |
name | Определяет имя, которое будет использоваться для доступа к элементу , к примеру, в таблицах стилей css. Является аналогом атрибута id . |
pattern | Позволяет определять с помощью регулярного выражения синтаксис данных, ввод которых должен быть разрешен в определенном поле. Например, pattern="{3}-{3}" — квадратные скобки устанавливают диапазон допустимых символов, в данном случае — любые строчные буквы, число в фигурных скобках указывает, что нужны три строчные буквы, после которых следует тире, далее — три цифры в диапазоне от 0 до 9. |
placeholder | Содержит текст, который отображается в поле ввода до заполнения (чаще всего это подсказка). |
readonly | Не позволяет пользователю изменять значения элементов формы, выделение и копирование текста при этом доступно. Указывается без значения атрибута. |
required | Выводит сообщение о том, что данное поле является обязательным для заполнения. Если пользователь попытается отправить форму, не введя в это поле требуемое значение, то на экране отобразится предупреждающее сообщение. Указывается без значения атрибута. |
size | Задает видимую ширину поля в символах. Значение по умолчанию — 20. Работает со следующими типами полей: text , search , tel , url , email и password . |
src | Задает url изображения, используемого в качестве кнопки отправки данных формы. Указывается только для поля . |
step | Используется для элементов, предполагающих ввод числовых значений, указывает величину увеличения или уменьшения значений в процессе регулировки диапазона (шаг). |
type | button — создает кнопку. |
checkbox — превращает поле ввода во флажок, который можно установить или очистить, например, У меня есть автомобиль |
|
color — генерирует палитры цветов в поддерживающих браузерах, давая пользователям возможность выбирать значения цветов в шестнадцатеричном формате. |
|
date — позволяет вводить дату в формате дд.мм.гггг. День рождения: |
|
datetime-local — позволяет вводить дату и время, разделенные прописной английской буквой Т по шаблону дд.мм.гггг чч:мм. День рождения — день и время: |
|
email — браузеры, поддерживающие данный атрибут, будут ожидать, что пользователь введет данные, соответствующие синтаксису адресов электронной почты. E-mail: |
|
file — позволяет загружать файлы с компьютера пользователя. Выберите файл: |
|
hidden — скрывает элемент управления, который не отображается браузером и не дает пользователю изменять значения по умолчанию. | |
image — создает кнопку, позволяя вместо текста на кнопке вставить изображение. |
|
month — позволяет пользователю вводить год и номер месяца по шаблону гггг-мм. |
|
number — предназначено для ввода целочисленных значений. Его атрибуты min , max и step задают верхний, нижний пределы и шаг между значениями соответственно. Эти атрибуты предполагаются у всех элементов, имеющих численные показатели. Их значения по умолчанию зависят от типа элемента. Укажите количество (от 1 до 5): |
|
password — создает текстовые поля в форме, при этом вводимые пользователем символы заменяются на звездочки, маркеры, либо другие, установленные браузером значки. Введите пароль: |
|
radio — создает переключатель - элемент управления в виде небольшого кружка, который можно включить или выключить. Вегетарианец: |
|
range — позволит создать такой элемент интерфейса, как ползунок, min / max — позволят установить диапазон выбора | |
reset — создает кнопку, которая очищает поля формы от введенных пользователем данных. |
|
search — обозначает поле поиска, по умолчанию поле ввода имеет прямоугольную форму. Поиск: |
|
submit — создает стандартную кнопку, активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее для обработки. |
|
text — создает текстовые поля в форме, выводя однострочное текстовое поле для ввода текста. |
|
time — позволяет вводить время в 24-часовом формате по шаблону чч:мм. В поддерживающих браузерах оно отображается как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени. Укажите время: |
|
url — поле предназначено для указания URL-адресов. Главная страница: |
|
week — соответствующий инструмент-указатель позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг. В зависимости от года число недель может быть 52 или 53. Укажите неделю: |
|
value | Определяет текст, отображаемый на кнопке, в поле или связанный текст. Не указывается для полей типа file. |
width | Значение атрибута содержит количество пикселей. Позволяет задать ширину полей формы. |
Элемент ... используется вместо элемента , когда нужно создать большие текстовые поля. Текст, отображаемый как исходное значение, помещается внутрь тега. Размеры поля устанавливаются при помощи атрибутов cols – размеры по горизонтали, rows – размеры по вертикали. Высоту поля можно задать свойством height . Все размеры считаются исходя из размера одного символа моноширинного шрифта.
autofocus | Устанавливает фокус на нужном начальном текстовом поле автоматически. |
cols | Устанавливает ширину через количество символов. Если пользователь вводит больше текста, появляется полоса прокрутки. |
disabled | Отключает возможность редактирования и копирования содержимого поля. |
form | Значение атрибута должно быть равно значению атрибута id элемента в этом же документе. Определяет одну или несколько форм, которым принадлежит данное текстовое поле. |
maxlength | Значение атрибута задает максимальное число символов для ввода в поле. |
name | Задает имя текстового поля. |
placeholder | Определяет короткую текстовую подсказку, которая описывает ожидаемое вводимое значение. |
readonly | Отключает возможность редактирования содержимого поля. |
required | Выводит сообщение о том, что данное поле является обязательным для заполнения. |
rows | Указывает число, которое означает, сколько строк должно отображаться в текстовой области. |
wrap | Определяет, должен ли текст сохранять переносы строк при отправке формы. Значение hard сохраняет перенос, а значение soft не сохраняет. Если используется значение hard , то должно указываться значение атрибута cols . |
Списки дают возможность расположить большое количество пунктов компактно. Раскрывающиеся списки создаются при помощи элемента ... . Они позволяют выбрать одно или несколько значений из предложенного множества. По умолчанию в поле списка отображается его первый элемент.
Для добавления в список пунктов используются элементы ... , которые располагаются внутри .
Для систематизации списков применяется элемент ... , который создает заголовки в списках.
Для списков возможно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение.
autofocus | Устанавливает автоматический фокус на элементе при загрузке страницы. |
disabled | Отключает раскрывающийся список. |
form | Определяет форму, которой принадлежит данный список. В качестве значения атрибута указывается идентификатор формы. |
multiple | Дает возможность выбора одного или нескольких пунктов, для этого при выборе нужно нажать и удерживать нажатой клавишу Ctrl . |
name | Определяет имя для выпадающего списка. Значение атрибута содержит название, отражающее тематику списка. |
required | Выводит сообщение о том, что пользователь должен выбрать значение из раскрывающегося списка перед отправкой формы. |
size | Задает количество одновременно видимых на экране элементов списка. Если количество элементов списка превышает установленное количество, появляется полоса прокрутки. Значение атрибута задается целым положительным числом. |
Надписи к элементам формы создаются с помощью элемента ... . Существует два способа группировки надписи и поля. Если поле находится внутри элемента , то атрибут for указывать не нужно.
Когда вы последний раз летали на самолете?
Кошка
7. КнопкиЭлемент ... создает кликабельные кнопки. В отличие от кнопок, созданных ( , , , ), внутрь элемента можно поместить контент — текст или изображение.
Для корректного отображения элемента разными браузерами нужно указывать атрибут type , например, .
Кнопки позволяют пользователям передавать данные в форму, очищать содержимое формы или предпринимать какие-либо другие действия. Можно создавать границы, изменять фон и выравнивать текст на кнопке.
autofocus | Устанавливает фокус на кнопке при загрузке страницы. |
disabled | Отключает кнопку, делая ее некликабельной. |
form | Указывает на одну или несколько форм, которым принадлежит данная кнопка. Значение атрибута — идентификатор соответствующей формы. |
formaction | Значение атрибута содержит url-адрес обработчика данных формы, отправляемых при нажатии на кнопку. Только для кнопки типа type="submit" . Переопределяет значение атрибута action , указанного для элемента . |
formenctype | Задает тип кодировки данных формы перед отправкой на сервер при нажатии на кнопки типа type="submit" . Переопределяет значение атрибута enctype , указанного для элемента . Возможные значения: application/x-www-form-urlencoded — значение по умолчанию. Все символы перед отправкой будут закодированы. multipart/form-data — символы не кодируются. Используется в случае, когда с помощью формы загружаются файлы. text/plain — символы не кодируются, а пробелы заменяются на символ + . |
formmethod | Атрибут определяет метод, который браузер будет использовать для отправки формы. Переопределяет значение атрибута method , указанного для элемента . Указывается только для кнопок типа type="submit" . Возможные значения: get — данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер. Данный способ имеет ограничения по размеру отправляемых данных и не подходит для отправки паролей и конфиденциальной информации. post — данные из формы добавляются в виде http-запроса. Метод является более надежным и безопасным, чем get и не имеет ограничений по размеру. |
formnovalidate | Атрибут задает, что данные формы не должны проверяться при отправке. Указывается только для кнопок типа type="submit" . |
formtarget | Атрибут задает, в каком окне выводить результат после отправки формы. Указывается только для кнопок типа type="submit" . Переопределяет значение атрибута target , указанного для элемента . _blank — загружает ответ в новое окно/вкладку _self — загружает ответ в то же окно (значение по умолчанию) _parent — загружает ответ в родительский фрейм _top — загружает ответ во весь экран framename — загружает ответ во фрейм с указанным именем. |
name | Задает имя кнопки, значение атрибута — текст. Используется для ссылки на данные формы, после того как форма была отправлена, или для ссылки на данную кнопку (кнопки) в JavaScript. |
type | Определяет тип кнопки. Возможные значения: button — кликабельная кнопка reset — кнопка сброса, возвращает первоначальное значение submit — кнопка для отправки данных формы. |
value | Задает значение по умолчанию, отправляемое при нажатии на кнопку. |
Флажки в формах задаются с помощью конструкции , а переключатель — при помощи .
Флажков, в отличие от переключателей, в одной форме может быть установлено несколько. Если для флажков указан атрибут checked , то при загрузке станицы на соответствующих полях формы флажки уже будут установлены.
Элемент применяется при реализации выбора с помощью переключателей и флажков. Можно выбрать нужный пункт, просто щелкая кнопкой мыши на тексте, связанном с ним. Для этого нужно поместить внутрь элемента .
Последнее обновление: 08.04.2016
Прежде чем переходить непосредственно к созданию своих веб-страниц на HTML5, рассмотрим основные строительные блоки, кирпичики, из которых состоит веб-страница.
Документ HTML5, как и любой документ HTML, состоит из элементов, а элементы состоят из тегов. Как правило, элементы имеют открывающий и закрывающий тег, которые заключаются в угловые скобки. Например:
Текст элемента div
Здесь определен элемент div , который имеет открывающий тег и закрывающий тег . Между этими тегами находится содержимое элемента div. В данном случае в качестве содержимого выступает простой текст "Текст элемента div".
Элементы также могут состоять из одного тега, например, элемент
, функция которого - перенос строки.
Текст
элемента div
Такие элементы еще называют пустыми элементами (void elements). Хотя я использовал закрывающий слеш, но его наличие согласно спецификации необязательно,
и равнозначно использованию тега без слеша:
Каждый элемент внутри открывающего тега может иметь атрибуты . Например:
Кнопка
Здесь определено два элемента: div и input. Элемент div имеет атрибут style . После знака равно в кавычках пишется значение атрибута: style="color:red;" . В данном случае значение "color:red;" указывает, что цвет текста будет красным.
Второй элемент - элемент input, состоящий из одного тега, имеет два атрибута: type (указывает на тип элемента - кнопка) и value (определяет текст кнопки)
Существуют глобальные или общие для всех элементов атрибуты, как например, style, а есть специфические, применяемые к определенным элементам, как например, type.
Кроме обычных атрибутов существуют еще булевые или логические атрибуты (boolean attributes). Подобные атрибуты могут не иметь значения. Например, у кнопки можно задать атрибут disabled:
Атрибут disabled указывает, что данный элемент отключен.
Глобальные атрибутыВ HTML5 есть набор глобальных атрибутов , которые применимы к любому элементу HTML5:
accesskey : определяет клавишу для быстрого доступа к элементу
class : задает класс CSS, который будет применяться к элементу
contenteditable : определяет, можно ли редактировать содержимое элемента
contextmenu : определяет контекстное меню для элемента, которое отображается при нажатии на элемент правой кнопкой мыши
dir : устанавливает направление текста в элементе
draggable : определяет, можно ли перетаскивать элемент
dropzone : определяет, можно ли копировать переносимые данные при переносе на элемент
hidden : скрывает элемент
id : уникальный идентификатор элемента. На веб-странице элементы не должны иметь повторяющихся идентификаторов
lang : определяет язык элемента
spellcheck : указывает, будет ли для данного элемента использоваться проверка правописания
style : задает стиль элемента
tabindex : определяет порядок, в котором по элементам можно переключаться с помощью клавиши TAB
title : устанавливает дополнительное описание для элемента
translate : определяет, должно ли переводиться содержимое элемента
Но, как правило, из всего этого списка наиболее часто используются три: class , id и style .
Пользовательские атрибутыВ отличие от предыдущей версии языка разметки в HTML5 были добавлены пользовательские атрибуты (custom attributes). Теперь разработчик или создатель веб-страницы сам может определить любой атрибут, предваряя его префиксом data- . Например:
Здесь определен атрибут data-color , который имеет значение "red". Хотя для этого элемента, ни в целом в html не существует подобного атрибута. Мы его определяем сами и устанавливаем у него любое значение.
Одинарные или двойные кавычкиНередко можно встретить случаи, когда в html при определении значений атрибутов применяются как одинарные, так и двойные кавычки. Например:
И одинарные, и двойные кавычки в данном случае допустимы, хотя чаще применяются именно двойные кавычки. Однако иногда само значение атрибута может содержать двойные кавычки, и в этом случае все значение лучше поместить в одинарные:
Атрибуты обеспечивают дополнительную информацию об элементе, при этом они всегда определяются в начальном теге независимо от того парный это тег, либо одиночный.
В HTML существует ряд атрибутов, которые универсальны и могут применяться практически к любым тегам, поэтому входящие в эту группу атрибуты называются глобальными атрибутами .
Глобальные атрибуты будут часто встречаться в примерах этого учебника, предлагаю Вам бегло повторить те атрибуты, которые мы уже рассмотрели и ознакомиться с теми глобальными атрибутами, которые будут рассмотрены в ближайших статьях:
Вопросы и задачи по темеПеред тем как перейти к изучению следующей темы пройдите практическое задание:
Подсказка: не забудьте определить язык содержимого страницы и элементов, где это требуется. После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы его выполнили правильно.
От автора: приветствую вас, дорогие читатели блога webformyself. В этой статье мы продолжим говорить о технологии html5. В этот раз я хотел бы затронуть другие нововведения этой спецификации. Таковыми являются в html5 data-атрибуты, которые можно прописывать любым тегам.
Что такое data-атрибуты и для чего они нужны?Итак, начнем с того, что же это такое вообще. Как вы возможно знаете, в html любому тегу можно указать какой-то атрибут, будь то универсальный (class, id) или уникальный для этого элемента.
Их первая особенность в том, что атрибут может называться как угодно. Единственное правило – он должен начинаться с префикса data- и в нем, естественно, не должно быть русских букв. Одному тегу можно записать сколько угодно таких параметров. В качестве значений также можно указывать произвольные слова. Кстати, значение можно указывать и на русском. Пример:
< p data - attribute = "value" data - name = "Абзац" > < / div > |
Как видите, можно указывать любые имена и любые значения. Но ведь эти параметры ничего не делают с элементом, зачем тогда они вообще нужны? Есть как минимум несколько способов применения data-атрибутов в сайтостроении, и давайте рассмотрим их.
Способ применения 1 – обращение к элементам в cssЕсли вы знаете, что такое селекторы атрибутов, то наверняка уже догадываетесь, как могут быть использованы новые возможности. Указывая для тега уникальный data-атрибут, вы сможете соответствующим образом обратиться к нему в стилях. Давайте рассмотрим пример:
div{}
< div data - css = "css" > < / div > div [ data - css = "css" ] { } |
Это позволило нам обратиться к элементу без использования стилевых классов. Однако, если так подумать, то никакого особого преимущества это не дает, для обращения по классу нужно проделать примерно такие же действия. Таким образом, у вас просто расширяются возможности по селекторам и ничего более.
Способ применения 2 – хранение значений и их использованиеС первого взгляда, значения data-атрибутов ничего не меняют и вообще никак не влияют на веб-страницу. Так зачем они вообще нужны? На самом деле применение им найти можно, если вспомнить про функцию attr() в css.
< img src = "foto.jpg" data - img = "Фотография" > |
Давайте поставим задачу: нужно вывести на страницу поясняющий текст к фотографиям, который появлялся бы либо сразу с загрузкой картинки, либо при наведении на нее, не важно как. Стандартная подсказка реализуется с помощью атрибута title.
Но такая подсказка может не удовлетворять вас по очень многим параметрам. Во-первых, она появляется плавно (что не всегда нужно). Во-вторых, она исчезает через какое-то время. В-третьих, она появляется в разных местах, в зависимости от того, куда наведен курсор. Ну а самая большая проблема – мы никак не можем стилизовать нашу подсказку – это всегда будет черный текст на белом фоне, что не очень интересно.
Итак, выше в коде мы вставили картинку, указали путь к ней и дополнительно записали произвольный data-параметр. Реализовать вывод пояснения к фото теперь можно таким образом:
img{ display: inline-block; } img:after{ content: attr(data-img); }
img { display : inline - block ; img : after { content : attr (data - img ) ; |
Что мы сделали? Теперь у всех изображений будет псевдоэлемент, в котором будет находиться значение атрибута data-img, если оно есть у тега img. Таким нехитрым способом вы смогли вывести поясняющий текст к фотографии.
Я не буду в этой статье приводить инструкцию, как оформить подсказку. Скажу только, что по умолчанию она будет отображаться после загрузки страницы. Зачастую ее нужно изначально скрыть, а выводить при наведении на картинку. Чтобы это реализовать, вам нужно воспользоваться селектором img:hover:after.
Ну а какие есть еще html5 атрибуты, появившиеся только в этой спецификации? К таковым можно отнести, например, controls – атрибут для новых элементов audio и video, который позволяет вывести элементы управления видеороликом или аудиозаписью.
У видео с помощью параметра poster можно указать путь к изображению, которое будет фоном до начала просмотра видео. В общем, вот таких вот мелких атрибутов появилось не так уж и мало.
Также у одиночного элемента input появилось очень много новых параметров. Теперь можно создавать поля для ввода электронной почты, телефона, выбора календарной даты или времени, поле для выбора цвета и т.д. Пустой атрибут required делает любое поле обязательным для заполнения, если этого не сделать, то браузер просто не пропустит отправку формы.
Конечно, единственный минус всех этих нововведений в том, что они не везде должным образом поддерживаются. Так что если в одном браузере новые возможности прекрасно работают и пользователи могут использовать новые поля, то в другом веб-обозревателе все может быть по-другому. Конечно, отчасти виноваты сами пользователи, которые не обновляют ПО, но нужно также следить за тем, что и как поддерживается. В
HTML - язык гипертекстовой разметки. В его основе лежат так называемые теги. Теги - это некие элементы обвертки, задающие формат и свойства элементов веб-страницы. На одной странице мы собрали для вас актуальный справочник тегов HTML.
Всего насчитывается более ста элементов разметки. Каждый имеет ряд атрибутов и собственный синтаксис. Справочник по тегам HTML поможет быстрой найти нужный вам элемент.
Список тегов HTMLНиже в таблице представлен список тегов HTML5 с кратким описанием на русском языке.
Комментарий. | ||||||||||||||||||||||||||||||||||||||||||
Определяет тип документа. | ||||||||||||||||||||||||||||||||||||||||||
Ссылка, гиперссылка, якорь. | ||||||||||||||||||||||||||||||||||||||||||
Определяет текст как аббревиатуру. | ||||||||||||||||||||||||||||||||||||||||||
Контактная информация автора или владельца документа. | ||||||||||||||||||||||||||||||||||||||||||
Определяет область на карте-изображении | ||||||||||||||||||||||||||||||||||||||||||
Статья | ||||||||||||||||||||||||||||||||||||||||||
Контент в стороне (содержимое не является основным на странице по смыслу) | ||||||||||||||||||||||||||||||||||||||||||
Позволяет вставить воспроизводимый аудио файл. | ||||||||||||||||||||||||||||||||||||||||||
Полужирный текст. | ||||||||||||||||||||||||||||||||||||||||||
Задает базовый URL или аттрибут target для относительных ссылок в документе. | ||||||||||||||||||||||||||||||||||||||||||
Область, где написание текста может имееть другое направления. | ||||||||||||||||||||||||||||||||||||||||||
Устанавливает направление написания текста. В отличии от направление указывается физическое направление | ||||||||||||||||||||||||||||||||||||||||||
Цитата. | ||||||||||||||||||||||||||||||||||||||||||
Указывает область body документа. | ||||||||||||||||||||||||||||||||||||||||||
Перенос строки. | ||||||||||||||||||||||||||||||||||||||||||
Кликабельная кнопка | ||||||||||||||||||||||||||||||||||||||||||
Используется для рисовании графики с помощью скриптов | ||||||||||||||||||||||||||||||||||||||||||
Подпись таблицы. | ||||||||||||||||||||||||||||||||||||||||||
Сноска на название материала. | ||||||||||||||||||||||||||||||||||||||||||
Используется для вставки компьютерного кода в текстовом виде. | ||||||||||||||||||||||||||||||||||||||||||
Задает характеристики колонок в таблице. | ||||||||||||||||||||||||||||||||||||||||||
Определяет группу из одной или более колонок таблицы для форматирования. | ||||||||||||||||||||||||||||||||||||||||||
Используется для определения предопределенных вариантов на выбор при вводе в текстовом поле | ||||||||||||||||||||||||||||||||||||||||||
Определяет описание термина из тега в списке терминов . | ||||||||||||||||||||||||||||||||||||||||||
Текст, который удален в новой версии документа. | ||||||||||||||||||||||||||||||||||||||||||
Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть | ||||||||||||||||||||||||||||||||||||||||||
Указывает, что содержимое является термином. | ||||||||||||||||||||||||||||||||||||||||||
Определяет диалоговое окно или интерактивный элемент | ||||||||||||||||||||||||||||||||||||||||||
Блочный элемент - один из основных элементов верстки. | ||||||||||||||||||||||||||||||||||||||||||
Определяет список определений. | ||||||||||||||||||||||||||||||||||||||||||
Название термина в списке определений . | ||||||||||||||||||||||||||||||||||||||||||
выделенный по смыслу текст (обычно, текст выделенный курсивом). | ||||||||||||||||||||||||||||||||||||||||||
Контейнер для внешнего приложения | ||||||||||||||||||||||||||||||||||||||||||
Группа связанных элементов в форме | ||||||||||||||||||||||||||||||||||||||||||
Заголовок для элемента | ||||||||||||||||||||||||||||||||||||||||||
Определяет автономную группу из нескольких элементов (например картинка с подписью) | ||||||||||||||||||||||||||||||||||||||||||
Нижний колонтитул | ||||||||||||||||||||||||||||||||||||||||||
Определяет форму пользовательского ввода | ||||||||||||||||||||||||||||||||||||||||||
- | Заголовки HTML разного уровня: , , , , , . | |||||||||||||||||||||||||||||||||||||||||
Указывает область head документа. | ||||||||||||||||||||||||||||||||||||||||||
Блок заголовка | ||||||||||||||||||||||||||||||||||||||||||
Горизонтальная линия - тематический разделитель. | ||||||||||||||||||||||||||||||||||||||||||
Корневой элемент. Сообщает браузеру, что данный документ является HTML документом. | ||||||||||||||||||||||||||||||||||||||||||
Выделяет текст курсивом. | ||||||||||||||||||||||||||||||||||||||||||
Определяет встроенный фрейм | ||||||||||||||||||||||||||||||||||||||||||
Изображение, картинка. | ||||||||||||||||||||||||||||||||||||||||||
Поле для ввода | ||||||||||||||||||||||||||||||||||||||||||
Текст, который был добавлен в новой версии документа. | ||||||||||||||||||||||||||||||||||||||||||
Текст введенный с клавиатуры или названия кнопок клавиатуры. Обычно выделен моноширинным шрифтом. | ||||||||||||||||||||||||||||||||||||||||||
Метка для поля ввода. Указывает на привязку элемента (обычно текста) к полю ввода. | ||||||||||||||||||||||||||||||||||||||||||
Заголовок элементов | ||||||||||||||||||||||||||||||||||||||||||
Элемент списка. | ||||||||||||||||||||||||||||||||||||||||||
Определяет привязку внешнего ресурса (чаще всего, привязку таблицы стилей CSS) | ||||||||||||||||||||||||||||||||||||||||||
Основной контент | ||||||||||||||||||||||||||||||||||||||||||
Контейнер для . Определяет пользовательскую карту на изображении | ||||||||||||||||||||||||||||||||||||||||||
Выделенный текст (обычно с помощью подсветки фона). | ||||||||||||||||||||||||||||||||||||||||||
Контейнер для списка пунктов меню | ||||||||||||||||||||||||||||||||||||||||||
Определяет элементы, которые пользователь может вызвать из контекстного меню | ||||||||||||||||||||||||||||||||||||||||||
Используется для определения мета-данных документа. | ||||||||||||||||||||||||||||||||||||||||||
Измеритель значений в заданном диапазоне | ||||||||||||||||||||||||||||||||||||||||||
Контейнер для навигационных элементов | ||||||||||||||||||||||||||||||||||||||||||
Альтернативный контент для пользователей, отключивших скрипты | ||||||||||||||||||||||||||||||||||||||||||
Определяет встроенный объект | ||||||||||||||||||||||||||||||||||||||||||
Определяет нумерованный список. | ||||||||||||||||||||||||||||||||||||||||||
Определяет группу связанных вариантов в выпадающем списке. Дает название группу | ||||||||||||||||||||||||||||||||||||||||||
Параметр (вариант выбора) в выпадающем списке | ||||||||||||||||||||||||||||||||||||||||||
Результат вычислений | ||||||||||||||||||||||||||||||||||||||||||
|
Абзац. | |||||||||||||||||||||||||||||||||||||||||
Задает параметры для встроенных объектов | ||||||||||||||||||||||||||||||||||||||||||
Контейнер для нескольких изображений | ||||||||||||||||||||||||||||||||||||||||||
Предварительно отформатированный текст. | ||||||||||||||||||||||||||||||||||||||||||
Индикатор выполнения (прогресса) | ||||||||||||||||||||||||||||||||||||||||||
Цитата в тексте. | ||||||||||||||||||||||||||||||||||||||||||
Альтернативный текст, если браузер не поддерживает тег . | ||||||||||||||||||||||||||||||||||||||||||
Аннотация к содержимому тега . | ||||||||||||||||||||||||||||||||||||||||||
Контейнер для символов и их расшифровки (в основном для Восточно-азиатских символов, иероглифов). | ||||||||||||||||||||||||||||||||||||||||||
Перечеркнутый текст. | ||||||||||||||||||||||||||||||||||||||||||
Текст, являющийся результатом выполнения компьютерной программы (обычно выводится моноширинным шрифтом). | ||||||||||||||||||||||||||||||||||||||||||
Определяет скрипт или подключение скрипта из внешнего ресурса. | ||||||||||||||||||||||||||||||||||||||||||
Раздел | ||||||||||||||||||||||||||||||||||||||||||
Определяет выпадающий список | ||||||||||||||||||||||||||||||||||||||||||
Текст шрифтом меньшего размера. | ||||||||||||||||||||||||||||||||||||||||||
Определяет ресурс для тегов , и . | ||||||||||||||||||||||||||||||||||||||||||
Строчный элемент. | ||||||||||||||||||||||||||||||||||||||||||
Текст, выделенный по значению. Обычно отображается полужирным. | ||||||||||||||||||||||||||||||||||||||||||
Определяет контейнер для определения стилей документа | ||||||||||||||||||||||||||||||||||||||||||
Отображает текст в виде нижнего индекса. | ||||||||||||||||||||||||||||||||||||||||||
Заголовок внутри тега | ||||||||||||||||||||||||||||||||||||||||||
Отображает текст в виде верхнего индекса. | ||||||||||||||||||||||||||||||||||||||||||
|