Изучаем тег input в HTML

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

Тег input в HTML - cинтаксис

Записывается как <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>:

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

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

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

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

Атрибуты обработчика событий тега HTML 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.

Дайте знать, что вы думаете по данной теме в комментариях. Мы очень благодарим вас за ваши комментарии, дизлайки, подписки, отклики, лайки!

Дайте знать, что вы думаете по данной теме в комментариях. Мы очень благодарим вас за ваши комментарии, дизлайки, подписки, отклики, лайки!