Правильные значения атрибутов checked и selected в HTML

Быстрый ответ

В HTML логические атрибуты, вроде checked и selected, трактуются как истина, если они присутствуют. Для того чтобы атрибут оказался ложным, его достаточно просто не указывать.

Не отмеченный чекбокс:

<!-- Обычный чекбокс, ожидающий выбора -->
<input type="checkbox" name="option">

Не выбранный элемент:

<select>
  <option value="option1">Пункт 1</option>
</select>

То есть, отсутствие атрибута интерпретируется как ложь, а наличие – как истина. Не советую использовать значения "false" или "0".

Пустые и некорректные значения? Результат один и тот же!

Чекбокс по-прежнему будет отмечен, даже если атрибуту checked присвоено пустое или некорректное значение. HTML ориентируется на наличие атрибута checked, а не на его содержание.

<!-- Я выгляду как незаполненный, но, тем не менее, отмечен -->
<input type="checkbox" checked="">
<!-- Привычный чекбокс со вставленной галочкой, однозначно отмечен -->
<input type="checkbox" checked="checked">
<!-- Кажется, что я ложен, однако по HTML-правилам я отмечен! -->
<input type="checkbox" checked="false">
<!-- Отмечен без всякого сомнения -->
<input type="checkbox" checked="CHECKED">

Помните, что при работе с XHTML вам необходимо использовать checked="".

Интересные особенности браузеров

Инструменты разработки, такие как Firebug или Инструменты разработчика IE8, могут отображать checked по-разному, однако общий принцип остается неизменным — все чекбоксы с атрибутом checked будут отмечены. Браузеры отлично справляются с такими нюансами!

Смысл истины и лжи в HTML5

HTML5 утверждает, что наличие логического атрибута на элементе эквивалентно истине. checked и selected просто должны присутствовать, чтобы означать истину. В противном случае мы имеем дело с ложью. Главное здесь – простота и очевидность.

Визуализация

Анналогично можно рассматривать атрибуты checked и selected в HTML как переключатель света:

Положения переключателя света:

[ВКЛ] = "checked" или "selected"  // Свет истины!
[ВЫКЛ] = без атрибута             // Тьма лжи.

💡🔼: Свет включен – атрибут в наличии. Истина торжествует!
💡🔽: Свет выключен – атрибут отсутствует. Мир охвачен ложью.

Включив свет, вы обозначаете истину. Никакой метки "true" не требуется. Погасив свет, вы остаетесь в тьме лжи. И здесь метка "false" не нужна.

Экспресс-курс по действию логических атрибутов

Поведение чекбоксов

Во всех современных браузерах чекбокс будет отмечен, если он имеет атрибут checked, не зависимо от значения:

<!-- Отмеченные чекбоксы. Для всех и каждого! -->
<input type="checkbox" checked="checked">
<input type="checkbox" checked="">
<input type="checkbox" checked="CHECKED">
<input type="checkbox" checked="true">
<input type="checkbox" checked="false">

Подробнее об этом расскажет наш спикер на видео

Особенности выпадающих списков

У элемента select опция будет считаться выбранным, если имеет атрибут selected. Значение этого атрибута в данном случае не имеет значения:

<!-- Ария выбора: и избран будет... -->
<select>
  <option value="1">Не выбран</option>
  <option value="2" selected>Выбран</option>
</select>

Правила валидности HTML5

Для соответствия требованиям HTML5 атрибут должен быть либо пустой строкой, либо соответствовать ASCII-имени атрибута. Однако, HTML не является строгим и считает чекбоксы отмеченными, а опции выбранными, даже если их значения некорректны.

Профессиональные рекомендации для разработчиков

Понимание этих тонкостей помогает писать поистине предсказуемый код. Забегая немного вперед, можно дать несколько советов:

• Не применяйте атрибуты checked или selected, если элементы не должны быть отмечены или выбраны.
• Ориентируйтесь на надежность и стабильность работы в разных браузерах. Отказывайтесь от значений "false" и аккуратно удалите ненужный атрибут.
• Будьте предельно внимательны при манипуляции с DOM — изменение значения атрибута может не отразиться на его текущем состоянии.

Полезные материалы

1. <input>: Элемент ввода (Form Input) – HTML: HyperText Markup Language | MDN – MDN всегда поможет в вопросах взаимодействия с HTML-элементами <input>.
2. HTML Стандарт — официальная спецификация HTML для элементов формы описывает полный и точный процесс их работы.
3. HTML Стандарт — детальное изучение поведения атрибута checked в HTML.
4. HTML Элементы Форм — сайт W3Schools представляет собой учебник с практическими примерами.
5. "Чекбокс-хак" (и что с ним можно сделать) | CSS-Tricks — экспериментирование с чекбоксами в CSS: изучайте и получайте удовольствие.
6. <option>: Элемент HTML Option – HTML: HyperText Markup Language | MDN — обзор MDN на HTML <option> и использование атрибута selected.
7. HTML тег select — справочник W3Schools с готовыми примерами для лучшего понимания и применения.