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

Описание

Атрибут minlength в теге <textarea> устанавливает минимальное количество символов, которое пользователь должен ввести перед отправкой формы. Это полезно для полей, где требуется содержательный ответ, а не пустое или слишком короткое сообщение.

Пример использования:
<form> <textarea minlength="10" required placeholder="Введите не менее 10 символов"></textarea> <button type="submit">Отправить</button> </form>

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

  • Работает только в сочетании с атрибутом required
  • Учитываются все символы, включая пробелы и переносы строк
  • Минимальное значение - 0 (по умолчанию, если атрибут не указан)
  • Браузер показывает сообщение об ошибке при попытке отправки

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

  • Используйте для важных полей, где нужен развёрнутый ответ
  • Сочетайте с maxlength для определения диапазона
  • Добавляйте подсказку о минимальной длине текста
  • Тестируйте поведение в разных браузерах

Пример с диапазоном длины:

<form> <textarea minlength="20" maxlength="500" required></textarea> <small>Требуется от 20 до 500 символов</small> <button type="submit">Отправить отзыв</button> </form>

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

  • Не поддерживается в Safari до версии 10.1
  • Не предотвращает ввод слишком короткого текста (только блокирует отправку)
  • Стандартные сообщения об ошибке нельзя стилизовать
  • Требует JavaScript для кастомной валидации

Сравнение с серверной валидацией:

Характеристика minlength Серверная проверка
Момент проверки До отправки формы После отправки
Надёжность Может быть обойдена Абсолютная
UX Мгновенная обратная связь Требует перезагрузки

Пример хорошей практики:

<form id="feedback-form"> <label> Ваш отзыв (минимум 30 символов): <textarea minlength="30" required aria-describedby="length-hint"></textarea> </label> <div id="length-hint" class="hint"> Пожалуйста, напишите развёрнутый отзыв </div> <button type="submit">Отправить</button> </form> <style> .hint { font-size: 0.8em; color: #666; } textarea:invalid { border-color: #ff6b6b; } </style>

Примечание: Для полной реализации валидации:

  • Всегда дублируйте проверки на сервере
  • Используйте JavaScript для кастомных сообщений об ошибках
  • Рассмотрите библиотеки валидации для сложных случаев