Оглавление

Использование разных стилей для разных полей одной и той же формы

Элемент 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-классов для коротких, средних и длинных полей. Кроме того, это позволяет пользователям быть уверенными, что они вводят правильную информацию.

 

 

Совет
Стили: задайте сразу, применяйте часто. Начиная работу над сайтом, содержащим большое количество форм, я практически сразу создаю в таблице стилей несколько классов для стандартных форм. Неважно, что в дальнейшем может потребоваться изменить их стиль – для этого достаточно будет всего лишь поменять значения свойств. Главное, что стили применяются с самого начала, и потому любые изменения будут относиться ко всем имеющимся на сайте формам.

 

Совет
Использование селекторов атрибутов для обращения к различным элементам форм. Вместо классов для обращения к различным элементам форм можно использовать селекторы атрибутов. Мы уже познакомились с ними в разделе «Выделение ссылок, ведущих на внешний сайт» главы 4. Для адресации текстового поля в приведенном выше примере можно было бы воспользоваться следующим селектором:
input[type=”text”] {
...
}

Для обращения к кнопке для подтверждения ввода данных можно было бы использовать следующий селектор:

input[type=”submit”] {
...
}

При этом пропадает необходимость в добавлении каких-либо дополнительных классов в разметку. Следует учитывать, что Internet Explorer 6 не поддерживает данный селектор, поэтому при его использовании формы могут выглядеть странно или стать непригодными для использования. Если ваши посетители могут использовать данный броузер, придется применить метод классов.

Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити