Кроме привычного текстового поля, у форм есть ещё три способа собрать выбор пользователя: <select> со списком <option>, растягивающееся многострочное поле <textarea>, и переключатели checkbox/radio - причём именно у radio есть неочевидный механизм взаимного исключения.
В этом уроке
Кликни по radio "Зелёный" - "Красный" сам снимет отметку, потому что у обоих одинаковый name="color".
Выпадающий список в HTML: select и option
Тег <select> собирает список вариантов из <option> в выпадающий список. Если ни у одного <option> нет атрибута selected, браузер не оставляет поле пустым - он автоматически выбирает ПЕРВЫЙ option в списке, даже если по смыслу нужен был другой.
<select><option>Русский</option><option selected>English</option></select> - явно указано, какой вариант должен быть выбран по умолчанию.
<select><option>Русский</option><option>English</option></select> - selected нет ни у одного option: браузер по умолчанию выберет "Русский" просто потому, что он первый, а не потому, что так задумано.
Многострочное поле в HTML: textarea
В отличие от input, у <textarea> нет атрибута value для начального текста - вместо этого начальный текст пишут прямо между открывающим и закрывающим тегом, как обычное содержимое элемента. Это позволяет многострочному тексту оставаться многострочным, не втискиваясь в одну строку атрибута.
<textarea>Текст по умолчанию</textarea> - начальный текст записан как содержимое тега.
<textarea value="Текст по умолчанию"></textarea> - атрибут value у textarea не работает, поле окажется просто пустым.
Флажки и переключатели в HTML: checkbox и radio
И checkbox, и radio - переключатели, но ведут себя по-разному. Каждый checkbox независим: можно отметить сколько угодно галочек сразу. А radio становятся взаимоисключающими только тогда, когда у них ОДИНАКОВЫЙ атрибут name - не id, не визуальное соседство на странице, а именно совпадающий name. Отдельно стоит помнить: атрибут checked в HTML задаёт только состояние ПРИ ЗАГРУЗКЕ страницы - если пользователь потом кликнул и снял отметку, сам атрибут в разметке не изменится, актуальное состояние живёт в свойстве элемента, а не в HTML-коде.
<input type="radio" name="plan"> Базовый <input type="radio" name="plan"> Про - одинаковый name делает варианты взаимоисключающими.
<input type="radio" name="plan1"> Базовый <input type="radio" name="plan2"> Про - разный name: можно отметить оба варианта одновременно, взаимного исключения не будет.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Не указывать selected ни у одного option, ожидая пустое поле | Браузер автоматически выбирает первый option в списке | Явно указывать selected у нужного варианта по умолчанию |
| Пытаться задать начальный текст textarea через атрибут value | У textarea нет такого атрибута - поле окажется пустым | Писать начальный текст между тегами <textarea> и </textarea> |
| Давать разным radio из одной группы разный или отсутствующий name | Взаимного исключения не будет - можно отметить сразу несколько вариантов | Давать всем radio одной группы совпадающий name |
Шпаргалка
| Термин | Значение |
|---|---|
| select + option | Выпадающий список; без selected браузер выбирает первый option |
| textarea | Начальный текст - содержимое тега, не атрибут value |
| checkbox | Независимый переключатель - можно отметить сколько угодно |
| radio + name | Взаимоисключающая группа - работает только при одинаковом name |
Коротко: отвечаем на вопросы
Что делает набор radio-кнопок взаимоисключающим?
Одинаковый атрибут name у всех radio в группе - не id, и не то, что они стоят рядом на странице. Как только name совпадает, выбор одной радиокнопки автоматически снимает отметку с остальных в этой же группе.
Что произойдёт, если ни у одного option в select нет selected?
Поле не останется пустым - браузер автоматически выберет первый option в списке. Это поведение задано самой спецификацией, а не случайность конкретного браузера.
В чём разница между checked-атрибутом в HTML и текущим состоянием чекбокса?
Атрибут checked в HTML-коде задаёт только состояние при загрузке страницы. Если пользователь потом кликнул и изменил отметку, сам атрибут в разметке не обновляется - актуальное состояние хранится отдельно, в свойстве элемента, а не в HTML-коде.
