Нестандартный вид текстовых полей
Изображения и фоновые рисунки позволяют легко изменить вид текстовых полей и кнопок для отправки формы на сервер. Как обычно, вначале требуется нарисовать желаемые элементы в графическом редакторе (рис. 7.25), а затем сделать отдельные изображения для каждого поля.
Рис. 7.25. Форма с нестандартными элементами
Начнём с однострочного текстового поля. Размеры картинки получились 328х46 пикселов, эти значения укажем в качестве ширины и высоты. Саму картинку ставим фоном с помощью свойства background. Изначально у текстового поля отображается рамка, чтобы она не портила вид её необходимо спрятать, задав свойство border со значением none (пример 7.18).
Пример 7.18. Текстовое поле XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<!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">
<head>
<title>Текстовое поле</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css">
.user {
width: 308px; /* Ширина поля с учетом padding */ height: 46px; /* Высота */
background: #dad7c5 url(images/input.png) no-repeat; /* Фон */ padding: 0 10px; /* Поля */
border: none; /* Убираем рамку */ font-size: 1em; /* Размер текста */
}line-height: 46px; /* Выравниваем по центру в IE */
</style>
</head>
<body>
<form action="">
<p><input type="text" class="user" value="Имя" /></p>
</form>
</body>
</html>
Наше поле по высоте получается довольно большим по сравнению с полем по умолчанию, из-за этого возникают проблемы с выравниванием текста по центру в IE. Он будет выводиться по верхнему краю поля, что выглядит довольно небрежно. Для выравнивания используем свойство line-height со значением равным высоте поле заданным через height. На остальные браузеры это дополнение не окажет влияния, поэтому условными комментариями можно пренебречь.
Для многострочного текстового поля установка фона происходит аналогично. Но есть небольшое отличие — с правой стороны имеются кляксы, если мы вставим картинку фоном для <textarea>, то
при появлении вертикальной полосы прокрутки она будет выводиться прямо по кляксам. При этом теряется эффект рамки. Поэтому фон добавим для блочного элемента, а <textarea> выведем уже в
нём (пример 7.19).
Сюда же вставим и рисованную кнопку для отправки файла. Это делается через <input type="image">, в атрибуте src указываем путь к файлу, остальное браузер берет на себя.
Пример 7.19. Поле для ввода текста |
|
|
|
|
|
|
|
|
|
|
|||
XHTML 1.0 |
|
CSS 2.1 |
|
IE 7 |
IE 8 |
IE 9 |
Cr 8 |
Op 11 |
Sa 5 |
Fx 3.6 |
|||
<!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"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
<head> |
|
|
|
|
|
|
|
|
|
|
|
|
|
<title>Текстовое поле</title> |
|
|
|
|
|
|
|
|
|
/> |
|
|
|
<meta |
http-equiv="Content-Type" content="text/html; charset=utf-8" |
|
|
||||||||||
<style |
type="text/css"> |
|
|
|
|
|
|
|
|
|
|
|
|
.comment { |
|
|
|
|
|
|
|
|
|
|
|
|
|
width: 347px; /* Ширина рисунка */ |
|
|
|
|
|
|
|
|
|
|
|
|
|
height: 176px; /* Высота рисунка */ |
|
|
|
|
|
|
|
|
|
|
|
|
|
}background: #dad7c5 url(images/textarea.png) no-repeat; /* Фон */ |
|||||||||||||
.comment textarea { |
|
|
|
|
|
|
|
|
|
|
|
|
|
border: none; /* Убираем рамку */ |
|
|
|
|
|
|
|
|
|
|
|
|
|
background: transparent; /* Прозрачный фон */ |
|
|
|
||||||||||
margin: 3px; /* Отступы от линии */ |
|
|
|
|
|
|
|
|
|
|
|
|
|
width: 318px; /* Ширина поля */ |
|
|
|
|
|
|
|
|
|
|
|
|
|
padding: 5px 0 5px 5px; /* Поля в тексте */ |
|
|
|
||||||||||
}height: 160px; /* Высота */ |
|
|
|
|
|
|
|
|
|
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
|
|
|
|
</head> |
|
|
|
|
|
|
|
|
|
|
|
|
|
<body> |
|
|
|
|
|
|
|
|
|
|
|
|
|
<form action=""> |
|
|
|
|
|
|
|
|
|
|
|
|
|
<div |
class="comment"><textarea cols="10" rows="10"></textarea></div> |
||||||||||||
<p><input type="image" src="images/send.png" /></p> |
|
|
|
||||||||||
</form> |
|
|
|
|
|
|
|
|
|
|
|
|
|
</body> |
|
|
|
|
|
|
|
|
|
|
|
|
|
</html> |
|
|
|
|
|
|
|
|
|
|
|
|
|
По умолчанию текстовое поле имеет белый цвет фона, что нам совершенно не требуется, поэтому в свойствах задаём его прозрачным через значение transparent.
Браузеры несколько по-разному выводят полосу прокрутки, но эти изменения не настолько существенны, чтобы придавать им значение. К примеру, вид формы в Opera показан на рис. 7.26.
Рис. 7.26. Поле для ввода текста
Выравнивание элементов форм
Выравнивая элементы форм по невидимой линии, мы тем самым зрительно связываем их друг с другом, показывая связь между ними. Подобное логическое объединение придаёт дизайну сайта профессиональный и законченный вид, а читателю позволяет легче ориентироваться в документе и быстрее находить нужную информацию.
Для начала рассмотрим форму, в которой текстовое поле, пароль и кнопка располагаются на одной линии (пример 7.20).
Пример 7.20. Форма в одну строку XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Форма авторизации</title>
<style type="text/css"> INPUT {
color: #fff; /* Цвет текста */ background: #000; /* Цвет фона */
border: 2px solid #ccc; /* Параметры рамки */
padding: 2px; /* Поля */ margin: 0; /* Убираем отступы */ }height: 19px; /* Высота */
INPUT[type="submit"] {
}height: 27px; /* Высота кнопки */
</style>
</head>
<body>
<form action="handler.php">
<p>Вход на сайт: <input name="user" type="text" /> <input name="pass" type="password" />
<input type="submit" value="Войти" /></p>
</form>
</body>
</html>
Результат несколько различается в разных браузерах. В IE8 и Firefox происходит сдвиг кнопки на один пиксел вниз (рис. 7.27).
Рис. 7.27. Некорректное отображение кнопки
Чтобы избавиться от этой особенности, следует в стилях для кнопки установить выравнивание по нижнему краю:
vertical-align: bottom;
В IE7 этот фокус не проходит, поэтому для него требуется через условные комментарии указать значение baseline.
<!--[if IE 7]>
<style type="text/css"> INPUT[type="submit"] { }vertical-align: baseline;
</style> <![endif]-->
Более распространённый вариант расположения элементов форм показан на рис. 7.28. Названия полей расположены слева, а сами поля справа от текста.
Рис. 7.28. Форма комментариев
Выравнивание делается с помощью свойства float и по своему принципу напоминает создание двухколоночного макета. В качестве тега, к которому добавляется свойство float, возьмём <label>. Этот тег устанавливает связь между текстом и элементом формы, связь происходит через атрибут for, в качестве значения указывается идентификатор нужного поля. Например, для текстового поля:
<label for="user">Имя</label> <input id="user" type="text" />
При щелчке по «Имя» текстовое поле с id="user" получит фокус. Благодаря этому мы не только придадим форме нужный дизайн, но и сделаем её удобной для пользователя (пример 7.21).
Пример 7.21. Форма комментария XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Комментарии</title>
<style type="text/css"> #comment LABEL {
width: 110px; /* Ширина текста */
float: left; /* Выстраиваем по горизонтали */ text-align: right; /* Текст по правому краю */
}padding-right: 10px; /* Поле справа */
#comment INPUT[type="text"], #comment TEXTAREA { }width: 320px; /* Ширина текстовых полей */
</style>
</head>
<body>
<form action="handler.php" id="comment"> <p><label for="user">Имя</label> <input id="user" type="text" /></p>
<p><label for="email">E-mail</label><input id="email" type="text" /></p> <p><label for="text">Комментарий</label>
<textarea cols="40" rows="10" id="text"></textarea></p> <p><label> </label><input type="submit" id="send"
value="Отправить" /></p>
</form>
</body>
</html>