Универсальный тег <input>. Назначение тега <label>
belarusweb.net
© Петр Романовский Минск, 2016-2018.



belarusweb.net
Основы создания сайтов...

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
	<!-- Незабываем задавать служебные элементы -->
	<meta charset="utf-8">	
	<base href="http://localhost/test/">
	<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="Отправить"> 
</form>
</body>
</html>

Пример 6.3. Использование элемента '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 – задает уникальное имя элементу формы, которое позволяет обращаться к нему через скрипты. Кроме того, имя элемента отправляется на сервер вместе с его значением. Для радиокнопок одной группы данный атрибут должен иметь одинаковое значение (см. пример 6.4).
  • placeholder – выводит текст-подсказку внутри поля формы, который исчезает при получении фокуса или ввода текста (зависит от браузера). Отображается шрифтом серого цвета.
  • readonly – указывает, что данный элемент формы доступен только для чтения. В отличие от атрибута disabled допускает получение фокуса. Атрибут по умолчанию выключен и значений не принимает.
  • required – устанавливает поле обязательным для заполнения. Если поле заполнено не будет, то при попытке отправки формы на сервер будет выведено соответствующее предупреждение, а форма на сервер отправлена не будет.
  • size – устанавливает ширину текстового поля, которая определяется числом символов моноширинного шрифта. По умолчанию имеет значение "20". Следует отметить, что если размер шрифта изменяется с помощью стилей, то и ширина поля также изменяется.
  • value – присваивает элементу формы начальное значение. Данный атрибут является обязательным для переключателей (type="radio" и type="checkbox"), а для кнопок устанавливает текстовую надпись.

И даже сейчас некоторые атрибуты элемента 'input' не были перечислены. Полный список атрибутов можно посмотреть на официальном сайте здесь. Однако на данный момент они поддерживаются еще не всеми браузерами.

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

Использование некоторых из перечисленных атрибутов элемента 'input' показано в примере 6.4. А попрактиковаться с ними можно в разделе 'Задачник'.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<base href="http://localhost/test/">
	<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="Отправить"> 
</form>
</body>
</html>

Пример 6.4. Использование атрибутов элемента 'input'

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

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

Видеоуроки по курсу HTML

Комментарии (0)

Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!