Атрибут required тега <textarea>
Описание
Атрибут required в теге <textarea> указывает, что поле должно быть заполнено перед отправкой формы. Браузер автоматически проверяет наличие значения и предотвращает отправку пустого поля.
<form>
<textarea required placeholder="Это поле обязательно для заполнения"></textarea>
<button type="submit">Отправить</button>
</form>
Особенности работы:
- Браузер показывает сообщение об ошибке при попытке отправки
- Пробелы и переносы строк считаются валидным вводом
- Работает только внутри тега
<form> - Может сочетаться с другими атрибутами валидации
Рекомендации:
- Используйте для критически важных полей формы
- Сочетайте с
placeholderдля подсказки - Добавляйте визуальные индикаторы обязательности
- Дублируйте проверку на сервере
Пример с визуальным обозначением:
<style>
.required-field::after {
content: " *";
color: red;
}
textarea:required {
border-left: 3px solid #007bff;
}
</style>
<form>
<label class="required-field">Ваше сообщение:</label>
<textarea required></textarea>
</form>
Ограничения:
- Не заменяет серверную валидацию
- Стандартные сообщения об ошибке нельзя кастомизировать
- Не работает при отправке формы через JavaScript
- В старых браузерах требуется полифил
Пример с пользовательской валидацией:
<form id="custom-valid-form">
<textarea required minlength="10"
oninvalid="this.setCustomValidity('Поле должно содержать минимум 10 символов')"
oninput="this.setCustomValidity('')">
</textarea>
<button type="submit">Отправить</button>
</form>
Советы по доступности:
<form>
<label for="feedback">
Отзыв о продукте
<span class="sr-only">(обязательное поле)</span>
</label>
<textarea id="feedback" required
aria-required="true"
aria-describedby="feedback-hint">
</textarea>
<div id="feedback-hint" class="hint">Это поле обязательно для заполнения</div>
</form>
<style>
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.hint {
font-size: 0.8em;
color: #666;
}
</style>
Примечание: Для улучшения UX рассмотрите:
- JavaScript-валидацию с кастомными сообщениями
- Динамическую подсветку обязательных полей
- Предварительную проверку при потере фокуса