...

Изучив материалы, представленные на сайте CSS-Style.SU, Вы уверенно будете пользоваться всеми возможностями технологий каскадных таблиц стилей Cascading Style Shett

Поиск по сайту:

	Главная

	Синтаксис CSS

	Свойства CSS

	Форматирование блоков
	Списки

	Пример применения стилей

	Оптимизация стилей

	Оформление текстов

	Использование блоков

	Позиционирование

	Слои в CSS

	Готовые решения

	Дополнительные возможности CSS


	Программа TopStyle

	Таблица цветов

Все свойства CSS !important after background background-attachment background-color background-image background-position background-repeat before border border-bottom border-bottom-color border-bottom-style border-bottom-width border-collapse border-color border-left border-left-color border-left-style border-left-width border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-style border-top-width border-width bottom caption-side clear clip color content cursor display float font font-family font-size font-style font-variant font-weight height left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-width min-width opacity overflow padding padding-bottom padding-left padding-right padding-top position quotes right table-layout text-align text-decoration text-indent text-transform top vertical-align visibility white-space width word-spacing z-index



статьи 1 2 3 4

Оформление элементов форм при помощи 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-свойств.

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


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