Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте

Приветствую вас, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня в рамках рубрики Html для чайников мы продолжим разговор о Htmlформах, которые являются неотъемлемой частью любого сайта. В предыдущей статье, посвященной Html формам (Form, Input, Button, Checked, Value, Checkbox, Radio, Checkbox, Submit),мы подробно рассмотрели принцип построения Html форм и разобрали в деталях все элементы Html формы, которые можно создать с помощью тега Input.

В предыдущих статьях рубрики мы успели познакомиться с тем, что такое язык Html и тэги, как правильно оформлять Doctype, как учитываются в Html коде пробелы и спецсимволы (мнемоники). Еще чуть раньше мы узнали как прописываются цвета в Html коде, как создаются списки (ul, ol, li, dl) и делаются таблицы (Tr, Th, Td, Table). Сегодня мы продолжим рассматривать создание элементов Html форм и, в частности, узнаем, как создаются поля со списками (тэги Select и Option), поля для ввода многострочного текста (тег Textarea), как можно осуществлять группирование элементов вебформы (Html тэги Fieldset и Legend) и узнаем для чего можно использовать Html тег Label.

Select, Option, Textarea, Label, Fieldset, Legend — зачем вообще нужны Html формы

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

Причем, все элементы Html форм (вроде Select, Option, Textarea, Label, Fieldset, Legend) представляют собой уже законченные заготовки (контейнеры), для вставки которых достаточно будет лишь использовать нужный Html тег с нужными атрибутами и параметрами. Браузеры сами знают, как отображать тот или иной элемент вебформы. Правда, варианты отображения Html кода одного и того же элемента веб формы в разных браузерах могут немного отличаться друг от друга, но, как правило, не существенно.

Т.о. получается, что вебформы в Html являются попыткой перенести ключевые элементы, используемые в любой операционной системе, на страницы веб-сайта. Но для чего могут понадобиться элементы Html форм на страницах сайта (Select, Option, Textarea, Label, Fieldset, Legend и др.)?

В принципе, для того же, для чего аналогичные элементы используются в операционных системах — передача данных от пользователя. В случае вебформ данные от пользователя передаются на сервер, где обрабатываются специальной программой (язык гипертекстовой разметки, к сожалению, не позволяет формам вести обработку данных).

Хотя, данные можно отправить из вебформы не только на сервер, но и, например, по электронной почте на адрес, заданные в атрибуте Action Html тэга Form. При отправке из Html данных веб формы на E-mail у пользователя, заполняющего поля, после нажатия им на кнопку отправки данных Html формы, запустится почтовая программа, используемая на его компьютере по умолчанию. Открывающий Html тег Form в такой веб форме должен выглядеть примерно так:

<form action="mailto:qwertydmitriy@gmail.com" enctype="text/plain">

Select и Option — Html тэги выпадающих списков

Все элементы вебформы, которые создают поля с выпадающими списками, формируются одинаковым образом. Сначала задается контейнер поля со списком с помощью открывающего и закрывающего Html тега Select. А затем, внутри этого контейнера, создаются отдельные контейнеры с пунктами (элементами) этого выпадающего списка. Это делается с помощью открывающих и закрывающих Html тэгов Option. Получается вебформа с такими элементами:

<select>
 <option>Label</option>
 <option>Select</option>
 <option>SelectED</option>
 <option>KtoNaNovenkogo.ru</option>
</select>

Но это упрощенная конструкция, т.к. у Html тегов Select и Option имеется ряд атрибутов, которые определяют свойства и внешний вид Html формы создаваемого поля с выпадающим списком.

Html формы с выпадающими списками можно разделить на два варианта. В первом варианте вебформы, вы сможете выбрать только один элемент (строку) поля с выпадающим списком, во втором варианте вебформы — удерживая Ctrl или Shift вы сможете выбрать одновременно несколько из имеющихся пунктов.

При этом, во втором варианте, из вебформы будут отправлены на сервер данные о всех выбранных пунктах. Какой именно выпадающий список в вебформе будет создан, определяется наличием или отсутствием в Html тэге Select атрибута Multiple.

