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

ФОРМИ И ПОЛЕТА ЗА ВЪВЕЖДАНЕ

HTML Формите се използват, за да се събере информация подадена от потребителя - в повечето случаи това става на някакъв сървър. Създаване на текстови полета Как да създадем текстови полета, в който потребителя може да въведе текст.Създаване на поле за парола Как да създадете поле за парола. (Можете да намерите повече примери и информация в долната част на тази страница). В този урок ще разгледаме следните елементи:

HTML Форми

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

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

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

Тип описание
<input type = "text"> Определя едноредово поле за въвеждане на текст
<input type = "radio"> Определя радио бутона (за избор на един от многото възможности)
<input type = "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.

Таг Описание
<form> Дефинира HTML формата
<input> Дефинира input поле
<textarea> Дефинира многоредово поле за въвеждане на текст
<label> Дефинира етикет за <input>
<fieldset> Групира елементите във форма/Използва се за рамкиране
<legend> Дефинира нещо като заглавие на <fieldset> рамката
<select> Дефиниар падащ списък
<optgroup> Дефинира група от смислово свързани опции, в едно падащо меню
<option> Добавя опция към падащ списък
<button> Добавя бутон, на който може да се кликне
<datalist> Списък от предварително избрани опции
<keygen> Дефинира поле от тип ключ-стойност
<output> Показва резултата от извършена калкулация