Формулярите са един от най-важните инструменти когато става дума за изработване на комерсиална страница. Чрез формулярите вашите клиенти могат да дадат информация за себе си, да поръчат вашите продукти, да попълнят анкета, чрез която да се ориентирате какви са техните предпочитания, да дадат мнение по определен въпрос и пр. Следователно става ясно, че формулярите са един особен вид средство за обмяна на информация между разработчика на сайта и неговите посетители.
Основни тагове при изграждане на формуляр (form)
Всеки формуляр започва с отварящ таг <form> и завършва със затварящ таг </form>. Цялото съдържание на формуляра е заключено между тези два тага. Почти всички елементи на формулярите се въвеждат чрез следващия по важност таг input, който може да съдържа няколко атрибута, най-важния от които е атрибута type. Тага input не притежава затварящ таг и затова според изискванията на XHTML наклонената затваряща черта се изписва в края на самия таг. Всички тагове input и техните атрибути със съответните стойности се разполагат между двата основни тага <form> и </form>. Следователно типичната структура на един формуляр изглежда така:
<form> <input type="стойност" /> <input type="стойност" /> <input type="стойност" /> ...
...
...
</form>
Въвеждане на поле за текст във формуляр - атрибути и стойности
Почти всеки формуляр съдържа поле за въвеждане на текст или няколко такива полета. На страницата тези полета се показват като правоъгълници, в които може да се въвежда текст. За да зададете поле за въвеждане на текст във формуляр, трябва да въведете атрибута type на тага input и да му зададете стойност text:
<input type="text" /> В този случай на страницата ще се изобрази текстово поле, което по подразбиране има дължина 20 символа /тъй като не сме задали изрично дължина на полето/. Препоръчително е освен атрибута type в тага input да се използват и следните атрибути:
Атрибута name, който приема като стойност името, което дадете на полето. Ако едно текстово поле е предназначено да съдържа например имейла на клиента, то е уместно на атрибута name да се присвои стойност Email или EmailAddress.
Когато задавате име като стойност на някой от атрибутите на формуляра, което се състои от две думи /например Email Address/, винаги трябва да изписвате тези думи слято. Думите може да отделите като изписвате всяка от тях с главна буква /например name="EmailAddress"/.
Атрибута size задава дължината на текстовото поле в брой символи /например size="45"/. Ако не използвате този атрибут дължината на текстовото поле по подразбиране ще бъде 20 символа.
Чрез атрибута value може да се зададе текст, който да се вижда в текстовото поле преди още клиента да е въвел някаква информация. Например ако текстовото поле е предназначено да съдържа уеб-адреса на клиента, е уместно да се въведе атрибута value и да му се зададе стойност http://
Чрез атрибута maxlenght може да въведете ограничение на броя на изписваните в текстовото поле символи. Например ако зададете maxlenght="15" в текстовото поле няма да бъде възможно да се въведат повече от 15 символа /букви, цифри и др./.
Преди всяко въвеждане на тага input е нужно да въведете текст, който да обяснява на клиента предназначението на съответното текстово поле. Ако например създавате текстово поле за въвеждане на имейл е уместно пред полето да се изпише "Въведете вашия имейл", "Имейл адрес:" или нещо подобно. Нека направим формуляр с 3 полета за въвеждане на текст, всяко с дължина 45 знака, с ограничение за вписване до 40 знака, като първото поле е предназначено за името на клиента, второто - за имейла на клиента и третото - за уеб-адреса на клиента. Кода за такъв формуляр трябва да изглежда по следния начин:
<form> Вашето име: <input type="text" name="Name" size="45" maxlenght="40" /><br /> Вашия имейл: <input type="text" name="EmailAddress" size="45" maxlenght="40" /><br /> Вашия уеб-адрес: <input type="text" name="WebAddress" size="45" maxlenght="40" value="http://" />
</form>
Ефекта от горния код в страницата е следния:
Вашето име:
Вашия имейл:
Вашия уеб-адрес:
Единичен избор: Въвеждане на радио-бутони във формуляр - атрибути и стойности
Радио-бутоните дават възможност за избор между няколко възможности, както това може да се направи и с полетата за маркиране. Разликата при радио-бутоните е, че позволяват да се избере само една от няколко възможности /клиента не може да избере няколко възможности едновременно, както при полетата за маркиране/. Самите радио-бутони представляват малки полета във вид на кръгчета. При щракане върху съответния радио-бутон той се маркира с точка. Отмаркирване чрез повторно щракане не е възможно. Не е възможно и да се маркират няколко радио-бутона един след друг - маркирането на всеки следващ радио-бутон автоматично отменя маркирането на предишния. За да се изработи радио-бутон е нужно на атрибута type от тага input да се зададе стойност radio Всички останали атрибути и правила са като при полетата за маркиране. Нека направим формуляр, подобен на формуляра от горния пример, като ограничим възможностите на клиента до единичен избор. Кода за такъв формуляр ще изглежда по следния начин:
<form> Как оценявате сайта?(Може да изберете само една възможност)<br /> <input type="radio" name="OneChoice" value="Otlichno " checked="checked" />Отлично<br /> <input type="radio" name="OneChoice" value="Dobre" />Добре<br /> <input type="radio" name="OneChoice" value="Ima nyjda ot podobrenie" /> Има нужда от подобрение
</form> Ефекта от горния код в HTML-страницата е следния:
Как оценявате сайта?(Може да изберете само една възможност)
Отлично
Добре
Има нужда от подобрение
Освен чрез радио-бутони и полета за маркиране вашите клиенти могат да направят своя избор и чрез падащи менюта. Те се наричат "падащи", защото на страницата се вижда само едно поле с една възможност, но когато се щракне върху менюто списъка с останалите възможности "пада" и дава възможност за избор на някоя от тях. Както и останалите формуляри, падащото меню също е затворено между начален и краен таг form. Тага за падащо меню е option, а атрибута value задава название на съответната възможност, така че тя да се различава от останалите. Всяко падащо меню за дължително започва /след тага form/ с тага select, който има затватящ таг непосредствено преди затварящия таг на form и в който чрез атрибута name се задава име, обединяващо всички възможности в падащото меню. Ето кода на едно примерно падащо меню:
<form> Как оценявате сайта?(Падащо меню)<br /> <select name="ChooseOne"> <option value="Otlichno">Отлично</option> <option value="Dobre ">Добре</option> <option value="Ima nyjda ot podobrenie">Има нужда от подобрение</option> </select>
</form> Ето как ще изглежда менюто в прозореца на браузъра:
Многоредови полета за въвежадане на текст - атрибути и стойности
Ако желаете да предоставите възможност на посетителите си да оставят по-подробно мнение или коментар трябва да използвате многоредово поле за въвеждане на текст. Многоредовите полета се въвеждат чрез тага textarea, който притежава затварящ таг. Атрибутите на тага са:
Атрибута name, който определя названието, под което ще се съхранява и обработва тази част от формуляра
Атрибута rows, на който се присвоява като стойност някаква цифра, указваща височина на полето в брой редове
Атрибута cols, на който се присвоява като стойност някаква цифра, указваща ширината на полето в брой знаци /цифри, букви и др./
Ако желаете да изпишете текст, който да указва предназначението на многоредовото поле, трябва да изпишете текста между тага form и тага textarea. Ако желаете да изпишете текст, който да се вижда вътре в самото многоредово поле, трябва да изпишете текста между тага textarea и неговия затварящ таг. Нека направим многоредово поле с название Comentar, с дължина 50 знака и височина 10 реда. Указващия текст към полето да бъде "Вашия коментар:", а вътре в самото поле да се вижда текста "Смятам че". Кода на такова многоредово поле ще изглежда така:
<form> Вашия коментар:<br /> <textarea name="Comentar" cols="50" rows="10">Смятам че</textarea>
</form> Ефекта в прозореца на браузъра е следния:
Вашия коментар:
Поле за въвеждане на парола - атрибути и стойности
Забелязали сте, че когато попълвате паролата си при отваряне на вашата електронна поща тя не се показва в полето като текст, а във вид на "звездички", например *******. Такова поле можете да въведете и вие в своя формуляр, за да защитите от чужд поглед определена информация, въвеждана във формуляра от ваши клиенти. За да изработите такова поле трябва да зададете на атрибута type от тага input стойността "password":
<form> Въведете своята парола: <input type="password" name="parola" />
</form> На страницата ще се вижда следното:
