Как сделать выпадающий список

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

Вам понадобится

• Базовые знания языка HTML

Инструкция

1. Все элементы страницы сайта создаются браузером, который читает из присланного ему сервером кода что именно и где именно на этой странице надо разместить. Этот код языка HTML (HyperText Markup Language — «язык разметки гипертекста») «тегов», которые описывают тип, внешний вид и расположение элементов веб-страницы. Стандартный выпадающий список создаётся браузером, если он встречает в коде страницы тег select. Выглядит он так:Здесь "name" - это «атрибут» тега select, который содержит имя именно этого выпадающего списка. Каждый выпадающий список на странице имеет собственное имя. Кроме имени могут быть указаны и другие атрибуты списка, например цвета фона и текста указывается в атрибуте style:Содержимое списка (строки) перечисляются в других тегах - option:строка перваяУ тега option должен быть атрибут value - значение, которое будет передано, когда посетитель сделает свой выбор и отправит его на сервер. Обратите внимание - именно значение тега value будет отправлено, а не то, что посетитель увидит в выпадающем списке ("строка первая"). И у тега option могут быть другие атрибуты кроме value, один из них - selected. Этот атрибут указывает, что эта строка выпадающего списка должна быть выбрана по умолчанию, то есть именно она будет видна при закрытом списке:вторая строкаКаждой строке списка соответствует отдельный тег option и все они должны располагаться внутри контейнера select, то есть до закрывающего тега : строка первая
   вторая строка
   это третья строкаА контейнер select, в свою очередь, обычно является одним из элементов формы и находится внутри её тегов её открывающих и закрывающих: строка первая
   вторая строка
   это третья строкаЭтот простой список из трёх строк, в котором по умолчанию выбрана вторая строка на странице будет выглядеть так:
2. Чтобы в выпадающем списке и в свёрнутом состоянии было видно несколько строк в теге select надо добавить атрибут size с количеством видимых элементов: строка первая
   вторая строка
   это третья строка
3. Ширина выпадающего списка определяется самой длинной его строкой, но её можно изменять с помощью стилей: строка первая
   вторая строка
   это третья строкаШирина задаётся в «пикселах» - такая единица измерения в основном используется при разметке html-страниц.
4. Есть возможность выбирать в списке не одну, а одновременно несколько строк. Для этого в тег select следует добавить атрибут multiple: строка первая
   вторая строка
   это третья строкаЕсть и другие вариации функциональных возможностей выпадающего списка. В основном они требуют в дополнение к языку HTML использовать языки JavaScript и CSS.