Html формы: выпадающие списки (теги select и option), создание текстового поля (тег textarea), применение тегов label, fieldset и legend

Доброго здоровья всем моим читателям! Продолжаем постигать премудрости создания html форм для сайта и сегодня нашей задачей будет разобраться, как создавать html формы в виде выпадающего списка при помощи тегов select и option, как сконструировать текстовое поле посредством тега textarea, а также поговорим о возможности расширения функциональности форм путем применения тегов fieldset, label и legend.

В предыдущих публикациях мы знакомились со структурой документа html,  тегами для создания форм form, input и с тегом button для создания кнопок на сайте. Теперь продолжим и разберемся, как же эффективно использовать вышеназванные теги для образования необходимых форм. Эта информация крайне необходима, поскольку даже при использовании всех современных инструментов, например, Firebug, а также его встроенных аналогов в других популярных браузерах, вы должны четко представлять механизм использования основных тегов, тогда редактирование кода html, необходимость которого возникает время от времени, превратится в приятное занятие.

Какое же практическое предназначение разнообразных форм? А нужны они для того, чтобы отправлять те или иные данные от пользователя на сервер (например, при установке формы обратной связи для сайта WordPress). К сожалению, средства языка гипертекстовой разметки не позволяют напрямую обрабатывать эти данные, поэтому с помощью html кода мы создаем лишь внешний вид формы, а данные отправляются на сервер обработчику, в качестве которого выступает специально созданный для этого файл php (например, при установке формы обратной связи был создан файл mail.php, который и является обработчиком), обычно выполненный в виде скрипта.

Выпадающий список - теги select и option

Тег select предназначен для создания выпадающего списка. Каждый элемент этого списка создается с помощью тега option, он должен быть вложен в контейнер, определяющийся тегом select.

<select><option>Выберите из списка</option>
<option>Option</option>
<option>Textarea</option>
<option>Label</option>
<option>Fieldset</option><
<option>Legend</option></select>

Однако, это общий случай, который на практике редко применяется, поскольку обычно необходим более широкий функционал формы выпадающего списка, который определяется атрибутами тегов select и option. То есть, если использовать выше приведенный пример, то из выпадающего списка можно выбрать только один элемент (строчку). Если прописать атрибут тега select multiple, то сразу появляется возможность множественного выбора:

<select multiple><option>Option</option>
<option>Textarea</option>
<option>Label</option>
<option>Fieldset</option>
<option>Legend</option></select>

Вы можете попробовать выбрать из данного списка сразу несколько строк, удерживая клавиши Ctrl и Shift. Еще один атрибут тега select - size, который устанавливает высоту выпадающего списка, то есть количество строк, которые будут отображаться. Надо сказать, что различные браузеры по-разному реагируют на этот атрибут. Например, Гугл Хром (здесь о том, как бесплатно скачать последнюю версию, установить и настроить) его совсем игнорирует, а Фаерфокс (тут о браузере Mozilla Firefox подробно) устанавливает высоту списка, равной его значению (при size=“1” будет отображаться 1 элемент).

Таким образом, если атрибут multiple присутствует, то будут отображаться все элементы (строки), которые имеются в наличии. При его отсутствии по умолчанию отображается только одна строка, остальные будут появляться только при использовании кнопки справа.

Атрибут required устанавливает, что обязательно необходимо сделать выбор перед отправкой данных обработчику. Если выбор из списка не сделан, то данные формы отправлены не будут.

<select required><option></option>
<option value="1">Option</option>
<option value="2">Textarea</option>
<option value="3">Label</option>
<option value="4">Fieldset</option>
<option value="5">Legend</option></select>
<input type="submit" value="Отправить">

Остальные атрибуты тега select - accesskey, autofocus, disabled, form, name - применяются аналогично атрибутам с такими же названиями тега button, так что повторяться нет смысла. Теперь рассмотрим атрибуты тега option:

1. disabled - блокирует для выбора элемент выпадающего списка.

<select multiple><option>Option</option>
<option disabled>Textarea</option>
<option>Label</option>
<option>Fieldset</option><
<option>Legend</option></select>

Как видно из примера, строчка Textarea неактивна и выбрать ее невозможно.

2. label - этот атрибут предназначен для сокращения текста внутри тега option. Если label присутствует, то выводится сокращенная строчка, тождественная значению этого атрибута.

<select multiple><option>Option</option>
<option label="Textarea">Тег Textarea</option>
<option>Тег Label</option>
<option>Тег Fieldset</option><
<option>Тег Legend</option></select>

3. selected - выделяет текущий пункт выпадающего списка. Если присутствует атрибут multiple, то есть возможность выделения более одного элемента.

<select><option>Выберите из списка</option>
<option>Option</option>
<option>Textarea</option>
<option>Label</option>
<option selected>Fieldset</option>
<option>Legend</option></select>
<select multiple>
<option>Option</option>
<option selected>Textarea</option>
<option>Label</option>
<option selected>Fieldset</option>
<option>Legend</option></select>

4. value - этот атрибут определяет то значение из выпадающего списка, которое будет отправлено на сервер (обработчику вебформы). Собственно, обработчику отправляется пара: имя, которое задается атрибутом name тега select и значение value всех выделенных строк выпадающего списка.

<select name="список">
<option value="1">Option</option>
<option value="2">Textarea</option>
<option value="3">Label</option>
<option value="4">Fieldset</option>
<option value="5">Legend</option></select>
<input type="button" value="OK">

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

<select><optgroup label="Группа 1">
<option value="1">Option</option>
<option value="2">Textarea</option>
</optgroup><optgroup label="Группа 2">
<option value="3">Label</option>
<option value="4">Fieldset</option>
<option value="5">Legend</option></select>
<select multiple><optgroup label="Группа 1">
<option value="1">Option</option>
<option value="2">Textarea</option>
</optgroup><optgroup label="Группа 2">
<option value="3">Label</option>
<option value="4">Fieldset</option>
<option value="5">Legend</option></select>

Текстовое поле в форме - тег Textarea

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

<form>
  <textarea rows="5" cols="15" >Введите текст</textarea>
 </form>

<form>
  <textarea rows="5" cols="15" ></textarea>
 </form>

Посмотрим теперь, с помощью каких атрибутов можно расширить функциональные возможности тега html textarea.

1. cols - ширина текстового поля, которое задается числом стоящих рядом букв одинаковой ширины.

2. rows - высота текстового поля, определяемое количеством строк. Если число строк текста, вводимого пользователем, окажется больше значения, заданного этим атрибутом, то справа появится полоса прокрутки.

3. maxlength - задает максимальное число символов, вводимых пользователем. Когда данное количество достигается при наборе текста, дальнейший ввод будет невозможным.

4. placeholder - с помощью этого атрибута можно поместить текст внутри текстового поля, который исчезнет, когда пользователь начнет вводить символы:

<form>
  <textarea placeholder="Введите текст"></textarea>
 </form>

5. readonly - если к html тегу textarea добавить этот атрибут, то текстовое поле окажется недоступным для изменения пользователями и будет предназначено только для чтения:

<form>
  <textarea readonly>Только для чтения</textarea>
 </form>

6. required - определяет обязательное для заполнения текстового поля перед тем, как отправить данные формы на сервер обработчику. Если оно не будет заполнено пользователем, браузер выведет сообщение о необходимости ее заполнения, а форма отправлена не будет. Содержание сообщения зависит от браузера и не может быть изменено.

Действия атрибутов accesskey, autofocus, disabled, form, name аналогичны таким же атрибутам тегов html button, select, option, рассмотренные выше.

Особенности тега label, группировка элементов формы - теги fieldset и legend

Тег label позволяет реализовать такую возможность в форме html как активация какого-либо элемента при клике на его название. Обычно элемент активируется только тогда, когда щелкаете по нему, при клике по названию ничего не происходит. Например, чтобы отметить галочку, необходимо щелкнуть по флажку мышкой, однако клик по расположенному рядом тексту будет безрезультатным. Можете попробовать ниже:

<form>
  <input type="checkbox">Letter A<br>
  <input type="checkbox">Letter B<br>
  <input type="checkbox">Letter C<br>
  <input type="checkbox">Letter D
 </form>
Letter A
Letter B
Letter C
Letter D

Есть 2 способа, с помощью которых можно связать элемент формы html и текст.

1 способ. Необходимо применить идентификатор id внутри элемента html формы и указать его имя в качестве значения атрибута for тега label:

<form>
  <input type="checkbox" id="check1">
   <label for="check1">Letter A</label><br>
  <input type="checkbox" id="check2">
   <label for="check2">Letter B</label><br>
  <input type="checkbox" id="check3">
   <label for="check3">Letter C</label><br>
  <input type="checkbox" id="check4">
   <label for="check4">Letter D</label>
 </form>




2 способ. Элемент формы поместить внутрь контейнера, созданного тегом label:

<form>
  <label><input type="checkbox">Letter A</label><br>
  <label><input type="checkbox">Letter B</label><br>
  <label><input type="checkbox">Letter C</label><br>
  <label><input type="checkbox">Letter D</label>
 </form>




Теперь можете кликнуть не только по самой форме, но и по тексту, расположенному рядом. Результат будет идентичный. Таким образом, с помощью тега label можно успешно реализовать связывание элементов форм и текста.

Наверное, вы заметили, что на многих вебсайтах html формы бывают разбиты на группы (с помощью тега fieldset), причем каждая такая группа имеет свой заголовок (реализованный посредством тега legend), для облегчения использования их посетителями. Вот пример создания подобной вебформы:

<form>
    <fieldset>
     <legend style="font-weight: bold">Какую CMS вы используете?</legend>
      <input type="checkbox">Wordpress
      <input type="checkbox">Joomla
    </fieldset>
    <fieldset>
  <textarea rows="10" cols="20">Дайте информацию о себе</textarea>
    </fieldset>
    <fieldset>
     <legend style="font-weight: bold">Владельцем какого ресурса вы являетесь?</legend>
      <input type="radio" name="web" value="rad1">Сайта
      <input type="radio" name="web" value="rad2">Портала
      <input type="radio" name="web" value="rad3">Блога
    </fieldset>
 </form>
Какую CMS вы используете?

WordPress
Joomla


Владельцем какого ресурса вы являетесь?

Сайта
Портала
Блога

Таким образом, мы рассмотрели те возможности, которые предоставляет использование наиболее распространенных тегов html форм: select, option, textarea, а также расширение функциональности вебформ с помощью тегов fieldset, legend и label. Надеюсь, содержание статьи окажется для вас полезным. Публикации на тему html тегов будут продолжаться, поэтому оформляйте подписку незамедлительно для получения свежих материалов, которые дадут вам необходимые знания, позволяющие быстро и четко редактировать страницы ресурса. В заключение посмотрите видео по теме:

Еще статьи по данной теме:
Самые интересные публикации из рубрики: Уроки HTML

