HTML Forms

Какво представляват HTML формите

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

HTML формулярът се състои от един или повече елементи. Тези елементи могат да бъдат текстови полета (еднолинейни или многоредови), бутони, полета за избор, радио бутони, списъчни полета и др. Обикновено тези елементи са съчетани с етикет, който описва тяхната цел.

Стандартен запис на контактна форма

HTML елементът <form></form> дефинира формуляр, който служи за приемане на информация от потребителя. Стандартния запис на формуляр може да изглежда така:

<form name="myform" method="post" action="path/to/some-script.php">
...
</form>

Където:
name – името на формата. С него се обръщаме към нея в програмния код.
method* – метод за изпращане на информацията към уеб сървъра.
action – указва къде да се изпратят данните.

*Два метода, чрез които могат да се изпращат данните от формата, това са: „POST“ и „GET“ методите. Разликата между тях е, че при метода GET информацията се изпраща през URL адреса, като при това браузъра извършва URL кодиране. Този метод е подходящ при изпращане на малко количество данни, защото повечето сървъри ограничават размера на GET заявките до 256 символа. Метода POST отваря директен комуникационен канал между клиента (браузъра) и сървъра. Тук не се извършва URL кодиране и големината на предаваната информация не е ограничена (в някои случаи от съображения за сигурност ограничения има и при този метод), тъй че той е подходящ за изпращане на файлове и форми с много информация. Освен това изпращането на пароли с метода GET не е особено удачно, тъй като всеки може да разбре вашата парола виждайки какво е изпратил браузърът като URL. Ако се използва POST това не може да се случи, поради това, че данните се предават директно и не преминават през полето за адреси на браузъра.

<form> не визуализира никакви полета в браузъра, а служи само за контейнер.

Елемент <input>

Един от най-често използваните елементи в html формите. Той е празен елемент, което означава, че не се нуждае от затварящ таг.

Сред свойствата на <input>, най-важно е свойството му type. Чрез него се определя вида на на полето – текстово, цифрово, бутон и т.н.

Свойства на <input>

<!-- Едноредово поле -->
<input type="text" name="FirstName" value="This is a text field" />
<!-- Поле за парола -->
<input type=“password“ name="pass" />
<!-- Поле за въвеждане на числа -->
<input type="number" name="qantity" />
<!-- Бутон, чрез който се изпраща формата -->
<input type="submit" value="Apply Now" />
<!-- Бутон, чрез който се изчиства съдържанието на формата -->
<input type="reset" name="resetBtn" value="Reset the form" />
<!-- Стандартен бутон -->
<input type="button" value="click me" />
<!-- Поле за избор (с отметка) -->
<input type="checkbox" name="fruit" value="apple" />
<!-- Радио бутон -->
<input type="radio" name="title" value="Mr." />

Свойства на текстово поле

size определя размера на полето (колко видими символа може да съдържа). <input type=“text“ size=“15″ />

maxlength определя максимална дължина на съдържанието (колко символа можем да въведем). <input type=“text“ size=“20″ maxlength=“5″ />  

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

value задава стойност по подразбиране, която се попълва при зареждане на полето.

Свойства на радио бутоните и полетата за избор

name– определя към коя група принадлежи даден бутон

value – по стойността му идентифицираме бутона

checked – бутона е избран по подразбиране

<form name="myform" method="post" action="path/to/some-script.php">
  Chose a drink: <br />
  <input type="radio" name="group1" value="milk" />Milk <br />
  <input type="radio" name="group1" value="juice" />Juice <br />
  <input type="radio" name="group1" value="water" checked />Water <br />
  Select lunch: <br />
  <input type="radio" name="group2" value="pizza" checked />Pizza <br />
  <input type="radio" name="group2" value="sandwich" />Sandwich <br />
  <input type="radio" name="group2" value="burger" />Burger <br />
</form>
<form name="myform" method="post" action="path/to/some-script.php">
  Chose a drink: <br />
  <input type="checkbox" name="group1" value="milk" />Milk <br />
  <input type="checkbox" name="group1" value="juice" />Juice <br />
  <input type="checkbox" name="group1" value="water" checked />Water <br />
  Select lunch: <br />
  <input type="checkbox" name="group2" value="pizza" checked />Pizza <br />
  <input type="checkbox" name="group2" value="sandwich" />Sandwich <br />
  <input type="checkbox" name="group2" value="burger" />Burger <br />
</form>

Етикети

Елементът <label> дефинира етикет (описание) към даден елемент на html формата. Текстът на етикета не е само визуално свързан с елемента. Той е програмно свързан с него. Ако например щракнем върху етикета, то активираме елемента, с който той е свързан.

За да асоциираме правилно етикет с елемент, използваме свойството му for. То трябва да кореспондира със свойството id на елемента.

<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female"><br>

Свойството id указва уникален идентификатор за HTML елемент (стойността трябва да е уникална в HTML документа).

Алтернативно, можете да поставите <input> директно в <label>, в който случай атрибутите for и id не са необходими

<label>Do you like peas?
  <input type="checkbox" name="peas">
</label>

Задача 1

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

<textarea rows="10" cols="40">Some text here...</textarea>
Реклами