Создаем стильные выпадающие списки. Выбор из выпадающего списка в HTML Раскрытие многоуровневого списка при наведении html

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

Раскрывающийся список

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

Давайте

</span>Пример использования элемента <select><span>

В этом примере мы тегом

В браузере это выглядит следующим образом:

Группировка пунктов меню

Давайте рассмотрим следующий тег , который используется для группировки связанных данных в раскрывающемся списке name = "black&white" > label = "Whitelist" >

В данном примере мы выделили 2 группы тегом . Атрибут label элемента задает наименование выделенной группы, выполненное полужирным начертанием:

В следующем примере с использованием логического атрибута disabled мы отключим одну группу ("Group B "):

</span>Пример использования атрибута disabled HTML тега <optgroup><span>

Результат нашего примера:

Отключение списка и мультивыбор

</span>Атрибуты disabled и multiple тега <select><span>

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

Для второго списка мы использовали атрибут multiple , который указывает, что допускается выбрать в списке несколько вариантов сразу (через Ctrl в Windows и через Command в Mac).

В браузере это выглядит следующим образом:

Текстовая область

Результат нашего примера:

Отключение текстовой области

По аналогии с ранее рассмотренными элементами тег имеет логический атрибут disabled , который указывает, что текстовая область должна быть отключена (недоступна для взаимодействия с пользователем). Атрибут может использоваться совместно со скриптами, например, пока какое-то условие не выполнено элемент неактивен.</p> <p>Рассмотрим пример использования:</p> <span><!DOCTYPE html> <html> <head> <title> </span>Атрибуты disabled и name тега <textarea><span></title> </head> <body> <form> <textarea name = "userInfo" > </span>Текстовое поле доступно к заполнению.<span> </span>Текстовое поле не доступно к заполнению.

), для первой и второй области атрибутом name мы задали уникальные имена. Для второй текстовой области атрибутом disabled мы указали, что она будет отключена при загрузке страницы.</p> <p>Кроме того, мы разместили внутри формы кнопку, которая служит для отправки формы (элемент <input> с типом кнопки "отправка формы": type = "submit" ).</p> <p>Результат нашего примера:</p> <h2>Подсказка для текстовой области</h2> <p>И так мы с Вами рассмотрим заключительный пример и перейдем к практическому заданию статьи этого учебника.</p> <p>Благодаря атрибуту (HTML тега <textarea>) допускается указывать текст подсказки, которая описывает ожидаемое значение для ввода пользователем в элемент.</p> <p>Текст подсказки скрывается, когда пользователь вводит значение (любой символ) в текстовое поле, если его убрать, то подсказка будет отображена снова.</p> <p>Рассмотрим пример использования:</p> <span><!DOCTYPE html> <html> <head> <title> </span>Атрибуты placeholder и readonly тега <textarea><span></title> </head> <body> <form> <textarea placeholder = <span>"Введите информацию в текстовое поле" </span>> "Поле доступно только для чтения" </span> readonly >
type = "submit" name = "submitInfo" value = "отправить" >

