Переключатели и флажки

Когда пользователь должен выбрать один вариант из нескольких, мы используем переключатели: поля с type="radio". Переключатели работают группой: из всех переключателей с одинаковым name можно выбрать только один. Когда пользователь выбирает другой, предыдущий выбор пропадает. У каждого переключателя есть атрибут value, значение которого отправляется, когда выбран этот переключатель, например size=large.

Флажок (чекбокс) — поле с type="checkbox" — работает сам по себе: пользователь может поставить или снять каждый флажок независимо от остальных. Флажки нужны для вопросов «да или нет», например для согласия с условиями. Отмеченный флажок отправляется, например, как cheese=on, а неотмеченный не отправляется вовсе.

Подписи нужны и переключателям, и флажкам. Обычно мы пишем подпись после поля, чтобы текст был справа от кнопки. Щелчок по подписи тоже выбирает кнопку, и в маленькую кнопку проще попасть.

Так могла бы выглядеть часть заказа пиццы:

<div>
	<input type="radio" name="size" value="small" id="size-small">
	<label for="size-small">Маленькая</label>
	<input type="radio" name="size" value="large" id="size-large">
	<label for="size-large">Большая</label>
</div>
<div>
	<input type="checkbox" name="cheese" id="input-cheese">
	<label for="input-cheese">Двойной сыр</label>
</div>

Этот код выглядит так (попробуйте щёлкнуть по нему):