... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Оформление элементов форм при помощи CSS (стр.1)

 

 

Оформление элементов форм с CSS ||  Изменение стиля полосы прокрутки ||  Использование нескольких стилей
Создание ссылок-кнопок


Оформление элементов форм при помощи CSS

К элементам интерактивной формы, так же как и к любым другим элементам, можно применить свое собственное оформление, отличное от того, которое принимается по умолчанию в чистом HTML.

Для начала рассмотрим простую форму, и вспомним, как HTML-формы создаются. Ниже приводится HTML-код такой формы, где для выравнивания элементов используется таблица.

<FORM ACTION="register.pl>
<H1 ALIGN="center">Регистрационная форма</H1>
<TABLE ALIGN="center" CELLPADDING="0" CELLSPACING="0" BORDER="0">
<COL ALIGN="right"><COL ALIGN="left">
<TR>
<TD>Логин:</TD>
<TD><INPUT TYPE="text" NAME="login" SIZE="27"></TD>
</TR>
<TR>
<TD>Пароль:</TD>
<TD><INPUT TYPE="password" NAME="pass" SIZE="27"></TD>
</TR>
<TR>
<TD></TD>
<TD><INPUT TYPE="radio" NAME="addrtype" VALUE="home" CHECKED> домашний
<INPUT TYPE="radio" NAME="addrtype" VALUE="work"> рабочий </TD>
</TR>
<TR>
<TD>Адрес:</TD>
<TD><TEXTAREA COLS="20" ROWS="4" NAME="addr"x></TEXTAREA></TD>
</TR>
<TR>
<TD></TD>
<TD><INPUT TYPE="checkbox" NAME="rememberpass" VALUE="Запомнить пароль">3апомнить пароль</TD>
</TR>
<TR>
<TD C0LSPAN="2"><INPUT TYPE="submit" NAME="submit" VALUE="Регистрация">
<INPUT TYPE="reset" NAME="reset" VALUE="Очистить">
</TD>
</TR>
</TABLE> </FORM>

Основной открывающий тег таблицы следующий: <TABLE ALIGN="center" CELLPADDING="5" CELLSPACING="0" BORDER="0"> Здесь задается выравнивание всей таблицы (а не содержимого конкретных ячеек) по центру страницы. Кроме того, задаются нулевые расстояния между ячейками и отступы внутри ячеек по 5 пикселей. Также граница вокруг таблицы отключена. В таблице две колонки: содержимое первой колонки выравнивается по правому краю, содержимое второй - по левому. Чтобы задать выравнивание для всех ячеек в столбце, мы воспользовались элементом COL. Их у нас два - по количеству столбцов в таблице. Поэтому код в начале таблицы: <COL ALIGN="right"><COL ALlGN="left"> сообщает браузеру о том, что в таблице две колонки, содержимое которых должно быть выровнено указанным образом. Далее в ячейках таблицы располагается собственно содержимое формы. Все основные элементы этой формы представлены в таблице:

Элементы HTML-формы
Элемент HTML-код
Текстовое поле для ввода логина <INPUT TYPE="text" NAME="login" SIZE="27">
Текстовое поля для ввода пароля (вводимый текст будет отображаться символами "*") <INPUT TYPE="password" NAME="pass" SIZE="27">
Переключатель (радиокнопки) для выбора типа адреса <INPUT TYPE="radio" NAME="addrtype" VALUE="work">
Многострочное текстовое поле для ввода адреса <TEXTAREA COLS="20" ROWS="4" NAME="addr"> </TEXTAREA>
Флажок для выбора опции "запомнить пароль" <INPUT TYPE="checkbox" NAME="rememberpass" VALUE="Запомнить пароль">
Кнопка отправки содержимого формы <INPUT TYPE="submit" NAME="submit" VALUE="Регистрация">
Кнопка сброса введенных значений <INPUT TYPE="reset" NAME="reset" VALUE="Очистить">

Атрибут name присутствует у всех элементов формы и служит для идентификации этого элемента в программе-обработчике данных формы. Атрибут size задает размеры текстовых полей.

Вот мы и разобрались, что входит в состав нашей формы, а заодно вспомнили ключевые элементы форм. Теперь попробуем написать для этой странички таблицу стилей. Поместим ее внутрь тегов <STYLE> и </STYLE> секции HEAD, создав, таким образом, внутреннюю таблицу стилей.



Предупреждение! Прежде чем писать таблицу стилей, убедитесь, что директива !DOCTYPE вашего документа имеет полную форму, т.е. в ней указан URL. Это необходимо, чтобы браузер перешел в режим соответствия используемым стандартам, иначе могут возникнуть проблемы с отображением CSS-свойств.

 

Оформление элементов форм с CSS ||  Изменение стиля полосы прокрутки ||  Использование нескольких стилей
Создание ссылок-кнопок

 

Страница: - 1 - | - 2 - | - 3 - | - 4 - | - 5 -

 

Наверх страницы

 

Уроки CSS © 2007 - 2017 г. Все права защищены