Флажок ввода HTML

HTML-элемент <input> с type="checkbox" создаёт переключаемый блок, позволяющий пользователю выбрать или отменить выбор варианта. Флажки обычно используются в формах, чтобы позволить пользователям выбрать несколько вариантов или согласиться с условиями.

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

В этом уроке мы изучим синтаксис, атрибуты, стили и практическое применение флажка ввода <input type="checkbox"> .

1. Базовый синтаксис

Основной синтаксис для ввода флажка:

Копировать<input type="checkbox" name="option1" value="Option1">

Здесь:

• type="checkbox" : Указывает, что входные данные представляют собой флажок.
• name : Группирует флажки для отправки данных формы.
• value : определяет значение, отправляемое на сервер, если установлен флажок.

2 Создание нескольких флажков

Чтобы создать список флажков, просто используйте несколько элементов <input type="checkbox"> :

Копировать<form>
  <label>
    <input type="checkbox" name="hobby" value="Reading"> Reading
  </label>
  

  <label>
    <input type="checkbox" name="hobby" value="Traveling"> Traveling
  </label>
  

  <label>
    <input type="checkbox" name="hobby" value="Cooking"> Cooking
  </label>
</form>

Когда пользователь выбирает несколько флажков, все их значения отправляются как часть данных формы под тем же name .

Видео

3. Предварительная установка флажка

Используйте атрибут checked для предварительного выбора флажка:

Копировать<input type="checkbox" name="subscribe" value="Yes" checked> Subscribe to newsletter

В этом примере флажок будет предварительно установлен при загрузке страницы.

4. Связывание меток с флажками

Для повышения удобства использования и доступности свяжите метку с каждым флажком с помощью элемента <label> :

Копировать<label for="accept">
  <input type="checkbox" id="accept" name="terms"> I accept the terms and conditions
</label>

Нажатие на метку переключит флажок, что улучшит пользовательский опыт.

Видео

5 флажков стилизации

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

5.1 Скрытие флажка по умолчанию

Копировать<style>
  .custom-checkbox {
    position: relative;
    cursor: pointer;
  }

  .custom-checkbox input {
    opacity: 0;
    position: absolute;
  }

  .custom-checkbox span {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #ccc;
    border-radius: 5px;
  }

  .custom-checkbox input:checked + span {
    background-color: #4CAF50;
  }
</style>

<label class="custom-checkbox">
  <input type="checkbox">
  <span></span> Custom Checkbox
</label>

Этот код скрывает флажок по умолчанию и заменяет его стилизованным элементом. Селектор :checked применяет стили к пользовательскому флажку при его выборе.

Видео

6 JavaScript и флажки

Используйте JavaScript для динамического взаимодействия с флажками. Например, вы можете проверить, установлен ли флажок:

Копировать<label for="confirm"><input type="checkbox" id="confirm" name="confirm"> Confirm</label>

<script>
  const checkbox = document.getElementById('confirm');
  checkbox.addEventListener('change',() => {
    if(checkbox.checked) {
      alert('Checkbox is checked!');
    } else {
      alert('Checkbox is unchecked!');
    }
  });
</script>

Этот скрипт отслеживает изменения флажка и выводит оповещение в зависимости от его состояния.

Видео

7 практических примеров использования флажков

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

8. Вопросы доступности флажков

Чтобы сделать флажки доступными:

• Всегда связывайте флажки с метками для поддержки программ чтения с экрана.
• Обеспечьте достаточный контраст между флажком и фоном.
• Используйте атрибуты ARIA, такие как aria-checked , для расширенных потребностей в доступности.

9 Заключение

HTML-элемент <input type="checkbox"> используется для создания переключаемых опций в веб-формах. Сочетая его с метками, стилями и JavaScript, вы можете создавать удобные и доступные интерфейсы.