Переключатель или «радиобаттон»

Поле-переключатель — это тег <input> с типом radio.

Обычно переключатели размещают группами по несколько штук. Причём у переключателей из одной группы должно быть одинаковое имя и разные значения, которые задаются c помощью value.

Таким образом, атрибут value является для переключателей обязательным. Браузер отправляет на сервер значение value выбранного переключателя.

В этом задании мы начнём создавать переключатель.

Группа переключателей

Теперь добавим ещё один вариант ответа в наш переключатель. Для этого нужно добавить ещё один <input> с таким же именем, но другим значением value.

Подобным образом можно создавать группы переключателей с любым количеством вариантов.

Чтобы сделать какой-либо вариант в переключателе выбранным по умолчанию, нужно добавить к соответствующему тегу <input> атрибут checked, как у поля-галочки.

Кстати, имя поля у переключателей одной группы должно быть одинаковым, но идентификаторы всегда должны быть уникальными.

Раскрывающийся список или «селект»

Раскрывающийся список так же, как и переключатель, позволяет выбрать один вариант ответа из нескольких.

Раскрывающийся список создаётся с помощью парного тега <select>, у которого есть знакомые атрибуты name и id.

Варианты ответов задаются с помощью парных тегов <option>, которые должны располагаться внутри тега <select>. Например:

<select name="theme"> <option value="light">Светлая тема</option> <option value="dark">Тёмная тема</option> ...</select>

В атрибуте value тега <option> задаётся значение варианта ответа, а внутри этого тега располагается подпись варианта ответа.

Если при отправке формы у выбранного варианта задан value, то на сервер отправится значение этого атрибута. В противном случае будет отправлен текст подписи.

«Мультиселект»

Раскрывающийся список можно превратить в так называемый «мультиселект», то есть список, в котором можно выбрать не один, а несколько вариантов.

Чтобы сделать это, нужно добавить к тегу <select> атрибут multiple.

Выбрать несколько вариантов можно, щёлкая по ним с зажатой клавишей Ctrl на Windows или Command на MacOS.

Высоту мультиселекта можно изменять с помощью атрибута size тега <select>.

Чтобы отметить как выбранные по умолчанию одно или несколько значений, нужно к соответствующим тегам <option> добавить атрибут selected.

При отправке данных мультиселекта на сервер с PHP после имени в значении атрибута nameставятся символы квадратных скобок []. Например, <select name="days[]">. Это необязательное требование для имени мультиселекта, а нужно только для корректной обработки данных в PHP.

Поле для загрузки файлов

Поле для загрузки файлов — это тег <input> с типом file. Для этого поля обязательным атрибутом является имя.

Чтобы поле заработало и браузер смог передать выбранный файл на сервер, необходимо добавить форме атрибут enctype со значением multipart/form-data. Не полю, а форме.

Кстати, внешний вид таких полей очень сильно отличается в зависимости от операционной системы и очень плохо изменяется с помощью стилей.

Скрытое поле

И ещё одно невидимое и очень полезное поле. Это скрытое поле. Его используют, когда в форме нужно отправить какие-то дополнительные служебные данные, которые не вводятся пользователем.

Например, это могут быть реквизиты заказа или номер пользователя в форме оплаты.

Скрытое поле — это тег <input> с типом hidden.

Сброс введенных значений

Сначала разберёмся с возможностями кнопок, не рассмотренными в базовом курсе про формы.

Экспериментировать будем над формой логина в котопрофайл.

В HTML-формах есть специальная кнопка, которая сбрасывает введённые значения и возвращает изначально установленные. Это поле ввода с типом reset.

Пример использования:

<input type="reset" value="Сбросить">

Обратите внимание, что кнопка не обнуляет значения, а возвращает те, которые были установлены в полях формы по умолчанию.

Простая кнопка

Помимо кнопок отправки формы или сброса введенных значений, существуют и «просто кнопки». При нажатии на такую кнопку никаких действий не происходит, а все необходимые действия обычно задаются при помощи JavaScript.

Пример записи:

<input type="button" value="Кнопка">

Кнопка-изображение

В качестве кнопки отправки формы можно использовать изображение.

Для этого у тега input нужно указать тип image.

Аналогично обычным изображениям на сайте у кнопки-изображения есть еще два атрибута:

src	адрес изображения
alt	альтернативный текст, отображаемый в том случае, если изображение не загружено

Кнопка-изображение работает аналогично кнопке submit, но на сервер дополнительно передаются координаты точки, по которой был произведен щелчок.

Альтернативный способ задания кнопок

Помимо тега <input> для добавления кнопок можно использовать тег <button>. Он расширяет возможности создания кнопок.

Внутри тега <button> можно размещать любые HTML-элементы, в том числе изображения. Например:

<button>Календарь <img src="calend.png" alt=""></button>

В данном случае кнопка будет выглядеть примерно вот так:

Если в атрибуте type тега <button> указать значение submit или reset, то кнопка будет отправлять данные на сервер или сбрасывать введенные значения.

По умолчанию значение атрибута type — submit.

То есть внутри формы кнопка <button> по нажатию отправит форму на сервер.

Значениями атрибута type также могут быть button и reset.

Кнопка button со значением type="reset" аналогично input type="reset" сбрасывает значения полей формы к изначальным.

А вот значение type="button" избавит кнопку от всей изначальной фунциональности. То есть кнопка просто будет выглядеть как кнопка, но ничего по умолчанию не делать. Это удобно, если вы хотите сами добавить кнопке дополнительное действие с помощью JavaScript.

Обязательные поля

Ура, товарищи! Мы успешно разобрались с возможностями кнопок в формах и залогинились в профайл Кексика.

Теперь нам предстоит изучить новые возможности форм, большая часть которых была добавлена в HTML5. А в процессе мы будем помогать Кексику строить формы, используя полученные знания.

Итак, начнём...

Кексик, как и любой уважающий себя кот, любит рыбу. Но при этом каждый раз ходить в рыбную лавку за лососем ему лень. Поэтому он, как уважающий себя инженер, решил облегчить свою жизнь автоматизацией процесса: он собрался сделать форму доставки любимых лакомств на дом, чтобы ей мог пользоваться он сам и его друзья-котаны. Кексик начал её верстать, и ему надо помочь в этом нелёгком деле.

Сначала давайте разберёмся с обязательными полями. Чтобы указать, что поле обязательно для заполнения, нужно добавить ему пустой атрибут required:

<input type="text" required>

При попытке отправить форму с незаполнеными обязательными полями браузер выведет всплывающее предупреждение, которое в Chrome и Firefox выглядит вот так:

Эта проверка работает на клиентской части и упрощает валидацию форм.
Но всегда нужно проверять отправленные данные и на стороне сервера.

Поле выбора даты

Поля для задания даты и времени уже поддерживаются в этих браузерах.

В форму заказа важно включить поле даты доставки. А для выбора даты из календаря существует новый тип поля ввода — date. При клике на данное поле в форме всплывает календарик.

Пример записи:

<input type="date">

Поле выбора времени

Поля для задания даты и времени уже поддерживаются в этих браузерах.

В предыдущем задании мы рассмотрели использование тега <input> с типом date. Но иногда нужно указывать дату в других форматах, и для этого существуют дополнительные «временные» типы полей, например, time для выбора времени.

Используем поле выбора времени в нашей форме:

<input type="time">

В Chrome это выглядит так:

Если браузер не поддерживает поле для ввода времени, то вместо него отображается обычное текстовое поле.

⇐ Предыдущая1234567Следующая ⇒

Поделиться: