HTML и CSS за начинаещи

HTML & CSS за начинаещи (Част 13): Формуляри (1)

Всички видеоклипове от урока

Формулярите се дефинират чрез елемента form. Всички елементи, които се намират вътре в form, принадлежат на съответния формуляр.

<form>
…
</form>

Във входния <form> се очаква атрибута action. Така се посочва крайната дестинация на формулярните данни. Обикновено това е PHP приложение.

<form method="post" action="form.php">
…
</form>



Уверете се, че посоченият файл може да бъде намерен наистина. Трябва да зададете правилния път.

Вместо насоки, можете също да посочите електронна поща.

<form method="post" action=mailto:kontakt@psd-tutorials.de method="post" enctype="text/plain">
…
</form>



В този случай формулярните данни се изпращат чрез електронна поща. Това не е особено елегантно, поради което почти винаги се прибягва до техниката с насоки. Но ако нямате насока на разположение, можете спокойно да изпратите формуляра чрез електронна поща.

Още един важен атрибут за елемента form е method. Чрез него се определя HTTP методът за предаване на съдържанието на формуляра. Предлагат се две различни възможности.

post = Тук формулярните данни се предават на указания адрес в два стъпки. Първо браузърът се свързва с посочения адрес. След като това бъде успешно, данните от формуляра се предават на насоката.

get = При този метод формулярните данни се добавят в края на URL адреса, указан в атрибута action. Формулярните данни са видими в адресния ред на браузъра.

Въпросът е, кой от двете варианти трябва да се използва за предаване на формулярните данни. В принцип може да използвате двете. Но особено при големи обеми данни и качването на файлове на сървъра, вие трябва да изберете метода post.

Прости полета във формуляра

До момента е дефинирана само външната структура на формуляра. Във браузъра все още няма абсолютно нищо от самия формуляр.

<form method="post" action="form.php">
…
</form>



Сега идва моментът да напълните формуляра със съдържание/живот.

Най-често използваният тип поле е това за въвеждане на един ред текст. Това се използва например за попълване на имена, фамилни и имейл адреси. Единичните текстови полета се дефинират по следния начин:

<input type="text" name="vorname" />



На елемента input се присвоява комбинация от атрибут-стойност type="text". Също така трябва да дадете вътрешна маркировка на всяко текстово поле. Този идентификатор трябва да бъде уникален в документа. Той е от значение особено когато става въпрос за обработка на формулярните данни с помощта на насоки. Не използвайте интервали и специални знаци в маркировката.

Когато видите резултата в браузъра, изглежда по следния начин:

HTML & CSS за начинаещи (Част 13): Формуляри (1)

В момента това не изглежда особено впечатляващо. Но когато кликнете в текстовото поле, ще забележите, че вече можете да направите въвеждане.

HTML и CSS за начинаещи (Част 13): Формуляри (1)

За да знаят посетителите какво трябва да въведат в полето, липсва очевидно етикет.

Име: <input type="text" name="vorname" />



Освен това, като погледнете в браузъра, ще видите желания резултат.

HTML и CSS за начинаещи (част 13): Формуляри (1)

С атрибута size можете да определите ширината на полето.

Име: <input type="text" name="vorname" size="30" />
<br />
Пощенски код: <input type="text" name="plz" size="5" />



Начертавате желаната ширина на полето чрез атрибута size.

HTML и CSS за начинаещи (Част 13): Формуляри (1)

В този случай 5 е точно пет знака. В този контекст е интересно и атрибута maxlength. Чрез него се указва максималният брой символи, които могат да бъдат въведени в полето. Ето един пример:

Име: <input type="text" name="vorname" size="30" maxlength="40" />



Ако стойността, посочена при maxlength, е по-голяма от тази при size, при по-дълги въведения автоматично ще има превъртане на полето. Чрез атрибута value можете да постигнете предварително попълване на поле.

Име: <input type="text" name="име" value="Твоето име" />



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

HTML и CSS за начинаещи (Част 13): Форми (1)



Потребителите могат да изтрият тази предварително попълнена стойност.

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

<input name="цена" type="text" value="€ 699.-" readonly />



За да зададете поле само за четене, му се присвоява атрибутът readonly. Отново е възможно да се види резултатът:

HTML и CSS за начинаещи (част 13): Формуляри (1)



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

Дефиниране на полета за парола

Разбира се, познавате полетата за пароли. Навсякъде, където се регистрирате, трябва да посочите парола. (Обикновено трябва да я въведете дори два пъти).

HTML и CSS за начинаещи (Част 13): Формуляри (1)

Данните, въведени в полето за въвеждане, не са видими, а се заменят автоматично от браузъра със звездички/точки. Предимство на този вариант: Хората, които може би ви гледат над рамото ви по време на въвеждане на паролата, не могат да я разшифроват. Въпреки това е заблуждаващо да се смята, че полетата за парола автоматично са сигурни. В действителност паролите се предават в чист вид чрез обикновения HTTP, когато формулярът се изпраща.

Полетата за парола се дефинират по следния начин:

<input type="password" name="парола" />



На атрибута type се присвоява стойността password. Отново е възможно да се види резултатът.

HTML и CSS за начинаещи (Част 13): Формуляри (1)



Ако въведете нещо там, браузърите го правят неразбираемо директно по време на въвеждането.