В этом примере мы создали две текстовые области (элемент ), для первой и второй области атрибутом мы задали подсказку для пользователя, которая отображается бледным цветом текста внутри элемента. Для второй текстовой области атрибутом readonly мы указали, что оно будет доступно только для чтения (содержимое не может быть изменено).</p> <p>Обратите внимание на то, что если текстовое поле доступно только для чтения, то при этом содержимое не может быть изменено, но пользователь при этом может перейти к содержимому, выделить и скопировать его.</p> <p>Кроме того, мы разместили внутри формы кнопку, которая служит для отправки формы (элемент <input> с типом кнопки "отправка формы": type = "submit" ).</p> <p>Результат нашего примера:</p> <h2>Вопросы и задачи по теме</h2> <p>Перед тем как перейти к изучению следующей темы пройдите практическое задание:</p> <ul><li>Используя полученные знания составьте следующую форму размещения вакансии:</li> </ul><p>Прежде чем преступить к выполнению задания откройте пример в новом окне и внимательно рассмотрите форму, чтобы повторить все её моменты. Для выполнения задания Вам потребуются знания из статьи . Если вы пропустили её, то вернитесь для её изучения.</p> <p>После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.</p> <p>Здравствуйте, уважаемые читатели блога сайт. В рамках изучения премудростей в качестве очередной задачи продолжим разбирать подробности создания форм на сайте с помощью соответствующих .</p> <p>Сегодня мы разберем, как создавать <b>выпадающие (раскрывающиеся) списки </b>, в том числе со множественным выбором, при помощи select и option, каким образом сконструировать <b>текстовое поле </b> посредством textarea, а также поговорим о возможности расширения функциональности форм путем применения тегов <b>fieldset, label и legend </b>.</p> <p>Напомню, что любая форма, присутствующая на странице, создается при помощи и предназначена для ввода какой-либо информации от пользователя и отправки ее на сервер (пример — ).</p> <p>К сожалению, средства языка гипертекстовой разметки не позволяют напрямую обрабатывать эту информацию, поэтому с помощью HTML мы создаем лишь внешний вид формы, а необходимые данные отправляются для обработки. С этой целью на вебсервере целенаправленно создается специальный файл, написанный на одном из серверных языков (чаще всего, PHP). Скажем, для обратной связи можно сотворить файлик mail.php, который и будет являться обработчиком.</p> <p>При практическом использовании полученной в этой публикации информации не забудьте о том, как должна выглядеть , где коды всех видимых элементов страницы, включая формы, всегда находятся в пределах тега body.</p> <p>Эта информация крайне необходима, поскольку даже в случае использовании всех современных встроенных в инструментов разработчиков (напомню, первой ласточкой в реализации этого функционала был ), вы должны четко представлять себе механизм использования основных тегов, тогда редактирование кода HTML, необходимость которого возникает время от времени, превратится в приятное занятие.</p> <p>2. <b>Multiple </b> — этот атрибут, не имеющий параметров, дает возможность множественного выбора в отличие от выше приведенного примера, где можно выбрать только один элемент (строчку). Попробуйте выделить в данном списке мышкой сразу несколько строк (по одной в любых местах, удерживая клавишу Ctrl, либо посредством Shift следующих подряд одна за одной):</p> <table><tbody><tr><td class="tab" width="65%"> <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> </td> <td class="tab" width="35%"> <p><input type="submit" value="Отправить"></p> </td> </tr></tbody></table><p>3. <b>Size </b> — устанавливает высоту выпадающего списка, то есть количество отображаемых строк. Если присутствует атрибут multiple, а значение size не указано (как в примере выше), то <i>по умолчанию отображается четыре строки </i>, а, например, при size="5" будут видны уже пять:</p> <table><tbody><tr><td class="tab" width="65%"> <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> </td> <td class="tab" width="35%"> <p>Option Textarea Label Fieldset Legend</p> <p><input type="submit" value="Отправить"></p> </td> </tr></tbody></table><p>4. <b>Required </b> (параметров не имеет) — определяет, что обязательно нужно сделать выбор перед отправкой данных обработчику. Если элемент из списка не выбран, то данные формы отправлены не будут:</p> <table><tbody><tr><td class="tab" width="65%"> <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> </td> <td class="tab" width="35%"> <p>Option Textarea Label Fieldset Legend</p> <p><input type="submit" value="Отправить"></p> </td> </tr></tbody></table><p>5. <b>Autofocus </b> (значений не имеет) — устанавливает фокус на список сразу после загрузки страницы. Кроме того, если пользователь привык основную часть действий производить клавишами, то как раз такое предварительно настроенное фокусирование поможет делать выбор из списка посредством стрелок на клавиатуре без всякого использования мышки:</p> <table><tbody><tr><td class="tab" width="65%"> <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> </td> <td class="tab" width="35%"> <p><img src='https://i2.wp.com/goldbusinessnet.com/wp-content/uploads/2018/10/2018-10-25_093419.png' height="146" width="205" loading=lazy></p> </td> </tr></tbody></table><p>6. <b>Disabled </b> (параметров нет) — блокирует доступ к списку (отключает его). На практике обычно используется вместе со скриптами в тех случаях, когда нужно включать раскрывающийся список только при выполнении определенных условий:</p> <table><tbody><tr><td class="tab" width="65%"> <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> </td> <td class="tab" width="35%"> <p><input type="submit" value="Отправить"></p> </td> </tr></tbody></table><p>7. <b>Form </b> — осуществляет связь списка с одной или несколькими формами, к которым он принадлежит, но находится вне контейнера <form></form>. При этом в роли значения атрибута form прописывается параметр <i>глобального атрибута id </i>, который добавлен к тегу form:</p> <table><tbody><tr><td class="tab" width="65%"> <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> </td> <td class="tab" width="35%"> <p>Выберите из списка Option Textarea Label Fieldset Legend</p> <p><input type="submit"></p> </td> </tr></tbody></table><p>Не путайте атрибут тега select и основной тэг для создания формы. В примере выше к тегу form добавлен атрибут id="data", а к select — form="data", что и позволило связать выпадающий список с конкретной формой.</p> <h3>Атрибуты тега option</h3> <p>1. <b>Value </b> — определяет то значение из выпадающего списка, которое будет отправлено на сервер (обработчику формы). Собственно, обработчику отправляется имя, которое задается атрибутом name тега select, и <b>значение value </b> (для данного примера — 1, 2, 3, 4, 5), соответствующее выбранной строке выпадающего списка:</p> <table><tbody><tr><td class="tab" width="65%"> <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> </td> <td class="tab" width="35%"> <p>Option Textarea Label Fieldset Legend</p> <p><input type="submit" value="Отправить"></p> </td> </tr></tbody></table><p>2. <b>Disabled </b> — блокирует для выбора элемент выпадающего списка.</p> <table><tbody><tr><td class="tab" width="65%"> <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> </td> <td class="tab" width="35%"> <p>Option Textarea Label Fieldset Legend</p> <p><input type="submit" value="Отправить"></p> </td> </tr></tbody></table><p>Как видно из примера, строчка «Option» неактивна и выбрать ее невозможно.</p> <p>3. <b>Label </b> — отображает текстовое содержание (являющееся его значением) того или иного элемента списка. Если label присутствует, то выводится строчка, тождественная значению этого атрибута и игнорируется текстовое содержание, находящееся внутри тега option. То же самое происходит, ежели содержимое между <option> и </option> вовсе отсутствует.</p> <table><tbody><tr><td class="tab" width="65%"> <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> </td> <td class="tab" width="35%"> <p>Тег Textarea Тег Label Тег Fieldset Тег Legend</p> <p><input type="submit" value="Отправить"></p> </td> </tr></tbody></table><p>Смотрите. В выше предоставленном примере первая строка для option в коде пустая (в левой части таблицы), но прописан параметр label="Тег Option", в результате именно этот текст появился в списке (в правой части). Вторая строка кода в качестве содержимого тега option содержит текст «Тег Textarea», но в раскрывающемся списке справа отображается слово «Textarea», совпадающее со значением label="Textarea".</p> <p>4. <b>Selected </b> — выделяет текущий пункт выпадающего списка:</p> <table><tbody><tr><td class="tab" width="65%"> <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> </td> <td class="tab" width="35%"> <p>Option Textarea Label Fieldset Legend</p> <p><input type="submit" value="Отправить"></p> </td> </tr></tbody></table><p>Если присутствует атрибут multiple, то есть возможность выделения более одного элемента:</p> <table><tbody><tr><td class="tab" width="65%"> <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> </td> <td class="tab" width="35%"> <p>Option Textarea Label Fieldset Legend</p> <p><input type="submit" value="Отправить"></p> </td> </tr></tbody></table><h3>Атрибуты тега optgroup</h3> <p>Если выпадающий список необходимо как-то упорядочить, например, разделить по группам, то для каждой из этих групп используют контейнер, состоящий из открывающего и закрывающего тегов optgroup, внутри которого содержится часть пунктов выпадающего списка. При этом существуют два атрибута для настройки подобного раскрывающегося списка.</p> <p>1. <b>Label </b> — устанавливает название каждой группы в качестве параметра:</p> <table><tbody><tr><td class="tab" width="65%"> <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> </td> <td class="tab" width="35%"> <p>Option Textarea Label Fieldset Legend</p> <p><input type="submit" value="Отправить"></p> </td> </tr></tbody></table><p>То же самое, но с multiple и size="7" тега select:</p> <table><tbody><tr><td class="tab" width="65%"> <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> </td> <td class="tab" width="35%"> <p>Option Textarea Label Fieldset Legend</p> <p><input type="submit" value="Отправить"></p> </td> </tr></tbody></table><p>2. <b>Disabled </b> (нет значений) — блокирует выбор элементов той группы, по отношению к которой он установлен, причем, неактивные пункты обычно выделены серым цветом:</p> <table><tbody><tr><td class="tab" width="65%"> <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> </td> <td class="tab" width="35%"> <p>Option Textarea Label Fieldset Legend</p> <p><input type="submit" value="Отправить"></p> </td> </tr></tbody></table><p>Небольшой видеоролик будет здесь как нельзя кстати:</p> <p><span class="m2sgO7Lgf8I"></span></p> <h2>Текстовое поле в форме посредством textarea</h2> <p>Еще один элемент формы для сайта, который мы рассмотрим — поле с возможностью ввода в него многострочного текста. Его можно создать с помощью тега textarea. Без атрибутов по умолчанию применение этого тега даст такой результат:</p> <table><tbody><tr><td class="tab" width="65%"> <form action="formdata" method="post" name="form1"> <p><b>Введите текст:</b></p> <p><textarea>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

А что если я скажу, что можно и стандартный HTML выпадающий список не плохо оформить на чистом CSS ?

Выпадающий список на HTML

Цвет фона и текста можно менять, причем делается это очень просто.

В span мы добавили 2 класса, один основной, на который ляжут все основные стили “custom-dropdown “, а второй big, который будет определять размер выпадающего списка . Мы можем заранее подготивить скажем 3 размера, big, medium, small , задать в стилях font-size . И в дальнейшем не заморачиваться. Это можно и пропустить, все зависит от вашего дизайна на сайте.

Body { background: #2a2a2b; color: #fff; text-align: center; font-family: Arial, Helvetica; } .big { font-size: 1.2em; } /* Custom dropdown */ .custom-dropdown { position: relative; display: inline-block; vertical-align: middle; margin: 10px; /* demo only */ } .custom-dropdown select { cursor:pointer; background-color: #2980b9; color: #fff; font-size: inherit; padding: .5em; padding-right: 2.5em; border: 0; margin: 0; border-radius: 3px; text-indent: 0.01px; text-overflow: ""; -webkit-appearance: button; /* hide default arrow in chrome OSX */ } .custom-dropdown::before, .custom-dropdown::after { content: ""; position: absolute; pointer-events: none; } .custom-dropdown::after { /* Custom dropdown arrow */ content: "\25BC"; height: 1em; font-size: .625em; line-height: 1; right: 1.2em; top: 50%; margin-top: -.5em; } .custom-dropdown::before { /* Custom dropdown arrow cover */ width: 2em; right: 0; top: 0; bottom: 0; border-radius: 0 3px 3px 0; } .custom-dropdown select { color: rgba(0,0,0,.3); } .custom-dropdown select::after { color: rgba(0,0,0,.1); } .custom-dropdown::before { background-color: rgba(0,0,0,.15); } .custom-dropdown::after { color: rgba(0,0,0,.4); }

Если вы не хотите заморачиваться и изучать стили, а просто добавить себе на сайт и поменять цвет под дизайн вашего сайта. То вам всего лишь в стиле “.custom-dropdown select ” нужно поменять значения background-color и color

Выпадающий список в HTML можно сделать при помощи тега select . Помимо выпадающего (или "раскрывающегося") списка, тег select позволяет создавать элемент-список с множественным выбором. Синтаксис использования тега select HTML выглядит следующим образом:

Здесь с помощью тега option задаются элементы списка.

Результат применения:

Электроник Сыроежкин Чижиков Кукушкина

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

Рассмотрим атрибуты тега select :

name
size - число отображаемых строк в списке (число);
multiple - включает функцию множественного выбора элементов выпадающего списка;
disabled - блокирует доступ к элементу;
form - позволяет связать выпадающий список с формой (может понадобиться, если сам список находится вне формы, к которой должен быть привязан). В качестве аргумента передается id формы.

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

Выпадающий список с помощью HTML - Нубекс

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

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

disabled - устанавливает запрет на выбор данного элемента списка;
label - позволяет установить метку для текущего элемента списка (вместо текста, указанного в теге, выводится значение метки, что позволяет выводить сокращенное значение); Внимание: атрибут не поддерживается в браузере Firefox
selected - текущий пункт списка будет выбран по умолчанию;
value - значение, которое будет передано на сервер;

Посмотрим на расширенный вариант использования тега option :

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

Господин Электроник Сыроежкин Чижиков Кукушкина

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

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

Тег , который устанавливает высоту списка, ширина списка при этом определяется автоматически исходя из длины текста внутри

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

multiple

Наличие multiple сообщает браузеру отображать содержимое элемента

name

Определяет уникальное имя элемента добавлен атрибут multiple , то можно выделять более одного пункта.

value

Определяет значение пункта списка, которое будет отправлено на сервер. На сервер отправляется пара «имя/значение», где имя задаётся атрибутом name тега

Группирование элементов списка

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

Пример 3. Группирование элементов списка

HTML5 IE Cr Op Sa Fx

Список

Результат примера показан на рис. 1.

Рис. 1. Группированный список

Создаем стильные выпадающие списки. Выбор из выпадающего списка в HTML Раскрытие многоуровневого списка при наведении html

Раскрывающийся список

Группировка пунктов меню

Отключение списка и мультивыбор

Текстовая область

Отключение текстовой области

Выпадающий список на HTML

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

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

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

multiple

name

value

Группирование элементов списка

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