Атрибут autofocus тега <select>

Описание

Атрибут autofocus позволяет автоматически установить фокус на элемент <select> при загрузке страницы. Это полезно для форм, где выбор из выпадающего списка является первым или основным действием.

Пример использования:
<select autofocus> <option value="">Выберите вариант</option> <option value="1">Первый вариант</option> <option value="2">Второй вариант</option> </select>

Особенности работы:

  • Работает только при первом загрузке страницы
  • На одной странице может быть только один элемент с autofocus
  • Если несколько элементов имеют атрибут, фокус получит последний в DOM
  • Может вызывать прокрутку страницы к элементу

Рекомендации:

  • Используйте для главного поля формы
  • Сочетайте с required для обязательных полей
  • Учитывайте UX - не применяйте, если это может раздражать пользователей
  • Тестируйте на мобильных устройствах

Ограничения:

  • Не работает, если элемент скрыт или отключен
  • Может мешать навигации с клавиатуры
  • Некоторые браузеры могут блокировать автофокус как навязчивое поведение
  • Не поддерживается в старых версиях IE

Пример с формой:

<form> <label for="country">Страна:</label> <select id="country" autofocus required> <option value="">-- Выберите страну --</option> <option value="ru">Россия</option> <option value="us">США</option> </select> <!-- Другие поля формы --> </form>

Альтернатива через JavaScript:

<select id="mySelect"> <option>Вариант 1</option> <option>Вариант 2</option> </select> <script> document.addEventListener('DOMContentLoaded', function() { document.getElementById('mySelect').focus(); }); </script>