HTML тег <input>

Тег <input> используется в пределах элемента <form>, определяя поля для ввода информации пользователем. Тип поля (текст, радиокнопка, флажок, поле для ввода пароля и т.д.) определяется значением атрибута type. Для связывания текста с определенным элементом используется тег <label>, который устанавливает для него текстовую метку.

Синтаксис

Тег <input> одиночный, закрывающий тег не требуется. (В XHTML закрывающий <input/> тег обязателен).
Тег не содержит текстовой контент, только атрибуты.

Пример

<form action="getform.php" method="get">
   Имя: <input type="text" name="first_name" />
   Фамилия: <input type="text" name="last_name" />
   E-Mail: <input type="email" name="user_email" />
   <input type="submit" value="Отправить" />
</form>

Значения атрибута type при различных типах полей ввода

Значения	Тип поля
<input type=«text» autofocus maxlength=«10»/>	текстовое поле
<input type=«password»/>	при вводе символы отмечаются звёздочками
<input type=«email»/>	показывает ошибку, если введён не email
<input type=«file»/>	для ввода файла с компьютера
<input type=«tel» pattern=«\(\d\d\d\) ?\d\d\d-\d\d-\d\d» placeholder=«(###) ###-##-##»/>	номер телефона в определённом формате
<input type=«URL»/>	URL
<input type=«search» results=«5» autosave=«some_unique_value»/>	Форма поиска. Для отмены стандартных стилей в Safari и Chrome применяется свойство: -webkit-appearance: none;
<input type=«color»/>	для выбора цвета
<input type=«number» min=«0» max=«100» step=«5»/>	для выбора цифр, например, количества единиц товара. Рядом отображаются стрелочки-переключатели. Узнать больше об input type=«number».
<input type=«date» max=«2012-04-20» min=«2012-04-10» value=«2012-04-10»/>	для выбора даты в формате yyyy-mm-dd. Выводит выпадающий календарь.
<input type=«datetime»/>	для выбора даты и времени в формате yyyy-mm-dd HH:MM. Выводит выпадающий календарь.
<input type=«datetime-local»/>	для выбора даты и местного времени в формате yyyy-mm-dd HH:MM. Выводит выпадающий календарь.
<input type=«month»/>	для выбора года и месяца в формате yyyy-mm. Выводит выпадающий календарь.
<input type=«week»/>	для выбора года и недели в формате yyyy-W. Выводит выпадающий календарь.
<input type=«time»/>	для выбора времени в формате HH:MM. Выводит выпадающий календарь.
<input type=«range»/>	показывает ползунок. Узнать больше об input type=«range».
<input type=«checkbox»/> <input type=«checkbox»/>	позволяет выбрать несколько вариантов
<input type=«radio» checked=«checked» name=«raz»/> <input type=«radio» name=«raz»/>	выбор одного из вариантов
<input type=«button» value=«кнопка»/>	кнопка
<input type=«submit» value=«кнопка»/>	кнопка для отправки данных на сервер
<input type=«image» src=«http://1.bp.blogspot.com/_hljKDuw-cxQ/SDEJPIeJG2I/AAAAAAAAGaM/N_Lu4sxLH_4/s00/lpDemoBuscador.gif»/>	рисунок для отправки данных на сервер
<input type=«reset» value=«сброс»/>	кнопка для возврата к исходному состоянию
<input type=«hidden» value=«скрытое поле»/>	скрытое поле