GetInfo.Ru – Компьютерная библиотека
Последние поступления
Как выбрать систему управления базы данных
Базы данных03/09/14
Этапы загрузки UNIX (в схеме)
Unix27/03/12
Gatewall Antispam: тотальный контроль электронной почты
Спам21/04/11
Мастер-класс: создаем Интернет-магазин (Часть 1)
Обзоры ПО20/04/11
CorelDRAW Graphics Suite X5: Что нового?
Обзоры ПО20/07/10
Добавить статью
Самые читаемые материалы
Создание рамок(16036)
Особенности верстки веб-страниц(12733)
Правила грамотной верстки сайта(9568)
Как оформить таблицу?(9560)
Несколько слов о <META HTTP-EQUIV...>(8676)
Всего статей: 793Всего авторов: 364Подразделов: 47Добавлено за сутки: 0
Статьи  СТАТЬИ Форум  ФОРУМ Рейтинг  РЕЙТИНГ Поиск  ПОИСК Контакты  КОНТАКТЫ
» Главная » HTML » Неизвестное о формах

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


Михаил Дубаков
firefalcon@tut.by

Каждый 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:
Страна:
Комментарий:

Как видите, форма заключена в достаточно оригинальную рамку с названием, которую очень сложно сделать средствами 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=12 HEIGHT=12 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+ не поддерживает большинство из упомянутых здесь элементов, так пользователи этого браузера всей неземной красоты форм оценить не смогут. Но это исключительно их проблемы.

 
22.01.2004
Версия для печати Версия для печати Запомнить ссылку Запомнить ссылку
Ваша оценка:  1   2   3   4   5     

 О проектеПерепечаткаАвторамПартнерыО нас пишут
Наверх
©2003—2007. GETINFO.RU. ВСЕ ПРАВА ЗАЩИЩЕНЫ.