Въведение в падащия списък в HTML
Изпадащият списък в HTML е важен елемент за целите на изграждането на формуляри или за показване на списъка за избор, от който потребителят може да избере една или няколко стойности. Този вид списък за избор в HTML е известен като Dropdown list. Той е създаден с помощта на маркер със стойност. Това позволява на потребителя да избере всяка опция според техния избор. Винаги е добра практика да използвате падащия списък, когато знаете стойността на опцията, така че човек може да зададе всяка стойност като атрибут по подразбиране, а други ще бъдат като опция стойности.
Нека да видим как ще бъде създаден падащият списък:
Синтаксис:
option1
option2
option3
option3
Пример:
Red
Purple
Както е показано в горния синтаксис, е маркер, използван за създаване на падащ списък. таг, затворен в маркера за избор, е стойност на атрибут или атрибути за списъка за избор, стойността ще бъде за показване на опция за времето е избрана, деактивирана или с всякакви други свойства.option1, 2…. ще бъде името. С помощта на CSS можем да дадем ефекти на нашия списък за подбор, да можем да задаваме позиции като относителни, абсолютни и т.н., да можем да задаваме ширина и да изпълняваме много други функции.
Задаване на цвят или цвят на фона на курсора с помощта на код:
.dropdown a:hover(
Background-color: color_name;
)
Позицията за падащия списък се дефинира на две стойности: позиция: относителна, която се използва за показване на съдържанието на списъка точно под бутона за избор на списък. С помощта на позиция: абсолютна;
Минималната ширина е едно от свойствата, използвани за даване на конкретна ширина на падащия списък. Можем да го зададем толкова дълго, колкото нашия падащ бутон, като зададем ширина на 100%. Горе синтаксисът е дефиниран за избор на един атрибут, сега ще видим как ще бъдат избрани множество опции от списъка с елементи.
Синтаксис:
option1
option2
Пример:
Math
English
Science
Biology
Как работи падащият списък в HTML?
След като изучим синтаксиса, сега ще видим как точно ще работи падащият списък в HTML. Има някои атрибути, които се използват в маркера, които са както следва:
- Име: Този атрибут е полезен за задаване на име на контрола, който ще изпрати на сървъра, за да бъде идентифициран и да приеме необходимата стойност.
- Множество: Ако атрибутът е зададен на „множество“, потребителят може да избере множество стойности от списъка за избор.
- Size: Атрибут Size се използва за определяне на определена по размер кутия за превъртане около падащия списък. Полезно е и за показване на няколко видими опции от списъка.
- Стойност: Този атрибут ще показва опция в списъка за избор.
- Избрани: Избраните атрибути дават възможност в началните точки на зареждането на страницата за показване на вече избран елемент от списъка.
- Етикет: Атрибутите на етикета работят като друг подход към стойността на опциите за етикетиране.
- Деактивиран: Ако искаме да покажем падащ списък с опция за деактивиране, тогава е възможно да се използва атрибут забранено в списъка за избор на HTML.
- onChange: Всеки път, когато потребителят ще избере някой от опцията от падащия списък, тогава събитието се задейства при избор на артикули.
- onFocus: Всеки път, когато потребителят задържи мишката в списъка за избор, за да избере опция от списъка, той задейства събитие за избор на елемент.
- Форма: Този атрибут се използва за дефиниране на една или няколко форми, които са свързани с полето за избор.
- деактивиран: Трябва да запазим падащия списък да деактивира от потребителя с помощта на този атрибут.
- задължително: Всеки път, когато попълваме някакъв формуляр, искаме да покажем, че това поле е необходимо, за да се избере каквато и да е стойност от неговия списък преди действителното изпращане на формуляра, така че в този случай ние определяме, че потребителят е длъжен да избере всяка една стойност от списъка.
Примери за HTML код
Следващите примери ще покажат как точно ще се използва падащият списък:
Пример №1
Код:
DropDown List
Седем чудеса на света
Тадж Махал
Великата китайска стена
Христос Изкупителят Сату
Мачу Пикчу
Чичен Ица
Римският Колизей
Петра
Горният пример съдържа различни опции като забранени, избрани, задължителни и т.н., които са показани на изходния екран.
изход:
Пример №2
Код:
Mumbai
Pune
Nagpur
Solapur
Latur
Тук можете да изберете няколко опции. Моля, натиснете клавиша ctrl и изберете няколко опции наведнъж.
функция multipleFunc () (document.getElementById ("multiselectdd"). multiple = true;
)
Както е показано на екрана по-долу, за да изберете няколко опции от падащия списък, натиснете даден бутон и чрез натискане на CTRL изберете няколко опции.
изход:
Пример №3
Код:
.dropdownbtn (
background-color: black;
color: white;
padding: 12px;
font-size: 12px;
)
.dropdowndemo(
position:fixed;
display: block;
)
.dropdownlist-content (
display: none;
position: absolute;
background-color: greenyellow;
min-width: 120px;
z-index: 1;
)
.dropdownlist-content a (
color: darkblue;
padding: 14px 18px;
display: block;
)
.dropdownlist-content a:hover (background-color: lightcyan;)
.dropdowndemo:hover .dropdownlist-content (display: block;)
.dropdowndemo:hover .dropdownbtn (background-color: blue;)
Задръжте курсора на падащото меню
HTML формат Елемент
звена
Падащ списък
Поле за въвеждане
бутон
Радио Бутони
Падащият списък ще бъде отворен при ефект на задържане.
изход:
заключение
Можем да заключим, че падащият списък се използва за избор на опция от списъка за избор. Използва се за избор на единични или няколко опции наведнъж. Потребителите могат да изберат опция от списъка по свой избор, така че тя става по-удобна за потребителя. Изброените по-горе атрибути се използват с маркерите за избор за извършване на различни операции за избор със списъка с падащи падащи елементи.
Препоръчителен член
Това е ръководство за падащ списък в HTML. Тук обсъждаме как падащият списък работи в HTML и неговите примери с прилагането на код. Можете също да прегледате и другите ни свързани статии, за да научите повече -
- Преглед на атрибута на стила на HTML
- Топ 10 предимства на HTML
- Различни видове HTML рамки със синтаксис
- Топ 8 елемента на HTML оформление
- Как да създадете RadioButton?