Въпреки че HTML5 формите предлагат много повече функционалности от своите предшественици, те могат да бъдат дефинирани също толкова лесно.
HTML5 всъщност предлага много нови видове полета. Подкрепата от текущите браузъри вече е сравнително добра. В този момент обаче ще ви представя само такива видове полета, които са практични.
Избор на цвят
Можете да дадете на вашите посетители възможност да изберат цвят.
Когато кликнете върху такова поле, се отваря типичен избор на цвят.
Чрез него може да се избере желаният цвят. Такъв цвят се дефинира с <input type="color" />.
Изберете любимия си цвят: <input type="color" name="lf" />
Винаги трябва да се присвои стойност на полето. В случай, че липсва или е невалидно, автоматично се приема #000 (черно).
Дата и час
Има много нови неща в HTML5, особено по отношение на типовете полета за дати и часове. Тези видове полета всъщност са доста сложни. Мислете например за стъпките, които са необходими, за да предложите на вашите посетители поле за избор на дата. Обикновено това не е възможно без JavaScript (или също така и Flash). Благодарение на HTML5, вече това става много по-лесно. Само един входен файл от тип date трябва да се дефинира.
<input type="date" />
За показване и изпълнение на календара е отговорен изцяло браузърът. Браузърите трябва да показват съответно управляващите елементи за календара. В Google Chrome едно приложение изглежда по следния начин:
С date се дефинира календар, чрез който потребителите могат да изберат желаната дата. Датата се приема автоматично в текстовото поле след избора.
Също така лесно може да се създаде поле за часове. За това се използва поле от тип time.
<input type="time" />
Чрез time браузърите трябва да показват контролни елементи за избор на час.
Подобно на това работи и week. Показва се поле за избор на седмица.
<input type="week" />
Може също да се покаже поле за месец.
<input type="month" />
И двата видове полета показват контролни елементи, чрез които могат да се настройват желаните данни.
Докато time и date позволяват само избор на дата или само на час, datetime и datetime-local позволяват комбинация от двете.
При datetime се показва поле за дата и поле за избор на час до него. (datetime в момента се поддържа само от Safari и Opera).
Вече беше споменато, че формулярните полета, представени в този раздел, в момента все още не се поддържат от всички браузъри. Ако все пак искате да ги използвате, можете да се обърнете към съответни решения с JavaScript. Големите JavaScript рамки като jQuery и Dojo предлагат подходящи скриптове. С jQuery UI това би изглеждало по следния начин:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
/* <![CDATA[ */
$(document).ready(function() {
$("#datepicker").datepicker();
});
/* ]]> */
</script>
</head>
<body>
<input type="text" id="datepicker" />
</body>
</html>Така че сте на висотата, дори ако браузърът не поддържа класическият date.
Полета за числа
Поле, предназначено специално за въвеждане на числа, се предлага чрез number.
В най-простия случай дефиницията на поле от тип number изглежда по следния начин:
<input type="number" />
Числата могат да бъдат въведени в такива полета по два начина:
• чрез клавиатурата
• чрез контролни елементи
Чрез добавяне на допълнителни атрибути number полетата могат да бъдат описани още по-подробно. Първоначално това са двата атрибута min и max, които позволяват определянето на обхвата на стойностите на полетата.
• min – най-малката възможна стойност
• max – най-голямата възможна стойност
Обаче тези два атрибута важат само за контролните елементи на браузъра. Ръчните въвеждания от страна на потребителите чрез клавиатурата не могат да бъдат контролирани по този начин.
На двете атрибути могат да бъдат присвоени цели и плаващи числа.
Чрез атрибута step може да се зададе стъпката, която браузърските контролни елементи следва да спазват.
<input type="number" min="0" max="8" step="2" />
В този случай през контролните елементи на браузъра могат да бъдат избрани само стойности 0, 2, 4, 6 и 8.
Плъзгачи
Полетата от тип range позволяват избор на стойност в определен диапазон.
Браузърите интерпретират полето от тип range с плъзгач.
<input type="range" min="0" max="10" step="2" value="6">
Най-малката възможна стойност се посочва с атрибута min. max описва най-голямата възможна стойност. Ако липсват атрибутите min и max, браузърите считат че стойностите са 0 и 100.
Чрез step може да се зададе поредност от стойности.
Създаване на полета за търсене
search първоначално няма никаква функция. Този тип поле се разглежда като допълнение към класическото текстово поле за въвеждане. Идеята на полетата search е само да се различават визуално от обикновените текстови полета. Обикновено браузърите трябва да поемат отговорността за представянето на полетата search.
<input type="search" />
Начинът, по който това се осъществява, зависи от производителите. Добро допълнение е добавянето на атрибута results.
<input type="search" results="5" placeholder="Търсене..." />
Чрез results се определя колко предишни търсения да се показват в полето.
Но внимание: Атрибутът results не е част от HTML5 спецификацията.
