Как добавить чекбоксы, переключатели и выпадающие списки в HTML-форму?

как добавить чекбоксы, переключатели и выпадающие списки в html-форму?

Для чего нужны элементы выбора

Функциональность форм была бы ограничена без возможности выбора значений из перечня заранее подготовленных вариантов. Проблема частично связана с психологией пользователя. Ручной ввод информации бывает очень утомительным. Вспомните, встречались ли вам огромные формы регистрации? Помните, насколько не интересно их заполнять?

В HTML есть три вида специальных полей checkbox (флажок), radio (переключатель) и select (выбор из списка). Они созданы для облегчения заполнения форм, а также для улучшения контроля над этим процессом. Особенности и настройки этих полей мы рассмотрим в нашей статье.

Использование чекбоксов (флажков)

Флажки в HTML создаются с помощью элемента <input>, атрибут type которого должен иметь значение checkbox. Браузер выведет такое поле в виде маленького углубленного квадрата. При нажатии внутри него отобразится галочка, которая свидетельствует о выборе пользователя.

Элементы <input> с типом checkbox называют чекбоксами или флажками, так как флаги могут находиться лишь в двух состояниях: спущенном и поднятом.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример создания списка чекбоксов</title>
    </head>
    <body>
        <form>
            <p>Выберите породы котов:</p>
            <!-- формирование списка флажков -->
            <input type="checkbox">Мейнкун<br>
            <input type="checkbox">Доберман<br>
            <input type="checkbox">Манчкин<br>
            <input type="checkbox">Боксер<br>

            <!-- кнопка отправки формы -->
            <br><input type="submit" value="Отправить">
        </form>
    </body>
</html>
отображение заданных чекбоксов в браузере Google Chrome
рис 1. Пример отображения чекбоксов в браузере

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

Используйте атрибут checked, чтобы сделать флажок выбранным по умолчанию. Допустимо указание checked хоть для всех флажков сразу. Пользователь сможет изменить значение самостоятельно до отправки формы.

Так как чекбоксы являются отдельными полями, но при этом в выбранном состоянии могут находиться сразу несколько, вам необходимо определить для каждого из них уникальный атрибут name. Чтобы сервер смог получить значение, соответствующее выбранному флагу, используйте атрибут value.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример настройки двух списков флажков</title>
    </head>
    <body>
        <form>
            <p>Выберите напитки:</p>
            <!-- формирование первого списка флажков -->
            <input type="checkbox" name="cofe" value="americano" checked>Кофе (американо)<br>
            <input type="checkbox" name="tea" value="earlgrey">Чай (Эрл Грей)<br>

            <p>Выберите блюдо:</p>
            <!-- формирование второго списка флажков -->
            <input type="checkbox" name="ragout" value="veal" checked>Рагу из телятины<br>
            <input type="checkbox" name="chops" value="potatoes">Отбивная с картофелем<br>

            <!-- кнопка отправки формы -->
            <br><input type="submit" value="Заказать">
        </form>
    </body>
</html>
Пример дополнительной настройки флажков
рис 2. Отображение чекбоксов с дополнительными настройками

Использование переключателей (радио кнопок)

Переключатели образуют список полей, в котором выбрать можно только одно. Для создания переключателя в HTML используются элемент <input>, атрибут type которого должен иметь значение radio. Браузер отобразит его в виде углубленного круга. При нажатии внутри него появится закрашенный круг меньшего размера.

В веб-разработке данные типы полей называют переключателями или радио кнопками. В отличие от чекбоксов можно установить только одну радио кнопку, выбранную по умолчанию. Используйте для этого атрибут checked.

Так как можно выбрать лишь один из переключателей, то всем им необходимо задать одинаковые атрибуты name. В HTML можно создать несколько групп радио кнопок, выбор в которых будет вестись отдельно друг от друга. Для этого задайте им разные атрибуты name.

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример создания и настройки радио кнопок</title>
    </head>
    <body>
        <form>
            <p>Какой ваш любимый цвет?</p>
            <!-- формирование первой группы переключателей -->
            <input type="radio" name="color" value="green" checked>Зеленый<br>
            <input type="radio" name="color" value="blue">Синий<br>

            <p>Вы любите пешие прогулки?</p>
            <!-- формирование второй группы переключателей -->
            <input type="radio" name="walk" value="yes" checked>Да<br>
            <input type="radio" name="walk" value="no">Нет<br>

            <!-- кнопка отправки формы -->
            <br><input type="submit" value="Отправить">
        </form>
    </body>
</html>
Пример внешнего вида переключателей в браузере Google Chrome
рис 3. Отображение переключателей в браузере

Использование выпадающих списков

Если количество значений, предназначенных для выбора, довольно велико, используйте элемент <select>. Между его открывающим тегом <select> и закрывающим </select> можно добавить любое количество элементов <option>.

Вся структура будет отображена браузером в виде одного компактного поля. При нажатии по нему осуществится показ выпадающего списка. Тексты, заключенные в элементах <option>, будут являться пунктами этого списка.

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

HTML позволяет осуществлять множественный выбор значений в выпадающем списке. Для этого в элементе <select> необходимо указать атрибут multiple. Также вы можете сделать один из элементов <option> выбранным по умолчанию. Эта возможность реализуется за счет атрибута selected. Просто добавьте его к нужному пункту списка.

Заметка
Существует два вида отображения элемента <select>. По умолчанию он работает как выпадающий список, но если задать атрибут size с числовым значением, поле примет другой вид. Будет осуществлен показ заданного количества пунктов списка, а перемещение к остальным происходит с помощью полосы прокрутки.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример настройки выпадающих списков</title>
    </head>
    <body>
        <form>
            <!-- формирование списков с различным типом отображения -->
            <label>
                <span>Желаемая должность:</span><br>
                <select name="position" size="2" multiple>
                    <option value="coder" selected>веб-программист</option>
                    <option value="tests" selected>Юнит-тестирование</option>
                    <option value="admin">Системный Администратор</option>
                </select>
            </label><br><br>

            <label>
                <span>Уровень образования:</span><br>
                <select name="education">
                    <option value="higher">Высшее</option>
                    <option value="middle" selected>Среднее</option>
                </select>
            </label><br><br>

            <!-- кнопка отправки формы -->
            <br><input type="submit" value="Отправить">
        </form>
    </body>
</html>
Пример использования выпадающих списков в HTML
рис 4. Выпадающие списки с различными настройками

Блокирование элементов выбора

Вы можете сделать выбор вышеперечисленных полей недоступным. Например, это полезно, если какой-либо товар закончился на складе. HTML позволяет реализовать такое поведение с помощью добавления атрибута disabled к чекбоксам, радио кнопкам или выпадающим спискам.

Особенностью выпадающих списков является то, что атрибут disabled, заданный у элемента <select>, блокирует всё его содержимое, в то время как его добавление к отдельным элементам <option> делает недоступными только их.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример блокирования элементов выбора</title>
    </head>
    <body>
        <form>
            <!-- Блокировка различных типов полей -->
            <input type="checkbox" disabled>Кофе (американо)<br>
            <input type="radio" disabled>Синий цвет<br>

            <select disabled>
                <option>Высшее образование</option>
                <option>Среднее образование</option>
            </select>

            <!-- кнопка отправки формы -->
            <br><br><input type="submit" value="Отправить">
        </form>
    </body>
</html>
Отображение в браузере заблокированных чекбоксов, переключателей и списков
рис 5. Заблокированные элементы выбора

Последние публикации