Как сделать чекбоксы и радиокнопки в HTML?

@tristian_upton 

В HTML чекбоксы и радиокнопки создаются с использованием элемента <input>, но с разными значениями атрибута type.

Чекбоксы

Чекбоксы позволяют пользователям выбирать несколько опций одновременно. Для создания чекбоксов используйте type="checkbox".

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<form>
  <label>
    <input type="checkbox" name="option1" value="value1">
    Опция 1
  </label>
  <br>
  <label>
    <input type="checkbox" name="option2" value="value2">
    Опция 2
  </label>
  <br>
  <label>
    <input type="checkbox" name="option3" value="value3">
    Опция 3
  </label>
</form>

Радиокнопки

Радиокнопки позволяют выбрать только одну опцию из группы. Для создания радиокнопок используйте type="radio". Чтобы объединить радиокнопки в группу, установите для них одинаковые значения атрибута name.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<form>
  <label>
    <input type="radio" name="group1" value="value1">
    Опция 1
  </label>
  <br>
  <label>
    <input type="radio" name="group1" value="value2">
    Опция 2
  </label>
  <br>
  <label>
    <input type="radio" name="group1" value="value3">
    Опция 3
  </label>
</form>

Дополнительные параметры

• Вы можете использовать атрибут checked, чтобы сделать checkbox или radiobutton выбранным по умолчанию.
• Можно стилизовать чекбоксы и радиокнопки с помощью CSS для улучшения их внешнего вида, но для этого может понадобиться использовать дополнительные div-элементы или псевдоэлементы.

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