Атрибут minlength тега <input>

Описание

Атрибут minlength устанавливает минимальное количество символов, которое пользователь должен ввести в текстовое поле перед отправкой формы. Применяется к типам: text, search, url, tel, email, password и textarea.

Пример использования:
<!-- Поле с минимальной длиной --> <label for="username">Логин (мин. 4 символа):</label> <input type="text" id="username" name="username" minlength="4" required> <!-- Поле пароля --> <label for="password">Пароль (мин. 8 символов):</label> <input type="password" id="password" name="password" minlength="8" required>

Поддерживаемые типы input:

Тип Рекомендуемый minlength Применение
text 2-4 символа Имена, логины
password 8-12 символов Пароли
email 6 символов Email-адреса
tel 5 символов Телефонные номера
textarea 10-20 символов Комментарии, сообщения

Пример с индикатором валидации:

<style> input:valid { border-color: green; } input:invalid { border-color: red; } </style> <label for="promo">Промокод (ровно 6 символов):</label> <input type="text" id="promo" name="promo" minlength="6" maxlength="6" required pattern="[A-Z0-9]{6}" title="6 заглавных букв или цифр">

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

  • Используйте вместе с required для обязательных полей
  • Для паролей сочетайте с pattern для сложности
  • Предусмотрите подсказку о минимальной длине (title или placeholder)
  • Всегда дублируйте проверку на сервере

Ограничения и особенности:

  • Не работает в Safari до версии 10.1
  • Пробелы учитываются как символы
  • Не предотвращает ввод, только блокирует отправку формы
  • Для сложных проверок (например, минимум 2 слова) нужен JavaScript

Пример с динамической проверкой:

<label for="bio">О себе (мин. 50 символов):</label> <textarea id="bio" name="bio" minlength="50"></textarea> <div id="bio-error" style="color:red; display:none">Введите не менее 50 символов</div> <script> document.getElementById('bio').addEventListener('input', function() { const error = document.getElementById('bio-error'); error.style.display = this.value.length < 50 && this.value.length > 0 ? 'block' : 'none'; }); </script>

Примечание: Атрибут minlength обеспечивает базовую клиентскую валидацию длины ввода, но для лучшего UX рекомендуется добавлять визуальные подсказки о текущем количестве символов и требованиях к полю.