Kuigi HTML5-vormidel on palju rohkem funktsioone kui nende eelkäijatel, saab need sama lihtsalt määratleda.
HTML5 pakub tegelikult väga palju uusi väljatüüpe. Nende toetus praeguste brauserite poolt on juba praegu üsna hea. Siiski tutvustan siinkohal ainult neid väljatüüpe, mis on praktiliselt kasutatavad.
Värvivalija
Saate oma külastajatele võimaluse valida värv.
Vajutades sellisele väljale, avaneb tüüpiline värvivalija.
Saab valida soovitud värvi. Selline värvivalija määratletakse <input type="color" />.
Vali oma lemmikvärv: <input type="color" name="lf" />
Väljale tuleb alati määrata väärtus. Kui seda pole või see on vigane, võetakse automaatselt vastu #000 (seega Must).
Kuupäev ja aeg
Eriti lähtudes kuupäeva ja kellaaja sisestamise väljatüüpidest, on HTML5-s arvukalt uuendusi. Ja osad neist väljatüüpidest on tõepoolest keerukad. Mõelge näiteks sellele, milliseid samme tuleb teha, kui soovite oma külastajatele pakkuda kuupäevavaliku välja. Tavaliselt ei saa seda teha ilma JavaScripti (või ka Flashita). Tänu HTML5-le on see nüüd palju lihtsam. Siin tuleb lihtsalt määratleda kuupäeva tüüpi sisestusväli date.
<input type="date" />
Kalendri kuvamise ja teostuse eest vastutab ainult brauser. Brauserid peaksid kuvama vastava vidinana kalendri. Google Chrome'is näeb rakendus välja järgmiselt:
Tüübi date abil määratletakse kalender, mille kaudu kasutajad saavad soovitud kuupäeva valida. Pärast valimist kantakse kuupäev automaatselt tekstiväljale üle.
Samamoodi on lihtne määratleda ajaväli väli. Kasutatakse tüüpi time.
<input type="time" />
Tüüp time peaks brauserid kuvama kontrollkomponendid kellaaja valimiseks.
Samamoodi lihtsalt töötab tüüp week. Selle kaudu kuvatakse väljavaliku nädal.
<input type="week" />
Lisaks saab kuvada kuufälja.
<input type="month" />
Mõlemad väljatüübid toovad esile kontrollkomponendid, mille kaudu saab soovitud andmeid sättida.
Kui time ja date lubavad kas valida ainult kuupäeva või ainult kellaaja, siis datetime ja datetime-local võimaldavad mõlema variandi kombinatsiooni.
Tüübi datetime puhul kuvatakse kõrvuti väljavalik kuupäeva ja kellaaja jaoks. (datetime-d toetavad praegu ainult Safari ja Opera).
Juba mainitud, et selles jaotises tutvustatud vormivälju ei toeta hetkel veel kõik brauserid. Kes soovib neid siiski kasutada, võib kasutada vastavaid JavaScripti lahendusi. Suured JavaScripti raamistikud nagu jQuery ja Dojo pakuvad sobivaid skripte. jQuery UI puhul oleks see järgmine:
<!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>Seega olete kindlustatud ka siis, kui brauser ei toeta klassikalist date.
Numbriväljad
Tüübi number abil on saadaval väli, mis on spetsiaalselt numbrite sisestamiseks mõeldud.
Lihtsaimal juhul näeb number välja määratlemine välja järgmiselt:
<input type="number" />
Arvväärtused saab sisestada nendesse väljadesse kahel viisil:
• klaviatuuri abil
• kontroll-elementide kaudu
Lisatavate atribuutide abil saab number välju veel detailsemalt kirjeldada. Alustuseks on olemas nii atribuut min kui atribuut max, mille abil saab väljade vahemikke määrata.
• min – vähim võimalik väärtus
• max – suurim võimalik väärtus
Mõlemad need atribuudid mõjutavad aga ainult brauseri kontroll-elemente. Kasutajate käsitsi sisestusi klaviatuuri abil nende abil mõjutada ei saa.
Mõlemale atribuudile saab omistada täis- ja ujukomaarvud.
Atribuudi step abil saab määrata sammhaaval, mille kaudu brauseri kontroll-elemendid peaksid liikuma.
<input type="number" min="0" max="8" step="2" />
Selles olukorras saaks brauseri kontroll-elementide abil valida ainult väärtused 0, 2, 4, 6 ja 8.
Lülitid
Väljad tüübiga range võimaldavad valida väärtuse määratud vahemikus.
Brauserid kuvavad range välju lülititena.
<input type="range" min="0" max="10" step="2" value="6">
Väikseim võimalik väärtus on määratud atribuudi min abil. max kirjeldab suurimat võimalikku väärtust. Kui atribuudid min ja max puuduvad, eeldavad brauserid väärtusi 0 ja 100.
Atribuudi step abil saab määrata sammude järjestust.
Otsinguväljad
search ei oma alguses mingit funktsiooni. Pigem tuleks seda väljatüüpi näha klassikalise tekstiväljana täiendusena. Otsinguväljade mõte on, et need erineksid visuaalselt tavalistest tekstiväljadest. Tavaliselt peaksid brauserid kuvama search väljade kuvandi.
<input type="search" />
Kuidas see lõpuks realiseeritakse, jääb tootjate otsustada. Hea kombinatsioon on lisada atribuut results.
<input type="search" results="5" placeholder="Otsi..." />
Atribuudi results abil saab määrata, mitu eelnevat otsingusisestust peaks väljal kuvatama.
Kuid tähelepanu: results atribuut ei ole osa HTML5 spetsifikatsioonist.
