HTML :: Универсальный тег <input>, назначение тега <label>
Тег <input> и его атрибуты
Как говорилось выше, элемент «form» является контейнером, в котором расположены остальные элементы формы. Самым универсальным из них можно смело назвать пустой элемент «input», поскольку он применяется как для создания текстовых полей, так и различных кнопок, переключателей, скрытых полей и т.д. Формируется данный элемент соответствующим одиночным тегом <input> (от англ. input – ввод), а его назначение определяется его атрибутом type, который может принимать целый ряд значений:
- "button" – создает кнопку;
- "checkbox" – создает флажок, позволяя тем самым выбрать из предложенных вариантов сразу несколько подходящих;
- "file" – создает поле для ввода имени файла, пересылаемого на сервер, например, фотографию пользователя при регистрации;
- "hidden" – создает скрытое поле, которое предназначено для служебной информации и не отображается на веб-странице;
- "image" – создает графическую кнопку для отправки данных формы на сервер;
- "password" – создает поле для ввода пароля, в котором все символы, вводимые с клавиатуры, скрываются звездочками, чтобы их нельзя было подсмотреть;
- "radio" – создает радиокнопку, которая представляет собой переключатель, позволяющий выбрать только один вариант из нескольких предложенных;
- "reset" – создает кнопку «Сброс» для возврата всех данных формы в исходное состояние;
- "submit" – создает обычную текстовую кнопку для отправки данных формы на сервер;
- "text" – создает текстовое поле для ввода символов с клавиатуры.
Использование некоторых из перечисленных разновидностей элемента «input» показано в примере №1.
<!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"> </label> <label>31-40<input type="radio" name="age" value="3140"> </label> <label>41-50<input type="radio" name="age" value="4150"></label><br><br> <!-- Выбираем виды, которыми владеем --> Виды единоборств: <label>бокс<input type="checkbox" name="box" value="box"> </label> <label>каратэ<input type="checkbox" name="karate" value="karate"> </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="Сброс"> <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. А попрактиковаться с ними можно в нашем задачнике.
<!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"> </label> <label>31-40<input type="radio" name="age" value="3140"> </label> <label>41-50<input type="radio" name="age" value="4150"> </label><br><br> <!-- Выбираем виды, которыми владеем --> Виды единоборств: <label>бокс<input type="checkbox" name="box" value="box"> </label> <label>каратэ<input type="checkbox" name="karate" value="karate"> </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="Сброс"> <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>
- Ввод данных в форму в виде многострочного текста
- Вернуться к оглавлению учебника