HTML формуляри

Съдържание:

• Едноредови текстови полета
• Многоредови текстови полета
• Радиобутони
• Множествен избор: кутийки с отметки
• Падащи менюта
• Пароли
• Изпращане на формуляр

Използвайки HTML формуляри, можете да получавате разнообразна информация от посетителите си. Думата "формуляр" има малко канцеларски оттенък, но всъщност тук спадат анкетите, полетата име и парола при регистрация (в блогове, мейл системи и т.н.), форма за обратна връзка, която ще се изпрати като мейл и др. Попълненият формуляр се изпраща на сървъра, където се намира сайта ви и за да имате достъп до въведената от потребителите информация, трябва да създадете подходящ PHP файл, който да обработи получения формуляр. PHP е тема на отделна статия, а тук ще се занимаем с изграждането на самите формуляри с HTML.

Формулярите се указват с <form> за начало и </form> за край, а между тези два тага се разполагат всички компоненти на формуляра, указани най-общо по следния начин:

<input type="вид" name="име" />.

На мястото на "вид" стои конкретния тип елемент (разгледани по-долу), а "име" е уникално име на елемента, което позволява неговото управление при обработката на формуляра - повече за това в статията PHP формуляри.

Нека разгледаме последователно елементите, които може да включите в един формуляр.

Едноредови текстови полета

Задаването на текстови полета изисква указване type="text". Ето и един пример:

<form>
 Име:
 <input type="text" name="name"/> <br/>
 Фамилия:
 <input type="text" name="family"/> <br/>
 E-mail:
 <input type="text" name="mail"/>
 </form>

В браузъра този формуляр ще изглежда така:

Обърнете внимание, че думата, която въведете на мястото на "име" в name="име", няма да се изведе на екрана. За да разберат посетителите на сайта ви какво трябва да се въведе в съответните полета, трябва да включите подходящо обяснение непосредствено преди или след текстовото поле.

Дължината на текстовото поле можете да укажете с size (например size="40") като атрибут на input. Ако не зададете дължина на текстовото поле, по подразбиране то ще бъде 20 знака.

Допълнително можете да наложите ограничение на максималния брой символи, които потребителя може да въведе за дадено поле: използвайте maxlenght. Например maxlenght="10" ще ограничи броя на символите, които потребителя може да въведе за даденото поле до 10.

Можете да зададете и текст, който автоматично да се попълва в текстовото поле: използвайте value="текст".

Многоредови текстови полета

За разлика от едноредовите, многоредовите полета дават възможност за въвеждане на по-дълъг текст, като например коментар или съобщение. Задават се с двойката тагове <textarea> и </textarea> и могат да бъдат произволно избран от вас брой редове (rows) и колони (cols):

<p>Моля, въведете вашия коментар:</p>
<textarea name="coment" rows="5" cols="40">
</textarea>

На екрана ще се изведе:

Моля, въведете вашия коментар:

Радио бутони

Чрез радио бутоните се избира един от няколко възможни отговора. Полето "name" за всички възможни избори трябва да има една и съща стойност. Ето един често срещан пример:

<form>
Желаете ли да получавате новини за нови продукти на нашата фирма?<br/> 
<input type="radio" name="product_news" value="yes"/>Да<br/>
<input type="radio" name="product_news" value="no"/>Не<br/>
</form>

Това ще изглежда така на екрана:

Обърнете внимание, че можете да изберете само един от възможните отговори.

Множествен избор: кутийки с отметки

Когато искате потребителите да изберат една или повече от няколко възможности, използвайте кутийки с отметки. Те се задават с type="checkbox" и също като радиобутоните трябва да имат едно и също име, зададено като name, но различни стойности, указани с value:

<p>Обичам да карам:</p>
<form>
Колелета:
<input type="checkbox" name="vehicle" value="kolelo" />
<br />
Мерцедеси:
<input type="checkbox" name="vehicle" value="kola" />
<br />
Бебешки колички:
<input type="checkbox" name="vehicle" value="bebe" />
</form>

На екрана ще се изведе:

Обичам да карам:

Падащи менюта

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

Падащите менюта се ограждат с тагове <select> и </select>, а всеки от вариантите за избор - с <option> и </option>. Ето и един пример:

<form>
<p>Кога обичате да спите? </p>
<select name="sleep">
<option>вечер</option>
<option>сутрин</option>
<option>следобед</option>
<option>винаги</option>
</select>
</form>

Ето и резултата:

Кога обичате да спите?

вечер сутрин следобед винаги

Ако искате потребителите да могат са избират повече от един от предложените варианти, ще трябва да добавите multiple="multiple" като атрибут на select (<select name="sleep" multiple="multiple">). В този случай падащото меню ще се превърне в списък. Броят на редовете му можете да определите с size, напр.

<select name="sleep" multiple="multiple" size="4">

Изборът на повече от един вариант става с натискане на Shift или Ctrl клавиша и щракане с мишката върху желаните отговори:

Кога обичате да спите?

вечер сутрин следобед винаги

Пароли

От съображения за сигурност е желателно при въвеждане на пароли на екрана да не се показват въвежданите символи, а нещо друго - обикновено звездички. Подобно поле за въвеждане на пароли се задава с <input type="password">. Ето един често срещан случай на употреба на поле-парола:

<form> 
 Въведете потребителско име:
<input type="text" name="ime"/><br/>
Въведете парола:
<input type="password" name="pass" />
</form>

Изпращане на формуляра

Когато потребителят попълни всички полета, формулярът трябва да бъде изпратен. За целта се използва бутон за изпращане от вида type="submit". Още една подробност около изпращането на формуляра е указването на файла, който ще обработи информацията и начина на изпращане на информацията - използват се съответно action="име-на-обработващ-файл" и method="get" или method="post" (за разликите между get и post прочетете в статията PHP формуляри - $_GET и $_POST):

<form name="proba" action="otgovor.php" method="post">
 Вашето име:
<input type="text" name="ime" />
<input type="submit" value="изпрати" />
</form>

Ето как ще изглежда и резултата:

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

Следва: Цветове в HTML

начало на страницата