Неизвестное о формах - Вёрстка - Webmascon

| WEBMASCON - журнал для веб-мастеров обновление |12.09.2003

| Вёрстка

Начало
Темы
Архив
Daily
Персоналии
Форумы
Отзывы
О сайте

все статьи на тему Вёрстка

# Неизвестное о формах

© Copyright 2002 Михаил Дубаков © перевод, n|a распечатать

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

Отчасти прогресс в области самообразования сдерживался браузером Netscape 4. Кодеры смотрели на таблицу поддержки языка HTML браузером Netscape 4, сравнивали ее со спецификацией HTML 4.0, удрученно качали головами и откладывали вопрос изучения необычных свойств форм в долгий темный ящик своего новенького (или старенького) компьютерного стола. Но сейчас-то можно смело сдувать пыль с архивных документов, потому что браузер Netscape 4 мирно скончался. Нет, он конечно предпринимает попытки хоть на один лишний час удержаться в чартах, но решительные веб-разработчики уже не в силах терпеть его узких рамок и потрясающей нестабильности. Они устали от постоянных и в большинстве своем тщетных попыток искать окружные пути, чтобы старичок Netscape 4 не вешался при обработке сложной таблицы стилей. Короче, окончательные похороны уже не за горами, так что можно отбросить формальности и наконец-то заглянуть в спецификацию HTML 4.0, которую достаточно хорошо поддерживают браузеры MSIE 5+ и Netscape 6, но несколько хуже Opera 5+.

Откроем ее на разделе "Формы" и внимательно изучим, что там такого незнакомого и полезного. А вот и первые элементы!

### FIELDSET

Поддерживается браузерами: MSIE 4+, Netscape 6, Opera 5+.

Этот элемент позволяет группировать элементы форм. Данная группировка помогает пользователям проще ориентироваться в формах, то есть ему сразу становится понятно, что вот все эти элементы относятся именно к этой форме. Кроме того, можно эту группу еще и обозвать. Для этого используется элемент

### LEGEND

Поддерживается браузерами: MSIE 4+, Netscape 6.

Имеет атрибут ALIGN, который теоретически позволяет размещать название не только сверху, но он не работает ни в одном браузере.

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

А вот добрались и до примера. Ниже приведена форма, которая заключена в элемента FIELDSET и называется "Ваш комментарий".

`<FORM>
<FIELDSET STYLE="border: 2px solid #000; padding: 10px; width: 200px">
<LEGEND>Ваш комментарий</LEGEND>
<P>Вы можете разместить на сайте ваш комментарий, касающийся данной статьи</P>
<TABLE>
<TR><TD>Имя:</TD><TD><INPUT size=12></TD></TR>
<TR><TD>E-mail:</TD><TD><INPUT size=12></TD></TR>
<TR><TD>Страна:</TD><TD><SELECT>
<OPTION selected>Беларусь
</SELECT></TD></TR>
<TR><TD COLSPAN=2>Комментарий:<BR><TEXTAREA ROWS=4 COLS6></TEXTAREA></TD></TR>
<TR><TD COLSPAN=2><INPUT TYPE="submit" VALUE="отправить"></TD></TR>
</TABLE>
</FIELDSET>
</FORM>`

Ваш комментарий

Вы можете разместить на сайте ваш комментарий, касающийся данной статьи

Имя: |
E-mail: |
Страна: |
Комментарий: Nine

Как видите, форма заключена в достаточно оригинальную рамку с названием, которую очень сложно сделать средствами CSS без использования элементов FIELDSET и LEGEND. Конечно, пользоваться ими надо с умом, потому что далеко не всегда форме нужна подобная рамка.

А сейчас рассмотрим элемент, который вам уже должен быть знаком.

### BUTTON

Поддерживается браузерами: MSIE 5+, Netscape 6.

Данный элемент значительно расширяет функциональные возможности кнопок. Имеет атрибут TYPE, который может принимать значения submit, reset и button. Первые два значения и так ясно для чего, а вот третье предназначено для тех случаев, когда надо исполнять какой-нибудь скрипт. То есть на кнопку вешается событие OnСlick и вызывается нужная функция. Данный элемент не поддерживается браузером Operа 5+.

Самое интересное, что внутри элемента BUTTON можно с успехом размещать другие HTML-элементы, так что можно сделать кнопку с текстом и рисунком. Вот так:

`<BUTTON TYPE="button">
Кнопочка <IMG SRC=/i/css/news.gif WIDTH=30 HEIGHT=30 BORDER=0 ALT="кнопочка не функционирует">
</BUTTON>`

Можно вместо рисунка запихать вовнутрь что вашей душе угодно, хоть таблицу, если вам это необходимо.

`<BUTTON TYPE="button">
<TABLE BORDER=1 CELLSPACING=0 WIDTH=200>
<TR>
<TD>нажми на кнопку</TD>
<TD>получишь результат</TD>
</TR>
</TABLE>
</BUTTON>`

### OPTGROUP

Поддерживается браузерами: MSIE 6, Netscape 6.

Который позволяет группировать пункты в элементе SELECT. В этом случае добавляются отступы и названия каждой группы, так что пользователю при выборе необходимого пункта ориентироваться гораздо проще. Название группы задается в атрибуте LABEL элемента OPTGROUP. Кстати, этот элемент браузером Opera 5+ опять же не поддерживается, так что можно с полной уверенностью сказать, что по реализации поддержки форм Opera является худшим браузером. Вот пример использования группировки:

`<form>
<p>Справочники:</p>
<select name="ask">
<optgroup label="HTML">
<option label="3.2">HTML 3.2
<option label="4.0">HTML 4.0
</optgroup>
<optgroup label="CSS">
<option label="1">CSS-1
<option label="1">CSS-2
<option label="3">CSS-3
</optgroup>
<option value="js">JavaScript
<option value="dhtml">DHTML
</select></p>
</form>
`

А вот так будет выглядеть такой выпадающий список в браузере:

Справочники:

Более того, каждую группу с помощью CSS можно раскрасить в свой цвет! Делается это с использованием свойства background. Например, первую группу сделаем зеленой, а вторую желтой.

Справочники:

`<form>
<p>Справочники:</p>
<select name="ask">
<optgroup label="HTML" STYLE="background: #090">
<option label="3.2" STYLE="background: #090">HTML 3.2
<option label="4.0" STYLE="background: #090">HTML 4.0
</optgroup>
<optgroup label="CSS" STYLE="background: #FF0">
<option label="1" STYLE="background: #FF0">CSS-1
<option label="1" STYLE="background: #FF0">CSS-2
<option label="3" STYLE="background: #FF0">CSS-3
</optgroup>
<option value="js">JavaScript
<option value="dhtml">DHTML
</select></p>
</form>
`

Итак, кое-что полезное о формах вы, надеюсь, узнали. Плохо то, что браузер Opera 5+ не поддерживает большинство из упомянутых здесь элементов, так пользователи этого браузера всей неземной красоты форм оценить не смогут. Но это исключительно их проблемы.

Михаил Дубаков

Рекомендую

Михаил Дубаков
Веб-мастеринг средствами CSS
на http://www.ozon.ru/?context=detail&id=1099692&partner=webmascon
на http://www.books.ru/shop/books/27425?partner=webmascon
Почитайте Главу 5
Отзывы о книге

Начало | Темы | Архив | Daily | Персоналии | Форумы | Отзывы | О сайте

|  | Автор и администратор ресурса - Александр Качанов Webmascon Project открыт в 1999 году
© 1999-2002, переводы, Александр Качанов © 1999-2002, Webmascon © дизайн | matepuana.com |  |