Формулярите са един от важните инструменти, особено когато става дума за изработване на интерактивна или комерсиална страница. Чрез формулярите вашите клиенти могат да дадат информация за себе си, да поръчат вашите продукти, да попълнят анкета, чрез която да се ориентирате какви са техните предпочитания, да дадат мнение по определен въпрос и пр. Т.е. формулярите са вид средство за обмяна на информация между разработчика на сайта и неговите посетители.

Всеки формуляр започва с отварящ таг <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 и да му се зададе стойност https://

– Чрез атрибута 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″ />
<br />

Вашия уеб-адрес: <input type=“text“
name=“WebAddress“
size=“45″
maxlenght=“40″
value=“https://“ />

</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>

МНОГОРЕДОВИ ПОЛЕТА ЗА ВЪВЕЖДАНЕ НА ТЕКСТ

Ако желаете да предоставите възможност на посетителите си да оставят по-подробно мнение или коментар трябва да използвате многоредово поле за въвеждане на текст. Многоредовите полета се въвеждат чрез тага textarea, който притежава затварящ таг. Атрибутите на тага са:

– Атрибута name, който определя названието, под което ще се съхранява и обработва тази част от формуляра

– Атрибута rows, на който се присвоява като стойност някаква цифра, указваща височина на полето в брой редове

– Атрибута cols, на който се присвоява като стойност някаква цифра, указваща ширината на полето в брой знаци (цифри, букви и др.)

Ако желаете да напишете текст, който да указва предназначението на многоредовото поле, трябва да изпишете текста между тага form и тага textarea.

Ако желаете да напишете текст, който да се вижда вътре в самото многоредово поле, трябва да изпишете текста между тага textarea и неговия затварящ таг.

ПРИМЕР:

Нека направим многоредово поле с название Comentar, с дължина 50 знака и височина 10 реда. Указващия текст към полето да бъде „Вашия коментар:“, а вътре в самото поле да се вижда текста „Смятам че“.

<form>

Вашия коментар:<br />
<textarea name=“Comentar“ cols=“50″ rows=“10″>Смятам че</textarea>

</form>

Ако коментарът е дълъг и не се събере във видимата част на полето, отстрани ще се появи лента за превъртане.

Ако по някаква причина желаете многоредовото текстово поле да се вижда, но да не може да се ползва, трябва да добавите към тага textarea атрибута readonly със стойност самото му название(readonly=“readonly“) или disabled със стойност самото му название (disabled=“disabled“).

ПОЛЕ ЗА ВЪВЕЖДАНЕ НА ПАРОЛА

Забелязали сте, че когато попълвате паролата си при отваряне на вашата електронна поща тя не се показва в полето като текст, а във вид на „звездички“, например *******. Такова поле можете да въведете и вие в своя формуляр, за да защитите от чужд поглед определена информация, въвеждана във формуляра от ваши клиенти. За да изработите такова поле трябва да зададете на атрибута type от тага input стойността „password“:

<form>

Въведете своята парола: <input type=“password“ name=“parola“ />

</form>

ПОЛЕ ЗА ПРЕХВЪРЛЯНЕ (UPLOAD) НА ФАЙЛОВЕ

Ако във формуляра има изискване клиента да приложи някакъв графичен файл /снимка, графика и др./, трябва да използвате кода, който дава възможност клиента да прехвърли файла от личния си компютър. За целта на атрибута type от тага input се присвоява стойността file. Използват се и атрибутите size и name с които се задава съответно дължина на полето в брой символи и название, което да съответства на предназначението на полето.

След изписване на кода в прозореца на браузъра се изобразява поле и бутон с надпис Browse. При натискане върху бутона се появява панел с файловете от личния компютър на клиента, от който той избира нужния за прехвърляне файл.

Нека направим поле за ъплоудване /прехвърляне/ на файлове с дължина 25 символа и название „UploadFile“. Обяснителния текст към полето да бъде „Прехвърлете файл от личния си компютър:“. Кода изглежда така:

<form>

Прехвърлете файл от личния си компютър: <input type=“file“ size=“25″ name=“UploadFile“ />

</form>

НАЧИНИ ЗА ОБРАБОТВАНЕ НА ФОРМУЛЯРИ

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

За да бъде използваем един формуляр той трябва задължително да притежава следните елементи:

1. Бутони
За да бъде използваем формуляра клиентът трябва да има възможност да съхрани и да изпрати за обработка попълнените данни. За целта в повечето случаи се използва бутона „Submit“. Обикновено този бутон може да се види в края на формуляра. Чрез натискане на бутон „Submit“ данните се изпращат за обработка и съхранение и по този начин завършва работата по попълването на формуляра.

За изработването на бутона „Submit“ в HTML е предвидена следната команда:

<form>

<input type=“submit“ value=“Submit“ />

</form>

Аналогично е изработването на бутон „Reset“ чрез който формуляра се изчиства и се изтриват попълнените вече данни /например ако клиента се е отказал да изпраща информацията или желае да попълни други данни/.

2. Указване на начин за обработка на формуляра
След като формуляра е попълнен клиента натиска бутона Submit и тук вече следва действието по изпращането на формуляра за обработка и съхранение.

Съществуват два начина за обработване на формуляри.

Първият и най-прост начин е формуляра с цялата информация в него да се изпрати в някаква електронна пощенска кутия (e-mail) и да се съхранява там. Когато информацията от формуляра ви потрябва вие ще отворите имейла и ще видите необходимите ви данни.

За да изпратите формуляра на някакъв имейл е необходимо само да добавите в отварящия таг form (първия таг на всеки формуляр) атрибута action и да му зададете като стойност адреса на имейла в който трябва да пристигне информацията, придружен от формата mailto::

<form action=“mailto:somename@someserver.com“>
………
………
………
</form>

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

Втория начин за обработка на формуляри е по-сложен, но и много по-надежден, поради което повечето сайтове използват именно него. Този начин изисква да притежавате някакъв скрипт, например CGI-скрипт за обработка на формуляри.

Пълния текст на съкращението CGI е Common Gateway Interface. CGI-скриптът представлява програма, написана на някой от програмните езици – най-често на C, C++ или Perl. Тя има за задача да обработи формуляра и за целта на атрибута action от началния таг form се задава като стойност точния адрес в интернет, където се намира CGI-скриптът. Добре е CGI-скрипта да се намира на същия сървър, където е „качен“ /хостван/ вашият сайт. Обикновено хостовете които позволяват качване на CGI-скриптове отделят специално за тях директория, която почти винаги носи названието cgi-bin. Самите CGI-скриптове представляват файлове с разширение cgi. Нека вашия скрипт да се намира във файл myscript.cgi, който е качен в директорията cgi-bin на сървъра, където е хостнат сайтът ви. Тогава командата за изпращане на формуляра за обработка ще изглежда така:

<form action=“cgi-bin/myscript.cgi“>
………
………
………
</form>

От всичко казано дотук става ясно, че вие трябва да притежавате CGI-скрипт и да го качите на сървъра, където се намира и сайтът ви. CGI-скрипт може да придобиете по няколко начина. Ако владеете някой от програмните езици може сами да си напишете скрипт. Може да помолите някой да ви го напише или да потърсите в интернет сайтове от които да си изтеглите готов безплатен скрипт – съществуват много такива страници. Ако изтеглите готов скрипт ще са ви необходими поне минимални познания по съответния език, за да преправите скрипта, така, че да ви върши работа.

Имайте предвид, че не всички хостинги позволяват качването на CGI-скриптове (особено безплатните хостинги). Освен това CGI скрипта не е единствената възможност, за да имате форма за обратна връзка с клиента. Такава роля успешно може да изпълнява например PHP скриптове, ASP скриптове и пр. Също така в хостинга на Host.bg не е задължително да създавате cgi-bin директория, където да качвате скриптовете си.

Други важни атрибути на тага form са name и method.

Чрез атрибута name може да зададете име на вашия формуляр – например name=“clientinfo“.

Тага method определя какво действие ще се извърши с формуляра (метода, по който ще се оперира с данните) и може да приема стойности get и post. Стойността get изпраща съдържанието на формата на указан URL. Този метод не бива да се ползва, ако дължината на данните във формата превишава 100 символа и ако формата съдържа знаци извън стандарта ASCII. Метода post добавя съдържанието на формата към тялото на заявката и го изпраща за обработка от скрипта, указана чрез атрибута action.

ПРИМЕР:

<form name=“clientinfo“ action=“myscript.php“ method=“post“>
………
………
………
</form>