HTML 5 нови неща за формите

Автор: adrian

required. Това прави input полетата задължителни. Естествено трябва да си правите проверката и чрез php, защото това не работи във всички браузъри.

<input type="text" name="username" required />

или

<input type="text" name="username" required="required" />

autofocus. Това прави input полето, на което е сложен активно.

<input type="text" name="username" required="required" />
<input type="password" name="password" autofocus />

и това може да се напише така:

<input type="text" name="username" required="required" />
<input type="password" name="password" autofocus="autofocus" />

При двата примера ще се пренесете на полето за писане на парола с зареждането на страницата.

placeholder. Може би едно от най-вълнуващите нововъведения. За жалост неработи дори под Opera

<input type="text" name="username" placeholder="Вашето име" />

резултатът ще е това:

Когато цъкнем върху input полето текстът „Вашето име“ ще се махне, а когато цъкнем отстрани пак ще се появи.

type=“email„. Нов тип поле за въвеждане на email адрес. Ако не се въведе валиден email формата не се изпраща. И тук отново трябва да си правим проверката и чрез PHP, защото все още не се поддържа от всички браузъри.

<input type="email" name="email" />

type=“url„. Нов тип поле за въвеждане на url адрес. Ако не се въведе валиден url формата не се изпраща. И тук отново трябва да си правим проверката и чрез PHP, защото все още не се поддържа от всички браузъри.
За валиден се зачита адрес, който започва с http://

<input type="url" name="url" />

pattern. Чрез проверка подобна на preg_match в PHP може да се проверяват полетата. Естествено и тук трябва да се прави и проверка с PHP, защото не работи във всички браузъри.

<input type="username" name="username" pattern="[A-Za-z]{4,10}" />

Този код ще разреши на формата да се изпрати ако username е между 4 и 10 символа и съдържа английската азбука.

Примерен код:

<!DOCTYPE html>
<html>
<head>
<title>Някакво заглавие</title>
<meta charset="utf-8" />
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<header>
<hgroup>
<h1>Голямо заглавие</h1>
<h2>малко заглавие</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</nav>
<section id="main">
<form action="form_validation" method="post">
<input type="text" name="name" placeholder="Вашето име" pattern="[A-Za-z]{4,10}" required />
<input type="email" name="email" placeholder="email@domain.com" required autofocus />
<input type="url" name="url" placeholder="http://domain.com" required />

<input type="submit" value="Изпрати" />
</form>
</section>
<footer>Футър на страницата</footer>
</body>
</html>

style.css

html, body, h1, h2, h3 { margin: 0; padding: 0; }

article, aside, dialog, figure, footer, header, hgroup, nav, section { display: block; }

footer, header, nav, #main { margin: 0 auto; width: 900px; }

footer, header { background: #cccccc; border: 1px solid #858585; margin: 0 auto; width: 898px; }

nav { overflow: hidden; }

nav ul { list-style-type: none; margin: 0; padding: 0;}

nav li { float: left; text-align: center; }

nav li a { background: #dddddd; border: 1px solid #858585; border-width: 0 1px 1px; color: #555555; display: block; padding: 1em 0; text-decoration: none; width: 178px; }

nav li a:hover { background: #efefef; border-color: #dddddd }
input { display: block; }

Таблица къде се поддържат