Самоучитель HTML Справочник HTML Глобальные атрибуты События Типы элементов Таблица цветов Спецсимволы HTML
Теги HTML

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 используется только совместно с type="submit" или type="image", и переопределяет атрибут enctype элемента <form>.

Примечание: атрибут formenctype не поддерживается в IE9 и более ранних версиях.

formmethod:
Определяет HTTP метод для отправки данных на указанный URL (для type="submit" и type="image"):
  • get - данные формы добавляются в конце URL-адреса: URL-адрес?имя=значение?имя=значение (значение по умолчанию).
  • post - отправляет данные формы, как HTTP после транзакции.
Атрибут formmethod может использоваться только совместно с type="submit" или type="image", и переопределяет атрибут method элемента <form>.

Примечание: атрибут formmethod не поддерживается в IE9 и более ранних версиях.

formnovalidate:
Указывает, что данные введенные в поле ввода не будут проверяться перед отправкой. Возможные значения логического атрибута novalidate:
<input formnovalidate>
<input formnovalidate="formnovalidate">
<input formnovalidate="">

Примечание: атрибут formnovalidate не поддерживается в IE9 и более ранних версиях, и в Safari.

formtarget:
Определяет имя фрейма или ключевое слово, которое указывает место для отображения ответа, полученного после отправки формы:
  • _blank - открывает документ в новом окне или вкладке.
  • _self - открывает документ в той же директории, где располагается ссылка (значение по умолчанию).
  • _parent - открывает документ в родительском фрейме.
  • _top - открывает документ во всю ширину окна.
  • имя_фрейма - открывает документ в iframe, имя которого было указано в качестве значения.
Атрибут formtarget может использоваться только совместно с type="submit" или type="image", и переопределяет атрибут target элемента <form>.

Примечание: атрибут formtarget не поддерживается в IE9 и более ранних версиях.

height:
Определяет высоту элемента в пикселях, используется только с <input type="image"> (пример: height="100").
list:
Устанавливает взаимосвязь между элементом <datalist> и <input>, позволяя для поля ввода указать список предварительно определенных вариантов. В качестве значения для атрибута выступает идентификатор элемента <datalist>. Пример »

Примечание: атрибут list не поддерживается в IE9 и более ранних версиях, и в Safari.

max:
Указывает максимальное значение для ввода числа или даты. Можно использовать атрибут max совместно с атрибутом min для создания диапазона допустимых значений.
  • число - указывает максимально допустимое значение.
  • дата - указывает максимальную дату, разрешенную для ввода.
Атрибуты min и max работают со следующими значениями атрибута type: number, range, date, datetime, datetime-local, month, time и week.

Примечание: атрибут 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" - определяет значение, связанное с вводом (значение, которое передается при отправке)
Атрибут value не может использоваться с type="file", и обязательно должен присутствовать при type="checkbox" и type="radio". Пример »
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> 

Результат данного примера в окне браузера:

Пример использования тега <input>
    
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011-2016 © puzzleweb.ru

Реклама на сайте | Обратная связь