Флажок

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

<input type="checkbox">

Однако, как и для всех элементов ввода, вам нужно определить name, чтобы он был пригоден для использования - без имени элемент не будет идентифицирован при отправке формы обратно на сервер для обработки. Вы также хотите установить value - это будет значение, отправленное на сервер, если флажок был установлен. Вот пример:

<input type="checkbox" name="nameOfChoice" value="1">

В этом примере, если флажок установлен и форма отправлена на сервер, сервер сможет прочитать элемент формы «nameOfChoice», и его значение будет равно 1.

Установлен флажок или нет?

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

<input type="checkbox" name="nameOfChoice" value="1" checked>

В старые времена XHTML, где каждый атрибут всегда имел значение, даже логические атрибуты (boolean attributes), это выглядело бы так:

<input type="checkbox" name="nameOfChoice" value="1" checked="checked" />

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

Множественный выбор

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

<form method="post" action="/Tests/Post/">      
    <fieldset>      
        <legend>What is Your Favorite Pet?</legend>      
        <input type="checkbox" name="favorite_pet" value="Cats">Cats<br>      
        <input type="checkbox" name="favorite_pet" value="Dogs">Dogs<br>      
        <input type="checkbox" name="favorite_pet" value="Birds">Birds<br>      
        <br>      
        <input type="submit" value="Submit now" />      
    </fieldset>      
</form>

Обратите внимание, что теперь у нас есть несколько флажков, но все они имеют одно и то же имя ("favorite_pet"), но разные значения (например, «Dogs»). Когда эта форма отправляется обратно на сервер, все эти флажки будут представлены одним именем, но значением будет массив из 0-3 элементов. Если бы вы использовали радиокнопки вместо флажков, пользователю было бы разрешено выбирать только одно любимое животное, но с помощью флажков он мог выбрать ни одного из них, всех или некоторых из них.

Ярлыки для флажков

Если вы проверили предыдущий пример, вы заметите, что мы можем поместить текст рядом с флажком, но это по-прежнему две разные вещи - вы не можете щелкнуть текст, чтобы вызвать флажок. Это может быть очень раздражающим для пользователя, но, к счастью для нас, это легко решить: просто используйте элемент label! Вот основной пример, чтобы показать вам разницу:

<input type="checkbox" name="favorite_pet" value="Cats">Cats<br>  
<input type="checkbox" name="favorite_pet" value="Dogs" id="dogs">
<label for="dogs">Dogs</label><br>

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

Ярлык очень прост - он использует атрибут for, чтобы присоединиться к элементу формы с соответствующим атрибутом id (обратите внимание, что у меня есть «dogs» в обоих местах).

Динамическая работа с флажком

Как и любой другой элемент DOM, вы можете управлять флажком, используя JavaScript. В связи с этим было бы интересно проверить, установлен ли флажок или нет, и, возможно, добавить некоторую логику, чтобы контролировать, сколько опций может выбрать пользователь. Чтобы показать вам, как это можно сделать, я расширила предыдущий пример (селектор «Любимый питомец»), включив в него магию JavaScript:

<form method="post" action="/Tests/Post">  
    <fieldset>  
    <legend>What is Your Favorite Pet?</legend>  
    <input type="checkbox" name="favorite_pet" value="Cats" onclick="return ValidatePetSelection();">Cats<br>  
    <input type="checkbox" name="favorite_pet" value="Dogs" onclick="return ValidatePetSelection();">Dogs<br>  
    <input type="checkbox" name="favorite_pet" value="Birds" onclick="return ValidatePetSelection();">Birds<br>  
        <br>  
    <input type="submit" value="Submit now">  
    </fieldset>  
</form>  

<script type="text/javascript">  
function ValidatePetSelection()  
{  
    var checkboxes = document.getElementsByName("favorite_pet");  
    var numberOfCheckedItems = 0;  
    for(var i = 0; i < checkboxes.length; i++)  
    {  
        if(checkboxes[i].checked)  
            numberOfCheckedItems++;  
    }  
    if(numberOfCheckedItems > 2)  
    {  
        alert("You can't select more than two favorite pets!");  
        return false;  
    }  
}  
</script>

Позвольте мне быстро показать, что делает этот код. У нас та же форма, что и раньше, но мы добавили обработчик событий для каждого из флажков, который заставляет их вызывать функцию JavaScript (ValidatePetSelection), когда пользователь щелкает их. В этой функции мы получаем все соответствующие флажки, используя функцию getElementsByName, а затем перебираем их, чтобы увидеть, проверены они или нет - для каждого проверяемого элемента мы добавляем к числу. Затем проверяется этот номер, и если он превышает два, мы предупреждаем пользователя о проблеме (можно выбрать только двух питомцев), а затем возвращаем false. Возврат false не позволит установить флажок.

Это был простой пример того, как работать с флажками с помощью JavaScript. Вы можете сделать гораздо больше, особенно если вы используете JavaScript-фреймворк, такой как jQuery, который значительно облегчит выбор и управление элементами DOM.

Итог

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