Оглавление

Изменение вида элементов формы с помощью CSS

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

 

Решение
Стиль элемента формы, как и любого другого HTML-элемента, можно задать с помощью CSS.

 

Вид формы по умолчанию

Рис. 6.1. Вид формы по умолчанию в броузере Firefoxi

 

Изображенная на рис. 6.1 форма оформлена в соответствии с настройками по умолчанию, используемыми броузером Firefox под Windows XP. Ее вид будет изменяться при просмотре в различных броузерах под разными платформами. Ниже представлена типичная форма:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
  <title>Изменение вида элементов формы с помощью CSS</title>
  <meta http-equiv="content-type"
    content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="elements.css" />
</head>
<body>
  <form method="post" action="example1.html" id="form1">
    <div><label for="name">Как Вас зовут?</label><br/>
    <input type="text" name="name" id="name" /></div>
    <div><label for="color">Выберите свой любимый цвет:</label>
      <select name="color" id="color">
        <option value="blue">синий</option>
        <option value="red">красный</option>
        <option value="green">зеленый</option>
        <option value="yellow">желтый</option>
      </select>
    </div>
    <div><label for="sex">Пол?</label><br/>
      <input type="radio" name="sex" id="male" 
          value="male" />Мужской<br/>
      <input type="radio" name="sex" id="female" 
          value="female" />Женский

    </div>
    <div>
      <label for="comments">Комментарий:</label><br/>
      <textarea name="comments" id="comments" cols="30" 
          rows="4"></textarea>
    </div>
    <div>
      <input type="submit" name="btnSubmit" id="btnSubmit" 
          value="Отправить" />
    </div>
  </form>
</body>
</html>

 

Внешний вид этой формы можно изменить, написав правила стилей для элементов form, input, textarea и select:

form {
	border: 1px dotted #AAAAAA;
	padding: 0.5em;
}

form div {
	margin-bottom: 1em;
}

input {
	color: #00008B;
	background-color: #ADD8E6;
	border: 1px solid #00008B;
}

select {
	width: 100px;
	color: #00008B;
	background-color: #ADD8E6;
	border: 1px solid #00008B;
}

textarea {
	width: 200px;
	height: 40px;
	color: #00008B;
	background-color: #ADD8E6;
	border: 1px solid #00008B;
}


Теперь форма выглядит, как на рис. 6.2.

 

Та же форма после применения CSS-стилей

Рис. 6.2. Та же форма после применения CSS-стилей (DEMO)

 
Обсуждение
Как вы наверняка догадались, заданные правила стилей для HTML-элементов form, input, textarea и select будут применены по отношению к каждому их экземпляру, находящемуся на странице, с которой связан файл таблицы стилей. Для изменения оформления полей формы мож- но использовать множество различных свойств. С помощью CSS можно управлять практически всеми аспектами поля <input type=”text”>:

 

<input type="text" name="name" id="name" />

 

input {
color: #00008B;
background-color: #ADD8E6;
border: 1px solid #00008B;
font: 0.9em Arial, Helvetica, sans-serif;
padding: 0.2em;
width: 200px;
}

  
Совет
Формы и фоновый цвет. Часть посетителей вашего сайта могут плохо различать цвета, а часть, возможно, пользуется голосовым броузером. Поэтому цвета никогда не должны выполнять важных функций – к примеру, указания вроде «Желтые поля обязательны для заполнения» должны быть под полным запретом.

 

Рассмотрим значения свойств более подробно:

colorизменяет цвет текста, расположенного в поле
background-color 
определяет фоновый цвет поля
borderприменяется по отношению к рамке вокруг поля; может изменять различные параметры
fontизменяет размер и тип шрифта текста поля
paddingотодвигает вводимый в поле текст от краев окошка
widthпозволяет создать поля формы, соответствующей ожидаемым данным ширины (к примеру, для ввода инициалов достаточно короткого поля)
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити