Атрибут class тега <input>
Описание
Атрибут class задаёт один или несколько классов CSS для элемента <input>, позволяя применять к нему стили и JavaScript-селекторы. Классы можно комбинировать и повторно использовать для разных элементов.
<!-- Поле с CSS-классами -->
<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username"
class="form-control input-lg">
Основные возможности:
| Применение | Пример | Описание |
|---|---|---|
| Стилизация | .error { border-color: red } |
Изменение внешнего вида |
| JavaScript-селекторы | document.querySelector('.validate') |
Поиск и манипуляции с элементами |
| Состояния | .active { background: #f5f5f5 } |
Отображение разных состояний |
| Библиотеки компонентов | class="btn btn-primary" |
Использование готовых стилей |
Пример с CSS-стилизацией:
<style>
.form-input {
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
.form-input:focus {
border-color: #4CAF50;
outline: none;
}
.input-error {
border-color: #f44336;
background-color: #ffebee;
}
</style>
<label for="email">Email:</label>
<input type="email" id="email" name="email"
class="form-input input-error">
Рекомендации:
- Используйте осмысленные имена классов (не
class="a1 b2") - Разделяйте слова дефисом:
form-control - Избегайте избыточных классов (BEM-методология помогает)
- Для модификаторов используйте префиксы:
btn-primary - Комбинируйте с другими атрибутами (id, name)
Пример с JavaScript:
<input type="text" id="search" name="q"
class="search-field" placeholder="Поиск...">
<script>
// Добавление класса при фокусе
const searchField = document.querySelector('.search-field');
searchField.addEventListener('focus', function() {
this.classList.add('focused');
});
// Удаление класса при потере фокуса
searchField.addEventListener('blur', function() {
this.classList.remove('focused');
});
</script>
Особенности именования:
<!-- Хорошие примеры именования -->
<input class="form-control">
<input class="btn btn-submit">
<input class="search-input search-input--large">
<!-- Плохие примеры -->
<input class="a b c">
<input class="style1">
<input class="bigRedButton">
Ограничения:
- Имена классов чувствительны к регистру
- Не должны начинаться с цифры
- Лучше избегать кириллических символов
- Максимальная длина имени класса зависит от браузера
Примечание: Атрибут class - это мощный инструмент для управления внешним видом и поведением элементов форм. В современных фреймворках (React, Vue) классы часто управляются через директивы или условные выражения, но принцип остаётся тем же.