Пустое значение в HTML select: без дополнительного option

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

Для начальной инициализации <select>-элемента без выделенного значения при загрузке страницы, воспользуйтесь следующим кодом JavaScript непосредственно после разметки <select>:

document.addEventListener('DOMContentLoaded', () => {
  let selector = document.querySelector('select');
  selector.selectedIndex = -1; // Технический хит: индекс выделения устанавливаем как "недопустимый"
});

Примените его ко следующей HTML-структуре <select>:

<select>
  <option>Опция 1</option>
  <option>Опция 2</option>
  <!-- Добавьте остальные варианты по своему усмотрению -->
</select>

Такой подход обеспечивает отсутствие выбора по умолчанию, создавая "чистую плоскость" для последующей работы пользователя.

Использование плейсхолдеров для оптимизации пользовательского опыта

Чтобы повысить удобность использования, вы можете использовать плейсхолдер. Добавьте атрибуты disabled, selected и value для создания стандартного невыбираемого сообщения:

<select>
  <option disabled selected value>-- Выбранная опция не установлена --</option>
  <option value="opt1">Опция 1</option>
  <option value="opt2">Опция 2</option>
</select>

Стилизация плейсхолдеров

Для обеспечения эстетической гармонии интерфейса скройте плейсхолдер сразу после его выбора пользователем. Для этого создайте и примените свой CSS-класс:

.valuable-select option:first-of-type {
  display: none; // Создаём эффект невидимости!
}

Добавьте этот класс к вашему <select>-элементу:

<select class="valuable-select">
  <option selected style="display:none;">Плейсхолдер</option>
  <!-- Ваши варианты в ожидании — добавляйте их сюда -->
</select>

Обеспечение доступности и соответствия HTML-стандартам

Постоянный контроль за доступностью и соответствием HTML-стандартам позволит привлечь большее число пользователей и поддерживать все браузеры:

<select>
  <option hidden disabled selected value> </option>
  <!-- Не допускайте ограничений: ваш выбор ожидает добавления здесь -->
</select>

Проверяйте правильность кодирования с помощью Validator Service от W3C, чтобы быть уверенными в соответствии вашего кода современным требованиям.

Без использования JavaScript: опираемся на возможности HTML

В условиях, где использование JavaScript невозможно, задать пустое значение по умолчанию всё равно можно с помощью атрибутов hidden и selected:

<select>
  <option hidden selected value=""></option>
  <!-- Желаете предложить больше? Добавляйте их сюда -->
</select>

Или, строго следуя HTML5, можно применить <option label=" "></option>, что обозначит пустой, но допустимый выбор.

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

Воспринимайте задание пустого значения по умолчанию в элементе выбора как стартовую линию на беговой дорожке:

Выберите бегуна:
[🎽] [🏃‍♀️] [🏃‍♂️]

Инициализуем HTML:

<select>
  <option value="" selected="selected">Выберите...</option>
  <option value="life">Бегите полной жизнью 🏃‍♀️</option>
  <option value="run">Просто продолжайте бежать 🏃‍♂️</option>
</select>

Готовы к старту!

 ПО УМОЛЧАНИЮ: ПОЗИЦИЯ ГОТОВНОСТИ:
[ Выберите... ]       [🎽] *Трасса свободна, готовность к старту*
[ 🏃‍♀️ ]         [🏃‍♀️] *Бегуны, к вашим стартовым позициям*
[ 🏃‍♂️ ]         [🏃‍♂️] *Старт!*

Воспринимайте пустой выбор как открытую дорожку, готовую к старту. Время исполнить HTML!

Продвинутое оформление форм для оптимального взаимодействия с пользователем

Когда в игру включается JavaScript

Для динамических форм, где допустимо использование JavaScript, установите плейсхолдер с помощью свойства selectedIndex:

// Примените этот код в скрипте после тега select или при событии загрузки окна
document.querySelector('.valuable-select').selectedIndex = -1; // Ожидаю случая? Я лишь плейсхолдер!

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

Формы будущего — искусство настоящего момента

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

<select>
  <option></option>
  <!-- Единство и чистота кода! -->
</select>

Остерегайтесь ловушек

Грамотно используйте различные сущности, например  , которые могут работать по-разному в разных браузерах. Они менее надёжны для создания необходимых пространств.

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

1. Элемент выбора HTML <select> – HTML: HyperText Markup Language | MDN — всеобъемлющее знакомство с элементом <select>.
2. Тег select в HTML – W3Schools — подробное руководство по использованию выпадающих списков.
3. Как установить пустое значение в качестве значения по умолчанию для элемента выбора HTML – Stack Overflow — полезный обмен знаниями по данной теме.
4. HTML-стандарт – Living Standard HTML — познайте все об HTML-формах у этого источника.
5. Как и почему использовать пользовательские данные и атрибуты HTML5 — SitePoint — вводная лекция о пользовательских атрибутах.
6. HTML – тег select – TutorialsPoint — подробное изучение элемента <select>.
7. WebAIM: Создание доступных форм – Доступные элементы форм — убедитесь, что ваша форма доступна всем пользователям, включая элемент выбора.