На главную | Отправить SMS | Сделать стартовой | Поставить закладку |
Разделы сайта

 Главная
 Новости
 Регистрация
 Region Free Keys
 Телефония
 Железо
 Software
 Секреты Windows
 Безопасность
 Web-дизайн
 Web-мастерам
 Фото-приколы
 Хостинги
 Раскрутка сайта
 Анекдоты
 Игромания
 Фотогалерея
 Разное
 Знакомства
 Мир техники
 Флейм
 Голосования
 Музыка
 Спорт
 Кино
 Авто
 Зал суда
 Программа TB
 Форум
 Авторам статей
 Реклама на сайте

Рассылка

Реклама



Web-дизайн

| Основы Web-технологий | Введение в Web-дизайн | Первая Web-страница | Графика web-дизайне | Специальные возможности HTML | Каскадные таблицы стилей | Полезные приемы в Web-дизайне | Обслуживание Web-сайта | Программирование на JavaScript и VBScript | Раскрутка сайта | Деньги и интернет | Партнерские программы | Web-софт | Поисковая оптимизация | Хостинг |

Использование стилей для форм - как сделать не просто формы, а красивые формы с применением стилей

Автор: Алексей Голубев
Сайт: 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

Рассылка сайта http://www.frnet.narod.ru:

Web-дизайн и web-программирование: статьи, скрипты



Содержание

Обсудить в форуме...>>>>

 

Каталог

Реклама


Rambler's Top100 Rambler's Top100

© 2002-2012, DIWAXX.RU. Дизайн Freeline Studio. Хостинг http://www.mtw.ru. Вопросы, пожелания, предложения: admin@diwaxx.ru