Атрибут Multiple указывается в теге Select без параметра, т.к. пишется просто Multiple и все. Если атрибут Multiple присутствует, то будет создана Html форма выпадающего списка с возможностью множественного выбора (удерживая Ctrl или Shift).

Вариант Html формы поля с выпадающим списком, в котором будет возможен множественный выбор, будет выглядеть примерно так:

<select multiple>
 <option>Label</option>
 <option>Select</option>
 <option>SelectED</option>
 <option>KtoNaNovenkogo.ru</option>
 <option>Legend</option>
</select>

Справа приведен пример вебформы выпадающего списка со множественным выбором, который создан на основе кода, приведенного выше. Как вы видите, удерживая Ctrl или Shift, можно выделить несколько пунктов одновременно.

Если в Html тэге Select атрибута Multiple не будет, то выбрать можно будет только один элемент этого выпадающего списка (строку).

<select>
 <option>Label</option>
 <option>Select</option>
 <option>SelectED</option>
 <option>KtoNaNovenkogo.ru</option>
 <option>Legend</option>
</select>

Пример, выпадающего списка, созданного на основе этого Html кода, и в котором можно выбрать только один пункт, вы можете видеть здесь:

Html тег Select — создание выпадающего списка

1. Name — вы должны задать уникальное имя для данного элемента вебформы, создаваемого с помощью тэга Select. Это имя будет передано на сервер в программу обработчик данных из вебформы в качестве имени для переменной. В качестве значения этой переменной будет передано значение атрибута Value (задается в Option для каждого пункта) того пункта выпадающего списка, который выберет в веб форме пользователь.
2. Size — с помощью этого атрибута можно задать в вебформе количество отображаемых пунктов. Иначе говоря, с помощь атрибута Size можно задать в веб форме высоту списка, измеряемую в количестве отображаемых строк. Если вы не указываете в явном виде значение атрибута Size в теге Select, то будет использоваться значение высоты выпадающего списка по умолчанию. Что примечательно, высота выпадающего списка в веб форме, используемая по умолчанию (при отсутствии атрибута Size в тэге Select), будет разной в случае отсутствия или присутствия в Select атрибута Multiple:
   1. Если атрибут Multiple в Select присутствует, то высота выпадающего списка в вебформе будет по умолчанию равна количеству его элементов. Т.е. будут показаны все элементы выпадающего списка в вебформе с множественным выбором. См. пример множественного выше. Если атрибут Size в Select задать меньше количества пунктов, то справа появится полоса прокрутки.
   2. Если атрибут Multiple в Select отсутствует, то высота выпадающего списка в вебформе будет по умолчанию равна одной строке. Т.е. видна будет только одна строка, а остальные пункты будут доступны только при нажатии на кнопку лифта (справа). См. пример приведенный выше
3. Multiple — приписывание данного атрибута в теге Select позволит вам создать выпадающеий список с возможность одновременного выбора нескольких пунктов. Подробнее об этом атрибуте читайте выше.

Атрибуты Html тэга Option

1. SelectED — этот атрибут определяет, какой пункт выпадаюещего списка будет выделен. Т.е. будет отображаться с одним видимым пунктом. В случае же выпадаюшего списка с множественным выбором (если в Select присутствует атрибут Multiple) можно будет с помощью указания атрибута SelectED в Html теге Option, выделить сразу несколько пунктов.
2. Value — на сервер из вебформы поля выпадающего списка будет отправлена пара значений — имя для переменной и значение этой переменной. Так вот, имя для переменной берется из атрибута Name тэга Select, а значение этой переменной будет взято из этого атрибута Value тега Option, но только того пункта (или пунктов, в случае множественного выбором), который выбрал пользователь, перед тем, как нажать кнопку отправки данных из вебформы.

<select name="spisok">
 <option value="joom">Select</option>
 <option value="wp">Label</option>
 <option value="smf">SelectED</option>
 <option value="knn" selected>KtoNaNovenkogo.ru</option>
 <option value="seo">Legend</option>
