C, PHP, VB, .NET

Дневникът на Филип Петров


* XHTML форми

Публикувано на 12 септември 2009 в раздел ХHTML.

Досега в разглежданите примери винаги сървърът предоставяше информация, а потребителят я четеше. Понякога обаче ни се иска да направим и обратна връзка. Формите са универсалният метод за изпращане на информация от потребител към сървър. Обикновено тази стъпка в различна посока от „еднопосочното“ движение на информация не е комфортна за разработчиците. Човек свикнал да борави със статичен HTML код обикновено изпитва трудности при обработването на информация от форми. Затова на тази тема ще се спрем по-детайлно.

За изграждане на форми използваме следните тагове:

  • <form> – базов таг, с който се ограждат всички елементи на формата;
  • <input> – таг указващ някои от възможните полета за въвеждане на информация. Тук попадат бутони, едноредови текстови полета, избираеми полета и полета за отбелязване;
  • <textarea> – многоредово текстово поле;
  • <select> – така нареченото „падащо меню“.

Споменатите елементи се изобразяват графично. Има съвсем минимални разлики между различните браузъри в изобразяването им. Всъщност вие сте виждали тези същите контроли за въвеждане на информация във вашата операционна система. Често разработчиците променят външния им вид чрез CSS според дизайна на сайта.

Ето и пълен списък на контролите както и кратък пример за всеки от тях:

Layout of form elements – CHI Best Practice
Елемент Пример Изглед
input type=“text“ Username:<br />
<input type=“text“ name=“username“ />
Input Type Text
input type=“password“ Password<br />
<input type=“password“ name=“password“ />
Input Type Password
input type=“button“ <input type=“button“ name=“help“
value=“Help?“ />
Input Type Button
input type=“submit“ <input type=“submit“ name=“submit“
value=“Validate“ />
Input Type Submit
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 Radio
input type=“checkbox“ <input type=“checkbox“
name=“remember“
value=“remember“ />Save cookie?
Input Type Checkbox
select Where do you want to login to?<br />
<select name=“section“>
<option>Admin section</option>
<option>User area</option>
</select>
Select Option in HTML
textarea Log comment for this login:<br />
<textarea name=“comment“
rows=“3″ cols=“18″></textarea>
HTML textbox

Ето как би изглеждала първата ни форма (която все още не прави нищо):

<!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>

Резултат:

HTML form

В следващата статия ще покажем как можем да „прихващаме“ информацията от форма и да я обработваме на сървъра.

П.П. Примерите за контроли и примерната форма са показани като картинка, а не с реалните обекти. Опитахте ли се да натиснете бутона? :)

 



4 коментара


  1. Кой пък ти каза, че е задължителен? Я пусни горния код във http://validator.w3.org/

    Просто по подразбиране е „get“.

  2. Николай Василев каза:

    Хах, къде е задължителния атрибут method на формата :P

  3. nikola каза:

    привет, дали мога да помоля за малко помощ относно валидацията на един сайт -http://apibg.blogspot.com

  4. W3 валидацията ли? Много са му грешките. Отиваш на:

    http://validator.w3.org/check?uri=http%3A%2F%2Fapibg.blogspot.com&charset=%28detect+automatically%29&doctype=Inline&group=0

    и започваш ред по ред.

    Иначе сайта си работи добре. Не е фатално, че не е валидиран.

Добави коментар

Адресът на електронната поща няма да се публикува


*