* XHTML форми
Публикувано на 12 септември 2009 в раздел ХHTML.
Досега в разглежданите примери винаги сървърът предоставяше информация, а потребителят я четеше. Понякога обаче ни се иска да направим и обратна връзка. Формите са универсалният метод за изпращане на информация от потребител към сървър. Обикновено тази стъпка в различна посока от „еднопосочното“ движение на информация не е комфортна за разработчиците. Човек свикнал да борави със статичен HTML код обикновено изпитва трудности при обработването на информация от форми. Затова на тази тема ще се спрем по-детайлно.
За изграждане на форми използваме следните тагове:
- <form> – базов таг, с който се ограждат всички елементи на формата;
- <input> – таг указващ някои от възможните полета за въвеждане на информация. Тук попадат бутони, едноредови текстови полета, избираеми полета и полета за отбелязване;
- <textarea> – многоредово текстово поле;
- <select> – така нареченото „падащо меню“.
Споменатите елементи се изобразяват графично. Има съвсем минимални разлики между различните браузъри в изобразяването им. Всъщност вие сте виждали тези същите контроли за въвеждане на информация във вашата операционна система. Често разработчиците променят външния им вид чрез CSS според дизайна на сайта.
Ето и пълен списък на контролите както и кратък пример за всеки от тях:
| Елемент | Пример | Изглед |
|---|---|---|
| input type=“text“ | Username:<br /> <input type=“text“ name=“username“ /> |
 |
| input type=“password“ | Password<br /> <input type=“password“ name=“password“ /> |
 |
| input type=“button“ | <input type=“button“ name=“help“ value=“Help?“ /> |
 |
| input type=“submit“ | <input type=“submit“ name=“submit“ value=“Validate“ /> |
 |
| input type=“radio“ | <input type=“radio“ name=“agree“ value=“Yes“ checked=“checked“ /> SSL on<br /> <input type=“radio“ name=“agree“ value=“No“ /> SSL off |
 |
| input type=“checkbox“ | <input type=“checkbox“ name=“remember“ value=“remember“ />Save cookie? |
 |
| select | Where do you want to login to?<br /> <select name=“section“> <option>Admin section</option> <option>User area</option> </select> |
 |
| textarea | Log comment for this login:<br /> <textarea name=“comment“ rows=“3″ cols=“18″></textarea> |
 |
Ето как би изглеждала първата ни форма (която все още не прави нищо):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="bg">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>HTML Form</title>
</head>
<body>
<form action="">
<p>
Username:<br />
<input type="text" name="username" /><br />
Password:<br />
<input type="password" name="password" /><br />
<input type="checkbox" name="remember" value="remember" />
Save cookie?<br /><br />
<input type="radio" name="agree" value="Yes" checked="checked" />
SSL on<br />
<input type="radio" name="agree" value="No" />
SSL off<br /><br />
Where do you want to login to?<br />
<select name="section">
<option>Admin section</option>
<option>User area</option>
</select><br /><br />
Log comment for this login:<br />
<textarea name="comment" rows="3" cols="18"></textarea><br />
<input type="submit" name="submit" value="Validate" />
<input type="button" name="help" value="Help?" />
</p>
</form>
</body>
</html>
Резултат:
В следващата статия ще покажем как можем да „прихващаме“ информацията от форма и да я обработваме на сървъра.
П.П. Примерите за контроли и примерната форма са показани като картинка, а не с реалните обекти. Опитахте ли се да натиснете бутона? :)
Хах, къде е задължителния атрибут method на формата :P
Кой пък ти каза, че е задължителен? Я пусни горния код във http://validator.w3.org/
Просто по подразбиране е „get“.
привет, дали мога да помоля за малко помощ относно валидацията на един сайт -http://apibg.blogspot.com
W3 валидацията ли? Много са му грешките. Отиваш на:
http://validator.w3.org/check?uri=http%3A%2F%2Fapibg.blogspot.com&charset=%28detect+automatically%29&doctype=Inline&group=0
и започваш ред по ред.
Иначе сайта си работи добре. Не е фатално, че не е валидиран.