</select>

Select
Label
SelectED
KtoNaNovenkogo.ru
Legend

В создаваемый выпадающий список (с помощью тэгов Select и Option) можно добавить что-то вроде разделителей с заголовком групп, которые будут отличаться от остальных пунктов меню по начертанию шрифта. Для создания группы из пунктов выпадающего списка нужно заключить их в открывающий и закрывающий Html теги формы Optgroup, а в открывающем тэге Optgroup прописать атрибут Label, в качестве параметра которого, нужно будет ввести желаемое название группы. Например так:

<select name="spisok">
 <optgroup label="Первая группа">
 <option value="joom">Label</option>
 <option value="wp">Select</option>
 </optgroup>
 <optgroup label="Вторая группа">
 <option value="smf">SelectED</option>
 <option value="knn" selected>KtoNaNovenkogo.ru</option>
 <option value="seo">Legend</option>
</optgroup>
</select>

Textarea — cоздание текстового поля в форме

Остался еще один элемент вебформ, который мы не рассмотрели — Textarea (поле с возможностью ввода многострочного текста). Создается это поле с помощью парного Html тега формы Textarea. Причем, в этом поле вебформы можно переносить текст на новую строку и текст будет передаваться на сервер с учетом сделанных переносов.

Итак, для создания многострочного текстового поля в вебформе нужно прописать открывающий и закрывающий тэги Textarea, а между ними вы можете добавить текст, который будет виден при загрузке страницы с вебформой. Пользователь сможет стереть этот текст и написать свой.

<form>
     <textarea rows="3" cols="15" name="textt">Что вы можете сообщить о себе?</textarea>
  </form>

Вместе с Html тегом Textarea можно использовать следующие атрибуты:

1. Name — с помощью этого атрибута в Textarea вы задаете имя для элемента вебформы. Это имя будет передано на сервер в программу обработчика данных
2. Cols — с помощью этого Html атрибута в Textarea вы можете задать в веб форме ширину создаваемого многострочного поля. Ширина поля задается в символах.
3. Rows — с помощью этого атрибута вы можете задать в Textarea высоту создаваемого многострочного поля. Ширина поля задается в строках. Если строк у текста, вводимого пользователем, окажется больше, чем высота многострочного поля для текста (задается атрибутом Rows в Textarea), то справа от поля в вебформе появится полоса прокрутки.
4. Readonly — если вы добавите к текстовому полю в Textarea этот атрибут Readonly, то вы тем самым запретите пользователям изменение или добавление своего текста в это поле. Создаваемое текстовое поле в Textarea будет только для чтения.
5. Disabled — если вы добавите в Textarea этот атрибут, то в этом случае пользователь так же, как в случае с атрибутом Readonly, не сможет изменить содержимое текстового поля в вебформе. Но к тому же, многострочное текстовое поле в создаваемой Html форме изменит свой цвет на серый, обозначающий его неактивность.

Неактивное многострочное текстовое поле Textarea(атрибут Disabled)

Многострочное текстовое поле Textarea только для чтения (атрибут Readonly)

Label — для чего нужен этот Html тэг в форме

Html тег Label позволяет реализовать одну очень интересную возможность в вебформах, которая имеется в операционных системах. Там, если вы помните, для того чтобы активировать какой-либо элемент не обязательно щелкать именно по этому элементу, можно щелкнуть и по названию этого элемента — все равно произойдет активация данного элемента (это делает Label в Html).

В вебформах по умолчанию этого не происходит — нужно щелкать именно по самому элементу Html формы для его активации. Например, нужно щелкать по флажку, для того чтобы поставить в нем галочку. Щелчок же в вебформе по тексту рядом с флажком результата не принесет. Попробуйте сами:

Как вы можете убедиться, по тексту рядом с элементом вебформы щелкать для активации этого элемента бесполезно. Нужно щелкать именно по самому элементу. Вот именно такое положение вещей и призван исправить Html тэг формы Label. Label позволить сделать текст рядом с элементом веб формы кликабельным, что несомненно улучшит юзабилити.

Но как связать элемент Html формы и текст? Для этого нужно дописать в тег элемента формы атрибут ID с уникальным параметром, а текст нужно окружить открывающим и закрывающим тэгами Label. И это еще не все. В открывающем теге Label нужно прописать атрибут For, параметр которого должен быть точно таким же, как и у атрибута ID в Html теге элемента формы. Получается примерно так при использовании Label:

<form><input type="checkbox" id="joml" value="yes" name="ktonanovenkogoru3">
     <label for="joml">Label</label><br>
      <input type="checkbox" id="word" value="yes" name="ktonanovenkogoru4" checked>
      <label for="word">Select</label><br>
      <input type="checkbox" id="forum" value="yes" name="ktonanovenkogoru5">
     <label for="forum">SelectED</label></form>

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

Fieldset и Legend — разбиваем форму на части

Вы, наверное, часто видели, что большие Html формы бывают разбиты на группы (Fieldset), которые обведены в рамочку и у каждой такой группы имеется свой заголовок (Legend). Реализуется это с помощью всего двух Html тегов: Fieldset и Legend. Fieldset и Legend парные тэги, т.е. у Fieldset и Legend должны быть в обязательном порядке открывающий и закрывающий теги.

Так вот, для создания группы из составных частей веб формы в Html, вам нужно заключить все эти части формы в открывающий и закрывающий Html тэги Fieldset. А для того, чтобы задать для данной группы заголовок (Legend), вам нужно сразу же после открывающего Html тега Fieldset прописать конструкцию из открывающего и закрывающего тегов Legend, между которыми вам нужно будет вставить текст заголовка группы элементов веб формы.

Вот пример создания групп из элементов веб формы в Html с помощью тэгов Fieldset и Legend:

 <form>
   <fieldset>
     <legend style="font-weight: bold">Какие теги вы предпочитаете?</legend>
     <input type="checkbox" value="j">Label<br>
     <input type="checkbox" value="w">Select<br>

	 <input type="checkbox" value="d">SelectED<br>
     <input type="checkbox" value="s">Legend<br>
     <input type="checkbox" value="v"> Textarea<br>
     <input type="checkbox" value="no">Fieldset<br>
   </fieldset>
   <fieldset>

   <textarea rows="10" cols="40" readonly name="chten">Напишите немного о себе</textarea>
     </fieldset>
	 <fieldset>
     <legend style="font-weight: bold">Вам нравится блог KtoNaNovenkogo.ru?</legend>
      <input type="radio" value="w" name="ktonanovenkogoru" checked>
      Да<br>
      <input type="radio" value="s" name="ktonanovenkogoru">
      Нет
	    </fieldset>
  </form>

Можете также посмотреть видео «Формы HTML»:

У Евгения Попова имеется видекурс по PHP+MySQL, который стоит того, чтобы с ним ознакомиться.

Можете посмотреть бесплатные видеоуроки по Html и CSS, а так же можете ознакомиться с другими статьями:

• Учебник Html
  • Что такое язык Html, валидатор W3C и Html тэги
  • Doctype и комментарии в html
  • Спецсимволы (мнемоники) в Html, символ неразрывного пробела
  • Коды цвета в Html и CSS коде (RGB палитра)
  • Как в Html код вставить картинку и html ссылку
  • Img и обтекание картинки текстом
  • Гиперссылки (a, target blank, href, якоря)
  • Html список (UL, OL, DL и LI)
  • Html таблица (Tr, Th, Td, Table)
  • Html формы - теги Form и Input
• Справочник CSS для начинающих
  • CSS - что это такое
  • CSS селекторы
  • Font (Weight, Family, Size, Style)
  • Background в CSS (color, position, image, repeat, attachment)
  • Padding, margin и border
  • Height, width и overflow
  • Float и clear в CSS
  • Position (absolute, relative и fixed)
• Блочная Div верстка сайта в Html и CSS

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru