Элементы формы в HTML: чекбокс, radio, select и другие поля ввода

Элемент формы в HTML — это тег, через который пользователь вводит или выбирает данные: текстовое поле, флажок, переключатель, выпадающий список или кнопка. Разберем каждый элемент по отдельности: чем checkbox отличается от radio, как работает select, зачем нужны атрибуты name, value и required, и как собрать из этих частей рабочую форму.

Чекбокс: множественный выбор

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

<label><input type="checkbox" name="skills" value="html"> HTML</label>
<label><input type="checkbox" name="skills" value="css"> CSS</label>
<label><input type="checkbox" name="skills" value="js" checked> JavaScript</label>

Если пользователь ничего не меняет, при отправке формы уйдет только skills=js (третий чекбокс отмечен атрибутом checked заранее). Если отметить все три, сервер получит три отдельных значения skills — по одному на каждый отмеченный чекбокс. Атрибут checked булев: достаточно самого его наличия в теге, значение checked="checked" или checked="" работает одинаково.

Оборачивать input тегом label стоит всегда: тогда клик по тексту рядом с квадратиком тоже переключает чекбокс, а не только клик точно по квадратику. Это увеличивает область клика и особенно важно на мобильном экране.

Radio: взаимоисключающий выбор

radio — переключатель, круглая область. В отличие от чекбокса, из группы радиокнопок с одинаковым name может быть отмечена только одна. Это ключевое различие: чекбокс — это «выбери любое количество», radio — это «выбери ровно один вариант».

<label><input type="radio" name="level" value="junior" checked> Junior</label>
<label><input type="radio" name="level" value="middle"> Middle</label>
<label><input type="radio" name="level" value="senior"> Senior</label>

Три радиокнопки объединены общим name="level" — именно совпадение имени делает их одной группой. Если поставить разные name у радиокнопок, браузер перестанет их взаимоисключать, и можно будет отметить сразу несколько — это частая ошибка при верстке форм. При отправке формы уйдет одна пара level=<value отмеченной кнопки>.

Таблица различий:

Атрибуты name, value и required

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

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

value — это значение, которое будет отправлено под этим name. У текстовых полей value — то, что ввел пользователь (или начальный текст, если задать value в разметке). У checkbox и radio value — это то, что уйдет на сервер, если элемент отмечен, а не факт отметки сам по себе.

required — булев атрибут, который не дает браузеру отправить форму, пока поле не заполнено (для текстовых полей) или не выбран хотя бы один вариант (для радиогруппы). Проверка встроенная, без JavaScript, но она клиентская: сервер обязан проверять данные повторно, потому что запрос можно отправить и в обход браузера.

<form action="/subscribe" method="post">
  <input type="email" name="email" required placeholder="you@example.com">
  <button type="submit">Подписаться</button>
</form>

Если оставить поле пустым и нажать кнопку, браузер покажет всплывающую подсказку и не отправит запрос — сработает required. Если убрать атрибут type="email" и оставить просто type="text", браузер перестанет проверять формат адреса, но проверка на непустое значение из required останется.

Select и option: выпадающий список

select — выпадающий список, option — вариант внутри него. По умолчанию select работает как radio: можно выбрать один пункт из списка.

<select name="country">
  <option value="">Выберите страну</option>
  <option value="ru">Россия</option>
  <option value="kz" selected>Казахстан</option>
  <option value="by">Беларусь</option>
</select>

Атрибут selected у option работает так же, как checked у радиокнопки — задает вариант по умолчанию. Пустой первый option со значением value="" — обычный прием, чтобы форма не отправляла случайную страну, если пользователь не открывал список: без него браузер по умолчанию выберет первый пункт списка сам.

Список с большим числом пунктов лучше не превращать в длинную простыню: если вариантов больше 10-15, читателю удобнее вводить текст с автодополнением или фильтром, чем листать select. Атрибут multiple у select включает выбор нескольких пунктов сразу (через Ctrl/Cmd + клик), но такой интерфейс менее очевиден для пользователя, чем группа чекбоксов, и на практике встречается реже.

Textarea: многострочный текст

textarea — поле для текста в несколько строк: отзыв, комментарий, сообщение в форме обратной связи. В отличие от input, у textarea нет атрибута value — начальный текст пишут между открывающим и закрывающим тегом.

<textarea name="message" rows="5" cols="40" placeholder="Ваш вопрос"></textarea>

rows задает видимую высоту в строках, cols — ширину в символах, но фактический размер на странице обычно переопределяют через CSS, а не через эти атрибуты. Большинство браузеров по умолчанию дает пользователю потянуть за уголок и изменить размер textarea вручную; это поведение можно отключить свойством CSS resize: none, если верстка не должна «плыть».

Button: типы кнопок

У button (и у input с type="submit"/type="button"/type="reset") атрибут type меняет поведение по клику:

Здесь скрыта частая ошибка верстки: если положить <button> внутрь <form> и не указать type, браузер по умолчанию считает ее submit. Кнопка «Отмена» или «Показать пароль» без явного type="button" неожиданно отправит форму вместо своего задуманного действия.

<form action="/order" method="post">
  <input type="text" name="promo">
  <button type="button" onclick="document.forms[0].promo.value=''">Очистить поле</button>
  <button type="submit">Оформить заказ</button>
</form>

Первая кнопка явно помечена type="button", поэтому клик по ней только очищает поле и не отправляет форму. Вторая кнопка без указанного type внутри form тоже сработала бы как submit, но явное указание делает поведение понятнее при чтении кода.

Как элементы формы попадают на сервер

При отправке формы (клик по кнопке с type="submit") браузер собирает пары name=value от всех полей, у которых есть name и которые применимы: у отмеченных чекбоксов и радиокнопок, у выбранного option, у введенного текста. Метод GET кладет эти пары в адресную строку после ?, метод POST — в тело запроса, скрыто от адресной строки. Для форм с паролями и другими чувствительными данными используют POST именно поэтому: GET-параметры остаются в истории браузера и логах сервера.

Выводы

• Чекбокс допускает несколько отмеченных вариантов в группе, radio — ровно один; группу radio объединяет одинаковый name.
• name определяет ключ отправки, value — что уйдет под этим ключом; без name поле не отправится вообще.
• required дает базовую проверку на стороне браузера, но не заменяет проверку на сервере.
• У select вариант по умолчанию задает selected, у чекбокса и radio — checked; пустой первый option защищает от случайной отправки.
• button без явного type внутри формы ведет себя как submit — для вспомогательных кнопок type нужно указывать явно.

Где применяется / связь с практикой

FAQ

Можно ли сделать чекбокс, который ведет себя как radio (выбор одного из нескольких)?
Визуально да, через CSS, но семантически для «выбери один вариант» правильнее использовать radio — это дает браузеру и вспомогательным технологиям (скринридерам) верное поведение без лишнего JavaScript.

Почему value не приходит на сервер, хотя чекбокс отмечен?
Чаще всего у input не задан атрибут name — без него браузер не отправляет пару name=value, даже если чекбокс отмечен и value указан.

Обязательно ли оборачивать input в label?
Нет, связь можно сделать через for у label и id у input без вложенности, но оборачивание проще в разметке и одинаково увеличивает область клика.