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 или required="required").
Допустимые значения:
·        [Пустая строка];
  • 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» дружной командой проекта Сайтостроение от А до Я.

18 июня 2017 в 15:25
Материалы по теме
{"url":"http://www.fastvps.ru/", "src":"/images/advbanners/fastvps.png", "alt":"Хостинг Fastvps.ru. Наш выбор!"}
Заработок