HTML-тег <input>

Тег input представляет собой элемент управления формы. Он позволяет пользователю вводить данные и взаимодействовать с сайтом или приложением.

Синтаксис

Записывается как <input> (без закрывающегося тега). Тегу <input> присваивается атрибут type для указания типа элемента управления и атрибут name, чтобы процессор формы мог ссылаться на него. Часто используется атрибут value для указания значения по умолчанию для элемента управления.

Базовый пример синтаксиса тега <input> с несколькими атрибутами:

<input type="text" name="fcolor" value="Blue">

Пример, содержащий три элемента <input> в стандартной форме:

<form action="process_form.cfm" method="get">
	<label>First Name: <input name="first_name"></label>
	<label>Last Name: <input name="last_name"></label>
	<input type="submit" value="Submit">
</form>

Примеры

Базовая форма

Ниже приводится форма, которая используется для ввода имени/фамилии пользователя. Используются три тега input type: для имени и фамилии, один для кнопки отправки:

<form action="/html/tags/html_form_tag_action.cfm" target="_blank" method="get" id="customer_name">
<p><label>First name: <input type="text" name="first_name" maxlength="100" style="width:120px;">
</label>
</p>
<p><label>Last name: <input type="text" name="last_name" maxlength="100" style="width:120px;">
</label>
</p>
<input type="submit" value="Submit">
</form>

Атрибут form

Мы можем связать тег input с формой с помощью атрибута form.

Если вы используете атрибут form, то должны указать идентификатор формы, с которой необходимо связать элемент.

В следующем примере я разместил элементы, связанные с формой, вне элемента <form>. Но я намеренно связывал с формой только два элемента, чтобы продемонстрировать атрибут form в действии. Имя связано с формой, а фамилия — нет.

Поэтому фамилия не отправляется и не передается на страницу обработки:

<form action="/html/tags/html_form_tag_action.cfm" target="_blank" method="get" id="customer_name">
</form>
<p>
<label>
First name: <input form="customer_name" type="text" name="first_name" maxlength="100" style="width:120px;"></label></p>
<p>
<label>Last name: <input type="text" name="last_name" maxlength="100" style="width:120px;">
</label>
</p>
<input form="customer_name" type="submit" value="Submit">

Радио-кнопки (переключатели)

В этом примере мы создадим радиокнопки. Для этого тега input атрибуту type присваивая значение radio.

Каждый пункт для выбора в группе должен иметь одно и то же значение name. Таким образом они связываются. Через value мы можем задавать различные варианты:

<p>Какой приз вы предпочитаете?</p>
<form>
<label><input type="radio" name="prize" value="house">Дом
</label>
<label><input type="radio" name="prize" value="money">$1 million
</label>
<label><input type="radio" name="prize" value="none">Спасибо, спасибо! Я уже счастлив:)
</label>
</form>

Связанные с формой элементы

Тег input рассматривается как связанный с формой элемент. Так как он может принадлежать определенной форме.

Ниже приводится список связанных с формой элементов HTML:

  • <button>;
  • <fieldset>;
  • <input>;
  • <keygen>;
  • <label>;
  • <object>;
  • <output>;
  • <select>;
  • <textarea>;
  • <img>.

Атрибуты

Атрибуты могут добавляться в HTML-элемент, чтобы предоставить дополнительную информацию о том, как элемент должен отображаться или функционировать.

Существует три типа тега input атрибутов: связанные с конкретным элементом, глобальные и связанные с событием.

Атрибуты, связанные с конкретным элементом

В приведенной ниже таблице приведены атрибуты, связанные с конкретным тегом / элементом <input>:

