HTML тег <input>
Поддержка браузерами
Описание
HTML тег <input> - является пустым элементом и содержит только атрибуты. Используется в пределах элемента <form>, объявляя элементы управления для пользовательского ввода, которые позволяют пользователю вводить различные данные. Связать текст с определенным элементом формы(сделать его активным) можно с помощью тега <label>.
Поля для пользовательского ввода могут значительно отличаться друг от друга. В зависимости от значения атрибута type, поле ввода может быть текстовым полем, полем для пароля, радио кнопкой, простой кнопкой и тд.
Атрибуты
- accept:
- Указывает типы файлов, которые могут быть переданы на сервер через поле загрузки файлов. Если тип загружаемого файла не совпадает ни с одним из типов файлов, указанных в значении, то файл будет игнорироваться. При указании нескольких значений, они должны разделяться запятой. Атрибут accept работает только совместно с атрибутом type="file", его возможные значения:
- audio/* - принимаются все звуковые файлы.
- video/* - принимаются все видео файлы.
- image/* - принимаются все файлы изображений.
- MIME_тип - принимается допустимый MIME-тип без параметров.
Примечание: атрибут accept не поддерживается в IE9 и более ранних версиях.
- alt:
- Предоставляет альтернативный текст для пользователя, если он по каким-либо причинам не может просматривать изображения. Атрибут alt может использоваться только совместно с атрибутом type="image".
- autocomplete:
- Определяет, будет ли включено автозаполнение для поля ввода данных:
- on - браузер автоматически показывает значения вводимые ранее пользователем (значение по умолчанию).
- off - пользователь должен сам вводить значения для поля при каждом использовании формы. Ранее вводимые значения показываться не будут.
Примечание: атрибут autocomplete работает со следующими значениями атрибута type элемента <input>: text, search, url, tel, email, password, datepickers, range и color.
- autofocus:
- Указывает браузеру, что элемент <input> должен получить фокус после загрузки страницы. Значения для логического атрибута autofocus можно задавать следующими способами:
<input autofocus> <input autofocus="autofocus"> <input autofocus="">
Примечание: атрибут autofocus не поддерживается в IE9 и более ранних версиях.
- checked:
- Указывает, что данный элемент будет выбран по умолчанию при загрузке страницы. Работает только с атрибутом type="checkbox" или type="radio". Значения для логического атрибута checked можно задавать следующими способами:
<input checked> <input checked="checked"> <input checked="">
Пример » - disabled:
- Указывает, что элемент <input> должен быть выключен (выключенный элемент является неактивным). Значения для логического атрибута disabled можно задавать следующими способами:
<input disabled> <input disabled="disabled"> <input disabled="">
Пример »Примечание: атрибут disabled не работает с <input type="hidden">.
- form:
- Определяет форму с которой связан элемент <input>. В качестве значения атрибута выступает идентификатор элемента <form>. Этот атрибут позволяет размещать элемент <input> в произвольном месте документа, а не только в качестве потомка элемента <form>. Элемент <input> может быть связан только с одной формой.
Если атрибут form не указан, то элемент <input> должен быть потомком элемента <form>.Примечание: атрибут form не поддерживается в IE.
- formaction:
- Указывает URL-адрес файла, который будет обрабатывать данные ввода, при отправке формы. Атрибут formaction используется только с type="submit" или type="image", и переопределяет атрибут action элемента <form>.
Примечание: атрибут formaction не поддерживается в IE9 и более ранних версиях.
- formenctype:
- Определяет способ кодирования данных формы при отправке на сервер. Может использоваться только совместно с атрибутом method="post" элемента <form>. Возможные значения:
- application/x-www-form-urlencoded - значение по умолчанию: все символы кодируются перед отправкой (пробелы преобразуются в символ "+", а специальные символы в значения ASCII HEX).
- multipart/form-data - символы не кодируются. Используется для элементов <input>, у которых в атрибуте type установлено значение "file".
- text/plain - пробелы преобразуются в символ "+", но не кодирует в шестнадцатеричные значения спецсимволы, такие как апострофы.
Примечание: атрибут formenctype не поддерживается в IE9 и более ранних версиях.
- formmethod:
- Определяет HTTP метод для отправки данных на указанный URL (для type="submit" и type="image"):
- get - данные формы добавляются в конце URL-адреса: URL-адрес?имя=значение?имя=значение (значение по умолчанию).
- post - отправляет данные формы, как HTTP после транзакции.
Примечание: атрибут formmethod не поддерживается в IE9 и более ранних версиях.
- formnovalidate:
- Указывает, что данные введенные в поле ввода не будут проверяться перед отправкой. Возможные значения логического атрибута novalidate:
<input formnovalidate> <input formnovalidate="formnovalidate"> <input formnovalidate="">
Примечание: атрибут formnovalidate не поддерживается в IE9 и более ранних версиях, и в Safari.
- formtarget:
- Определяет имя фрейма или ключевое слово, которое указывает место для отображения ответа, полученного после отправки формы:
- _blank - открывает документ в новом окне или вкладке.
- _self - открывает документ в той же директории, где располагается ссылка (значение по умолчанию).
- _parent - открывает документ в родительском фрейме.
- _top - открывает документ во всю ширину окна.
- имя_фрейма - открывает документ в iframe, имя которого было указано в качестве значения.
Примечание: атрибут formtarget не поддерживается в IE9 и более ранних версиях.
- height:
- Определяет высоту элемента в пикселях, используется только с <input type="image"> (пример: height="100").
- list:
- Устанавливает взаимосвязь между элементом <datalist> и <input>, позволяя для поля ввода указать список предварительно определенных вариантов. В качестве значения для атрибута выступает идентификатор элемента <datalist>.
Пример »
Примечание: атрибут list не поддерживается в IE9 и более ранних версиях, и в Safari.
- max:
- Указывает максимальное значение для ввода числа или даты. Можно использовать атрибут max совместно с атрибутом min для создания диапазона допустимых значений.
- число - указывает максимально допустимое значение.
- дата - указывает максимальную дату, разрешенную для ввода.
Примечание: атрибут max не поддерживается в IE9 и более ранних версиях, и в Firefox.
- maxlength:
- Определяет максимальное количество символов, которое можно будет ввести в поле ввода. Этот атрибут можно использовать для ограничения количества символов, которое разрешается пользователю ввести в данное поле. Например при запросе года можно ограничить количество символов, установив значение атрибута maxlength равным 4. Пример »
- min:
- Определяет минимальное значение для ввода числа или даты.
- число - указывает минимально допустимое значение.
- дата - указывает минимальную дату, разрешенную для ввода.
<!DOCTYPE html> <html> <body> <form action="demo_form.php"> Введите дату до 1980-01-01: <input type="date" name="bday" max="1979-12-31"><br> Введите дату после 2000-01-01: <input type="date" name="bday" min="2000-01-02"><br> Введите число (от 1 до 5): <input type="number" name="quantity" min="1" max="5"><br> <input type="submit"> </form> </body> </html>
Примечание: атрибут min не поддерживается в IE9 и более ранних версиях, и в Firefox.
- multiple:
- Указывает, что пользователь может ввести более одного значения. Атрибут multiple работает только с type="email" и type="file". Возможные значения логического атрибута multiple:
<input multiple> <input multiple="multiple"> <input multiple="">
Пример »Примечание: атрибут multiple не поддерживается в IE9 и более ранних версиях.
- name:
- Атрибут name определяет имя элемента, оно отправляется на сервер вместе с введенными в поле данными. Имя может использоваться в JavaScript для ссылки на элемент или для идентификации переданных данных на сервере (например, при обработке данных на сервере, имя элемента позволяет определить, что было введено в качестве имени пользователя, а что - в качестве пароля).
- pattern:
- Указывает регулярное выражение, которое определяет синтаксис данных, ввод которых должен быть разрешен в поле ввода. Шаблон регулярного выражения должен соответствовать введенному значению целиком. Для описания работы шаблона можно воспользоваться глобальным атрибутом title. Атрибут pattern работает со следующими значениями атрибута type: text, search, url, tel, email и password.
Примечание: атрибут pattern не поддерживается в IE9 и более ранних версиях, и в Safari.
- placeholder:
- Определяет короткую подсказку, которая описывает ожидаемое значение для поля ввода (пример: образец значения или краткое описание ожидаемого формата). Подсказка отображается в поле ввода, когда оно пустое и исчезает, когда пользователь начинает вводить данные или когда поле получает фокус (разница в работе атрибута зависит от используемого браузера), если поле теряет фокус и при этом данные в поле не были введены, то в поле ввода вновь отобразится подсказка.
Атрибут placeholder работает со следующими значениями атрибута type: text, search, url, tel, email и password. Пример »Примечание: атрибут placeholder не поддерживается в IE9 и более ранних версиях.
- readonly:
- Указывает, что поле ввода может быть использовано только для чтения и не может быть изменено (однако, текст можно выделить и скопировать). Возможные значения логического атрибута readonly:
<input readonly> <input readonly="readonly"> <input readonly="">
Пример » - required:
- Указывает, что поле ввода необходимо заполнить перед отправкой формы. Если пользователь попытается отправить форму, не введя в поле никакого значения, то на экране отобразится предупреждающее сообщение. Это сообщение будет отличаться по содержанию и стилизации в зависимости от браузера и типа поля ввода.
Атрибут required работает со следующими значениями атрибута type: text, search, url, tel, email, password, date pickers, number, checkbox, radio и file. Возможные значения логического атрибута required:<input required> <input required="required"> <input required="">
Примечание: атрибут required не поддерживается в IE9 и более ранних версиях, и в Safari.
- size:
- Указывает ширину поля ввода (в качестве единицы измерения выступает количество видимых символов). Так, например, значение 3 создает поле ввода текста, ширина которого достаточна для отображение трех введенных символов (хотя пользователь при желании может ввести и большее количество). Атрибут size работает со следующими значениями атрибута type: text, search, tel, url, email и password. Для указания максимального количества вводимых знаков, воспользуйтесь атрибутом maxlength. Пример »
- src:
- Указывает путь к графическому файлу для поля с изображением. Атрибут src является обязательным для элементов <input> с type="image" и может использоваться только с ними.
- step:
- Определяет интервал чисел для элемента <input>. Пример: если step="3", то возможные значения чисел могут быть: -3, 0, 3, 6 и тд. Атрибут step может использоваться совместно с атрибутами max и min, для создания диапазона допустимых значений.
Примечание: атрибут step не поддерживается в IE9 и более ранних версиях, и в Firefox.
- type:
- Указывает, какой тип элемента управления будет отображен. По умолчанию браузеры используют <input type="text">, если не указано другое или неизвестное значение атрибута type. Таким образом, браузеры, не поддерживающие новые значения, просто заменят их значением по умолчанию и отобразят обычное текстовое поле ввода.
- button - определяет активную кнопку (главным образом используется с JavaScript для активации скрипта).
- checkbox - определяет элементы управления флажки, которые могут быть либо установлены, либо сняты. Можно установить сразу несколько флажков или не устанавливать ни один из них. Это отличает флажки от радио-кнопок (type="radio").
- color - генерирует палитру цветов, давая возможность пользователям выбирать значения цветов в шестнадцатеричном формате.
- date - позволяет получить доступ к встроенному в браузер виджету выбора даты.
- datetime - определяет элемент управления датой и временем (год, месяц, день, час, минута, секунда и доли секунды, основанный на часовом поясе UTC).
- datetime-local - определяет элемент управления датой и временем (год, месяц, день, час, минуты, секунды и доли секунды (без часового пояса)).
- email - определяет поле для адреса электронной почты.
- file - определяет элемент управления с кнопкой "Обзор", для выбора и загрузки файлов.
- hidden - определяет скрытые поля ввода.
- image - определяет изображение, как кнопку для отправки.
- month - позволяет выбрать один месяц, после чего обеспечит ввод данных в виде года и месяца (например: 2014-05).
- number - определяет поле для ввода чисел.
- password - определяет поле для ввода пароля (замаскированные символы).
- radio - создает радио-кнопки, которые являются взаимоисключающими, если выбрать одну радио-кнопку, то все остальные становятся неактивными.
- range - создает элемент управления ползунок, диапазон ползунка по умолчанию - от 0 до 100. Для изменения диапазона используются атрибуты min и max с желаемыми значениями. Обратите внимание, что данный элемент управления не отображает текущее значение.
- reset - определяет кнопку сброс (сбрасывает все поля формы в значения по умолчанию).
- search - определяет текстовое поле для ввода строки поиска.
- submit - определяет кнопку "Отправить".
- tel - определяет поле для ввода телефонного номера.
- text - определяет однострочное текстовое поле (ширина по умолчанию составляет 20 символов).
- time - допускает ввод значений в 24-часовом формате, например: 12:34. В поддерживающих браузерах элемент управления отображается как числовое поле ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени.
- url - определяет поле для ввода URL-адреса.
- week - позволяет выбрать одну неделю, после чего обеспечит ввод данных в формате года и недели (например: 2014-W15).
- value:
- Указывает значение элемента <input>, и используется по-разному для разных типов ввода:
- Для "button", "reset", и "submit" - определяет текст на кнопке
- Для "text", "password", "hidden" - определяет начальное (по умолчанию) значение поля ввода
- Для "checkbox", "radio", "image" - определяет значение, связанное с вводом (значение, которое передается при отправке)
- width:
- Определяет ширину элемента в пикселях, используется только с <input type="image"> (пример: width="100").
Тег <input> так же поддерживает Глобальные атрибуты и События
Стиль по умолчанию
Нет.
Пример
<form action="demo_form.asp"> Имя: <input type="text" name="fname"><br> Фамилия: <input type="text" name="lname"><br> <input type="submit" value="Отправить"> </form>
Результат данного примера в окне браузера: