Webmasterpro.com.ua - первый украинский сайт о поисковых системах. Оптимизация сайта в поисковиках, поисковая раскрутка. Хостинг

Реклама на сайте

WebmasterPro рекомендует:
Платная оптимизация
Создание сайтов
Обмен ссылками
 
Общение на WebmasterPro
Яндекс, Рамблер, Апорт
Google и другие
Общие вопросы поисковых систем
Продвижение сайта
Покритикуем Ваш сайт?
HTML, CSS, JavaScript
Вопросы хостинга
Хостинг
Платный хостинг
Бесплатный хостинг

Регистрация доменов

Статьи
Яндекс
Google
Все поисковые системы
Баннерная реклама
Общие вопросы рекламы
Реклама в интернет
Маркетинг в интернет
Website management
Email-маркетинг
Почтовые рассылки
Спам и борьба с ним
Разработка сайта
Веб-дизайн
Usability
Каскадные таблицы стилей
HTML
Базы данных
Таблицы
MySQL
CGI
xDSL
Партнерские программы
Электронная коммерция
Выбор хостинга
Доменные имена
Провайдеры
Сервера
А также
Каталог сайтов
Партнерские программы
Платный хостинг
Регистрация доменов
Платный хостинг


 Хотите, чтобы Ваш сайт покритиковали? - добро пожаловать на форум WebmasterPro!

Чем примечателен форум? Здесь Вы можете:
- обсудить вопросы продвижения сайта в поисковых системах: разделы Яндекс... и Google...;
- позволить другим покритиковать Ваш сайт - раздел критика сайтов;
- найти или предложить работу для вебмастера, а также обсудить потенциал бизнеса в интернет
- просто поговорить с хорошими людьми :-)

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

Дата публикации: 09/07/2003
Категория: HTML
Версия для печати

Автор - Михаил Дубаков

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



Статьи по теме:
  страницы: 1


WebmasterPro.com.ua - интернет-маркетинг и реклама. Поисковые системы. Хостинг, партнерские программы, разработка сайта

 

Новости, статьи и пресс-релизы присылайте на news@webmasterpro.com.ua 
При перепечатке материалов ссылка на WebmasterPro обязательна

Rambler's Top100

Rating@Mail.ru


Copyright © 1999-2003 webmaster@webmasterpro.com.ua
Система публикаций Sanitarium WebLoG