Чрез формулярите вашите клиенти могат да дадат информация за себе си, да поръчат вашите продукти, да попълнят анкета, чрез която да се ориентирате какви са техните предпочитания, да дадат мнение по определен въпрос и пр. Формулярите са вид средство за обмяна на информация между вас и посетителите на сайта ви.
С HTML формулярите можете да направите например:
🔗 Форма за обратна връзка (Feedback Form) | Help
🔗 Форма за логин (PHP/HTML) | Help
Всеки формуляр започва с отварящ таг <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 може да се зададе стойност 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="Red"
checked="checked" />
червен
<br />
<input type="checkbox"
name="Choice"
value="Blue" />
син
<br />
<input type="checkbox"
name="Choice"
value="Green" />
зелен
</form>
Горният пример е за формуляр с 3 полета за маркиране, като името на цялата група полета е Choice, описателното название на първото поле е „Red“, на второто – „Blue“ и на третото – „Green“. Въпросът, който ще съдържа формуляра е: „Кой е любимият ви цвят?“. Първото поле е маркирано по подразбиране.
Единичен избор – радиобутони
Радио-бутоните дават възможност за избор между няколко възможности, както това може да се направи и с полетата за маркиране. Разликата при радио-бутоните е, че позволяват да се избере само една от няколко възможности (клиентът не може да избере няколко възможности едновременно, както при полетата за маркиране).
Самите радио-бутони представляват малки полета във вид на кръгчета. При кликване върху съответния радио-бутон той се маркира с точка. Отмаркиране чрез повторно кликване не е възможно. Не е възможно и да се маркират няколко радио-бутона един след друг – маркирането на всеки следващ радио-бутон автоматично отменя маркирането на предишния.
За да се изработи радио-бутон, на атрибута type от тага input е нужно да се зададе стойност radio.
Всички останали атрибути и правила са като при полетата за маркиране.
Пример:
<form>
Кой е любимият ви цвят? (може да изберете само една възможност)<br />
<input type="radio"
name="OneChoice"
value="Red"
checked="checked" />
червен
<br />
<input type="radio"
name="OneChoice"
value="Blue" />
син
<br />
<input type="radio"
name="OneChoice"
value="Green" />
зелен
</form>
Този формуляр е подобен на формуляра от по-горния пример, с тази разлика, че тук възможностите на попълващия формуляра са ограничени до единичен избор.
Други възможности за избор – падащи менюта
Освен чрез радио-бутони и полета за маркиране, вашите клиенти могат да направят своя избор и чрез падащи менюта. Те се наричат „падащи“, защото на страницата се вижда само едно поле с една възможност, но когато се щракне върху менюто списъкът с останалите възможности „пада“ и дава възможност за избор на някоя от тях.
Както и останалите формуляри, падащото меню също е затворено между начален и краен таг form. Тагът за падащо меню е option, а атрибута value задава название на съответната възможност, така че тя да се различава от останалите.
Всяко падащо меню задължително започва (след тага form) с тага select, който има затварящ таг непосредствено преди затварящия таг на form и в който чрез атрибута name се задава име, обединяващо всички възможности за избор от падащото меню.
Пример:
<form>
Кой е любимият ви цвят? (падащо меню)<br />
<select name="ChooseOne">
<option value="Red">червен</option>
<option value="Blue">син</option>
<option value="Green">зелен</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>
Кой е любимият ви цвят? (меню с възможност за множествен избор)<br />
<select name="MultiChoice" size="2" multiple="multiple">
<option value="Red">червен</option>
<option value="Blue">син</option>
<option value="Green">зелен</option>
</select>
</form>
Ако желаете някой от редовете на менюто да бъде предварително маркиран (подобно на радио-бутоните и полетата за маркиране, където това се прави с атрибута checked), трябва да въведете в желания за маркиране таг option атрибута selected, като му зададете за стойност собственото му название, например
<option value="Blue" 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>
Въпреки че това е най-лесния начин за обработка на формуляри, той почти не се използва, тъй като зависи изцяло от възможността на браузъра да изпрати формуляра на имейл, а голяма част от браузърите не са програмирани да извършват това действие.
Вторият начин за обработка на формуляри е по-сложен, но и много по-надежден, поради което повечето сайтове използват именно него. Този начин изисква да притежавате някакъв скрипт, например PHP или 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 скриптове и пр. Също така в хостинга на СуперХостинг.БГ не е задължително да създавате 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>