Автор: Алексей Голубев
![]()
Сайт: http://www.frnet.narod.ru/
![]()
Наверняка
у вас на сайте будет страница, на которой будут находиться формы, и хотелось бы сделать не просто формы, а красивые формы. Об этом и пойдет речь в этой статье. Начнем разбирать все по порядку.
![]()
1.Создание текстового поля.
![]()
Для тех, кто не знает: текстовое поле создается тегом <input type=text>.
![]()
И так, вы создали текстовое поле
на web-странице. Для использования стилей для нег нам потребуется создать стилевой класс, можно назвать его: text. Кроме того, желательно задать его начальное, для просмотра используемого шрифта (оно задается
атрибутом value). В итоге, вы должны получить примерно такой HTML-код:
![]()
<input type=text value="Текстовое поле" class=text> ![]()
Для поля доступны следующие стилевые свойства (возможно и некоторые другие, но я приведу список наиболее часто используемых): фон (цвет, картинка), шрифт (размер, тип, цвет, оформление), рамка, отступы,
его размеры. Итак попробуем создать для него стиль:
![]()
.text
{
border:1px silver solid;
font-family:verdana;
font-size:12px;
padding-left:3px;
background-image:url("textbg.jpg");
height:20px;
} ![]()
Это следует поместить в разделе <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.Создание выпадающих
списков.
![]()
Для списков можно задавать только его размеры, тип и размер шрифта. А вот для его отдельных элементов можно задавать еще цвет фона и цвет шрифта. Вот пример такого
списка:
![]()
<select>
<option>Обычный список</option>
<option style="color:white; background-color:black;">Черный цвет</option>
<option
style="color:yellow; background-color:blue;">Синий цвет</option>
<option style="color:white; background-color:red;">Красный цвет</option>
<option style="color:white; background-color:green;">Зеленый
цвет</option>
</select>![]()
Здесь color - цвет текста, а ,background-color - цвет фона. Через двоеточие записывается значения цветов.
![]()
4.Использование стилей для элементов Textarea.
![]()
Элемент <textarea> представляет собой большое текстовое поле. Для этого поля существуют такие же свойства, как и для
обычного текстового поля. Плюс к этому, так как в него можно занести несколько строк, а его размеры ограничены, то появляется полоса прокрутки, для которой также существуют стилевые свойства. Вот они:
![]()
scrollbar-3dlight-color: #3183ae;
scrollbar-arrow-color: #3183ae;
scrollbar-base-color: #f8fcff;
scrollbar-darkshadow-color: #3183ae;
scrollbar-face-color: #f8fcff;
scrollbar-highlight-color: #71d3fe;
scrollbar-shadow-color: #71d3fe;
scrollbar-track-color: #f8fcff; ![]()
Объяснять каждую сроку смысла нет, так как это очень сложно,
лучше просто изменять цвета, и просматривать что получилось. Кроме описанных элементов существуют еще некоторые элементы, такие как: флажки, радиокнопки и другие. Для них доступны только изменения размеров.
![]()
P.S. Вы можете cкачать этот пример со страницы: http://www.frnet.narod.ru/script.html.
Или задать вопрос автору и ведущему раздела
alexey-golubev@mail.ru
Обсудить в форуме...>>>>
