2. HTML Forms
Формите в HTML се използват, когато е нужно да се
съберат данни от посетителите на сайт.
Например по време на регистрацията на потребителя,
можете да съберете данни като имейл, потребителско
име, парола и т.н.
Една форма вземи информация от посетителите на
сайта и след това ще я изпраща към бек-енд(back-
end) езика използван в приложението, като CGI, ASP,
PHP и т.н.
2
3. Пример за уеб форма
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
3
4. Входовото поле <input>
За да вмъкнем поле, което да приема някакъв
вид данни се използва полето <input>
За дефинирането на вида от данни, които
искаме да вкараме чрез входовото ни поле се
използва атрибута “type”, примерно type=“text”
Освен атрибута “type”, <input> полето може да
приеме и всеки друг вид атрибут, както и по
специфични за него такива.
4
5. Атрибутите на <input>
align
alt
autocomplete
autofocus
checked
disabled
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height
list
max
maxlength
min
multiple
name
placeholder
required
size
src
step
type
value
width
5
6. <input type=“submit”>
За да е възможно изпращането на
формата към даден сървър се използва
<input> поле с атрибут type=“submit”, което
изпраща формата към сървъра за
употреба.
<input type="submit" value="Submit">
6
7. Други видове <input>
полета
reset
radio
checkbox
color
date
datetime
email
file
button
hidden
month
number
range
search
tel
time
url
week
7
8. Атрибутите на формата:
action
За реализирането на изпращането на формата е
нужно да сме дефинирали къде ще бъде изпратена
нашата форма.
Това става с атрибутa, action=“link”
Следователно формата ще се изпрати към
дефинирото от нас местоположение.
От там нататък бек-енд часта се заема с
използването на въведените от потребителя данни.
8
9. Атрибутите на формата:
method
За да дефинираме начина, по който ще се изпрати
една форма се използва атрибута, method=“get”
или method=“post”
GET е метода по-подразбиране, когато не сме
дефинирали метод. Той се използва когато искаме
данните, които изпращаме да са видими във
връзката (URL).
POST метода се използа, когато се изпращат
чувствителни или лични данни. Също така POST
метода не показва изпратените данни във
връзката.
9
10. Групиране на на данните в
формата
За групирането на данни във формите се използва
<fieldset>
За прилагането на надпис вътре в даден <fieldset>,
се използва <legend>
10
11. Drop-down menu
За създаването на падащо меню в нашата форма
се използва елементът <select> … </select>
Добавянето на данни в зъздаденото от нас падащо
меню, се постига като вътре в <select> тага се
добавя елементът <option> … </option>
Всяка стойност от падащото меню трябва да има
дефиниран атрибут value=“text” за да може да се
знае каква стойност ще бъде изпратена през
формата при избор на дадената стойност
11
12. Текстово поле
Елементът <textarea> ни позволява създаването на
голямо текстово поле.
При дефирането имаме опция като атрибути да
дефинираме редове и колони с атрибутите
rows=“num” и col=“num”.
По този начин имаме по-голяма свобода за
създаване на текстово поле от колкото с <input
type=“text”>.
<textarea name="message" rows="10" cols="30">
Lorem ipsum dolor sit amet
</textarea>
12
13. Бутон <button>
Друг начин за създаването на бутон, освен с <input
type=“submit”> е с елементът <button
type=“button”> Click Me! </button>
Внимавайте, по този начин, ако искате чрез такъв
бутон да се изпраща форма, трябва да се добави
атрибута type=“submit”!
13