HTML Форми

HTML елементът <form> дефинира формулярa, който се използва за събиране на потребителски данни. HTML формите се използват за пренос на данни към сървъра. Една HTML форма, може да съдържа различни полета – текстови полета, полета за отметки, радио-бутони и други. Формата може да съдържа и select списъци, textarea полета, fieldset-ове, етикети (label) и легенда(legend).
<form> тага се използва за създаване на HTML форма:

HTML Форми – Input елемент

Най-важният елемент във една форма е <input> елемента. Той се използва за събиране на информация от потребителя под формата на текст. Един <input> елемент може да се използва по няколко различни начина, в зависимост от типа данни, които искаме да съберем. Може да бъде от тип <textarea>, <checkbox>(поле за отметка), <password>, <radio>(бутон), <submit>(бутон), и други. Най-често срещаните са описани по-долу.

Забележка: Самата форма не се вижда. Също така имайте предвид, че стандартната ширина на текстовото поле е 20 знака.

Текстови полета

<input type=“text“> създава поле от един ред, в което потребителя може да въведе текст, например имена:

Как HTML кода по-горе изглежда в браузъра:

Насоки: Самата форма не е видима, единствено текстовото поле се показва в браузъра. Също така имайте предвид, че ширината по подразбиране на текстово поле е 20 символа.

Password поле

<input type=“password“> създава поле за парола:

Как HTML кода по-горе изглежда в браузъра:

Забележка: въведените знаци в поле за парола са маскирани – показани са като звездички или кръгове.

Радио Бутони

<input type=“radio“> дефинира радио бутон. Радио бутони позволяват на потребителя да изберете само един от ограничен брой възможности, например при избор на пол:

Как HTML кода по-горе изглежда в браузъра:

Checkbox-ове

<input type=“checkbox“> определя поле за отметка. Checkboxes позволяват на потребителя да изберете нула или повече опции на ограничен брой възможности.

Как HTML кода по-горе изглежда в браузъра:

Submit бутон

<input type=“submit“> създава бутон бутон за изпращане на информация. Бутона за изпращане се използва за прехвърляне на данните към сървъра. Данните се изпращат към страницата обозначена в отварящия таг на формата. След което, с изпратените данни се случва нещо.

Как HTML кода по-горе изглежда в браузъра:

Когато напишете някакви символи в input полето, формата ще изпрати въведеното към страницата посочена в action, след което данните ще бъдат обработени чрез някакъв сървърен език.

Атрибутът за всеки формуляр – method

В атрибутът <method> определя методът на HTTP ( GET или POST ), за да се използва по време на представянето данните от формуляра:

Кога да използвате GET?

Методът по подразбиране при подаване на данни от формуляра е GET. Въпреки това, когато се използва GET, предоставените данни от формуляра ще се виждат в полето за адреса на страницата : /action_page.php?firstname=Mickey&lastname=Mouse Бележки за GET:

• Добавя формулярни данни в URL адреса в двойки име / стойност
• Дължината на URL адреса е ограничена (около 3000 знака)
• Никога не използвайте GET за изпращане на чувствителни данни! (ще се вижда в URL адреса)
• Полезно за изпращане на формуляри, където потребителят иска да маркира резултата
• GET е по-добре за несигурни данни, като низове за заявки в Google

Кога да използвате POST?

Винаги използвайте POST, ако данните за формуляра съдържат чувствителна или лична информация. Методът POST не показва предоставените данни от формуляра в полето за адрес на страницата. Бележки по POST:

• POST няма ограничение на размера и може да се използва за изпращане на големи количества данни.
• Изпращането на формуляри с POST не може да бъде отметнато

Атрибутът за имената Всяко поле за въвеждане трябва да има атрибут за име, който да бъде изпратен. Ако атрибутът name е пропуснат, данните от това поле за въвеждане няма да бъдат изпратени изобщо. Този пример ще изпрати полето за въвеждане „Фамилно име“ само:

Групиране на данните от формуляра с <fieldset> Елементът <fieldset> се използва за групиране на свързани данни във форма. Елементът <legend> дефинира надписи за елемента <fieldset>.

Радио бутони Как да създават радио бутони.

Checkboxes Как се създават отметки. Потребителя може да избере нула или повече отметки.

Обикновено падащо меню за избор Как да създадете простичко падащото меню.

Падащ списък с предварително избрана стойност Как да създадете списък с предварително избрана стойност.

Textarea Как да създадем поле за въвеждане на текст, с неограничен брой символи.

Създаване на бутон Как да създадете бутон.

Fieldset около форма Как да създадем рамка около елементите във формата.

Форма с текстови полета и бутон за изпращане Как да създадем формуляр с две текстови полета и един бутон за изпращане.

Форма с радио бутони Как да създадете формуляр с два радио-бутона и бутон за изпращане.

Изпращане на e-mail от форма Как да изпратим електронна поща от форма.

HTML Тагове и Форми

Някои тагове са добавени в HTML5.