Здравейте, скъпи читатели на сайта на блога. Като част от изучаването на тънкостите, като следващата задача, ще продължим да анализираме подробностите за създаване на формуляри в сайта, като използваме съответните.
Днес ще научим как да създаваме падащи (падащи) списъци, включително с множествен избор, като се използва select и option, как се конструира текстово полечрез текстово поле, а също така говорим за възможността за разширяване на функционалността на формите чрез използване на тагове набор от полета, етикет и легенда.
Нека ви напомня, че всеки формуляр, присъстващ на страницата, се създава с помощта и е предназначен да въвежда всякаква информация от потребителя и да я изпраща на сървъра (пример -).
За съжаление, инструментите на езика за маркиране на хипертекст не ни позволяват директно да обработваме тази информация, така че с HTML създаваме само външния вид на формуляра, а необходимите данни се изпращат за обработка. За целта на уеб сървъра целенасочено се създава специален файл, написан на един от сървърните езици (най-често PHP). Да речем, за обратна връзка можете да създадете файл mail.php, който ще бъде манипулаторът.
При практическо използване на информацията, получена в тази публикация, не забравяйте как трябва да изглежда, където кодовете за всички видими елементи на страницата, включително формуляри, винаги са в етикета body.
Тази информация е от съществено значение, защото дори и да използвате всички съвременни вградени инструменти за разработчици (напомням ви, че първият знак при внедряването на тази функционалност беше), трябва ясно да разберете механизма за използване на основните тагове, след което редактирате HTML код, нуждата от който възниква от време на време, се превръщат в забавно занимание.
2. многократни- този атрибут, който няма параметри, позволява множествен избор, за разлика от горния пример, където можете да изберете само един елемент (линия). Опитайте се да изберете няколко реда в този списък с мишката наведнъж (един по един на произволно място, задържайки натиснат клавиш Ctrl, или с помощта на Shift, следващ в ред един по един):
3. размер- задава височината на падащия списък, т.е. броя на показваните редове. Ако атрибутът multiple присъства и размерът не е посочен (както в примера по-горе), тогава по подразбиране се показват четири реда, и например с size="5" ще се виждат пет:
Опция Textarea Label Fieldset Легенда |
4. Задължително(няма параметри) - указва, че трябва да се направи избор преди изпращане на данни до манипулатора. Ако елемент от списъка не е избран, данните от формуляра няма да бъдат изпратени:
Опция Textarea Label Fieldset Легенда |
5. автофокус(няма значение) задава фокус върху списъка веднага след зареждането на страницата. Освен това, ако потребителят е свикнал да извършва повечето от действията с клавишите, тогава точно такова предварително конфигурирано фокусиране ще ви помогне да направите избор от списъка с помощта на стрелките на клавиатурата без никаква употреба на мишката:
6. хора с увреждания(без параметри) - блокира достъпа до списъка (деактивира го). На практика обикновено се използва заедно със скриптове в случаите, когато трябва да активирате падащ списък само ако са изпълнени определени условия:
7. Формуляр— свързва списъка с една или повече форми, към които принадлежи, но е извън контейнера
. В същото време параметърът се записва в ролята на стойността на атрибута на формата глобален идентификационен атрибут, който се добавя към маркера на формуляра:
Изберете от списъка Опция Textarea Label Fieldset Легенда |
Не бъркайте атрибута на маркера за избор с основния маркер за създаване на формуляра. В примера по-горе, атрибутът id="data" се добавя към маркера на формата, а атрибутът form="data" се добавя към маркера за избор, което прави възможно свързването на падащия списък с конкретна форма.
атрибути на маркера за опции
1. стойност- определя стойността от падащия списък, която ще бъде изпратена на сървъра (обработчик на формуляри). Всъщност името се изпраща на манипулатора, който се задава от атрибута name на маркера за избор и стойност(за този пример - 1, 2, 3, 4, 5), съответстващ на избрания ред от падащия списък:
Опция Textarea Label Fieldset Легенда |
2. хора с увреждания— блокира елемента от падащия списък за избор.
Опция Textarea Label Fieldset Легенда |
Както можете да видите от примера, редът "Опция" е неактивен и не може да бъде избран.
3. етикет- показва текстовото съдържание (което е неговата стойност) на един или друг елемент от списъка. Ако етикетът е налице, тогава низът, който е идентичен със стойността на този атрибут, се показва и текстовото съдържание в маркера на опцията се игнорира. Същото се случва, ако съдържанието между напълно отсъства.
Таг Textarea Етикет етикет Етикет Fieldset Таг Легенда |
Виж. В дадения по-горе пример първият ред за опция в кода е празен (от лявата страна на таблицата), но е посочен параметърът label="Option tag", в резултат на което този текст се появи в списъка (на дясната страна). Вторият ред на кода съдържа текста "Textarea Tag" като съдържание на маркера за опция, но падащият списък вдясно показва думата "Textarea", която съответства на стойността на label="Textarea".
4. Избрано- подчертава текущия елемент от падащия списък:
Опция Textarea Label Fieldset Легенда |
Ако атрибутът multiple е налице, тогава могат да бъдат избрани повече от един елемент:
Опция Textarea Label Fieldset Легенда |
атрибути на маркера на optgroup
Ако падащият списък трябва да бъде сортиран по някакъв начин, например разделен на групи, тогава за всяка от тези групи се използва контейнер, състоящ се от отварящи и затварящи маркери на optgroup, който съдържа част от елементите на падащия списък. Има обаче два атрибута за персонализиране на такъв падащ списък.
1. етикет- задава името на всяка група като параметър:
Опция Textarea Label Fieldset Легенда |
Същото, но с множество и size="7" от избрания маркер:
Опция Textarea Label Fieldset Легенда |
2. хора с увреждания(без стойности) - блокира избора на елементи от групата, по отношение на която е зададена, освен това неактивните елементи обикновено са в сиво:
Опция Textarea Label Fieldset Легенда |
Тук би било много полезно кратко видео:
Текстово поле във форма чрез текстово поле
Друг елемент на формуляр за сайта, който ще разгледаме, е поле с възможност за въвеждане на многоредов текст в него. Може да се създаде с помощта на маркера textarea. Без атрибути по подразбиране, прилагането на този таг ще доведе до следния резултат:
Въведете текст: |
В полето можете да извършвате прекъсвания на редове, докато текстът ще бъде прехвърлен към манипулатора на сървъра, като се вземат предвид направените промени. Полето може да се разтегне по ширина и дължина, като се хване с мишката долния десен ъгъл, който е маркиран с две диагонални ивици.
Сега нека се опитаме да добавим няколко атрибута с параметри към оригиналния код:
1. име- Указва името на текстовата област като стойност, за да я идентифицира след изпращане на данните от формуляра, когато се обработват на сървъра.
2. Cols- ширина на полето, което като параметър се задава от броя на еднакви знаци, стоящи един до друг, разположени хоризонтално. Стойността по подразбиране е 20.
3. Редове- височината на текстовото поле, определена от броя на редовете. Ако броят на въведените от потребителя редове текст е по-голям от стойността, определена от този атрибут, вдясно ще се появи вертикална лента за превъртане.
4. Максимална дължина- Посочва максималния брой знаци, които могат да бъдат поставени в текстовото поле. Ако ограничението е надвишено, по-нататъшно въвеждане няма да е възможно.
По-долу е даден пример с всички горепосочени атрибути, ефектът на всеки от които можете да проверите сами, като просто поставите необходимия брой букви и редове в текстовата област (можете просто да въведете един и същ знак няколко пъти):
Въведете текст: |
5. мин. дължина- Посочва минималния брой знаци, които трябва да бъдат въведени в текстовата област. Ако потребителят се опита да изпрати текст с по-малко знаци, браузърът ще покаже кратко съобщение с информация, която ще упоменава необходимостта от попълване на съдържанието на формуляра и колко знака вече са въведени.
7. Само за четене(без параметри) - ако този атрибут е прикачен към текстовото поле, тогава текстовото поле ще бъде недостъпно за промяна на потребителите и ще бъде само за четене. Но можете да се съсредоточите върху него (преместете курсора в полето и щракнете с левия бутон), както и да изберете и копирате (частично или напълно) текста:
Още няколко атрибута, които реализират допълнителна функционалност при попълване на полета:
8. Автоматично довършване- показва дали браузърът трябва да дава съвети, когато потребителят попълни формуляра въз основа на въведени по-рано данни и дава възможност за автоматично вмъкване на съответния текст.
Има общо два параметъра: На(включено) и изключен(изключен). Ето примерен код:
Този атрибут, зададен на "on", работи само когато уеб браузърът на потребителя има активирани полета за формуляри за автоматично попълване.
9. Увийте- задава правилата за обвиване на редове на браузъра в текстовата област, използвайки три стойности:
Мека- набор от знаци, който не се побира в полето по ширина, автоматично се увива на нов ред. В същото време процесорът текстът ще бъде изпратен като един ред. В случай, че потребителят обвива текста на желано място с помощта на клавиша "Enter", тогава такова обвиване се запазва при подаване на уеб формуляра.
Въведете текст: |
Твърд- пренасянето се извършва автоматично, ако текстът не се вписва в полето по ширина и, когато се изпрати до манипулатора, местата на такова прериване ще бъдат запазени. Тази настройка се използва само в във връзка с атрибута cols:
Въведете текст: |
Изключено- деактивирайте прекъсванията на редове. Ако въведете текстов фрагмент без механично прехвърляне с помощта на клавиша "Enter", тогава целият текст ще бъде поставен на един ред и ще се появи хоризонтална лента за превъртане:
Въведете текст: |
10. автофокус(без параметри) - Инициира фокусиране върху текстовото поле, когато страницата с формуляра се зареди.
11. хора с увреждания- за разлика от атрибута само за четене (който също забранява редактирането на съдържанието на полето, но прави възможно фокусирането върху него), той напълно блокира достъпа до текстовата област, която обикновено е боядисана в сиво:
Поздрави на всички читатели на моя блог. Днес ще ви кажа как да направите падащ списък в html, какви тагове и атрибути трябва да използвате, а също и за какви цели може да ви е необходим.
Етикетът за избор и създаване на падащ списък
И така, падащ списък в html се създава с помощта на сдвоен маркер за избор, в който се поставят сдвоени маркери за опции. Именно в тях се записват всички опции, които ще се предлагат, когато щракнете върху списъка. пример:
Изберете животно
В този случай това, което се показва между отварящата и затварящата част на опцията, ще видите на екрана, а стойността, съдържаща се в атрибута value, ще бъде изпратена на сървъра или обработена с помощта на скрипт.
Списъкът в html може да бъде нормален и с множество възможности за избор. За да направите възможно избора на множество елементи, трябва да добавите празен атрибут за множество към select . За да изберете няколко стойности, задръжте ctrlи натиснете левия бутон на мишката.
Друг полезен атрибут е размерът. Позволява ви да изберете колко реда да се показват в падащия списък.
Друг атрибут е деактивиран. Това прави списъка недостъпен за щракване и разглеждане на елементи, но в същото време е видим на страницата.
Задължителен е html5 атрибут. Ако е зададен, формулярът няма да бъде изпратен, освен ако не бъде избрана стойност от падащия списък. Като цяло става задължителен избор. Докато атрибутът не работи във всички браузъри.
атрибути на маркера за опции
Всъщност select служи само като контейнер за елементи от списъка, самите те се задават с помощта на маркера опция. Той има параметър стойност, както вече разбрахме, но има и други освен този. Например:
Деактивирано - прави елемента от списъка недостъпен за избор. Ще се покаже, но не можете да щракнете върху него.
Избран – елементът ще бъде избран по подразбиране. В обикновен списък този атрибут без стойност може да бъде зададен само на един елемент, в множество списък, на няколко.
Важно уточнение за правилна работа
Ако резултатът от селекцията ще трябва да бъде изпратен на сървъра или обработен чрез скриптове, поставете избрания във формуляра, така че да няма грешки. Факт е, че падащият списък първоначално е създаден точно като един от елементите на формуляра.
За какво се избира?
Обикновено може да ви бъде полезно, ако се регистрирате на вашия сайт или искате да проведете анкета. Елементът има недостатък - не променя много добре външния вид чрез css.
По подразбиране, когато щракнете върху списъка, се появява синя рамка, елементите от списъка, над които се задържа курсорът, са маркирани в същия цвят. Така че когато щракнете върху рамката да не се показва или да е маркирана в различен цвят, можете да напишете следния селектор:
изберете: фокус (
контур: 1px плътен оранжев;
}
Рамката вече ще е оранжева.
Опцията също може да бъде стилизирана, но когато задържите курсора на мишката върху елемент, фонът му става син и по някаква причина това не се променя чрез стилове.
Опция(
цвят: кафяв
фон: аква;
}
Между другото, може би някой от вас знае как да промени цвета на фона, когато задържите курсора на мишката върху елемент с помощта на css?
Това всъщност е всичко за избрания маркер и неговото приложение. За него не са предвидени допълнителни функции в html. Всички други операции с него могат да се извършват с помощта на javascript и php. Например, ако трябва да създадете списък за избор на година на раждане и може да има 80-100 различни опции, бихте ли ги написали ръчно?
Само за това трябва да използвате програмиране, а именно цикъла. Е, добре, това е тема за друг разговор, но за днес това е цялата информация, която исках да ви кажа. Можете да се запознаете с други основни тагове в html.
Тагът за опция HTML се използва за създаване на падащ списък, който позволява на потребителя да избере една опция от предварително дефиниран набор от стойности.
Текстът, който се вижда от потребителя, може да се различава от текста, посочен в атрибута value. Ето как можете да създадете падащ списък:
- Падащият списък се създава с помощта на тага
- Вътре в етикета
- В етикет
Можете също да зададете CSS клас, вместо да използвате ID за стилизиране на падащото меню.
В следващия раздел ще покажа примери за това как да използвате падащия списък с HTML в JavaScript/JQuery. Примерите също ще покажат как да стилизирате
Пример за създаване на прост падащ списък
Този пример за избор на HTML опция се използва за създаване на падащ списък с три опции за избор:
В примера по-горе, следното маркиране се използва за създаване на падащия списък:
Използване на атрибута value
Както бе споменато по-рано, стойността на атрибута value може да бъде различна от текста, показан на страницата. Например, можете да покажете имената на държави или цветове за потребителите и да използвате кратки кодове в атрибута value.
В следващия пример ще създадем падащ списък с атрибут value:
Вижте онлайн демонстрация и код
За етикет
Пример за достъп до избраната опция в JavaScript
Сега нека създадем пример за достъп до стойността на избраната опция и извършване на някои действия. Същият списък като в примера по-горе, създаваме с избор на цвят. След като изберете, щракнете върху бутона, за да приложите този цвят към документа:
Вижте онлайн демонстрация и код
Стойността на HTML опцията използва следния код:
Следният ред код се използва в JavaScript за достъп до стойността на атрибута value на опцията
var seltheme = document.getElementById(“selcolor”).value;
При щракване върху бутона се извиква JS функция, която присвоява стойността, избрана в падащия списък, на променлива. Тази стойност се използва за прилагане на цвят към текущия документ.
Достъп до видимия текст в jQuery
Този път ще използвам JQuery за достъп до стойността на избраната опция: както текст, така и стойност. В тази демонстрация ще имам достъп до видимия текст в маркер за опция в HTML:
Вижте онлайн демонстрация и код
В кода за всяка опция в етикета
Ето как се осъществява достъп до тази стойност HTML изберете опция избран JavaScript:
var selectedcolor = $("#jqueryselect option:selected").text();
Можете също да получите достъп до стойността с помощта на метода jQuery $.val():
var selectedcolor = $("#jqueryselect").val();
Заменете този ред в примера по-горе и кодът ще покаже стойността на краткия код/цвят в атрибута value вместо видимия текст.
Пример за получаване на стойност в PHP скрипт
В този пример за получаване на стойността на опцията, избрана от падащия списък, формулярът се създава с помощта на тага
Вижте онлайн демонстрация и код
Методът на формуляра, използван в примера, е POST, така че можете да получите стойностите на формуляра, като използвате PHP масива $_POST[“”]. Това е кодът на формуляра, използван в примера:
И ето как PHP скриптът се използва за получаване на стойността на опцията за избор на HTML:
".$_POST["selphp"].""; } ?>
Ако формулярът има метод GET, използвайте PHP масив $_GET[“”].
Дефиниране на падащи стилове с CSS
Сега нека разгледаме как да стилизираме падащия списък.
Вижте онлайн демонстрация и код
Свойството box-shadow се използва тук заедно с linear-gradient. Пълният CSS код изглежда така:
Selcls ( padding: 3px; граница: плътен 1px #517B97; контур: 0; фон: -webkit-gradient(линеен, ляв горен, ляв 25, от(#FFFFFF), color-stop(4%, #CAD9E3), до (#FFFFFF)); фон: -moz-linear-gradient(top, #FFFFFF, #CAD9E3 1px, #FFFFFF 25px); box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -moz- box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; ширина:150px; )
Заоблени ъгли със свойството border-radius
За опцията за избор на HTML ще зададем свойството на CSS3 border-radius, за да направим ъглите заоблени. Цветовата схема също се променя. Можете да експериментирате с граници, ширини, полета и други свойства, както желаете:
Вижте онлайн демонстрация и код
Използване на множество CSS атрибути и стилове
За да позволите на потребителите да избират множество опции от списък, използвайте атрибута multiple. В примера по-горе може да бъде избрана само една опция. Когато използвате няколко, можете да изберете няколко опции, като натиснете клавиша CTRL:
Вижте онлайн демонстрация и код
В тази статия ще разгледаме елементи, които ви позволяват да създавате падащи списъци, да се научите как да формирате групи в тези списъци, да помислим как да деактивирате елементи и дори групи от списъци, да се запознаете с елемент, който ви позволява да създавате мулти -line текстово поле, можете да го използвате по-късно в HTML форми (element
Освен това във формата поставихме бутон, който служи за подаване на формуляра (element с бутон тип "изпращане на формуляр": type = "изпращане" ).
Резултатът от нашия пример:
Подсказка за текстова област
И така ще разгледаме последния пример и ще преминем към практическата задача на статията в този урок.
Благодарение на атрибута (HTML таг
Текстът на подсказката е скрит, когато потребителят въведе стойност (който и да е знак) в текстовото поле, ако бъде премахнат, подсказката ще се покаже отново.
Нека разгледаме пример за употреба:
type = "submit" name = "submitInfo" value = "(!LANG:submit" > !}
В този пример създадохме две текстови области (element
Имайте предвид, че ако текстовото поле е само за четене, тогава съдържанието не може да бъде променено, но потребителят все пак може да навигира до съдържанието, да го избере и да го копира.
Освен това във формата поставихме бутон, който служи за подаване на формуляра (element с бутон тип "изпращане на формуляр": type = "изпращане" ).
Резултатът от нашия пример:
Въпроси и задачи по темата
Преди да преминете към следващата тема, изпълнете практическата задача:
- Използвайки получените знания, съставете следния формуляр за публикуване на свободно място:
Преди да продължите със задачата, отворете примера в нов прозорец и внимателно разгледайте формуляра, за да повторите всички негови точки. За да изпълните задачата, ще ви трябват знания от статията. Ако сте го пропуснали, тогава се върнете, за да го проучите.
След като завършите упражнението, проверете кода на страницата, като отворите примера в отделен прозорец, за да се уверите, че сте направили всичко правилно.
Можете да създадете падащ списък в HTML с помощта на тага изберете. В допълнение към падащия (или "падащ") списък, маркерът изберетеви позволява да създадете елемент от списък с множество избори. Синтаксис за използване на таг изберете HTML изглежда така:
Тук с етикета опциядадени са елементите на списъка.
Резултат от приложението:
Електроника Сироежкин Чижиков Кукушкина
SELECT атрибути на маркера
Помислете за атрибутите на етикета изберете:
- име
- размер- брой изведени редове в списъка (брой);
- многократни- включва функцията за многократен избор на елементи от падащия списък;
- хора с увреждания- блокира достъпа до елемента;
- форма- позволява да свържете падащ списък с формуляр (може да е необходимо, ако самият списък е извън формата, към която трябва да бъде прикачен). Идентификаторът на формуляра се предава като аргумент.
Може би това са всички основни атрибути на етикета изберетекоито се използват най-често. Нека сега да видим как да направим падащ списък в HTML с помощта на посочените атрибути:
Атрибути на маркера OPTION
етикет опция, както вече беше отбелязано, ви позволява да дефинирате дъщерните елементи на падащия списък изберете, който от своя страна действа като контейнер. етикет опцияима свои собствени атрибути:
- хора с увреждания- установява забрана за избор на този елемент от списъка;
- етикет- ви позволява да зададете етикет за текущия елемент от списъка (вместо текста, посочен в тага, се показва стойността на етикета, което ви позволява да изведете съкратена стойност); Внимание: атрибутът не се поддържа в браузъра Firefox
- избрани- текущият елемент от списъка ще бъде избран по подразбиране;
- стойност- стойността, която ще бъде предадена на сървъра;
Нека разгледаме разширен случай на употреба на маркера опция:
Резултатът от този пример ще изглежда така:
Г-н Електронни Сироежкин Чижиков Кукушкина
Създателят на уебсайтове Nubex има възможността да създава персонализирани формуляри с помощта на модула за създаване на формуляри. Работата на падащите списъци в "Nubex" е описана в статията: