Урок 46 із 104
44%
← Назад

Автофокус для елементів форм в HTML

Вивчаємо атрибут autofocus, який автоматично встановлює фокус на елемент форми після відкриття сторінки.

Автофокус для елементів форм в HTML

Атрибут autofocus дозволяє автоматично встановити курсор у потрібне поле форми одразу після завантаження сторінки.

  • autofocus використовується для input, textarea та інших елементів форми.
  • На одній сторінці бажано використовувати тільки один autofocus.
  • Користувач може одразу почати вводити дані без додаткового натискання на поле.

Приклад без autofocus

<input>

<input>

<input>

Встановлення фокуса на другий input

Щоб після відкриття сторінки курсор одразу знаходився у другому полі, потрібно додати атрибут autofocus саме цьому input.

<input>

<input autofocus>

<input>
❗ Важливо:

autofocus зручно використовувати у формах пошуку, авторизації та реєстрації, де користувач одразу повинен вводити дані.

Практичне завдання

📌 Завдання:
  1. №1. Є три input без атрибутів.
  2. №2. Додайте autofocus другому полю.
  3. №3. Перевірте результат після перезавантаження сторінки.
<!-- Початковий код -->

<input>

<input>

<input>
💡 Показати підказку

autofocus потрібно додати тільки до того елемента, який повинен отримати фокус першим.

✅ Показати відповідь
<input>

<input autofocus>

<input>