HTML :: Универсальный тег <input>, назначение тега <label>

Тег <input> и его атрибуты

Как говорилось выше, элемент «form» является контейнером, в котором расположены остальные элементы формы. Самым универсальным из них можно смело назвать пустой элемент «input», поскольку он применяется как для создания текстовых полей, так и различных кнопок, переключателей, скрытых полей и т.д. Формируется данный элемент соответствующим одиночным тегом <input> (от англ. input – ввод), а его назначение определяется его атрибутом type, который может принимать целый ряд значений:

"button" – создает кнопку;
"checkbox" – создает флажок, позволяя тем самым выбрать из предложенных вариантов сразу несколько подходящих;
"file" – создает поле для ввода имени файла, пересылаемого на сервер, например, фотографию пользователя при регистрации;
"hidden" – создает скрытое поле, которое предназначено для служебной информации и не отображается на веб-странице;
"image" – создает графическую кнопку для отправки данных формы на сервер;
"password" – создает поле для ввода пароля, в котором все символы, вводимые с клавиатуры, скрываются звездочками, чтобы их нельзя было подсмотреть;
"radio" – создает радиокнопку, которая представляет собой переключатель, позволяющий выбрать только один вариант из нескольких предложенных;
"reset" – создает кнопку «Сброс» для возврата всех данных формы в исходное состояние;
"submit" – создает обычную текстовую кнопку для отправки данных формы на сервер;
"text" – создает текстовое поле для ввода символов с клавиатуры.

Использование некоторых из перечисленных разновидностей элемента «input» показано в примере №1.

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<!-- Незабываем задавать служебные элементы -->
	<meta charset="utf-8">	
	<base href="https://site.name/">
	<title>Формы</title>
</head>
<body>
<form action="php/registration.php" method="POST" name="reg_form">
	<!-- Создаем поле для ввода имени -->
	<label>Имя: <input type="text" name="first_name"></label><br><br>
			
	<!-- Все элементы одной группы радиокнопок должны иметь одно имя-->
	Возраст: <label>20-30<input type="radio" name="age" value="2030"> &nbsp;</label>
	<label>31-40<input type="radio" name="age" value="3140">  &nbsp;</label>
	<label>41-50<input type="radio" name="age" value="4150"></label><br><br>
	
	<!-- Выбираем виды, которыми владеем -->
	Виды единоборств: <label>бокс<input type="checkbox" name="box" value="box">  &nbsp;</label>
	<label>каратэ<input type="checkbox" name="karate" value="karate">  &nbsp;</label>
	<label>дзюдо<input type="checkbox" name="judo" value="judo"></label> <br><br>
	
	<!-- Поле для загрузки файла (фото) -->
	<label>Загрузить фото: <input type="file" name="foto"></label><br><br>
	<!-- Поле ввода пароля -->
	<label>Введите пароль: <input type="password" name="passw"></label><br><br>
	
	<!-- Создаем кнопки сброса и отправки данных на сервер -->
	<input type="reset" value="Сброс"> &nbsp; &nbsp;
	<input type="submit" value="Отправить" disabled> 
</form>
</body>
</html>

Пример №1. Использование элемента «input»

Как видим, элемент «input» действительно универсальный. И это без учета того, что в HTML 5 был добавлен еще целый ряд значений для атрибута type, которые можно посмотреть в нашем справочнике здесь.

Кроме атрибута type у элемента «input» присутствует весьма внушительное количество дополнительных атрибутов. Перечислим их.

