Атрибут class тега <form>
Описание
Атрибут class позволяет задать один или несколько классов CSS для элемента <form>. Классы используются для стилизации формы и обращения к ней через JavaScript.
<form class="contact-form primary-form">
<!-- Поля формы -->
</form>
Основные возможности:
| Применение | Пример | Описание |
|---|---|---|
| Стилизация через CSS | .contact-form { margin: 20px; } |
Применение стилей ко всем формам класса |
| Выбор через JavaScript | document.querySelector('.primary-form') |
Доступ к форме для манипуляций |
| Комбинация классов | class="form dark-theme" |
Применение нескольких наборов стилей |
Синтаксис и правила:
- Классы разделяются пробелами
- Регистрозависимые (
form≠Form) - Могут содержать буквы, цифры, дефисы и подчеркивания
- Не должны начинаться с цифры
Пример стилизации формы:
<style>
.login-form {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
}
.dark-theme {
background: #333;
color: white;
}
</style>
<form class="login-form dark-theme">
<!-- Поля формы -->
</form>
Рекомендации по именованию:
- Используйте осмысленные имена (
contact-form) - Придерживайтесь единого стиля (kebab-case рекомендуется)
- Избегайте презентационных имен (
red-border) - Используйте префиксы для больших проектов (
app-login-form)
Особенности:
- Один элемент может иметь несколько классов
- Классы можно динамически добавлять/удалять через JavaScript
- Поддерживаются всеми браузерами без исключений
- Имеют меньший приоритет, чем ID, но выше, чем теги
Примечание: В отличие от id, классы предназначены для многократного использования на странице. Для форм особенно полезно создавать базовые классы стилей (.form, .form-inline), которые можно комбинировать с конкретными классами (.login-form).