Чат PHP-разработчиков
Галочка в форме 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>

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

Присоединяйтесь к нам в ВКонтакте и в Facebook, чтобы не пропустить новые уроки. А также вступайте в наш чат PHP-разработчиков в Telegram.
Домашнее задание
  • Добавьте в свою форму 3 чекбокса
  • сделайте 2 из них отмеченными по умолчанию
Онлайн обучение PHP
Путь с полного нуля до джуниора!
Начать бесплатно
Читайте также
Курс программирования на PHP
Подготовка до уровня устройства на работу!
Начать бесплатно
Комментарии (13)


akilina.vsk

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

ivashkevich

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

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

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

ivashkevich

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

Lungren

Почему здесь action именно /order?

ivashkevich

Потому что это удачное название для страницы заказа.

humanidis@gmail.com

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

    <form action="/order">
        <table>
            <tr>
                <td width="150"><label for="OralField">Оральный секс:</label></td>              
                <td class="border-left"><input id="OralField" name="oral" type="checkbox" checked></td>
            </tr>
            <tr bgcolor="#E1E1E1">                  
                <td><label for="ClassicField">Классический секс:</label></td>
                <td class="border-left"><input id="ClassicFIeld" name="classic" type="checkbox" checked></td>
            </tr>
            <tr>
                <td><label for="AnalField">Анал:</label></td>
                <td class="border-left"><input id="AnalField" name="anal" type="checkbox"></td>
            </tr>
        </table>
    </form>
ivashkevich

Если вам нужно при нажатии на какую-то кнопку отмечать все галочки, то нужно использовать JavaScript. Примеры тут.

Если же нужно, чтобы они сразу были отмечены при загрузке страницы, то для input нужно прописать атрибут checked:

<input id="AnalField" name="anal" type="checkbox" checked>
humanidis@gmail.com

Спасибо!

Dilik

что за сайт ты там делаешь?))))) с такими то заказами)))

humanidis@gmail.com

Конкурента интимсити))

ilya
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="/order">
        Какие языки программирования вы изучаете?
        <br>
        <label>
            PHP
            <input type="checkbox"name="php"checked>
        </label>
        <br>
        <label>
            MySQL
            <input type="checkbox"name="mysql"checked>
        </label>
        <br>
        <label>
            C++
            <input type="checkbox"name="c++">
        </label>
    </form>
</body>
</html>
Самый понятный курс PHP
Онлайн-уроки в удобное время!
Начать бесплатно
Популярное за сутки
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Сейчас читают
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Новые статьи
Логические задачи с собеседований