Lai gan HTML5 veidlapas piedāvā daudz vairāk funkciju nekā tās priekšgājēji, tās var tikt definētas tikpat vienkārši.
HTML5 patiešām piedāvā ļoti daudz jaunu lauka tipu. To atbalsts esošajos pārlūkos jau tagad ir salīdzinoši labs. Tomēr šeit es jums iepazīstināšu tikai ar tiem lauku veidiem, kas ir praktiski izmantojami.
Krāsu izvēlētājs
Jūs varat piedāvāt saviem apmeklētājiem iespēju izvēlēties krāsu.
Noklikšķinot uz šāda veida lauka, tiks atvērts tipisks krāsu izvēlētājs.
Izvēloties, varat izvēlēties vēlamo krāsu. Šādu krāsu izvēlētāju definē pēc <input type="color" />.
Izvēlies savu iecienītāko krāsu: <input type="color" name="lf" />
Laukam vienmēr jābūt piešķirtam vērtību. Ja šī trūkst vai tā ir nederīga, automātiski tiks pieņemts #000 (t.i., melna krāsa).
Datums un laiks
It īpaši attiecībā uz datuma un laika ievades lauku tipiem HTML5 piedāvā dažādas inovācijas. Un šiem lauku tipiem daļēji ir patiešām jāuzmanās. Piemēram, iedomājieties, kādas darbības ir nepieciešamas, lai piedāvātu savam apmeklētājam datuma izvēles lauku. Parasti, bez JavaScript (vai arī Flash) tas nebūtu iespējams. Pateicoties HTML5, tas tagad tiek daudz vienkāršāk. Šeit ir nepieciešams vienkārši definēt datuma ievades lauku ar date tipu.
<input type="date" />
Kalendāra attēlošanai un īstenošanai ekskluzīvi atbild pārlūks. Pārlūkiem jārāda atbilstošs logrīks kalendāra attēlošanai. Google Chrome izskatās šādi:
<input type="date" /> pievēršas datumam, ko lietotāji var izvēlēties. Pēc izvēles datums tiek automātiski ievietots tekstā.
Tāpat viegli ir izveidot lauka ievadi laika izvēlē. To var izdarīt, definējot lauku ar tipu time.
<input type="time" />
Ar time pārlūki rādīs vadīklīus laika izvēlei.
Līdzīgi vienkārši darbojas arī week. Tas rāda lauku nedēļas izvēlei.
<input type="week" />
Varam parādīt arī mēneša lauku.
<input type="month" />
Abi lauku tipi rāda vadīklīus, ar kuriem var iestatīt nepieciešamās vērtības.
Kamēr time un date atļauj tikai datumu vai laiku izvēli, datetime un datetime-local ļauj kombinēt abas variants.
Pie datetime tiek parādīti datuma lauks un lauks laika izvēlei blakus. (datetime pašlaik tiek atbalstīts tikai Safari un Opera).
Jau ir minēts, ka šajā nodaļā aprakstītie formu lauki pašlaik vēl nav atbalstīti visos pārlūkos. Lai tos tomēr izmantotu, varat izmantot atbilstošus JavaScript risinājumus. Tādām populārām JavaScript bibliotēkām kā jQuery un Dojo ir piemēroti skripti. Ar jQuery UI tas izskatās šādi:
<!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>Tā, jūs esat drošībā pat tad, ja pārlūks neatbalsta klasisko date.
Lauki skaitļiem
Ar number tiek piedāvāts lauks, kas paredzēts īpaši skaitļu ievadīšanai.
Vienkāršākajā gadījumā number lauka definīcija būtībā izskatās šādi:
<input type="number" />
Skaitļus var ievadīt šādos laukos divos veidos:
• ar tastatūru
• izmantojot vadības elementus
Papildu atribūti, kas padara number laukus vēl detalizētākus, ir min un max, ar kuriem ir iespējams noteikt lauku vērtību diapazonus.
• min - mazākā iespējamā vērtība
• max - lielākā iespējamā vērtība
Tomēr šie divi atribūti darbojas tikai attiecībā uz pārlūkprogrammas vadības elementiem. Lietotāja manuālās ievades ar tastatūru tieši uz šiem atribūtiem neietekmēs.
Gan atribūtiem var būt veselas un decimālskaitļi.
Atribūtam step var noteikt soli, kuru pārlūkprogrammas vadības elementi ievēros.
<input type="number" min="0" max="8" step="2" />
Šajā gadījumā pārlūkprogrammas vadības elementos varētu tikt izvēlētas tikai vērtības 0, 2, 4, 6 un 8.
Slīdnis
Lauki ar tipu range ļauj izvēlēties vērtību noteiktā vērtību diapazonā.
Pārlūkprogrammas interpretē range lauku ar slīdnīti.
<input type="range" min="0" max="10" step="2" value="6">
Mazākā iespējamā vērtība tiek norādīta, izmantojot atribūtu min. max apraksta lielāko iespējamo vērtību. Ja trūkst min un max atribūtu, pārlūkprogrammas ņem vērā vērtības 0 un 100.
Ar step ir iespējams definēt soli.
Izveidot meklēšanas laukus
search sākotnēji nedarbojas. Vairāk gan šo lauku tipu vajadzētu uzskatīt par papildinājumu klasiskajam teksta ievades laukam. Mērķis ir atšķirt search laukus vizuāli no parastajiem teksta laukiem. Parasti pārlūkprogrammas nodrošina search lauku attēlojumu.
<input type="search" />
Kā tie tiks īstenoti, tas ir atstāts ražotāju ziņā. Laba kombinācija ir pievienot results atribūtu.
<input type="search" results="5" placeholder="Meklēšana..." />
Izvēloties results, tiek nosprausts, cik iepriekšējās meklēšanas ierakstus laukā parādīt.
Taču uzmanību: results atribūts nav HTML5 specifikācijas sastāvdaļa.