33 отзыва

  1. alexman86

    спасибо большое что привели примеры.
    искал долго нашел только у вас

  2. Игорь

    Пожалуйста, alexman86. Надеюсь, темных пятен не осталось.

  3. Костя

    Давно себе хотел поставить Выпадающий список в меню сайта. Спасибо за информацию будем более подробно разбираться, и попробуем сделать.

  4. Вячеслав

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

    например надо выбрать магазин. в выпадающем списке должен быть магазин и ниже адрес:

    например список из 3х пунктов:
    ------------------
    магазин1
    адрес магазина1
    ------------------
    магазин2
    адрес магазина2
    ------------------
    магазин3
    адрес магазина3
    ------------------

  5. Игорь

    Вячеслав, а Вы уверены, что это можно реализовать? Хотя, если рассуждать логически, должно быть...В любом случае Вы заинтриговали меня, попробую найти ответ. Дело в том, что я никогда не сталкивался с такой необходимостью.

  6. Михаил

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

  7. Игорь

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

  8. Юлия

    Добрый День, я извеняюсь но на моем сайте не работает кнопка, перепробывала все, хочу сделать выпадающий список в виде (выбрать год), но сама кнопка не работает, год я прописала всё отлично, но а вот кнопка... не работает((( не могли бы вы мне помочь с данной проблемой, если надо вот сылка на сайт kinobik.ru. Я буду Вам очень признателна если поможете мне, за ранее спасибо!!!

  9. Игорь

    Уважаемая Юлия, не хочу Вас огорчать, но на Вашем сайте обнаружено вредоносное программное обеспечение, какие-то негодяи незаконно хозяйничали и вставили ссылку на неблагонадежный ресурс, я и мысли не допускаю, что это Вы сами виновны.

    По этой причине, к сожалению, я вынужден удалить из комментариев ссылку на Ваш сайт, хотя сам комментарий, естественно оставлю. Попробуйте обратиться за помощью к своему хостинг провайдеру. Как только Ваш сайт восстановит свой статус, обратитесь ко мне, я восстановлю ссылку. Удачи!

  10. Елена

    Большое спасибо за подробную информацию.

  11. sergey

    С построением форм всё понятно

    А как обрабатывать данные вписанные в форме Textarea ???

    Например после нажатия кнопки отправиль мне нужно что бы текст был присвоенн переменной которую можно было бы потом обрабатывать Ну например сохранить в файл.

    Был бы очень признателен за демо скрипт с описанием тегов фунций и операторов

  12. Игорь

    Сергей, ну это вообще-то отдельная тема, и о ней обязательно поговорим еще.

  13. Евгений

    Давно не юзал формы, давайте Вы мне поможете освежить в голове и уточнить один вопрос?

    У меня есть input type="text" с заданным value. Аналогичным этому может быть вот это:

    Option

    При выборе того или иного варианта используется нужный мне value, правильно?

  14. Игорь

    Да, Евгений, все верно, если я правильно Вас понял. 🙂

  15. vin

    Подскажите, а как запихнуть html код вывода списка -

    Option
    Textarea

    внутрь php функции?

    <input type="radio" name="kvnumberFieldName; ?>" id="kvnumber" size="40" value="escape($this->user->get( 'kvnumber' )); ?>" class="checkbox" maxlength="4" />

  16. алексей

    Подскажите пожалуйста есть форма

    Выберите .

    - - - - - - - - - -    10     - - - - - - - - - -

    1
    2
    3
    4
    5
    6

    как сделать ссылку на эту форму при клике на которую , например в форме выбирался бы параметр "5" ?

  17. Игорь Горнов

    Алексей, конкретизируйте свой вопрос. Где у Вас находится форма и откуда должна вести ссылка на нее? Опишите подробнее проблему в письме, которое пришлите мне на email.

  18. Маргарита

    Добрый день! А можно ли, чтобы в выпадающем меню строки были ссылками и вели на нужную страницу? Это, наверное, фантастика?

  19. Игорь Горнов

    Маргарита, ну почему же фантастика. Это можно реализовать, например, так:

    <form id="myform">
     <select id="mymenu" onchange = "window.location=document.forms[0].mymenu.options[document.forms[0].mymenu.selectedIndex].value"  />
     <option value="#">Выберите целевую страницу</option>
     <option value="http://google.ru">Google</option>
     <option value="http://yandex.ru">Яндекс</option>
     </select>
    </form>
  20. александр

    спасибо большое оч помогли ... как раз искал код для вставки баннерного кода

  21. Александр

    Доброго времени суток! Игорь, если не сложно, ответь на вопрос:
    Есть выпадающий список на сайте. В нем прописаны некие характеристики товара. Некоторые короткие (10 символов), некоторые длинные (50-70 символов). И вот которые длинные не "помещаются" и вылезают за размеры контейнеров на сайте при визуале. Вопрос: Как перенести строку в списке? Чтобы общая длина не превышала скажем 50 символов.
    (уточнение - css'кой получилось уменьшить только сам контейнер в котором выводится список, но не сам список. Уменьшать размеры шрифтов не вариант, да и не поможет - слишком длинная хар-ка. Изменять описание хар-ки также не вариант. Сайт не рукописный - стоит коммерческая cms, но техпод только и может, что отвечать - это вопросы верстки... 🙁 А где и как это сделать нигде не могу найти.
    Жду ответа и возможной помощи или совета!
    Спасибо!

  22. Александр

    Согласен с Маргаритой, что в сети можно найти немало способов созданию форм, но мало где есть информация о том как сделать их рабочими (кликабельными). А без этого тема раскрыта только на 50%, ну, хорошо, что в комментах объяснили, хотя хотелось бы поподробнее. А так, статья достаточно полная и подробная, спасибо.

  23. Николай

    Не знаю как решить следующую проблему: как запустить из-под ajax-modal? Т.е. есть меню в виде списка и при клике по одному из пунктов нужно, чтобы открылось модальное окно (сейчас при клике выдает 404).

  24. Игорь Горнов

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

  25. Алина

    Здравствуйте! У меня срочный вопрос: дело в том, что есть "pull-down меню для навигации по сайту", могу написать код, но дело в том, что мне нужна более детальная инструкция (только учусь). Пожалуйста, помогите!

  26. Игорь Горнов

    Алина, Вы можете воспользоваться вот этим материалом:

    http://usefulscript.ru/pull_down_menu.php
  27. Иван

    Добрый день. Может быть вы знаете, как сделать несколько форм select?
    Нужно писать и закрывать несколько form?

    Что-то 1 и список на выбор
    Что-то 2 и список на выбор
    и т.д.

  28. Игорь Горнов

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

  29. Денис

    Как сделать, чтобы был выпадающий список пример
    Горка1
    Горка2
    Горка3
    Далее при выборе например Горка1 появляется на этой странице картинка + текст
    При выборе Горка2 на этой же странице вместо предыдущих картинки + текста появляются картинка и текст связанные с Горкой2

  30. Илья

    Игорь, здравствуйте.

    А подскажите, пожалуйста, самый простой способ реализации вот чего: чтобы на выбор пункта из выпадающего списка браузер реагировал, как на клик по ссылке. Либо кнопка какая-нить рядом со списком. Выбрал пункт - и браузер пошёл открывать заданную страницу (в той же вкладке, или в новой). Если есть возможность чисто на html без скриптов - было бы здорово, ну - или теми средствами, какими возможно.

  31. Габит

    Здравствуйте !

    Если список большой (Select), как можно сделать возможность набрать на клавиатуре и в этом случае список фильтровался по этому набранному тексту ?

  32. kirat

    еще как можно...

  33. Александр Крылов

    Спасибо за подробный разбор. Полностью понял, как работает Select. Удачи Вам!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Чтобы ввести любой код, вставьте его между [php] и [/php]. Ссылка (URL), помещенная в текст комментария, не будет активной. C целью ее выделения и более удобного копирования можно заключить ее между тегами <pre> и </pre>.