HTML: Чекбокс
В интернет-магазинах часто поиск реализуется с помощью указания категорий, в которых хотим искать товар, указания характеристик, которые нам подходят. Для реализации множественного выбора существуют чекбоксы (или как их ещё называют — флажки).
Чекбоксы позволяют выбирать множество элементов из представленных (например, в анкете):
Для создания чекбокса используются два тега:
input
с указаниемtype="checkbox"
;label
, в котором будет текст, связанный с нужным нам чекбоксом.
Для создания связи label
с input
тоже существует два способа:
- Связь по
id
. Для этого необходимо задать уникальныйid
дляinput
и связатьlabel
с чекбоксом с помощью атрибутаfor
.
<form>
<input id="html" type="checkbox">
<label for="html">Хочу изучать HTML</label>
</form>
- Вложить
input
внутрь тегаlabel
. При этом указание уникальногоid
не требуется.
<form>
<label>
<input type="checkbox">
Хочу изучать HTML
</label>
</form>
Для того, чтобы после отправки формы на сервер возможно было узнать, какие именно пункты были выбраны, используется атрибут value
, внутри которого находится значение, позволяющее определить чекбокс. Так как чекбоксов на странице может быть много, и они могут относиться к разным формам, для определения конкретной группы чекбоксов используется атрибут name
. Для каждой группы чекбоксов указывается своё имя, по которому, в дальнейшем возможно будет отделить группы чекбоксов при обработке на сервере.
<form>
<label>
<input type="checkbox" name="languages" value="HTML">
Хочу изучать HTML
</label>
<br>
<label>
<input type="checkbox" name="languages" value="CSS">
Хочу изучать CSS
</label>
<br>
<label>
<input type="checkbox" name="languages" value="JS">
Хочу изучать JS
</label>
</form>
Задание
Создайте форму, у которой файл с обработчиком данных лежит по адресу /people
. Внутри формы создайте 2 чекбокса. Свяжите их вложив input
внутри label
. Не забудьте добавить атрибуты name
и value