Приднестровская поддержка XOOPS
Элемент input может быть различных типов, и вам наверняка захочется определить разные стили для кнопок и флажков. Как создать разные правила стилей для полей формы?
Решение
Чтобы задать стиль для различных полей, можно воспользоваться CSS-классами. Форма в следующем примере содержит два элемента input, один из которых является текстовым полем, а другой – кнопкой Отправить. Каждому из них присвоен соответствующий класс:
HTML:
<form method="post" action="fields.html">
<div>
<label for="name">Как вас зовут?</label><br />
<input type="text" name="name" id="name" class="txt" />
</div>
<input type="submit" name="btnSubmit" id="btnSubmit"
value="Отправить" class="btn" />
</form>
CSS:
form {
border: 1px dotted #AAAAAA;
padding: 3px 6px 3px 6px;
}
input.txt {
color: #00008B;
background-color: #ADD8E6;
border: 1px inset #00008B;
width: 200px;
}
input.btn {
color: #00008B;
background-color: #ADD8E6;
border: 1px outset #00008B;
padding: 2px 4px 2px 4px;
}
На рис. 6.3 показан результат выполнения данного кода.
Рис. 6.3. Применение различных классов для каждого из элементов input
Обсуждение
Итак, элементы input могут быть различных типов, и для каждого из них нужно определить свой собственный стиль, чтобы они отображались соответствующим образом. В приведенном выше примере для применения различных стилей для элементов input типа text и типа submit использовались классы. Если бы мы определили один набор стилей для элемента input, то в результате получили бы следующее (задав ширину и параметры рамки для текстового поля):
input {
color: #00008B;
background-color: #ADD8E6;
border: 1px inset #00008B;
width: 200px;
}
После применения данного правила стиля форма будет выглядеть следующим образом:
Рис. 6.4. Применение одинаковых стилей к обоим полям формы
Теперь кнопка Отправить гораздо больше похожа на текстовое поле, чем на кнопку!
С помощью разных классов можно оформить каждый элемент по отдельности, чтобы он отображался именно так, как задумано. В любом приложении формы, скорее всего, предназначаются для ввода различных типов данных. Некоторые текстовые поля нужны для ввода всего лишь пары символов; некоторые – для ввода имени или короткого слова, а другие – для ввода целых приложений. Их можно оформить путем создания CSS-классов для коротких, средних и длинных полей. Кроме того, это позволяет пользователям быть уверенными, что они вводят правильную информацию.
input[type=”text”] {
...
}
Для обращения к кнопке для подтверждения ввода данных можно было бы использовать следующий селектор:
input[type=”submit”] { ... }
При этом пропадает необходимость в добавлении каких-либо дополнительных классов в разметку. Следует учитывать, что Internet Explorer 6 не поддерживает данный селектор, поэтому при его использовании формы могут выглядеть странно или стать непригодными для использования. Если ваши посетители могут использовать данный броузер, придется применить метод классов.
Отправитель | Нити |
---|
2 пользователь(ей) активно (2 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 2 далее... |