Описание элемента input в HTML5
Элемент input используется в HMTL5 для создания полей ввода или кнопок.
Атрибуты элемента input в HTML5
Атрибут type элемента input в HTML5
Атрибут type указывает тип данных с которыми ассоциируется элемента input. Влияет на функциональность элемента
| Атрибут | Описание |
|---|---|
| accept | |
| alt | |
| autocomplete |
Разрешает/Запрещает браузеру использовать «автозаполнение». Может быть полезным при вводе важной информации, например Банковские реквизиты, и т.д.
|
| autofocus | Автоматически переводит фокус на этот элемент. |
|
Во время загрузки страницы. Это позволяет пользователю начать ввод данных, без необходимости выбирать нужный пункт сначала. В документе не должно быть более одного элемента с указанным атрибутом автофокуса Если атрибут присутствует, его значение должно быть или пустым, или быть написанным в соответствии с ASCII без использования заглавных букв и пробелов
|
|
| checked | Элемент формы будет предварительно отмечен во время загрузки страницы. Используется совместно с type="radio", type="checkbox". |
| disabled | Запрещает изменения данных в элементе формы. |
|
Форма
Не разрешит пользователю вносить изменения. Кроме того, ее нельзя будет выбрать,
и она будет пропускаться
при навигации с помощью кнопки Tab.
Если атрибут присутствует, его значение должно быть или пустым, или быть написанным в соответствии с ASCII без использования заглавных букв и пробелов
|
|
| form |
Атрибут form определяет формы ввода, находящиеся за пределами группы, но принадлежащие ей. Значением атрибута должен быть id формы которой он принадлежит. Пример кода:
Пример отображения (chrome)
-- Начало формы --
-- Окончание формы --
|
| formaction | Определяет URL или файл куда будут переданы данные формы после подтверждения. |
| formenctype | Определяет формат данных в котором будут переданы на сервер. |
| formmethod | Определяет HTTP метод используемый При передачи данных формы. |
| formnovalidate | Определяет что данные формы не будут проверятся при передаче. |
| formtarget | Указывает куда загружать контекст указанный в поле с атрибутом. |
| height | Определяет высоту поля. |
| list | |
| max | Определяет максимальное значение |
| maxlength | Определяет максимальное количество символов которое пользователь может ввести в соответствующее поле. |
| min | Определяет минимальное значение. |
| multiple | Опредлеяет разрешено или нет пользоатвелю Вводить более одного значения. |
Если атрибут присутствует, его
значение должно быть или пустым, или быть написанным в соотствии с ASCII
без изменения регистра в названии атрибута, а также без использования пробелов
до или
без использования заглавных букв и пробелов
|
|
| name | Имя элемента. |
| pattern | Определяет контрольные значения с которыми будут сравниваться данные из формы. Значения должны соответствовать грамматике ECMA 262. |
| placeholder | Задает краткую подсказку (слово или выражение) которое должно помочь пользователю в заполнении формы. Подсказкой может служить образец значения или краткое описание формата, в котором нужно вводить данные. |
| readonly | Устанавливает элемент формы в режим «только чтение». |
|
Устанавливает форму в режим «только чтение» - не не дает пользователю вносить изменения. Но при этом в элемент формы возможно перейти используя навигацию по форме с помощью клавиши Tab. Это логический элемент. Если атрибут присутствует, его значение должно быть или пустым, или иметь значение в соответствии с ASCII без изменения регистра в названии атрибута, а также без использования пробелов до или без использования заглавных букв и пробелов
|
|
| required | Указывает что данное поле является обязательным (пользователь должен обязательно его заполнить). |
Если атрибут присутствует, его
значение должно быть или пустым, или иметь значение в соответствии с ASCII
без изменения регистра в названии атрибута, а также без использования пробелов
до или
без использования заглавных букв и пробелов:
|
|
| size | Описывает размер элементов, в числовых значениях. Значение должно быть больше ноля. |
| src | Для type="image" указывает URL изображения. |
| step | Шаг диапозона. |
| type | |
| value | |
| width | |
Значания атрибута type элемента input в HTML5
| Значение | Вид | Тип данных | Элемент управления |
|---|---|---|---|
| hidden | Скрыто | Произвольная строка | n/a |
|
Элемент с аттрибутом type="hidden" не отображается на странице, но хранит значение, которые можно сохранять с помощью клиентских скриптов. Пример использования элемента input в виде скрытого поля (скрытый элемент input на ходится между [ и ]) [<input type="hidden">] Результат использования элемента input в виде скрытого поля (скрытый элемент input на ходится между [ и ])
[]
|
|||
| text | Текст | Однострочный текст | Текстовое поле |
|
Пример использования элемента input в виде текстового поля <input type="text"> Результат использования элемента input в виде текстового поля Пример использования элемента input в виде текстового поля со значением по умолчанию <input type="text" value="У вас молоко убежало"> Результат использования элемента input в виде текстового поля со значением по умолчанию |
|||
| search | Поиск | Однострочный текст | Поисковое поле |
|
Пример использования элемента input в виде поискового поля <input type="search" id="tagInputTypeSearch"> Результат использования элемента input в виде поискового поля |
|||
| tel | Telephone | Однострочный текст | Текстовое поле |
|
Пример использования элемента input в виде поля для ввода телефонного номера <input type="tel" id="tagInputTypeTel"> Результат использования элемента input в виде поля для ввода телефонного номера |
|||
| url | абсолютное значение URL | Однострочный текст | Текстовое поле |
|
Пример использования элемента input в виде поля для ввода URL-а <input type="url" id="tagInputTypeUrl"> Результат использования элемента input в виде поля для ввода URL-а |
|||
| Адрес электронной почты, или список адресов | Однострочный текст | Текстовое поле | |
|
Пример использования элемента input в виде поля для ввода email-адреса <input type="email" id="tagInputTypeEmail"> Результат использования элемента input в виде поля для ввода email-адреса |
|||
| password | Поле для ввода текстовой информации со скрытием введенного текста. | Однострочный текст | Текстовое поле |
|
Текстовое поле с аттрибутом type="password" скрывает введенную информацию, используя символы "звезды" (*****).
Пример использования элемента input в виде поля для ввода пароля <input type="password" id="tagInputTypePassword"> Результат использования элемента input в виде поля для ввода пароля |
|||
| datetime | Поле для ввода даты и время (год, месяц, день, час, минуты, секунды, части секунд) в соответствии с часовым поясом UTC | Однострочный текст | Текстовое поле |
| month | Поле для выбора месяца и года | ||
| week | Поле для выбора номера недели и года, без указания часового пояса | ||
| time | Отображение времени (часа, минут, секунд, частей секунд) без указания часового пояса | ||
| datetime-local | Дата и время (год, месяц, день, час, минута, секунда, части секунд) без указания часового пояса | ||
| number | Числовое значение | Однострочный текст | Текстовое поле |
| range | Диапазон значений | Однострочный текст | Текстовое поле |
| color | Поле для выбора цвета | ||
| checkbox | Метка может быть в двух состояния: помечена и не помечена. | ||
| radio | Радио кнопка, позволяет выбрать одно значение из группы | ||
| file | Позволяет указать файл для передачи/закачивания на сайт. | ||
| image | Изображение для использования в качетсве кнопки отправки данных(сабмит формы). | ||
| reset | Кнопка для сброса всех элементов формы в первоначальное состояние. | ||
| button | Элемент в виде простой кнопки. | ||