Работа с формами 2: атрибуты autocomplete, autofocus, minlength/maxlength, pattern

Автозаполнение форм: атрибут autocomplete 🔄

Сколько раз вы заполняли одну и ту же форму на сайте? Атрибут autocomplete помогает браузеру запоминать введённые данные и подсказывать их при следующем заполнении. Работает как для полей ввода, так и для целых форм!

<input type="text" name="username" autocomplete="username">
<input type="email" name="email" autocomplete="email">

Два режима работы: - on — разрешает автозаполнение (значение по умолчанию) - off — полностью отключает подсказки

Совет: Используйте конкретные значения вроде tel, address-line1 или cc-name для точных подсказок. Полный список — в спецификации HTML5!

Автофокус: autofocus 🎯

Хотите, чтобы курсор сразу появлялся в нужном поле при загрузке страницы? Добавьте атрибут autofocus (не требует значения)!

<input type="text" name="search" autofocus placeholder="Начните вводить запрос...">

Важно: - Работает только с первым элементом на странице, где указан autofocus - Не злоупотребляйте — это может раздражать пользователей, особенно на мобильных устройствах

Контроль длины: minlength и maxlength 📏

Эти атрибуты — ваши лучшие друзья для валидации текстовых полей. Они ограничивают минимальное и максимальное количество символов.

<input type="text" name="nickname" minlength="3" maxlength="20" required>

Как это работает: - Браузер блокирует отправку формы, если условие не соблюдено - maxlength физически не даёт ввести больше символов - Для minlength требуется атрибут required, чтобы проверка сработала

Протестируйте: Попробуйте ввести 2 символа в поле выше и отправьте форму — увидите встроенное сообщение об ошибке!

Валидация по шаблону: pattern ✨

Когда стандартных проверок недостаточно, на помощь приходит pattern. Он позволяет задать регулярное выражение для проверки ввода.

<input type="text" name="promo-code" pattern="[A-Z]{3}-d{4}" title="Формат: XXX-1234">

Пример из жизни — проверка номера телефона:

<input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" title="Формат: 123-456-7890">

Советы: - Всегда добавляйте атрибут title с пояснением формата — он показывается в сообщении об ошибке - Тестируйте регулярки отдельно перед внедрением - Для сложных проверок лучше дублировать валидацию на сервере

Комбинируем атрибуты 💫

Настоящая магия начинается, когда вы сочетаете несколько атрибутов в одном поле:

<input type="password" 
       name="password"
       minlength="8"
       maxlength="30"
       pattern="(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
       title="Пароль должен содержать цифры, заглавные и строчные буквы"
       required>

Это поле требует: - Обязательного заполнения (required) - Длины от 8 до 30 символов - Наличия цифр, заглавных и строчных букв (регулярное выражение)

Практическое задание 🛠️

Создайте форму регистрации с такими полями:

1. Логин (только латинские буквы и цифры, 4-16 символов)
2. Пароль (минимум 8 символов, включая цифру и спецсимвол)
3. Email с автофокусом
4. Номер телефона в формате +7 (XXX) XXX-XX-XX

<!-- Пример решения -->
<form>
  <input type="text" name="login" pattern="[a-zA-Z0-9]{4,16}" required>
  <input type="password" name="password" minlength="8" pattern=".*[!@#$%^&*].*" required>
  <input type="email" name="email" autofocus required>
  <input type="tel" name="phone" pattern="+7 ([0-9]{3}) [0-9]{3}-[0-9]{2}-[0-9]{2}" required>
  <button type="submit">Отправить</button>
</form>

Проверьте себя: Попробуйте отправить форму с неверными данными и посмотрите, как браузер подсвечивает ошибки!