Элемент 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”] {
...
}