Приднестровская поддержка XOOPS
Без применения каскадных таблиц стилей элементы формы будут отображены в соответствии с используемыми броузером и операционной системой настройками по умолчанию. Однако использование 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.
Рис. 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 | позволяет создать поля формы, соответствующей ожидаемым данным ширины (к примеру, для ввода инициалов достаточно короткого поля) |
Отправитель | Нити |
---|
9 пользователь(ей) активно (2 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 9 далее... |