Уеб формуляри
Формулярите са един от важните инструменти, особено когато става дума за изработване на интерактивна или комерсиална страница. Чрез формулярите вашите клиенти могат да дадат информация за себе си, да поръчат вашите продукти, да попълнят анкета, чрез която да се ориентирате какви са техните предпочитания, да дадат мнение по определен въпрос и пр. Т.е. формулярите са вид средство за обмяна на информация между разработчика на сайта и неговите посетители.
Всеки формуляр започва с отварящ таг <form> и завършва със затварящ таг </form>. Цялото съдържание на формуляра е заключено между тези два тага.
Почти всички елементи на формулярите се въвеждат чрез следващия по важност таг input, който може да съдържа няколко атрибута, най-важния от които е атрибута type. Тагът input не притежава затварящ таг и затова според изискванията на XHTML наклонената затваряща черта се изписва в края на самия таг.
Всички тагове input и техните атрибути със съответните стойности се разполагат между двата основни тага <form> и </form>.
Типичната структура на един формуляр изглежда така:
| <form><input type="стойност" /> <input type="стойност" /> <input type="стойност" /> ... ... ...</form> |
ПОЛЕ ЗА ТЕКСТ
Почти всеки формуляр съдържа поле за въвеждане на текст или няколко такива полета. На страницата тези полета се показват като правоъгълници, в които може да се въвежда текст.
За да се зададе поле за въвеждане на текст във формуляр, трябва да се въведе атрибута type на тага input и да му зададете стойност text:
<input type="text" />
В този случай на страницата ще се изобрази текстово поле, което по подразбиране има дължина 20 символа (тъй като не e изрично зададена дължина на полето).
Препоръчително е освен атрибута type в тага input да се използват и следните атрибути:
- Атрибута name, който приема като стойност името, което дадете на полето. Ако едно текстово поле е предназначено да съдържа например имейла на клиента, то е уместно на атрибута name да се присвои стойност Email или EmailAddress.
- Когато задавате име като стойност на някой от атрибутите на формуляра, което се състои от две думи (например Email Address), винаги трябва да изписвате тези думи слято. Думите може да отделите като изписвате всяка от тях с главна буква (например name="EmailAddress").
- Атрибута size задава дължината на текстовото поле в брой символи (например size="45"). Ако не се използва този атрибут дължината на текстовото поле по подразбиране ще бъде 20 символа.
- Чрез атрибута value може да се зададе текст, който да се вижда в текстовото поле преди още клиента да е въвел някаква информация. Например ако текстовото поле е предназначено да съдържа уеб-адреса на клиента, е уместно да се въведе атрибута value и да му се зададе стойност http://
- Чрез атрибута maxlenght може да въведете ограничение на броя на изписваните в текстовото поле символи. Например ако зададете maxlenght="15" в текстовото поле няма да бъде възможно да се въведат повече от 15 символа (букви, цифри и др.).
Преди всяко въвеждане на тага input е нужно да въведете текст, който да обяснява на клиента предназначението на съответното текстово поле. Ако например създавате текстово поле за въвеждане на имейл е уместно пред полето да се изпише "Въведете вашия имейл", "Имейл адрес:" или нещо подобно.
ПРИМЕР:
| <form>Вашето име: <input type="text" name="Name" size="45" maxlenght="40" /> <br />Вашия имейл: <input type="text" name="EmailAddress" size="45 maxlenght="40" /> </form> |
Примера е за формуляр с 3 полета за въвеждане на текст, всяко с дължина 45 знака, с ограничение за вписване до 40 знака, като първото поле е предназначено за името на клиента, второто - за имейла на клиента и третото - за уеб-адреса на клиента.
Ако желаете да въведете във формуляра текстово поле, в което да не може да се пише, трябва да добавите в тага <input> атрибута readonly със стойност самия атрибут (readonly="readonly").
МНОЖЕСТВЕН ИЗБОР - ВЪВЕЖДАНЕ НА ПОЛЕТА ЗА МАРКИРАНЕ
Полетата за маркиране се въвеждат във формулярите за да може посетителя на страницата да направи избор между няколко възможности. Посетителя може да маркира повече от едно поле, т.е. да избере няколко възможности едновременно. Самите полета за маркиране представляват малки квадратчета, при щракване върху които те се запълват с отметка. При повторно щракване върху квадратчето отметката изчезва (маркирането се отменя).
За да се въведат полета за маркиране във формуляр е нужно на атрибута type от тага input да се зададе стойност checkbox.
Тъй като полетата за маркиране предоставят някакъв избор, те трябва да са поне 2 на брой или повече. Името, което ще се присвои като стойност на атрибута name трябва да бъде еднакво за всички полета за маркиране от формуляра, за да се покаже, че са подчинени на една и съща тема.
Чрез атрибута value се задава название на съответното поле за маркиране, чрез което полетата да се различават (тъй като имената им, зададени с атрибута name, е задължително да са еднакви).
Ако желаете едно от полетата за маркиране да бъде маркирано предварително (по подразбиране), трябва да използвате атрибута checked, като му зададете за стойност собственото му название (checked="checked").
ПРИМЕР:
| <form>От кого бихте се отървали, ако ви падне случай?<br />
<input type="checkbox" name="Choice" value="Tashta" checked="checked" /> Тъщата <br /> <input type="checkbox" name="Choice" value="Jena" /> Жената<br /> <input type="checkbox" name="Choice" value="Sasedi" /> </form> |
Горния пример е за формуляр с 3 полета за маркиране, като името на цялата група полета е Choice, описателното название на първото поле е "тъщата", на второто - "жената" и на третото - "съседите". Въпросът, който ще съдържа формуляра е: "От кого бихте се отървали, ако ви падне случай?". Първото поле е маркирано по подразбиране.
ЕДИНИЧЕН ИЗБОР - ВЪВЕЖДАНЕ НА РАДИОБУТОНИ
Радио-бутоните дават възможност за избор между няколко възможности, както това може да се направи и с полетата за маркиране. Разликата при радио-бутоните е, че позволяват да се избере само една от няколко възможности (клиента не може да избере няколко възможности едновременно, както при полетата за маркиране).
Самите радио-бутони представляват малки полета във вид на кръгчета. При щракане върху съответния радио-бутон той се маркира с точка. Отмаркирване чрез повторно щракане не е възможно. Не е възможно и да се маркират няколко радио-бутона един след друг - маркирането на всеки следващ радио-бутон автоматично отменя маркирането на предишния.
За да се изработи радио-бутон е нужно на атрибута type от тага input да се зададе стойност radio.
| <form> От кого бихте се отървали, ако ви падне случай? (Може да изберете само една възможност)<br /> <input type="radio" name="OneChoice" value="Tashta" checked="checked" /> Тъщата <br /> <input type="radio" name="OneChoice” value="Jena" /> Жената <br /> <input type="radio" name="OneChoice" value="Sasedi" /> Съседите </form> |
Всички останали атрибути и правила са като при полетата за маркиране.
ПРИМЕР:
Този формуляр е подобен на формуляра от по-горния пример, с тази разлика, че тук възможностите на попълващия формуляра са ограничени до единичен избор.
ДРУГИ ВЪЗМОЖНОСТИ ЗА ИЗБОР - ПАДАЩИ МЕНЮТА
Освен чрез радио-бутони и полета за маркиране вашите клиенти могат да направят своя избор и чрез падащи менюта. Те се наричат "падащи", защото на страницата се вижда само едно поле с една възможност, но когато се щракне върху менюто списъка с останалите възможности "пада" и дава възможност за избор на някоя от тях.
Както и останалите формуляри, падащото меню също е затворено между начален и краен таг form. Тага за падащо меню е option, а атрибута value задава название на съответната възможност, така че тя да се различава от останалите.
Всяко падащо меню задължително започва (след тага form) с тага select, който има затватящ таг непосредствено преди затварящия таг на form и в който чрез атрибута name се задава име, обединяващо всички възможности за избор от падащото меню.
ПРИМЕР:
| <form>От кого бихте се отървали, ако ви падне случай? (Падащо меню)<br /> <select name="ChooseOne"> <option value="Tashta">Тъщата</option> <option value="Jena">Жената</option> <option value="Sasedi">Съседите</option> </select></form> |
Падащите менюта дават възможност както за единичен, така и за множествен избор. Горния код е пример за падащо меню с единичен избор. За да бъде възможно клиентите да маркират повече от едно поле от падащото меню е нужно в тага select да се въведе атрибута multiple. Този атрибут няма собствена стойност и затова според изискванията на XHTML му се задава като стойност собственото му название (<select multiple="multiple").
Ако по някаква причина желаете падащото меню да се вижда, но да не може да се използва, трябва да добавите в тага select атрибута disabled и да му зададете като стойност собственото му название (select disabled="disabled").
ДРУГИ ВЪЗМОЖНОСТИ ЗА ИЗБОР - МЕНЮ ВЪВ ВИД НА ПОЛЕ
Ако в тага select въведете атрибута size и му зададете някаква стойност по голяма от 1 (например size="2" или size="10" и т.н.) ще получите меню в поле с лента или без лента за скролиране отстрани. Накратко, атрибута size със зададена в цифри стойност превръща падащото меню в меню с лента за превъртане, ако цифрата, зададена като стойност на size, е по-малка от броя на редовете в менюто. Например в горния случай имаме 3-редово меню - 1-ви ред "тъщата", 2-ри ред "жената" и 3-ти ред "съседите". Ако зададем на атрибута size стойност "2" ще получим меню с лента за превъртане. Ако зададем на този атрибут стойност по-голяма от 2 (3 или повече) ще се получи меню във вид на поле в страницата, но без лента за превъртане.
След като менюто е готово клиентите могат да направят множествен избор (да маркират повече от една възможност) като натиснат от клавиатурата бутон Shift и започнат да "влачат" с мишката по менюто или да щракат последователно върху различни възможности.
ПРИМЕР:
| <form>От кого бихте се отървали, ако ви падне случай? (Mеню с възможност за множествен избор)<br />
<select name="MultiChoice" size="2" multiple="multiple"> <option value="Tashta">Тъщата</option> <option value="Jena">Жената</option> <option value="Sasedi">Съседите</option> </select> </form> |
Ако желаете някой от редовете на менюто да бъде предварително маркиран (подобно на радио-бутоните и полетата за маркиране, където това се прави с атрибута checked), трябва да въведете в желания за маркиране таг option атрибута selected, като му зададете за стойност собственото му название, например
<option value="Jena" selected="selected">Жената</option>
Практическа задача: Посравяне на Google търсачка в нашият сайт
За повече информация посетете http://www.google.com/coop/cse/onthefly
<!-- Use of this code assumes agreement with the Google Custom Search Terms of Service. -->
<!-- The terms of service are available at /coop/docs/cse/tos.html -->
<form name="cse" id="searchbox_demo" action="http://www.google.com/cse">
<input type="hidden" name="cref" value="" />
<input type="hidden" name="ie" value="utf-8" />
<input type="hidden" name="hl" value="" />
<input name="q" type="text" size="40" />
<input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript" src="http://www.google.com/cse/tools/onthefly?form=searchbox_demo&lang="></script>
