/ Справочники / HTML5 / input

Информация по поводу - input


HTML тег <input> позволяет создавать различные поля ввода или же выбора значения для html-форм. При использовании тега input без дополнительных атрибутов будет создано простейшее текстовое поле. Закрывающий тег не требуется. 

При помощи атрибута type вы можете указать каким полем будет этот input, к примеру:
  • password - создание поля для ввода пароля;
  • text - создания простейшего текстового поля;
  • email - создания поля для ввода email;
  • hidden - создания скрытого поля;
  • checkbox - создания поля для проставления галочки;
  • radio - создания поля с возможностью выбрать вариант;
  • button - создание кнопки;
  • submit - создание кнопки с перезагрузкой страницы;
  • reset - создание кнопки для очистки формы;
  • file - создание кнопки выбора файла с компьютера;
  • color - создание поля для выбора цвета;
  • time - создание поля для выбора даты;
  • image - создание поля с изображением;
Это лишь часть тех возможных значений атрибута type, которые вы можете применить на своем сайте.

Атрибуты:
  • type - задает значение (тип) поля;
  • form - нужен для связки поля с формой по id;
  • checked - устанавливает поставлена ли галочка или же выбрана radio кнопка по умолчанию;
  • disabled - отключает поле для ввода или любой другой взаимосвязи с ним;
  • placeholder - текст подсказки прямиком в поле;
  • readonly - возможно указать что поле не будет возможным для редактирования пользователем;
  • required - устанавливает обязательное ли это поле или нет;
  • value - устанавливается значение поля.
Пример:
<h2>Форма с полями</h2>
<form>
	<input type="text" name="name" id="name" placeholder="Ваше имя"><br>
	<label for="maleFemale">Выберите ваш пол</label><br>
	<input type="radio" name="maleFemale" id="maleFemale" value="male">
	<label>Мужчина</label>
	<input type="radio" name="maleFemale" id="maleFemale" value="female">
	<label>Женщина</label><br>
	<label>Ваш любимый цвет</label><br>
	<input type="color" id="color"><br>
	<input type="submit" value="Отправить">
	<input type="reset" value="Очистить">
</form>
Результат:

Форма с полями