Атрибут class тега <textarea>
Описание
Атрибут class в теге <textarea> позволяет назначать один или несколько CSS-классов для стилизации и управления текстовым полем через CSS и JavaScript. Это основной способ применения стилей и добавления функциональности к элементу.
<textarea class="form-control primary-textarea">
Текстовое поле с примененными классами
</textarea>
Особенности работы:
- Можно указать несколько классов через пробел
- Классы чувствительны к регистру
- Не влияют непосредственно на функциональность без CSS/JS
- Поддерживают все современные селекторы CSS
Рекомендации:
- Используйте осмысленные имена классов
- Придерживайтесь единого стиля именования (BEM, OOCSS)
- Разделяйте классы для стилей и для JavaScript
- Избегайте избыточного количества классов
Пример с BEM-нотацией:
<div class="form__group">
<label class="form__label">Описание:</label>
<textarea class="form__textarea form__textarea--large"></textarea>
</div>
<style>
.form__textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
}
.form__textarea--large {
min-height: 150px;
}
</style>
Ограничения:
- Избыточные классы усложняют поддержку
- Конфликты имен в больших проектах
- Специфичность CSS может создавать проблемы
- Зависимость от правильного написания имен
Пример разделения классов:
<!-- Классы для стилей -->
<textarea class="input-field styled-textarea"></textarea>
<!-- Класс для JavaScript -->
<textarea class="js-comment-field"></textarea>
<style>
.input-field {
border: 1px solid #ddd;
padding: 10px;
}
.styled-textarea {
background-color: #f9f9f9;
}
</style>
<script>
// Использование JS-класса
document.querySelector('.js-comment-field').addEventListener('focus', function() {
this.classList.add('input-field--focused');
});
</script>
Советы по именованию:
<!-- Плохая практика -->
<textarea class="bigRedTextBox right-aligned"></textarea>
<!-- Хорошая практика -->
<textarea class="comment-input comment-input--error"></textarea>
<style>
.comment-input {
width: 100%;
padding: 8px;
}
.comment-input--error {
border-color: #ff0000;
}
</style>
Примечание: Для сложных проектов рассмотрите:
- CSS-модули для изоляции стилей
- Препроцессоры (Sass, Less)
- CSS-in-JS решения
- Систему дизайн-токенов