HTML 5 нови неща за формите
15-08-2010
1. required. Това прави input полетата задължителни. Естествено трябва да си правите проверката и чрез php, защото това не работи във всички браузъри.

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


или

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


2. 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" />


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


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

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


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



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


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

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


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

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


6. 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; }



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





/ Трябва да сте регистриран за да напишете коментар /
От: index
0:11 16-08-2010
Имам 1 въпрос.
" pattern="[A-Za-z]{4,10}" "
няма ли вероятност да се коригира от потребителя и да създаде проблеми ?
От: adrian
0:15 16-08-2010
Написал съм, че проверките трябва да се правят и с PHP, защото
1. Не се поддържат от всички браузъри и
2. Не знам - може и да могат да се променят. Не съм пробвал.
Те са просто за удобство, все пак не се поддържат от IE и Mozilla, т.е ще стигнат до доста малка част от потребителите :)

Може би в урока трябваше да добавя най-отдолу текст:

ЗАДЪЛЖИТЕЛНО да се правят и проверки с PHP :)
От: index
0:30 16-08-2010
С mozilla и FireBug може да се редактират. Просто ми стана интересно.
Доста интересни неща публикуваш :)
От: jooorooo
8:46 16-08-2010
HTML5 излиза тестово през 2012 година, а от W3C ще го стандартизират през 2020 година /това е според последни данни/
От: lam3r4370
15:56 16-08-2010
То тогава няма смисъл от тях ,като трябва да го правим и с PHP ? Или?
От: adrian
16:04 16-08-2010
Ами всеки сам си преценява. Това просто помага на потребителите използващи Opera, Chrome и Safari да въведат правилните данни без да се налага да формата им да се праща до сървъра да се правят проверки и да се изкарват съобщения за грешки.

Естествено, че трябва да се правят проверките с PHP :)

Сега видях, че има и поле за търсене, което работи само под Safari и Chrome, но за сметка на това е много красиво :)

От: lam3r4370
16:34 16-08-2010
@adrian не бях се замислил за това.Наистина е по-добре с него ,по-user friendly.Иначе поздравления за серията от уроци ,които правиш за HTML5 и CSS3.
От: adrian
16:38 16-08-2010
Силно казано серия. Просто попаднах на някой неща за CSS 3 и HTML 5 и понеже нямам какво да правя реших да изпробвам къде се поддържат и къде не.
От: lam3r4370
16:49 16-08-2010
@adrian не бях се замислил за това.Наистина е по-добре с него ,по-user friendly.Иначе поздравления за серията от уроци ,които правиш за HTML5 и CSS3.
От: lam3r4370
16:51 16-08-2010
Извинявам се за повторението.
@adrian
Ами тогава ще ни ( предполагам на всички) е интересно да направиш и серия (т.е още уроци) ,независимо ,че не се поддържат от всички браузъри
От: lam3r4370
16:55 16-08-2010
Още един коментар (не целя да спамя ,просто няма едит ).
Виждам ,че не си споменал ,но вместо pattern може да се използва и
type="number" ,съответно min="4"max="10"
От: dgeorgiev
12:19 02-09-2010
Доста интересни уроци в последно време пускаш, но лошото е, че html 5 и css 3 ще могат да се ползват активно след доста време...
От: mitko666
6:37 03-09-2010
placeholder - тази функция ми работи успешно през Chrome :) за пореден път се убеждам че това е прекрасен браузер.Иначе браво за уроците.
От: Liberate
16:27 07-09-2010
ха какъв парадокс - гугъл хром явно поддържа хтмл5, но точно той е браузъра който като влезеш в "инструменти за програмисти" можеш да си променяш каквото си искаш по страницата и кел файда че хтмл5 е толкова страхотен ако няма проверка на сървъра... ше пада яко хакване :Д
иначе би било страхотно да влезе като стандарт 5 само че 2020 ми се струва като "далечното бъдеще" ... :/
От: mute
0:25 06-11-2010
браво на Адриан за добрите уроци,
валидацията с PHP e задължителна, новите типове полета са по user friendly т.е. ще кажат на потребителят че трябва да си въведе имейл ако не го направи...
не забравяйте че може да изпратите POST/GET към дадена страница и без да ви е необходима хтмл форма...
От: streleca_stz
10:46 30-05-2011
Супер уроци за HTML5! Под лисицата всичко което си показал работи на 6, само забелязах, че ако напишеш името си на кирилица ти вади грешка... Което е малко гадно и дано да го оправят.. :) Иначе ако си го напишеш на латиница няма никакви проблеми
1