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

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

Рассылка


Подписаться на рассылку
"Все о WEB-дизайне"

Content.Mail.Ru

Реклама



Error. Page cannot be displayed. Please contact your service provider for more details. (31)




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