Създаване на формуляр в HTML. Как се прави падащ списък в html? Създаване на групи от падащи елементи от списъци с формуляри

Здравейте, скъпи читатели на сайта на блога. Като част от изучаването на тънкостите, като следващата задача, ще продължим да анализираме подробностите за създаване на формуляри в сайта, като използваме съответните.

Днес ще научим как да създаваме падащи (падащи) списъци, включително с множествен избор, като се използва 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. Примерите също ще покажат как да стилизирате

Използване на атрибута value

Както бе споменато по-рано, стойността на атрибута value може да бъде различна от текста, показан на страницата. Например, можете да покажете имената на държави или цветове за потребителите и да използвате кратки кодове в атрибута value.

В следващия пример ще създадем падащ списък с атрибут value:

Вижте онлайн демонстрация и код

За етикет

Пример за достъп до избраната опция в JavaScript

Сега нека създадем пример за достъп до стойността на избраната опция и извършване на някои действия. Същият списък като в примера по-горе, създаваме с избор на цвят. След като изберете, щракнете върху бутона, за да приложите този цвят към документа:

Вижте онлайн демонстрация и код

Стойността на HTML опцията използва следния код:

Следният ред код се използва в JavaScript за достъп до стойността на атрибута value на опцията стойността е различна от текста. След като изберете цвят, jQuery показва видимия текст в предупреждението. Код на етикета

Ето как се осъществява достъп до тази стойност HTML изберете опция избран JavaScript:

var selectedcolor = $("#jqueryselect option:selected").text();

Можете също да получите достъп до стойността с помощта на метода jQuery $.val():

var selectedcolor = $("#jqueryselect").val();

Заменете този ред в примера по-горе и кодът ще покаже стойността на краткия код/цвят в атрибута value вместо видимия текст.

Пример за получаване на стойност в PHP скрипт

В този пример за получаване на стойността на опцията, избрана от падащия списък, формулярът се създава с помощта на тага

И ето как PHP скриптът се използва за получаване на стойността на опцията за избор на HTML:

".$_POST["selphp"].""; } ?>

Ако формулярът има метод GET, използвайте PHP масив $_GET[“”].

Дефиниране на падащи стилове с CSS

Сега нека разгледаме как да стилизираме падащия списък.

В този пример ние маркираме

В браузъра изглежда така:

Групиране на елементи от менюто

Нека разгледаме следния таг A, който се използва за групиране на свързани данни в падащ списък name="black&white"> label="whitelist">

В този пример сме избрали 2 групи с етикета . Атрибутът етикет на елемента посочва името на избраната група с удебелен шрифт:

В следващия пример, използвайки disabled булев атрибут, ще деактивираме една група (" Група Б"):

</span>Пример за използване на атрибута disabled на HTML маркер <optgroup><span>

Резултатът от нашия пример:

Деактивиране на списъка и множествена селекция

</span>Деактивираните и множество атрибути на маркера <select><span>

В този пример създадохме два падащи списъка. За първия списък използвахме атрибута disabled, който не позволява на списъка да взаимодейства с него (деактивира го).

За втория списък използвахме атрибута multiple, който показва, че е позволено да се избират няколко опции в списъка наведнъж (чрез ctrlна Windows и през командана Mac).

В браузъра изглежда така:

Текстова област

Резултатът от нашия пример:

Деактивиране на текстовата област

По аналогия с разгледаните по-рано елементи, етикетът


type = "submit" name = "submitInfo" value = "(!LANG:submit" > !}

В този пример създадохме две текстови области (element