В този учебник ще научите как да създадете избирателни списъци, известни още като падащи менюта, с select-елемент в HTML. Тази комбинация от елементи е съществен елемент за интеракцията на потребителите в уеб формуляри, тъй като позволява на потребителите да избират от предварително дефинирани опции. Разглеждаме както множествен избор, така и едноредови списъци и обсъждаме стилизиращите опции, налични за използване.
Най-важните заключения
- Елементът select се използва с option-таг, за да осигури избор на опции.
- Стилизирането на полетата за избор е ограничено и варира в зависимост от браузъра.
- Ако искате повече контрол върху стилизацията, може да се наложи да се обърнете към други технологии като JavaScript или рамки.
Стъпка по стъпка ръководство
За да създадете просто падащо меню, започнете със select-елемента. Тук дефинирате полето за въвеждане, в което потребителите могат да направят своя избор.
Елементът select изисква атрибута name, за да можете да идентифицирате избраната опция при изпращане на формуляра. Тук задаваме името на "favorite_fruits", за да уловим предпочитаните плодове.
Вътре в select елемента добавяте няколко option тага, които представят отделните възможности за избор. Всеки от тези тагове има видим текст и подлежаща стойност, която се използва при изпращане на формуляра.
За да създадете падащо меню, може да зададете атрибута size на 1, което означава, че едновременно ще се показва само един елемент. Това гарантира, че ще се държи като обикновено падащо меню.
Допълнителен важен атрибут за select е multiple. Ако добавите този атрибут, потребителите могат да избират множество опции едновременно, подобно на чекбоксите. Потребителите могат да използват клавиша за управление (или клавиша Command на Mac), за да избират няколко елемента.
Когато направите избор и изпратите формуляра, стойността на избраните опции се изпраща на сървъра. Важно е да се поддържа като масив, когато се използва multiple, всеки избран елемент да бъде намерен в масива.
Елементът option може да съдържа само обикновен текст. HTML код като картинки или връзки не се поддържа в опциите. Въпреки това можете да промените външния вид чрез CSS, като например шрифт или цвят на фона.
Стилистични промени като шрифт и цвят могат да се направят с атрибута style на опциите. Това е по-лесно за изпълнение в списък, който се показва на нормален начин, тъй като имате повече контрол върху оформлението.
Външният вид на select-елементите може да варира в зависимост от браузъра. Някои браузъри може, например, да представят различно фоновия цвят и текста на падащите менюта. Важно е да се има това предвид при създаването на формулярите ви.
Ако се замисляте да добавите изображения като опции за избор, това може да стане по-сложно с помощта на select. Би било добре да разгледате възможността да се обърнете към JavaScript или външни UI библиотеки, тъй като не можете да вграждате обикновени HTML елементи в option таговете.
За да използвате по-сложен UI елемент, за който се изисква гъвкаво оформление, може да бъде по-умно да създадете собственото си падащо меню или списък или да се обърнете към съществуваща рамка.
Обобщено, select-елементът представлява отличен начин за прост избор от списък или за разрешаване на множествени избори. Важно е обаче да се помни сложността на стилизационните опции и разликите в браузърите, за да не се наруши потребителското преживяване.
Обобщение - Инструкции за създаване на уеб формуляри с избирателни списъци
В това ръководство научихте как да създадете избираеми списъци в HTML с елемента select. Акцентът беше върху практическото използване на полета за избор, възможностите за множествен избор и основните настройки на стила.
Често задавани въпроси
Каква е разликата между и?Основната разлика е, че предлага падащо меню, от което се избира опция, докато input type="radio" показва множество опции, от които може да се избере само една.
Как мога да избера няколко опции в ?Можете да приложите атрибута multiple на вашия елемент , за да позволите множествени избори.
Мога ли да използвам HTML вътре в таговете на ?Не, таговете поддържат само обикновен текст и не поддържат HTML съдържание.
Как мога да променя визията на елементите ?Можете да използвате CSS, за да направите основни промени в стиловете, но опциите са ограничени, тъй като не всички CSS свойства работят върху елементи.
Каква е препоръчителната методика, ако искам да използвам изображения в един избор?За използването на изображения в падащи списъци, е по-добре да се обърнете към JavaScript или външни UI библиотеки, тъй като елементите не поддържат HTML съдържание в таговете .
