Список возможных значений

Списки возможных значений уже поддерживаются в этих браузерах.

Для текстовых полей можно заранее определить список возможных значений, которые отображаются, когда вы начинаете вводить текст в поле. Для этого существует специальный тег <datalist>.

Пример использования:

<input type="text" list="browsers" name="browser"> <datalist id="browsers"> <option value="Firefox"></option> <option value="Chrome"></option> <option value="Safari"></option></datalist>

Связывание текстового поля и списка осуществляется при помощи атрибута list у тега input — значение list должно быть таким же, как значение атрибута id у списка.

Если тег input имеет специфический тип, например email или другие, которые будут рассмотрены далее в курсе, то в списке отображаются только корректные для данного типа значения.

Поле ввода числового значения

Поля для ввода числовых значений уже поддерживаются в этих браузерах.

Для ввода числовых значений существует специальный тип поля ввода number. Рядом с полем браузер автоматически подставляет две стрелочки для увеличения и уменьшения числового значения.

Пример записи:

<input type="number">

При помощи вспомогательных атрибутов min и max можно установить верхнюю и нижнюю границу допустимых значений. А атрибут step устанавливает величину шага изменения значения.

Также стоит отметить, что поле ввода числа, как и некоторые другие поля, которые будут рассмотрены дальше, по-особому ведёт себя в мобильных браузерах: например, при фокусе на такое поле появляется клавиатура, позволяющая вводить соответствующие символы.

Поле поиска

Отлично! Мы справились с формой заказа и можем смело двигать дальше.

Кексик давно намеревался побывать в Норвегии и отведать хвалёной местной рыбки. Чтобы упростить себе жизнь и не ходить в турфирму, он решил создать страницу с формой бронирования отеля.

И тут без вашей помощи никак не обойтись.

Первым делом в форму нужно поместить поле поиска, чтобы можно было напечатать название города и потом выбирать подходящие отели.

Пример записи:

<input type="search">

Это поле почти не отличается от обычного текстового поля. В некоторых браузерах внутри него появляется крестик для сброса введённого значения.

Автофокус уже поддерживается в этих браузерах.

При загрузке страницы можно сообщить браузеру в какое поле установить курсор по умолчанию. Для этого используется пустой атрибут autofocus.

Пример записи:

<input type="text" autofocus>

Автофокус улучшает процесс работы с формами, ведь пользователь избавляется от лишних щелчков мышки, там где они не нужны, а может сразу начинать вводить текст в поле.

Обратите внимание, что такой атрибут должен быть только один на странице.

⇐ Предыдущая1234567Следующая ⇒

Поделиться: