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

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

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

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

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

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

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

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

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

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

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

Атрибуты тега select

1. 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.

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

<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>

3. Size — устанавливает высоту выпадающего списка, то есть количество отображаемых строк. Если присутствует атрибут multiple, а значение size не указано (как в примере выше), то по умолчанию отображается четыре строки, а, например, при size="5" будут видны уже пять:

<form action="formdata" method="post" name="form1">
 <p><select name="list1" size="5" 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>

4. Required [HTML5] (параметров не имеет) — определяет, что обязательно нужно сделать выбор перед отправкой данных обработчику. Если элемент из списка не выбран, то данные формы отправлены не будут:

<form action="formdata" method="post" name="form1">
 <p><select name="list1" required>
  <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>

5. Autofocus [HTML5] (значений не имеет) — устанавливает фокус на список сразу после загрузки страницы. Кроме того, если пользователь привык основную часть действий производить клавишами, то как раз такое предварительно настроенное фокусирование поможет делать выбор из списка посредством стрелок на клавиатуре без всякого использования мышки:

<form action="formdata" method="post" name="form1">
 <p><select name="list1" autofocus>
  <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>

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

<form action="formdata" method="post" name="form1">
 <p><select name="list1" disabled>
  <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>

7. Form [HTML5] — осуществляет связь списка с одной или несколькими формами, к которым он принадлежит, но находится вне контейнера <form></form>. При этом в роли значения атрибута form прописывается параметр глобального атрибута id, который добавлен к тегу form:

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

Не путайте атрибут тега select и основной тэг для создания формы. В примере выше к тегу form добавлен атрибут id="data", а к select — form="data", что и позволило связать выпадающий список с конкретной формой.

Атрибуты тега option

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

<form action="formdata" method="post" name="form1">
 <p><select name="list1">
  <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>

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

<form action="formdata" method="post" name="form1">
 <p><select name="list1" multiple size="5">
  <option value="1" disabled>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>

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

3. Label — отображает текстовое содержание (являющееся его значением) того или иного элемента списка. Если label присутствует, то выводится строчка, тождественная значению этого атрибута и игнорируется текстовое содержание, находящееся внутри тега option. То же самое происходит, ежели содержимое между <option> и </option> вовсе отсутствует.

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

Смотрите. В выше предоставленном примере первая строка для option в коде пустая (в левой части таблицы), но прописан параметр label="Тег Option", в результате именно этот текст появился в списке (в правой части). Вторая строка кода в качестве содержимого тега option содержит текст «Тег Textarea», но в раскрывающемся списке справа отображается слово «Textarea», совпадающее со значением label="Textarea".

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 value="4" selected>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 size="5">
  <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

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

1. 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 и size="7" тега select:

<form action="formdata" method="post" name="form1">
 <p><select name="list1" multiple size="7">
  <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>

2. Disabled (нет значений) — блокирует выбор элементов той группы, по отношению к которой он установлен, причем, неактивные пункты обычно выделены серым цветом:

<form action="formdata" method="post" name="form1">
 <p><select name="list1" multiple size="7">
  <optgroup label="group1">
   <option value="1">Option</option>
   <option value="2">Textarea</option>
  </optgroup>
  <optgroup label="group2" disabled>
   <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. Без атрибутов по умолчанию применение этого тега даст такой результат:

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

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

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

Попробуем теперь добавить к первоначальному коду несколько атрибутов с параметрами:

1. Name — определяет имя текстовой области в качестве значения для ее идентификации после отправки данных формы при их обработке на сервере.

2. Cols — ширина поля, которая в роли параметра задается числом стоящих рядом одинаковых символов, размещенных по горизонтали. Значение по умолчанию — 20.

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

4. Maxlength [HTML5] — указывает максимальное количество знаков, которые можно поместить в текстовое поле. При превышении лимита дальнейший ввод будет невозможен.

Ниже представлен пример со всеми выше перечисленными атрибутами, действие каждого из которых вы можете проверить самолично, просто поместив в область текста нужное количество букв и строк (можете просто ввести один и тот же символ несколько раз):

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

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

5. Minlength [HTML5] — указывает минимальное число знаков, которые необходимо ввести в текстовую область. Ежели пользователь попытается отправить текст с меньшим количеством символов, то браузер выведет краткое сообщение с информацией, в которой будет содержаться упоминание о необходимости дополнить содержание формы и о том, сколько знаков уже введено.

<form action="formdata" method="post" name="form1">
 <p><textarea name="text1" minlength="10"></textarea></p>
 <p><input type="submit" value="Отправить"></p>
</form>

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

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

7. Readonly (без параметров) — ежели к textarea прикрутить данный атрибут, то текстовое поле окажется недоступным для изменения пользователями и будет предназначено только для чтения. Но на него можно навести фокус (подведите курсор к полю и щелкните левой кнопкой мышки), а также выделить и скопировать (частично или полностью) текст:

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

Еще несколько атрибутов, реализующих дополнительный функционал при заполнении полей:

8. Autoсomplete [HTML5] — указывает, должен ли браузер выдавать подсказки при заполнении формы пользователем на основании ранее вводимых данных и дает возможность автоматически вставлять подходящий текст.

Имеет всего два параметра: on (включен) и off (выключен). Вот пример кода:

<form action="formdata" method="post" name="form1">
 <p><b>Введите текст:</b></p>
 <p><textarea name="text1" autoсomplete="on"></textarea></p>
 <p><input type="submit" value="Отправить"></p>
</form>

Данный атрибут со значением «on» работает только тогда, когда в веб-обозревателе конкретного пользователя включено автозаполнение полей формы.

9. Wrap [HTML5] — устанавливает для браузера правила переноса строк в текстовой области с помощью трех значений:

Soft — набор символов, который не помещается в поле по ширине, автоматически переносится на новую строчку. При этом обработчику текст будет передан в виде одной строки. В том случае, если пользователь осуществит перенос текста в любом нужном месте с помощью клавиши «Enter», то такой перенос сохраняется при отправке вебформы.

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

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

Hard — переносы производятся автоматически, если текст не влезает в поле по ширине, причем, при отправке обработчику места таких переносов будут сохранены. Этот параметр используется только в связке с атрибутом cols:

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

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

Off — отключение переносов строк. Если напечатать текстовый фрагмент без механического переноса посредством клавиши «Enter», то весь текст будет помещен в одну строку, причем, появится горизонтальная полоса прокрутки:

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

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

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

10. Autofocus [HTML5] (не имеет параметров) — инициирует фокусирование на текстовое поле при загрузке страницы с формой.

11. Disabled — в отличие от атрибута readonly (который также запрещает редактировать содержимое поля, но дает возможность навести на него фокус), полностью блокирует доступ к текстовой области, которая окрашивается обычно в серый цвет:

<form action="formdata" name="form1">
  <p><textarea name="text1" disabled>Неактивное текстовое поле</textarea></p>
</form>

12. Form [HTML5] — связывает текстовое поле с формой в тех случаях, когда по тем или иным причинам оно расположено вне <form></form>. Как и в случае с тегом select, связь осуществляется посредством глобального атрибута id для form. При этом параметры id и атрибута form тождественны:

<form action="formdata" method="post" id="data"></form>
 <p><b>Введите текст:</b></p>
 <p><textarea name="text1" form="data"></textarea></p>
 <p><input type="submit" value="Отправить" id="data"></p>

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

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

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

Еще один видеоролик по созданию текстового поля:

Особенности тега 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, с помощью которых прописываются названия групп.

Давайте в качестве начального примера сформируем одну подгруппу с привлечением атрибута type тега input для создания чекбоксов и в пределах <legend></legend> впишем ее название. Ниже в таблице слева находится HTML код для этой формы, а справа — результат его работы:

<fieldset>
 <legend><strong>Какую CMS вы используете?</strong>
 </legend>
 <p><input type="checkbox">WordPress
 <input type="checkbox">Joomla</p>
</fieldset>
Какую CMS вы используете?

WordPress
Joomla

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

1. Name [HTML5] — служит для наименования совокупности элементов, объединенных в контейнере <fieldset></fieldset>. Название (как параметр этого атрибута) применяется в дальнейшем с целью идентификации конкретной группы при обработке формы, в том числе в скриптах, включая JavaScript.

Чтобы наглядно продемонстрировать действие name, заключим данную группу в тег form для корректной работы и добавим кнопку с помощью тега button, прописав к нему параметр HTML события onclick="form.group1.style.backgroundColor='#e1dccd'", в котором и присутствует значение этого атрибута. Данное событие позволяет пользователю с помощью созданной кнопочки изменить цвет фона в пределах области формы, заданной тегом fieldset:

<form action="form1" method="post">
 <fieldset name="group1">
  <legend><strong>Какую CMS вы используете?</strong>
  </legend>
  <p><input type="checkbox">WordPress
  <input type="checkbox">Joomla</p>
 </fieldset><br>
 <p><button type="button" onclick="form.group1.style.backgroundColor='#e1dccd'">
  Изменить цвет элемента</button></p>
</form>
Какую CMS вы используете?

WordPress
Joomla

2. Disabled [HTML5] — (нет значений) подобно одноименным атрибутам для уже рассмотренных тэгов деактивирует группу элементов (вас ждет неудача при попытке заполнить чекбоксы ниже):

<form action="form1" method="post">
 <fieldset disabled>
  <legend><strong>Какую CMS вы используете?</strong>
  </legend>
  <p><input type="checkbox">WordPress
  <input type="checkbox">Joomla</p>
 </fieldset>
</form>
Какую CMS вы используете?

WordPress
Joomla

3. Form [HTML5] — связывает вебформу, расположенную отдельно, с конкретной группой. Идентификация реализуется путем установки одинаковых значений form и универсального атрибута id (в нашем примере это id="data" и form="data"):

<form action="form1" method="post" id="data"></form>
 <fieldset form="data">
  <legend><strong>Какую CMS вы используете?</strong>
  </legend>
  <p><input type="checkbox">WordPress
  <input type="checkbox">Joomla</p>
 </fieldset>
Какую CMS вы используете?

WordPress
Joomla

Ну а дальше приведу пример кода многообразной формы, куда включены чекбоксы, текстовое поле и радиокнопки:

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