Справочник HTML & CSS

autofocus

Ставит фокус на элемент сразу после загрузки страницы или открытия диалога.

Синтаксис

<input name="q" autofocus>

Примеры

Курсор сразу в поле поиска:

<form>
  <input type="search" name="q" placeholder="Search drinks" autofocus>
  <button>Find</button>
</form>

Фокус на кнопке внутри диалога:

<button onclick="ask.showModal()">Delete</button>
<dialog id="ask">
  <p>Delete the order?</p>
  <button onclick="ask.close()">Yes</button>
  <button onclick="ask.close()" autofocus>No</button>
</dialog>

Примечания

Используйте осторожно: автофокус прокручивает страницу к полю и на телефоне сразу открывает клавиатуру. Он уместен там, где поле — единственная цель страницы (поиск, вход). На странице должен быть только один такой элемент.

См. также

tabindex — Управляет тем, можно ли перейти к элементу клавишей Tab.
<input> — Поле ввода; вид поля задаёт атрибут `type`.
<dialog> — Диалоговое окно; модальное открывается методом `showModal()` и блокирует остальную страницу.

В учебнике

Формы — Как устроена форма в HTML — тег form, поле input, атрибут name, кнопка отправки, action и методы GET и POST.

Спасибо, что читаете!