Чат 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 из них отмеченными по умолчанию
Читайте также
Комментарии


akilina.vsk
akilina.vsk

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

ivashkevich
ivashkevich

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

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

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

ivashkevich
ivashkevich

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

Lungren
Lungren

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

ivashkevich
ivashkevich

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

humanidis@gmail.com
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
ivashkevich

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

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

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

Спасибо!

Dilik
Dilik

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

humanidis@gmail.com
humanidis@gmail.com

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