accept – используется для поля отправки файлов на сервер (type="file") и устанавливает для него фильтр на типы отправляемых файлов. В качестве значений принимает через запятую список MIME-типов разрешенных для отправки файлов. Если файл не соответствует фильтру, то пользователь не увидит его в окне выбора файлов. Если атрибут не применяется, то в окне выбора файлов будут показываться все файлы, доступные для просмотра.
autocomplete – его действие аналогично действию одноименного атрибута элемента «form» и переопределяет его в случае необходимости.
autofocus – автоматически устанавливает фокус в данное поле формы при загрузке страницы. Если атрибут задан сразу для нескольких полей, то фокус будет передан первому из них. Атрибут по умолчанию выключен и значений не принимает, т.е. является логическим.
checked – применяется для переключателей и предварительно активирует их. Для радиокнопок (type="radio") атрибут можно использовать только для одного элемента группы, для переключателей в виде флажков (type="checkbox") атрибут можно использовать хоть для всех элементов сразу. Атрибут по умолчанию выключен и значений не принимает.
disabled – блокирует доступ к полю формы. Это может потребоваться, например, когда нужно, чтобы поле стало доступным только после заполнения предварительных полей. Пользователь не сможет взять его в фокус и изменить содержимое. При этом само поле имеет серый фон, а его значение на сервер не передается. Атрибут по умолчанию выключен и значений не принимает.
form – связывает данное поле с формой по ее идентификатору. В качестве значения принимает соответствующее значение атрибута id формы, с которой необходимо связать данное поле. Это может потребоваться в случае, когда поле расположено за пределами формы.
formnovalidate – его действие аналогично действию одноименного атрибута элемента «form».
formaction – его действие аналогично действию одноименного атрибута элемента «form». Атрибут используется для кнопок с атрибутом type="submit" и type="image".
formenctype – его действие аналогично действию одноименного атрибута элемента «form». Атрибут используется для кнопок с атрибутом type="submit" и type="image".
formmethod – его действие аналогично действию одноименного атрибута элемента «form». Атрибут используется для кнопок с атрибутом type="submit" и type="image".
formtarget – его действие аналогично действию одноименного атрибута элемента «form». Атрибут используется для кнопок с атрибутом type="submit" и type="image".
src – в качестве значения принимает абсолютный или относительный путь к файлу изображения. Используется для графической кнопки (type="image").
height – задает высоту графической кнопки (type="image").
width – задает ширину графической кнопки (type="image").
alt – устанавливает альтернативный текст для графической кнопки (type="image").
list – связывает данное поле с элементом «datalist» по ее идентификатору, позволяя подключить к полю варианты автодополнения. В качестве значения принимает соответствующее значение атрибута id элемента «datalist», с которым необходимо связать данное поле.
maxlength – устанавливает максимально допустимое число символов, которые можно ввести в поле. В качестве значения принимает натуральные числа. При равенстве количества введенных символов установленному значению, дальнейший ввод символов становится невозможным.
minlength – устанавливает минимальное число символов, которые нужно ввести в поле. В качестве значения принимает натуральные числа. Если количество введенных символов будет меньше установленного значения, но больше нуля, то при попытке отправки формы на сервер будет выведено соответствующее предупреждение, а форма на сервер отправлена не будет.
multiple – позволяет выбрать для отправки на сервер сразу несколько значений, например, файлов для поля с type="file". Атрибут по умолчанию выключен и значений не принимает.
name – задает уникальное имя элементу формы, которое позволяет обращаться к нему через скрипты. Кроме того, имя элемента отправляется на сервер вместе с его значением. Для радиокнопок одной группы данный атрибут должен иметь одинаковое значение (см. пример №2).
placeholder – выводит текст-подсказку внутри поля формы, который исчезает при получении фокуса или ввода текста (зависит от браузера). Отображается шрифтом серого цвета.
readonly – указывает, что данный элемент формы доступен только для чтения. В отличие от атрибута disabled допускает получение фокуса. Атрибут по умолчанию выключен и значений не принимает.
required – устанавливает поле обязательным для заполнения. Если поле заполнено не будет, то при попытке отправки формы на сервер будет выведено соответствующее предупреждение, а форма на сервер отправлена не будет.
size – устанавливает ширину текстового поля, которая определяется числом символов моноширинного шрифта. По умолчанию имеет значение "20". Следует отметить, что если размер шрифта изменяется с помощью стилей, то и ширина поля также изменяется.
value – присваивает элементу формы начальное значение. Данный атрибут является обязательным для переключателей (type="radio" и type="checkbox"), а для кнопок устанавливает текстовую надпись.

И даже сейчас некоторые атрибуты элемента «input» не были перечислены. Полный список атрибутов можно посмотреть в нашем справочнике здесь.

Если для элемента «form» указаны атрибуты novalidate, action, enctype, method, target и др., то соответствующие атрибуты элементов формы в случае применения переопределяют их.

Использование некоторых из перечисленных атрибутов элемента «input» показано в примере №2. А попрактиковаться с ними можно в нашем задачнике.

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<base href="https://site.name/">
	<title>Атрибуты элемента «input»</title>
</head>
<body>
<form action="php/registration.php" method="POST" name="reg_form">
	
	<label>Имя: <input type="text" name="first_name" 
	minlength="2" maxlength="20" autofocus></label><br><br>
			
	<label>Фамилия: <input type="text" name="last_name" 
	minlength="3" maxlength="20"></label><br><br>
	
	<!-- Все элементы одной группы радиокнопок должны иметь одно имя-->
	Возраст: <label>20-30<input type="radio" name="age" value="2030"> &nbsp;</label>
	<label>31-40<input type="radio" name="age" value="3140">  &nbsp;</label>
	<label>41-50<input type="radio" name="age" value="4150"> </label><br><br>
	
	<!-- Выбираем виды, которыми владеем -->
	Виды единоборств: <label>бокс<input type="checkbox" name="box" value="box"> &nbsp;</label>
	<label>каратэ<input type="checkbox" name="karate" value="karate">  &nbsp;</label>
	<label>дзюдо<input type="checkbox" name="judo" value="judo" checked> </label> <br><br>
	
	<!-- Поле для загрузки нескольких файлов сразу (фото) -->
	<label>Загрузить фото: <input type="file" name="foto" multiple></label><br><br>
	
	<!-- Обязательное поле ввода логина -->
	<label>Введите логин: <input type="text" name="login" required></label><br><br>
	
	<!-- Обязательное поле ввода пароля -->
	<label>Введите пароль: <input type="password" name="passw" 
	minlength="7"  maxlength="15" required></label><br><br>
	
	<!-- Создаем кнопки сброса и отправки данных на сервер -->
	<input type="reset" value="Сброс"> &nbsp; &nbsp;
	<input type="submit" value="Отправить" disabled> 
</form>
</body>
</html>

Пример №2. Использование атрибутов элемента «input»

Тег <label> и его атрибут for

В рассмотренных нами примерах многие поля расположены внутри элементов «label», сформированных парными тегами <label> (от англ. label – метка). Данные элементы необходимы для установления связи между текстом и элементом формы, которые расположены внутри них. В результате этой связи при щелчке на тексте соответствующее поле получит фокус. Установить такую связь можно еще одним способом. Необходимо поместить требуемый текст внутрь контейнера «label», а в открывающем теге <label> задать атрибут for, указав в качестве значения соответствующее значение атрибута id элемента формы, с которым требуется установить связь (см. пример №1). Использовать элемент «label» очень удобно, т.к. нет необходимости, например, целиться в маленькое окошко для того, чтобы поставить галочку, а достаточно щелкнуть по соответствующей надписи.

Быстрый переход к другим страницам

Методы передачи данных GET и POST
Универсальный тег <input>, назначение тега <label>
Ввод данных в форму в виде многострочного текста
Вернуться к оглавлению учебника