Элементы HTML форм — выпадающий список (теги select и option), текстовое поле (textarea), а также применение label, fieldset и legend

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com. В рамках изучения премудростей языка гипертекстовой разметки в качестве очередной задачи продолжим разбирать подробности создания форм на сайте с помощью соответствующих тегов и их атрибутов.

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

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

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

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

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

Выпадающие списки с помощью select и option

Тег select предназначен для создания раскрывающегося списка. Все элементы подобного списка создаются с помощью тегов option, которые вложены в контейнер, определяемый тегом select. Причем, в качестве значения атрибута name нужно добавить название списка (в приведенном примере это "list1") для его идентификации при обработке на сервере:

<form action="formdata" method="POST" name="form1">
 <p><select name="list1">
  <option>Выберите из списка</option>
  <option>Option</option>
  <option>Textarea</option>
  <option>Label</option>
  <option>Fieldset</option>
  <option>Legend</option>
 </select></p>
 <p><input type="submit" value="Отправить"></p>
</form>

Ну и весь выпадающий список является одним из вариантов формы, а потому описывается тегом form, к которому добавляются необходимые атрибуты (action, method, name), обеспечивающие его корректное функционирование. С целью визуального показа кнопки для отправки данных на сервер здесь использован тег input с атрибутами «type="submit"» и «value="Отправить"». К слову, кнопочку можно оформить и посредством тега button.

Тег input с атрибутами type="submit" и value="Отправить" определяет вид кнопочки, с помощью которой пользователь будет отправлять информацию на сервер обработчику.

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

<form action="formdata" method="POST" name="form1">
 <p><select name="list1" multiple>
  <option>Option</option>
  <option>Textarea</option>
  <option>Label</option>
  <option>Fieldset</option>
  <option>Legend</option>
 </select></p>
 <p><input type="submit" value="Отправить"></p>
</form>

Вы можете попробовать выбрать из данного списка сразу несколько строк (по одной в любых местах, удерживая клавишу Ctrl, либо посредством Shift следующих подряд одна за одной). Еще один атрибут тега select — size, который устанавливает высоту выпадающего списка, то есть количество отображаемых строк (при size="2", например, будут видны 2 элемента):

<form action="formdata" method="POST" name="form1">
 <p><select name="list1" size="2" multiple>
  <option>Option</option>
  <option>Textarea</option>
  <option>Label</option>
  <option>Fieldset</option>
  <option>Legend</option>
 </select></p>
 <p><input type="submit" value="Отправить"></p>
</form>

Таким образом, с помощью size можно уменьшить высоту выпадающего списка при присутствии атрибута multiple, при этом сохраняется возможность выбрать несколько пунктов.

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

<form action="formdata" method="POST" name="form1">
 <p><select name="list1" 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></p>
<p><input type="submit" value="Отправить"></p>
</form>

Некоторые другие атрибуты select — accesskey, autofocus, disabled, form — работают практически также, как и в отношении тега button, так что повторяться нет смысла. Далее уделим немного времени для атрибутов тега option.

1. value — определяет то значение из выпадающего списка, которое будет отправлено на сервер (обработчику формы). Собственно, обработчику отправляется имя, которое задается атрибутом name тега select, и значение value (для данного примера — 1, 2, 3, 4, 5) одной или нескольких (в случае наличия multiple) выделенных строк выпадающего списка:

<form action="formdata" method="POST" name="form1">
 <p><select name="list1">
  <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></p>
 <p><input type="submit" value="Отправить"></p>
</form>

<form action="formdata" method="POST" name="form1">
 <p><select name="список" multiple>
  <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></p>
<p><input type="submit" value="Отправить"></p>
</form>

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

<form action="formdata" method="POST" name="form1">
 <p><select name="list1" multiple>
  <option disabled>Выберите из списка</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></p>
 <p><input type="submit" value="Отправить"></p>
</form>

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

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

<form action="formdata" method="POST" name="form1">
 <p><option value="1">Тег Option</option>
  <option label="Textarea" value="2">Тег Textarea</option>
  <option value="3">Тег Label</option>
  <option value="4">Тег Fieldset</option>
  <option value="5">Тег Legend</option></p>
 <p><input type="submit" value="Отправить"></p>
</form>

4. selected — выделяет текущий пункт выпадающего списка:

<form action="formdata" method="POST" name="form1">
 <p><select name="list1">
  <option value="1">Option</option>
  <option value="2">Textarea</option>
  <option value="3">Label</option>
  <option selected value="4">Fieldset</option>
  <option value="5">Legend</option>
 </select></p>
 <p><input type="submit" value="Отправить"></p>
</form>

Если присутствует атрибут multiple, то есть возможность выделения более одного элемента:

<form action="formdata" method="POST" name="form1">
 <p><select name="list1" multiple>
  <option value="1">Option</option>
  <option selected value="2">Textarea</option>
  <option value="3">Label</option>
  <option selected value="4">Fieldset</option>
  <option value="5">Legend</option>
 </select></p>
 <p><input type="submit" value="Отправить"></p>
</form>

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

<form action="formdata" method="POST" name="form1">
 <p><select name="list1">
  <optgroup label="group1">
   <option value="1">Option</option>
   <option value="2">Textarea</option>
  </optgroup>
  <optgroup label="group2">
   <option value="3">Label</option>
   <option value="4">Fieldset</option>
   <option value="5">Legend</option>
  </optgroup>
 </select></p>
 <p><input type="submit" value="Отправить"></p>
</form>

То же самое, но с multiple:

<form action="formdata" method="POST" name="form1">
 <p><select multiple name="list1">
  <optgroup label="group1">
   <option value="1">Option</option>
   <option value="2">Textarea</option>
  </optgroup>
  <optgroup label="group2">
   <option value="3">Label</option>
   <option value="4">Fieldset</option>
   <option value="5">Legend</option>
 </select></p>
 <p><input type="submit" value="Отправить"></p>
</form>

Небольшой видеоролик будет здесь как нельзя кстати:

Текстовое поле в форме посредством textarea

Еще один элемент формы для сайта, который мы рассмотрим — поле с возможностью ввода в него многострочного текста. Его можно создать с помощью тега textarea.

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

<form action="formdata" method="POST" name="form1">
 <p><b>Введите текст:</b></p>
 <p><textarea name="text1" rows="5" cols="15"></textarea></p>
 <p><input type="submit" value="Отправить"></p>
</form>

Введите текст:

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

1. name — используется для идентификации нужного поля.

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

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

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

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

<form action="formdata" method="POST" name="form1">
 <p><textarea name="text1" placeholder="Введите текст"></textarea></p>
 <p><input type="submit" value="Отправить"></p>
</form>

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

<form action="formdata" name="form1">
  <p><textarea name="text1" readonly>Только для чтения</textarea></p>
</form>

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

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

Особенности тега label

По умолчанию элемент формы при щелчке по его текстовой составляющей не активируется. Возьмем сначала в качестве примера список (реализуемый с помощью атрибута type="checkbox" тега input), нужные строки которого пользователь должен отметить, заполнив соответствующие чекбокс(-ы) галочками. Чтобы поставить галочку, необходимо щелкнуть по флажку мышкой, но клик по расположенному рядом тексту будет безрезультатным. Можете попробовать ниже:

<form action="formdata" method="POST" name="form1">
 <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

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

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

<form action="formdata" method="POST" name="form1">
  <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>




Теперь можете кликнуть не только по самой форме, но и по тексту, расположенному рядом. Итог будет идентичным. Другим примером может служить форма для ввода текста (создаваемая с помощью атрибута type="text" того же input), где активация (помещение курсора в текстовое поле) будет происходить и после щелчка по надписи «Введите текст»:

<form action="formdata" method="POST" name="form1">
 <p><label>Введите текст:<input type="text"></label></p>
 <p><input type="submit" value="Отправить"></p>
</form>

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

Fieldset и legend — группировка элементов формы

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

<form action="formdata" method="POST" name="form1">
 <fieldset>
  <legend>Какую CMS вы используете?</legend>
  <input type="checkbox">Wordpress
  <input type="checkbox">Joomla
 </fieldset>
 <fieldset>
  <textarea name="text1" rows="10" cols="60" placeholder="Дайте информацию о себе"></textarea>
 </fieldset>
 <fieldset>
  <legend>Владельцем какого ресурса вы являетесь?</legend>
  <input type="radio" name="web" value="rad1">Сайта
  <input type="radio" name="web" value="rad2">Портала
  <input type="radio" name="web" value="rad3">Блога
 </fieldset>
  <p><input type="submit" value="Отправить"></p>
</form>

Какую CMS вы используете?

WordPress
Joomla


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


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

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

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

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

37 отзывов

  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. Удачи Вам!

  34. Мария

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

    1
    2
    3
    4
    5

    Январь
    Февраль
    Март
    Апрель
    Май

    то есть, человек выбирает, допустим, 2 февраля, нажимает кнопку "Отправить". а как мне связать даты с ссылками на своем сайте? чтобы он выбрал нужную дату, перешел и прочитал характеристику про 2 февраля (например)

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

    Мария: разве Вам не подойдет вариант с использованием тега optgroup? Пример со ссылками Вы найдете в комментариях, если прокрутите страницу немного вверх.

  36. Мария

    Игорь Горнов, это я поняла, благодарю) я не понимаю как связать эти числа в выпадающем списке с моими ссылками. допустим, я прописываю код, и вот так он выглядит на выходе (скрин) https://prnt.sc/hvv150. это всё ок)) меня устраивает.
    но я не понимаю, что и куда надо вписать дополнительно, чтобы при выборе, допустим, 2 февраля, когда я нажимаю кнопку "Отправить", то происходил бы переход на ссылку www.мойсайт.ру/2 февраля

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

    Мария: так я же и говорю, что пример, подходящий для реализации вашего желания дан чуть выше в комментариях с использованием тега optgroup и атрибута onchange тега select. Смотрите:

    <form>		
    <select id="mymenu" onchange = "window.location=document.forms[0].mymenu.options[document.forms[0].mymenu.selectedIndex].value" >
    <optgroup label="Январь">
    <option></option>
    <option value="http://www.mysite.ru/1_января">1 января</option>
    <option value="http://www.mysite.ru/2_января">2 января</option>
    <option value="http://www.mysite.ru/3_января">3 января</option>
    .................................................................
    <option value="http://www.mysite.ru/31_января">31 января</option>
    </optgroup>
    <optgroup label="Февраль">
    <option></option>
    <option value="http://www.mysite.ru/1_февраля">1 февраля</option>
    <option value="http://www.mysite.ru/2_февраля">2 февраля</option>
    <option value="http://www.mysite.ru/3_февраля">3 февраля</option>
    .................................................................
    <option value="http://www.mysite.ru/28_февраля">28 февраля</option>
    .................................................................
    .................................................................
    .................................................................
    </optgroup>
    </select>
    </form>

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


    Надеюсь, я все разложил по полочкам. Отпишитесь в комментариях, все ли Вы поняли и получилось ли у Вас реализовать все на практике.

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

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

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