Як зрабіць выпадальны спіс у HTML

Найпросты выпадальны спіс у HTML лёгка стварыць, выкарыстоўваючы тэг select. Гэта тэг-кантэйнер, у яго ўкладваюцца тэгі option - менавіта яны задаюць элементы спісу.

Ёсць некалькі варыянтаў спісаў, якія можна зрабіць з дапамогай тэга select: расчыняецца спіс (варыянты выпадаюць пасля кліку на асноўным полі ці навядзення на яго курсора) і спіс множнага выбару - у ім карыстальнік можа выбраць некалькі пунктаў. Першыя больш распаўсюджаныя, яны з'яўляюцца значным элементам навігацыі сучасных сайтаў. Выпадальны спіс множнага выбару можна ўжыць, напрыклад, у каталогах, дзе трэба выбраць некалькі характарыстык тавару.

Змяняць знешні выгляд і ўласцівасці спісаў можна з дапамогай універсальных і спецыяльных атрыбутаў.

Атрыбуты тэга select

1. Multiple - задае множны выбар.

2. Size - задае колькасць бачных радкоў у спісе, то ёсць вышыню. І тут усё залежыць ад таго, прысутнічае атрыбут multiple ці не. Калі так, і вы не паказваеце size, то пры наяўнасці multiple карыстальнік ўбачыць усе магчымыя варыянты выбару, калі ж multiple адсутнічае, то паказаная будзе ўсяго адна радок, а астатнія наведвальнік зможа прачытаць, калі націсне на значок ліфта з правага боку. Калі ж вышыня size зададзена і яна менш за колькасць варыянтаў, то справа з'явіцца паласа прагорткі.

3. Name - імя. Выпадальны спіс можа абыйсціся і без яго, але яно можа быць неабходным для ўзаемадзеяння з праграмай-апрацоўшчыкам на сэрвэры. Як правіла, імя ўсё ж такі паказваюць.

Тэг select не мае абавязковых атрыбутаў у адрозненне ад тэга option.

Атрыбуты ўкладзенага тэга option

1. Selected - прызначаны для вылучэння пункта спісу. Карыстальнік зможа вылучаць больш аднаго пункта, калі зададзены атрыбут multiple (гл. Вышэй).
2. Value - значэнне. Гэты атрыбут абавязковы. Вэб-сервер павінен разумець, якія менавіта пункты спісу абраў карыстальнік.
3. Label. З дапамогай гэтага атрыбуту можна скарачаць занадта доўгія элементы спісаў. Напрыклад, на экран будзе выводзіцца «Мілан», замест названага ў тэгу option «Мілан - адміністрацыйны цэнтр Ламбардыі. Паўночная Італія ». Гэты атрыбут таксама выкарыстоўваецца для групоўкі пунктаў у спісе.

Што тычыцца шырыні спісу, то яна вызначаецца па змаўчанні па даўжыні самага шырокага тэксту ў спісе. Зразумела, шырыня можа мяняць пры дапамозе стыляў HTML.

Выпадальны спіс іншымі спосабамі

Яго можна зрабіць пры дапамозе CSS, напрыклад, спіс будзе з'яўляцца пры навядзенні курсора на элемент старонкі. Выдатныя магчымасці для стварэння спісаў прадастаўляе JavaScript, працу якога спрашчае бібліятэка Jquery. Выпадальны спіс, падлучаны з дапамогай гэтай бібліятэкі, можа быць вельмі складаным, напрыклад, каскадным. Гэта значыць пры выбары элемента ў адным спісе з'яўляецца наступны спіс, напрыклад, існуе пункт меню «Жаночае адзенне» (пры навядзенні выпадаюць віды адзення), затым пры выбары аднаго з відаў, напрыклад, «Верхняя одежда», выпадае спіс з элементамі: курткі, паркі, паліто, паўпаліто, футры і т. п.

Мы павярхоўна пералічылі асноўныя спосабы, пры дапамозе якіх можна стварыць выпадальны спіс. Зразумела, ёсць маса нюансаў у HTML, у CSS і ў JavaScript, якія дазваляюць змяняць функцыянальнасць і знешні выгляд спісаў.