Оглавление

Изменение вида элементов формы с помощью 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позволяет создать поля формы, соответствующей ожидаемым данным ширины (к примеру, для ввода инициалов достаточно короткого поля)
<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити