пример » Забележка: поради по различни начини избиране на множество елементи и допълнително уведомяване на потребителите, че са налични множество опции, се препоръчва да се използват квадратчета за отметка вместо падащ списък.
Име: Определя името на падащия списък. Може да се използва за достъп до данните на формуляра, след като са били изпратени, или за препратка към елемент в JavaScript.
размер: Указва броя на видимите опции в падащия списък. Ако стойността на атрибута size е по-голяма от 1, но по-малка от общия брой опции в списъка, тогава браузърът автоматично ще добави лента за превъртане, за да покаже, че има още опции за преглед.
Последна актуализация: 08.04.2016
Елементът select създава списък. В зависимост от настройките, това може да бъде падащ списък за избор на един елемент или разширен списък, в който можете да изберете няколко елемента наведнъж.
Нека създадем падащ списък:
Изпратете
iPhone 6s
ябълка
iPhone 6s
лумия 950
nexus 5x
С атрибута selected можем да зададем избрания елемент по подразбиране - не е задължително да е първият елемент в списъка:
Друг атрибут, disabled, може да се използва за предотвратяване на избирането на конкретен елемент. Обикновено елементи с този атрибут се използват за създаване на заглавия:
iPhone 6s
лумия 950
nexus 5x
Изберете модел
Нека създадем падащ списък:
За да създадете списък с множество възможности за избор, трябва да добавите атрибута multiple към елемента select:
Задържайки клавиша Ctrl, можем да изберем няколко елемента в такъв списък:
:
Нека създадем падащ списък:
Lumia 650
Използването на групи артикули се отнася както за падащи списъци, така и за списъци с множествен избор. Много често, когато се регистрирате или анкетирате в сайтове, от вас се иска да направите нещо избор от падащия списък . Например, изберете вашата страна от много други държави. Всичко това са различни елементи на формата, те могат да бъдат проектирани по различни начини: от прости HTML5 да комплексирам .
CSS3 Днес ще разгледаме един такъв пример за проектиране на избрано поле с помощта на HTML/CSS и икона Шрифт Awesome
. Но ще започнем, както обикновено, с маркиране на документи.
HTML код Вътре в етикет изберете има елементи от падащ списък опция Вътре в етикет . На свой ред етикети и форма вложени в общ контейнер див и . Етикет
Позициониране на контейнера с класа кутия в центъра на прозореца.
кутия(
Предварително свързваме шрифта на иконата преди затварящия таг главата .
Оформяне на селектора
Задаваме размери на полето за избор - 250x50 пиксела и правим полетата за елементите 10 пиксела от всички страни.
Изберете кутия (
Премахване на рамката и инсулт:
Граница: няма;
Ние определяме лилав цвят на фона, заглавие, цвят и размер на шрифта за списъците.
Фон: #ab05af;
Създайте сянка около полето.
Box-shadow: 0 5px 20px rgba(0,0,0,.3);
Общо взето изберете поле готов и работи, но изглежда скучно, а триъгълникът, който трябва да ударите с мишката, е много малък. И ако си мислех така, тогава дизайнерът ще мисли същото, трябва да се подготвим предварително за различни опции.
Най-вероятно дизайнерът ще замени малкия триъгълник с икона от шрифта и икона .
Изглежда много по-хубаво по този начин, но кодът все още трябва да бъде написан от дизайнер на оформление. Какво може да е решението тук? Няма да пипаме HTML код , и използвайте псевдоелемент преди .
Преди псевдоелемент за .box
Първото нещо, което трябва да направите, е да запишете кода на иконата и името на шрифта „Font Awesome 5 безплатно“ . Изберете на сайта fontawesome.com желаната икона, указваща „селекция“ и копирайте нейния код.
След това го позиционираме абсолютно, посочваме размери 50x50, цветът на иконата е бял, фонът е светло лилав. Зададохме много важно свойство указателни събития: няма . Това означава, че псевдо елементът преди не е обектът на събитието на мишката, а стойността няма казва на събитието "избор на мишката" да отиде до най-долния слой и да получи достъп до елемента под него - този малък триъгълник. Триъгълникът не е изчезнал, той е точно под псевдоелемента преди , служещи само за декорация. Щраквайки върху красивата икона, „грозният“ триъгълник действително работи и ние правим своя избор.
Здравейте, скъпи читатели на сайта на блога. Като част от нашето изследване на тънкостите, като следваща задача ще продължим да анализираме подробностите за създаването на формуляри на сайта, като използваме подходящите.
Днес ще разгледаме как да създадем падащи (падащи) списъци , включително избираем избор, с помощ при избора и опция, как да се изгради текстово поле чрез textarea, а също така говорим за възможността за разширяване на функционалността на формулярите чрез използване на тагове набор от полета, етикет и легенда .
Позволете ми да ви напомня, че всяка форма, присъстваща на страницата, е създадена с помощта и е предназначена да въвежда всяка информация от потребителя и да я изпраща на сървъра (пример - ).
За съжаление, инструментите на езика за маркиране на хипертекст не ви позволяват директно да обработвате тази информация, така че използвайки HTML ние само създаваме външен вид формуляри, а необходимите данни се изпращат за обработка. За тази цел на уеб сървъра целенасочено се създава специален файл, написан на един от сървърните езици (най-често PHP). Да кажем за обратна връзка можете да създадете файл mail.php, който ще бъде манипулаторът.
Когато използвате на практика информацията, получена в тази публикация, не забравяйте как трябва да изглежда, където кодовете на всички видими елементи на страницата, включително формуляри, винаги се намират в етикета body.
Тази информация е изключително необходима, защото дори и да използвате всички съвременни инструменти за разработчици, вградени в тях (нека ви напомня, първият знак при внедряването на тази функционалност беше), трябва ясно да разберете механизма за използване на основните тагове, след това редактирането на HTML кода, необходимостта от което възниква от време на време, ще се превърне в приятно занимание.
2. Множество — този атрибут, който няма параметри, позволява многократен избор, за разлика от горния пример, където можете да изберете само един елемент (ред). Опитайте да маркирате в този списък с мишката няколко реда наведнъж (един по един на всяко място, като държите натиснат клавиша Ctrl или използвате Shift, следващи един след друг):
3. Размер — задава височината на падащия списък, т.е. броя на показаните редове. Ако множественият атрибут присъства и стойността на размера не е посочена (както в примера по-горе), тогава по подразбиране се показват четири реда , и например с size="5" ще се виждат пет:
4. Задължително (няма параметри)—определя, че трябва да се направи избор, преди да се изпратят данни към манипулатора. Ако елемент от списъка не е избран, данните от формата няма да бъдат изпратени:
5. Автофокус (няма значение) - поставя фокуса върху списъка веднага след зареждането на страницата. Освен това, ако потребителят е свикнал да извършва повечето от действията с помощта на клавиши, тогава точно такъв предварително конфигуриран фокус ще ви помогне да направите избор от списъка с помощта на стрелките на клавиатурата, без да използвате мишката:
6. Забранено (без параметри) - блокира достъпа до списъка (забранява го). На практика обикновено се използва заедно със скриптове в случаите, когато трябва да активирате падащ списък само когато са изпълнени определени условия:
7. форма — комуникира списъка с една или повече форми, към които принадлежи, но се намира извън контейнера
. В този случай параметърът се записва като стойността на атрибута на формата глобален идентификатор на атрибут който се добавя към етикета на формуляра:
Не бъркайте атрибута select tag с main form тага. В примера по-горе атрибутът id="data" беше добавен към маркера на формуляра и form="data" беше добавен към маркера за избор, което направи възможно свързването на падащия списък с конкретен формуляр.
Атрибути на етикета на опцията
1. Стойност — определя стойността от падащия списък, която ще бъде изпратена на сървъра (процесор на формуляри). Всъщност на манипулатора се изпраща име, което е указано от атрибута name на тага за избор и стойност стойност (За този пример — 1, 2, 3, 4, 5), съответстващ на избрания ред от падащия списък:
2. Забранено — блокира избора на елемент от падащ списък.
Както можете да видите от примера, редът „Опция“ е неактивен и не може да бъде избран.
3. Етикет — показва текстовото съдържание (което е неговата стойност) на определен елемент от списъка. Ако е налице етикет, тогава се показва ред, идентичен със стойността на този атрибут, и текстовото съдържание в тага на опцията се игнорира. Същото се случва, ако съдържанието между . На свой ред етикети напълно отсъства.
Вижте. В горния пример първият ред за опция в кода е празен (от лявата страна на таблицата), но е написан параметърът label="Option Tag", в резултат на което точно този текст се появява в списъка (на дясната страна). Вторият ред от кода съдържа текста „Textarea Tag“ като съдържание на опцията таг, но падащото меню вдясно показва думата „Textarea“, за да съответства на стойността на label="Textarea".
4. Избрано — избира текущия елемент от падащия списък:
Ако атрибутът multiple е наличен, тогава е възможно да изберете повече от един елемент:
Атрибути на тага optgroup
Ако падащият списък трябва да бъде сортиран по някакъв начин, например разделен на групи, тогава за всяка от тези групи се използва контейнер, състоящ се от отварящи и затварящи тагове optgroup, който съдържа част от елементите на падащия списък. Има обаче два атрибута за настройка на такъв падащ списък.
1. Етикет — задава името на всяка група като параметър:
Същото нещо, но с множество и size="7" на маркера за избор:
2. Забранено (няма стойности) - блокира избора на елементи от групата, по отношение на която е инсталиран, а неактивните елементи обикновено се маркират в сиво:
Кратко видео ще бъде полезно тук:
Текстово поле във формуляр, използващ текстово поле
Друг елемент на формата за сайта, който ще разгледаме, е поле с възможност за въвеждане на многоредов текст в него. Може да се създаде с помощта на тага textarea. Без атрибутите по подразбиране прилагането на този етикет ще доведе до следния резултат:
Можете да извършвате прекъсвания на редове в полето и текстът ще бъде прехвърлен към процесора на сървъра, като се вземат предвид направените промени. Полето може да бъде разтегнато на ширина и дължина, като щракнете върху долния десен ъгъл, който е маркиран с две диагонални ивици.
Нека сега се опитаме да добавим няколко атрибута с параметри към оригиналния код:
1. Име - дефинира името на текстовата област като стойност, за да я идентифицира след подаване на данни от формуляра, когато се обработва на сървъра.
2. Cols — ширина на полето, която се определя като параметър от броя на съседните еднакви знаци, разположени хоризонтално. Стойността по подразбиране е 20 .
3. Редове — височината на текстовото поле, определена от броя на редовете. Ако броят редове текст, въведен от потребителя, е по-голям от стойността, зададена от този атрибут, вдясно ще се появи вертикална лента за превъртане.
4. Максимална дължина — определя максималния брой знаци, които могат да бъдат поставени в текстовото поле. Ако лимитът бъде надвишен, по-нататъшното въвеждане няма да е възможно.
По-долу е даден пример с всички горни атрибути, действието на всеки от които можете да проверите сами, като просто поставите необходимия брой букви и редове в текстовата област (можете просто да въведете един и същи знак няколко пъти):
5. Минимална дължина — определя минималния брой знаци, които трябва да бъдат въведени в текстовата област. Ако потребителят се опита да изпрати текст с по-малко знаци, браузърът ще покаже кратко съобщение с информация, която ще съдържа споменаване на необходимостта от допълване на съдържанието на формуляра и колко знака вече са въведени.
7. Само за четене (без параметри) - ако прикачите този атрибут към textarea, текстовото поле няма да може да се редактира от потребителите и ще бъде само за четене. Но можете да се фокусирате върху него (преместете курсора в полето и щракнете с левия бутон), както и да изберете и копирате (частично или напълно) текста:
Още няколко атрибута, които реализират допълнителна функционалност при попълване на полета:
8. Автоматично довършване — указва дали браузърът трябва да предоставя подсказки, когато потребителят попълва формуляр въз основа на предварително въведени данни и предоставя възможност за автоматично вмъкване на подходящ текст.
Има само два параметъра : на (активиран) и изключено (изключен). Ето примерен код:
Този атрибут със стойност „включено“ работи само когато автоматичното попълване на полетата на формуляра е активирано в уеб браузъра на конкретен потребител.
9. Увийте - задава правилата на браузъра за прекъсване на редове в текстовата област, използвайки три стойности:
Мек — автоматично се прехвърля набор от знаци, който не се вписва в полето по ширина нов ред . В този случай процесорът текстът ще бъде изпратен като един ред . Ако потребителят прехвърли текст на произволно място с помощта на клавиша „Enter“, тогава този трансфер се запазва при изпращане на уеб формуляра.
трудно — тирета се правят автоматично, ако текстът не се побира в полето по ширина и когато се изпращат до процесора, местата на такива тирета ще бъдат запазени. Тази опция се използва само в във връзка с атрибута cols :
Изкл — деактивирайте прекъсванията на редовете. Ако отпечатате текстов фрагмент без механично прехвърляне с помощта на клавиша „Enter“, тогава целият текст ще бъде поставен на един ред и ще се появи хоризонтална лента за превъртане:
10. Автофокус (няма параметри) - инициира фокусиране върху текстовото поле при зареждане на страницата с формата.
11. Забранено - за разлика от атрибута само за четене (който също забранява редактирането на съдържанието на полето, но дава възможност да се фокусира върху него), напълно блокира достъпа до текстовата област, която обикновено е оцветена в сиво:
Проектиран да създаде списък с предложени елементи, от които потребителят може да избере един или повече. …
Ограничено до тагове Атрибути на тагове ...
...
... автофокус Автоматично получава фокус, когато страницата се зареди. Стойността може да се зададе по три начина: ...
...
... disabled Деактивира избора от списъка. Стойността може да се зададе по три начина: множество Позволява ви да изберете няколко елемента от списък едновременно. Моля, обърнете внимание, че при множествен избор може да има няколко променливи с едно и също име в потока от данни от един формуляр.
Вашата програма за обработка трябва да предвиди подобни ситуации и да се справи правилно с тях. ... име Име на списъка. Задължителен атрибут.
Ограничено до тагове задължително Трябва да бъде избран елемент с непразна стойност. Ако това не е направено, браузърът ще покаже съобщение и формулярът няма да бъде изпратен до сървъра. Външният вид и съдържанието на съобщението зависи от браузъра и не може да се променя от потребителя (не работи в IE и Safari). size Вертикален размер на списъчното поле. .
Ако атрибутът е пропуснат или стойността му е 1, се показва изскачащ списък с елементи. Ако е посочено число, по-голямо от 1, тогава елементите от списъка се показват в прозорец с лента за превъртане. Ако стойността на атрибута е по-голяма от действителния брой елементи от списъка, тогава се добавят празни елементи. Когато потребителят ги избере, се връщат празни полета.
Елемент от списък
чай
кафе
чай
мляко
мляко ... шунка
шунка
сирене
чай
Освен това, за допълнителна яснота, всяка група с използвайки CSS можете да го боядисате в свой собствен цвят.
Пример за маркиране на групи от елементи от списък с цвят
чай
HTML3.2 HTML4.0 HTML5 CSS1 CSS2 CSS3 JavaScript DHTML
