* XHTML форми

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

Досега в разглежданите примери винаги сървърът предоставяше информация, а потребителят я четеше. Понякога обаче ни се иска да направим и обратна връзка. Формите са универсалният метод за изпращане на информация от потребител към сървър. Обикновено тази стъпка в различна посока от “еднопосочното” движение на информация не е комфортна за разработчиците. Човек свикнал да борави със статичен 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

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

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



2 коментара за “XHTML форми”


  1. Николай Василев:
    15 ноември 2011 на 21:15

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


  2. Филип Петров:
    15 ноември 2011 на 22:06

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

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


Trackback URI | RSS за коментарите

Пусни коментар


Категории

Нови

Връзки