Автор: Алексей Голубев

Сайт: http://www.frnet.narod.ru/

Наверняка у вас на сайте будет страница, на которой будут находиться формы, и хотелось бы сделать не просто формы, а красивые формы. Об этом и пойдет речь в этой статье. Начнем разбирать все по порядку.

1.Создание текстового поля.

Для тех, кто не знает: текстовое поле создается тегом <input type=text>.

И так, вы создали текстовое поле на web-странице. Для использования стилей для нег нам потребуется создать стилевой класс, можно назвать его: text. Кроме того, желательно задать его начальное, для просмотра используемого шрифта (оно задается атрибутом value). В итоге, вы должны получить примерно такой HTML-код:


Для поля доступны следующие стилевые свойства (возможно и некоторые другие, но я приведу список наиболее часто используемых): фон (цвет, картинка), шрифт (размер, тип, цвет, оформление), рамка, отступы, его размеры. Итак попробуем создать для него стиль:

Это следует поместить в разделе <style>. Теперь разберем каждую строчку:

Border:1px silver solid - задает тип рамки (толщина - 1 пиксель, цвет - серый, стиль - сплошная линия);
Font-family:verdana - задает тип шрифта (в данном случае Verdana);
Font-size:12px - размер шрифта (12 пикселей);
Padding-left:3px - отступ слева (3 пикселя);
Background-image:url("textbg.jpg") - фоновая картинка (берется из файла textbg.jpg);
Height:20px - понятно, что это высота (20 пикселей).

2.Оформление кнопки.

Кнопка задается тегом <input type=button value=Надпись на кнопке>. Система обсолютно такая же, как и в предыдущем пункте. Кроме использования стилей есть всем известный тег <button>, в котором записывается некое содержимое с оформление, картинки. Нельзя вставлять ссылки и элементы форм.

3.Создание выпадающих списков.

Для списков можно задавать только его размеры, тип и размер шрифта. А вот для его отдельных элементов можно задавать еще цвет фона и цвет шрифта. Вот пример такого списка:

Здесь color - цвет текста, а ,background-color - цвет фона. Через двоеточие записывается значения цветов.

4.Использование стилей для элементов Textarea.

Элемент <textarea> представляет собой большое текстовое поле. Для этого поля существуют такие же свойства, как и для обычного текстового поля. Плюс к этому, так как в него можно занести несколько строк, а его размеры ограничены, то появляется полоса прокрутки, для которой также существуют стилевые свойства. Вот они:


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