17.03.2017   4507
Галочка в форме HTML: checkbox

Поле-галочка в HTML

Галочка в форме HTML, или "чекбокс" задается тегом <input>, у которого указан тип checkbox.

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

Если есть необходимость в том, чтобы галочка присутствовала по умолчанию, то необходимо добавить к тегу атрибут checked. Выглядеть это будет вот так:

<input type="checkbox" checked>

А так чекбокс выглядит в браузере:
Чекбоксы в действии

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

Код для формы, приведённой в начале статьи будет следующим:

<form action="/order">
    <label>
        Завтрак
        <input type="checkbox" name="breakfast" checked>
    </label>
    <br>
    <label>
        Обед
        <input type="checkbox" name="lunch">
    </label>
    <br>
    <label>
        Ужин
        <input type="checkbox" name="dinner" checked>
    </label>
</form>

Что касается названия, то в профессиональной среде поле называют "чекбоксом".

Домашнее задание
Для просмотра домашки нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности

Комментарии

 akilina.vsk 2017-05-26 12:41:47
0

Спасибо за подробную информацию, можно ли чтобы галочка обязательно стояла в одном из чекбоксов? И при их отсутствии высвечивалось сообщение о том, что необходимо выбрать один из вариантов?

Ответить
  •  ivashkevich 2017-05-26 18:01:09
    0

    К сожалению, средствами HTML этого сделать нельзя. Тут или проверять на сервере с помощью PHP, или на клиенте JavaScript'ом.
    На HTML можно только сделать обязательную галочку. Например, при регистрации пользователя, когда нужно чтобы он согласился с правилами сайта. Для этого нужно использовать атрибут required. Вот так:

    <input type="checkbox" name="acceptrules" required>

    Ответить
 Andrey1307 2017-08-19 06:10:34
0

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

Ответить
  •  ivashkevich 2017-08-20 03:03:58
    0

    Ну, тут либо помещать элементы формы в таблицу и делать label и input в разных ячейках, либо просто расположить чекбоксы слева от их описания =)

    Ответить
Чтобы написать комментарий нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности