Начиная с Форм HTML5, раздел 1, в дополнение к множеству новых типов ввода, в вашем распоряжении также дополнительные атрибуты, относящиеся к конкретным формам, а также списки данных, своего рода гибрид текста и выделения.
Дополнительные атрибуты
Помимо упомянутых атрибутов, как здесь, так и в предыдущих руководствах, существует несколько дополнительных атрибутов.
Текст-заполнитель
Атрибут placeholder может использоваться с текстовыми полями input (и другими текстовыми аналогами, такими как type=»email» и type=»number»), а также с элементами textarea. Это скорее подсказка, чем метка, для которой все равно следует использовать элемент label.
<label for="email_address">Email адрес</label> <input type="email" placeholder="you@somewhere.com" name="email_address" id="email_address">
Автофокусировка
Возможно, вам захочется, чтобы при загрузке страницы фокус был направлен на поле формы. Если вы думаете о поисковой системе, например, когда вы переходите на её домашнюю страницу, вам обычно не нужно нажимать на окно поиска, чтобы начать вводить текст ─ вы можете сделать это сразу, потому что оно уже имеет фокус. Атрибут autofocus ─ это быстрый способ добиться этого эффекта.
<input name="query" autofocus>
Списки данных
Список данных принимает форму списка предложений, который сопровождается текстовым полем:
<input name="country" list="country_name">
<datalist id="country_name">
<option value="Afghanistan">
<option value="Albania">
<option value="Algeria">
<option value="Andorra">
<option value="Armenia">
<option value="Australia">
<option value="Austria">
<option value="Azerbaijan">
<!-- etc. -->
</datalist>Значение атрибута list в элементе input (который может быть любым из текстовых типов ввода) привязывает его к элементу datalist с соответствующим идентификатором (“country_name”, в этом примере).
Если то, что пользователь вводит в текстовое поле, совпадает с началом чего-либо в списке данных, эти соответствия будут показаны под текстовым полем в качестве предложений.
Здесь, если введено “A”, отображаются 8 стран, начинающихся с “a”. Если после “A” ввести букву “L”, список предложений сократится до “Albania” и “Algeria” и так далее.
Данные, отправляемые при отправке формы, будут соответствовать тому, что указано в текстовом поле — это может быть что-то выбранное из списка, или это может быть что-то совершенно другое, введённое пользователем.
Браузеры, которые не поддерживают списки данных, по-прежнему поддерживают текстовое поле; нераспознанные типы input возвращаются к текстовому вводу, поэтому вы можете использовать search, tel и url. Если вы не рассчитываете на их специальные функции, помните, что текст-заполнитель просто не будет отображаться, поэтому, если это не обязательно, используйте их.
Страницы в тему:
- Следующая страница: Встроенное содержимое: видео, аудио и холст
- Предыдущая страница: Формы HTML5, раздел 1: типы ввода
- HTML-тег: input
- HTML-тег: datalist