Атрибут Описание
accept Задает разделенный запятыми список типов контента, которые принимает сервер.
Допустимые значения:

  • audio/*
  • video/*
  • image/*
  • [Валидный MIME-тип, без параметров]
  • [Строка, в которой первый символ — «.» Символ (U+002E)] (для указания расширения файлов).

Можно указать и любые MIME-типы, и любые соответствующие расширения. Например, <input type=»file» accept=».doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document»>
 

alt Альтернативный текст. Указывает на текст, который будет использоваться в случае, если браузер пользователя не может отобразить элемент управления.
autocomplete Предотвращает использование браузером автоматического заполнения для этого элемента управления. Может оказаться полезным для конфиденциальных данных, таких как платежные данные и тому подобное.
Допустимые значения:

  • on (значение по умолчанию);
  • off.

 

autofocus Автоматически выделяет фокусом ввода данный элемент управления при загрузке страницы. Это позволяет начать использовать элемент управления без предварительного выбора. В документе должно быть не более одного элемента с указанным атрибутомautofocus.
Если атрибут присутствует, его значение должно быть пустой строкой или значением, соответствующим значению ASCII без учета регистра для канонического имени атрибута, без пробела в начале или в конце (например, autofocus или autofocus=»autofocus»).
Обязательными значениями атрибута для тега input являются:

  • [Пустая строка];
  • Autofocus.
checked Элемент управления будет выбран при загрузке страницы. Используется с type=»radio» или type=»checkbox».
disabled Отключает элемент управления. Он не будет принимать изменения от пользователя. Элемент также не может быть выделен фокусом ввода, и при переключении фокуса с помощью табуляции будет пропускаться.
Если атрибут присутствует, его значение должно быть пустой строкой или значением, соответствующим значению ASCII без учета регистра для канонического имени атрибута, без пробела в начале или в конце (то есть либо disabled, либо disabled=»disabled»).
Допустимые значения:

  • [Пустая строка];
  • Disabled.
dirname Определяет направление написания текста, представленного в поле input. Значение этого атрибута может быть строкой текста, например, именем поля. Если вы, к примеру, укажете этот атрибут как dirname=»text_dir», когда данные формы будут отправлены, они могут выглядеть следующим образом:text_dir=ltr.
form Задает идентификатор формы, которой принадлежит данный элемент управления.
formaction Указывает URL-адрес файла, в котором будет происходить обработка данных элемента управления после их отправки.
formenctype Указывает тип содержимого, используемый для кодирования набора данных формы, когда они отправляются на сервер.
Допустимые значения:
·    application/x-www-form-urlencoded (по умолчанию);
·    multipart/form-data (используется при загрузке файлов);

  • text/plain(используетсяэто при загрузке файлов).
  • dialog(закрывает диалоговое окно, в котором находится сама форма. В противном случае данные не отправляются).
  • [Пустая строка];
  • Novalidate.
  • _blank;
  • _self;
  • _top;
  • _parent.
formmethod Задает метод HTTP, который будет использоваться при отправке данных через элемент управления.
Допустимые значения атрибута тега input:
·        get (данные формы добавляются к URL-адресу при отправке);
·        post (данные формы не добавляются к URL-адресу);
formnovalidate Указывает, должна ли выполняться валидация во время отправки данных формы.
Если атрибут присутствует, его значение должно быть пустой строкой или значением, соответствующим значению ASCII без учета регистра для канонического имени атрибута, без пробела в начале или в конце(то есть, novalidate или novalidate=»novalidate»).
Допустимые значения:
formtarget Определяет контекст просмотра для загрузки целевого адреса, указанного в атрибуте action.
Допустимые значения:
height Определяет высоту элемента управления.
inputmode Определяет, какой метод ввода будет наиболее полезен для пользователей, вводящих содержимое в элемент управления.
Допустимые значения тега input атрибута:
·        verbatim — значение по умолчанию. Буквенно-цифровой ввод латиницей содержимого нетекстового характера. Например, имя пользователя, пароли, коды продуктов.

  • latinввод латиницей на предпочтительном языке (языках) пользователя со включением некоторых вспомогательных средств ввода (например, автоматическая подстановка текста). Предназначен для передачи информации от человека компьютеру. Например, текстовые поля в форме поиска.
  • latin-proseввод латиницей на предпочтительном языке (языках) пользователя для передачи информации от человека к человеку, с обязательным включением вспомогательных средств при наборе текста (например, автоматическая подстановка текста и автоматическая замена прописных букв в начале предложений на заглавные). Данное значение предназначено для электронных писем и обмена мгновенными сообщениями.
  • full-width-latinввод латиницей на вторичном языке (языках) пользователя, с использованием символов полной ширины, с обязательным включением вспомогательных средств при наборе текста (например, автоматическая подстановка текста и автоматическая замена прописных букв в начале предложений на заглавные). Данное значение предназначено для ввода латинского текста, встроенного в текст CJK.
  • numericцифровой ввод, включая клавиши цифр от 0 до 9, предпочитаемый пользователем разделитель тысяч символов и символ для указания отрицательных чисел. Данное значение предназначено для числовых кодов. Например, номеров банковских карт. Для чисел предпочтительно <input type=»number»>.
  • tel- ввод номера телефона, включая клавиши цифр от 0 до 9, символ «#» и символ «*». В некоторых локалях также может включать в себя буквенные мнемонические метки (например, в США, ключ с меткой «2» исторически также обозначается буквами A, B и C). Вместо этого используйте <input type = «tel»>.
  • email- текстовый ввод в локали пользователя, с клавишами для ввода адреса электронной почты, например, символов «@» и «.».Вместо этого используйте <input type = «email»>.
  • url- ввод текста в локали пользователя с поддержкой клавиш для ввода веб-адресов, например, символов «/» и «.», и вспомогательных средств для быстрого ввода строк, обычно встречающихся в доменных именах, таких как «www» или «.co.uk». Вместо этого используйте <input type = «url»>.
list Указывает элемент datalist, который будет использоваться для списка предопределенных для пользователя параметров. Значение должно быть идентификатором элемента datalist в том же документе.
max Этот тег input атрибут указывает максимальное значение для элемента управления.
maxlength Указывает максимальное количество символов, которое пользователю разрешено вводить в текстовом поле.
min Указывает минимальное значение для элемента управления.
minlength Указывает минимальное количество символов, которые пользователь должен ввести в текстовом поле.
multiple Указывает, разрешено ли пользователю вводить более одного значения.
Если он присутствует, его значение должно быть пустой строкой или значением, соответствующим значению ASCII без учета регистра для канонического имени атрибута, без пробела в начале или в конце (то есть. multiple или multiple=»multiple»).
Допустимые значения:
·        [Пустая строка];

  • multiple.
name Присваивает элементу управления имя.
pattern Указывает регулярное выражение, по которому должно быть проверено значение элемента управления. Значение должно соответствовать составлению шаблонов по правилам грамматики ECMA 262.
placeholder Задает короткую подсказку (слово или короткую фразу), которая должна помочь пользователю при вводе данных. Подсказка может представлять собой примерное значение или краткое описание ожидаемого формата.
Примечание. Для создания более длинных подсказок или другого вспомогательного текста более подходит глобальный атрибут title.
Также обратите внимание, что атрибут placeholder не должен использоваться как альтернатива элементу <label>.
readonly Задает для элемента управления режим «только для чтения» — пользователь не может изменять значение. Тем не менее, элемент управления может выделяться фокусом ввода и становиться активным при переключении фокуса ввода с помощью клавиши табуляции.
Если он присутствует, его значение должно быть пустой строкой или значением, соответствующим значению ASCII без учета регистра для канонического имени атрибута, без пробела в начале или в конце (то есть readonly или readonly=»readonly»).
Допустимые значения:
·        [Пустая строка];

  • readonly.
required Указывает, что поле ввода является обязательным для заполнения (пользователь должен заполнить это поле).
Это логический атрибут тега input type. Если он присутствует, его значение должно быть пустой строкой или значением, соответствующим значению ASCII без учета регистра для канонического имени атрибута, без пробела в начале или в конце (то есть required или requiredrequired«).
Допустимые значения:
·        [Пустая строка];

  • required.
size Указывает ширину элемента управления, в символах. Значение, которое является действительным неотрицательным целым числом больше нуля.
src Если задано type = «image», этот атрибут определяет местоположение изображения.
step Указывает шаг изменения значения, который ожидается (и требуется), через ограничения допустимых значений.
type Указывает тип элемента управления.
Допустимые значения этого тега input атрибута:

Значение Тип данных Тип элемента управления
hidden Произвольная строка. Не определено.
text Текст без разрывов строк. Текстовое поле.
search Текст без разрывов строк. Текстовое поле.
Tel Текст без разрывов строк. Текстовое поле.
url Полный URL-адрес. Текстовое поле.
email Адрес электронной почты или список адресов электронной почты. Текстовое поле.
password Текст без разрывов строк (конфиденциальная информация). Текстовое поле, в котором скрываются вводимые данные (например, пароль скрывается с помощью звездочек (******) или другим аналогичным способом).
datetime Дата и время (год, месяц, день, час, минута, секунда, доля секунды) с часовым поясом, установленные в UTC. Элемент ввода даты.
date Дата (год, месяц, день) без часового пояса. Элемент ввода даты.
month Дата, состоящая из года и месяца без часового пояса. Элемент ввода месяца.
week Дата, состоящая из номера недели и недели, без часового пояса. Элемент ввода недели
time Время (час, минута, секунды, доли секунды) без часового пояса. Элемент ввода времени.
datetime-local Дата и время (год, месяц, день, час, минута, секунда, доля секунды) без часового пояса. Элемент ввода даты и времени.
number Числовое значение. Текстовое поле или счетчик.
range Числовое значение, с дополнительной семантикой, при которой точное значение не важно. Элемент ввода диапазон или аналогичный.
color Цвет RGB с 8-битными красными, зелеными и синими компонентами. Элемент выбора цвета.
checkbox Набор из нуля или более значений из предопределенного списка. Чекбокс.
radio Перечень значений. Радиокнопка.
file Ноль или больше файлов, каждый из которых имеет MIME-тип и, опционально, имя файла. Метка и кнопка.
submit Пронумерованное значение с дополнительной семантикой, согласно которой оно должно быть последним выбранным значением, после чего инициируется кнопка отправки данных формы. Кнопка.
image Координата, связанная с конкретным размером изображения, с дополнительной семантикой, согласно которой она должна быть последним выбранным значением, после чего инициируется кнопка отправки данных формы. Кликабельное изображение или кнопка.
reset Не определено. Кнопка.
button Не определено. Кнопка.
value Задает значение по умолчанию для элемента управления. Примечание: Если type=»checkbox» или type=»radio», атрибут является обязательным.
width Определяет ширину элемента управления.

Глобальные атрибуты

Перечисленные ниже атрибуты являются стандартными для всех элементов HTML5. Поэтому можно использовать эти атрибуты с тегом input, а также со всеми другими тегами HTML:

  • accesskey;
  • class;
  • contenteditable;
  • contextmenu;
  • dir;
  • draggable;
  • dropzone;
  • hidden;
  • id;
  • inert;
  • itemid;
  • itemprop;
  • itemref;
  • itemscope;
  • itemtype;
  • lang;
  • spellcheck;
  • style;
  • tabindex;
  • title;
  • translate.

Атрибуты обработчика событий

Атрибуты обработчика событий тега input type позволяют вызывать скрипт из HTML-разметки. Скрипт вызывается, когда происходит определенное «событие». Каждый атрибут обработчика события связан с другим событием.

Ниже приведены стандартные атрибуты обработчика событий HTML5:

  • onabort;
  • oncancel;
  • onblur;
  • oncanplay;
  • oncanplaythrough;
  • onchange;
  • onclick;
  • oncontextmenu;
  • ondblclick;
  • ondrag;
  • ondragend;
  • ondragenter;
  • ondragexit;
  • ondragleave;
  • ondragover;
  • ondragstart;
  • ondrop;
  • ondurationchange;
  • onemptied;
  • onended;
  • onerror;
  • onfocus;
  • onformchange;
  • onforminput;
  • oninput;
  • oninvalid;
  • onkeydown;
  • onkeypress;
  • onkeyup;
  • onload;
  • onloadeddata;
  • onloadedmetadata;
  • onloadstart;
  • onmousedown;
  • onmousemove;
  • onmouseout;
  • onmouseover;
  • onmouseup;
  • onmousewheel;
  • onpause;
  • onplay;
  • onplaying;
  • onprogress;
  • onratechange;
  • onreadystatechange;
  • onscroll;
  • onseeked;
  • onseeking;
  • onselect;
  • onshow;
  • onstalled;
  • onsubmit;
  • onsuspend;
  • ontimeupdate;
  • onvolumechange;
  • onwaiting.

Различия между HTML 4 и HTML 5

В HTML 4 и HTML5 имеется ряд различий для тега input.

В HTML5 атрибуты usemap, ismap и align устарели (они поддерживались в HTML 4).

В HTML5 были введены следующие атрибуты:

  • form;
  • autocomplete;
  • autofocus;
  • list;
  • pattern;
  • required;
  • placeholder;
  • dirname;
  • formaction;
  • formenctype;
  • formmethod;
  • formnovalidate;
  • formtarget;
  • height;
  • max;
  • min;
  • minlength;
  • multiple;
  • step;
  • width.

Кроме этого в HTML5 глобальный атрибут title имеет особое значение для тега input type.

В HTML 5.1 и WHATWG HTML Living Standard был введен следующий атрибут:

  • inputmode.

Спецификации

Вот официальные спецификации для <input> элемента.

  • СпецификацияHTML5 (W3C);
  • Текущий стандарт HTML (WHATWG);
  • Текущая версия W3C;
  • HTML 4 (W3C).

В чем разница?

W3C создает «snapshot» спецификации, которые не меняются после их определения. Поэтому спецификация HTML5 не изменится, когда она станет официальной рекомендацией. С другой стороны WHATWG, разрабатывает «живой стандарт», который обновляется на регулярной основе. В целом, вы, вероятно, обнаружите, что HTML living standard будет более точно соответствовать текущему проекту W3C, чем спецификации HTML5.

Перевод статьи «HTML input Tag» дружной командой проекта Сайтостроение от А до Я.