Использование разных стилей для разных полей одной и той же формы
Элемент input может быть различных типов, и вам наверняка захочет- ся определить разные стили для кнопок и флажков. Как создать разные правила стилей для полей формы?
Решение
Чтобы задать стиль для различных полей, можно воспользоваться CSS- классами. Форма в следующем примере содержит два элемента input, один из которых является текстовым полем, а другой – кнопкой Submit. Каждому из них присвоен соответствующий класс:
chapter06/fields.html (фрагмент)
<form method=”post” action=”fields.html”>
<div>
<label for=”name”>What is your name?</label><br />
<input type=”text” name=”name” id=”name” class=”txt” />
</div>
<input type=”submit” name=”btnSubmit” id=”btnSubmit”
value=”Submit” class=”btn” />
</form>
chapter06/fields.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. Применение одинаковых стилей к обоим полям формы
Теперь кнопка Submit гораздо больше похожа на текстовое поле, чем на кнопку!
С помощью разных классов можно оформить каждый элемент по от- дельности, чтобы он отображался именно так, как задумано. В любом приложении формы, скорее всего, предназначаются для ввода различ- ных типов данных. Некоторые текстовые поля нужны для ввода всего лишь пары символов; некоторые – для ввода имени или короткого сло- ва, а другие – для ввода целых приложений. Их можно оформить путем создания CSS-классов для коротких, средних и длинных полей. Кро- ме того, это позволяет пользователям быть уверенными, что они вводят правильную информацию.
Избавление от переносов строки и потери места на странице 171
input[type=”text”] {
?
}
Для обращения к кнопке для подтверждения ввода данных можно было бы ис- пользовать следующий селектор:
input[type=”submit”] {
?
}
При этом пропадает необходимость в добавлении каких-либо дополнитель- ных классов в разметку. Следует учитывать, что Internet Explorer 6 не поддер- живает данный селектор, поэтому при его использовании формы могут выгля- деть странно или стать непригодными для использования. Если ваши посети- тели могут использовать данный броузер, придется применить метод классов.
Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.
Похожие посты:
- CSS: основы основ (0)
- Создание «резинового» макета: слева – меню, а справа – область с контентом (0)
- Создание макета с тремя колонками средствами CSS (0)
- Изменение стиля горизонтальной линии (0)
- Каким образом броузер определяет, какие стили нужно использовать (0)
- Удаление отступов по умолчанию для всех элементов страницы (0)
- Добавление комментария в файл с каскадной таблицей стилей (0)