Bootstrap - Checks & Radios: руковод novichkov

Привет, будущие веб-разработчики! Сегодня мы окунемся в захватывающий мир элементов управления формами Bootstrap, а именно checkbox'ов и radio buttons. Эти小小的 интерактивные элементы могут показаться простыми, но они невероятно мощны для сбора ввода пользователей. Так что натянем рукава и начнем!

Введение в элементы управления формами Bootstrap

Прежде чем углубиться в детали, давайте на минутку appreciate, почему мы изучаем Bootstrap. Представьте, что вы строите дом. Вы можете сделать каждый кирпич с нуля, или можете использовать готовые компоненты. Bootstrap как сундук с готовыми компонентами для вашего веб-сайта. Он экономит время и обеспечивает консистентность. Теперь давайте исследуем наш первый компонент!

Checkbox: Чудо многоselekt

Основной Checkbox

Checkbox'ы как маленькие квадратные коробки, которые пользователи могут кликнуть, чтобы выбрать несколько опций. Они идеальны для случаев, когда вы хотите, чтобы пользователи выбирали более одного элемента из списка. Давайте создадим наш первый checkbox:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Основной checkbox
</label>
</div>

В этом примере мы используем классы Bootstrap для стилизации нашего checkbox'а. Класс form-check создает обертку, а form-check-input стилизует сам checkbox. Атрибут for в label совпадает с id input'а, connect'я их.

Отмеченный状态

Иногда вы хотите, чтобы checkbox был预先 отмечен. Это так же просто, как добавить атрибут checked:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
Отмеченный checkbox
</label>
</div>

Неопределенный статус

Теперь интересный факт: checkbox'ы могут иметь третье состояние, называемое "неопределенным". Это как когда ваш подросток убирает свою комнату - она не до конца чистая, но и не полностью脏. Мы не можем установить это состояние в HTML, но можем с помощью JavaScript:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckIndeterminate">
<label class="form-check-label" for="flexCheckIndeterminate">
Неопределенный checkbox
</label>
</div>

<script>
document.getElementById('flexCheckIndeterminate').indeterminate = true;
</script>

Отключенный Checkbox

Иногда вы можете хотите показать checkbox, но не позволить пользователям взаимодействовать с ним. Для этого и предназначен атрибут disabled:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckDisabled" disabled>
<label class="form-check-label" for="flexCheckDisabled">
Отключенный checkbox
</label>
</div>

Radio: Чемпионы по выбору одного варианта

Основные Radio Buttons

Radio buttons как cousins checkbox'ов. Они выглядят похоже, но ведут себя по-разному. В то время как checkbox'ы позволяют несколько выборов, radio buttons обеспечивают выбор одного варианта в группе. Давайте создадим набор radio buttons:

<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Основной radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2">
Основной отмеченный radio
</label>
</div>

Обратите внимание, как оба radio button'а имеют одинаковый атрибут name? Это группирует их вместе, обеспечивая, что только один может быть выбран за раз.

Отключенный Radio Button

Как и в случае с checkbox'ами, мы можем отключить radio buttons:

<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
<label class="form-check-label" for="flexRadioDisabled">
Отключенный radio
</label>
</div>

Переключатели: Modern Toggle

Переключатели - это стильная альтернатива checkbox'ам. Они идеальны для включения/выключения настроек. Давайте создадим один:

<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Основной switch checkbox input</label>
</div>

Класс form-switch_transformирует наш checkbox в стильный toggle switch.

Варианты макета

По умолчанию (Stacked)

По умолчанию checkbox'ы и radio buttons располагаются вертикaльно:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="stackedCheck1">
<label class="form-check-label" for="stackedCheck1">Stacked checkbox 1</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="stackedCheck2">
<label class="form-check-label" for="stackedCheck2">Stacked checkbox 2</label>
</div>

В одну строку

Хотите, чтобы ваши варианты располагались рядом? Используйте класс form-check-inline:

<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>

Обратный порядок

Хотите, чтобы label был перед checkbox'ом? Используйте класс form-check-reverse:

<div class="form-check form-check-reverse">
<input class="form-check-input" type="checkbox" id="reverseCheck1">
<label class="form-check-label" for="reverseCheck1">Reverse checkbox</label>
</div>

Без label'ов

Иногда вы можете хотите checkbox или radio button без label'а:

<div>
<input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
</div>

Не забудьте использовать aria-label для доступности!

Кнопки Переключения

Кнопки Переключения - это изысканный способ использования checkbox'ов и radio buttons. Они выглядят как обычные кнопки, но действуют как checkbox'ы или radio buttons:

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Одиночный переключатель</label>

Рисованные стили

Хотите более сдержанный вид? Используйте стили с обводкой:

<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">Одиночный переключатель</label>

Заключение

Поздравления! Вы только что совершили грандиозное путешествие по checkbox'ам и radio buttons Bootstrap. Эти小小的 компоненты могут показаться простыми, но они являются строительными блоками интерактивных форм. Помните, что практика делает мастера. Попробуйте комбинировать эти элементы по-разному, чтобы создать увлекательные формы для ваших пользователей.

Вот quick reference table методов, которые мы рассмотрели:

Метод	Описание
Основной Checkbox	<input class="form-check-input" type="checkbox">
Отмеченный Checkbox	Добавьте атрибут checked
Неопределенный Checkbox	Установите с помощью JavaScript
Отключенный Checkbox	Добавьте атрибут disabled
Основной Radio	<input class="form-check-input" type="radio">
Отключенный Radio	Добавьте атрибут disabled
Переключатель	Используйте класс form-switch
В одну строку	Используйте класс form-check-inline
Обратный макет	Используйте класс form-check-reverse
Без label'ов	Пропустите label, используйте aria-label
Кнопки Переключения	Используйте класс btn-check
Рисованные стили	Используйте классы btn-outline-*

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

Credits: Image by storyset