Bár az HTML5 űrlapok sokkal több funkciót kínálnak, mint elődeik, ugyanolyan könnyen definiálhatók.
A HTML5 ténylegesen számos új mezőtípust kínál. A jelenlegi böngészők támogatása jelenleg viszonylag jó. Mindenesetre ebben a pontban csak olyan mezőtípusokat fogok bemutatni, amelyek gyakorlati célra használhatók.
Színválasztó
Lehetőséget adhatsz látogatóidnak, hogy kiválasszák a színüket.
Amikor valaki kiválaszt egy ilyen mezőt, megnyílik egy tipikus színválasztó.
Ezen keresztül kiválasztható a kívánt szín. Az ilyen színválasztót a <input type="color" /> jelöli.
Válaszd ki a kedvenc színed: <input type="color" name="lf" />
A mezőnek mindig értéket kell adni. Ha hiányzik vagy érvénytelen, automatikusan a #000 (vagyis Fekete) lesz elfogadva.
Dátum és idő
Különösen a dátumok és idők megadására szolgáló mezőtípusok tekintetében az HTML5 számos újdonságot tartogat. Ezek a mezőtípusok valóban kifejezőek. Például gondoljunk csak arra, hogy mennyi lépés szükséges, ha látogatóinknak egy dátumválasztó mezőt szeretnénk kínálni. Normál esetben ezt JavaScript (vagy Flash) nélkül nem lehet megtenni. Az HTML5-nek köszönhetően ez mostantól sokkal egyszerűbb. Csak egy dátumtípusú bemeneti mezőt kell definiálni.
<input type="date" />
A naptár megjelenítéséért és implementálásáért kizárólag a böngésző felelős. A böngészőknek egy megfelelő widgetet kell használniuk a naptár megjelenítésére. A Google Chrome-ban egy alkalmazás így néz ki:
A date segítségével egy naptárat definiálunk, amelyen keresztül a felhasználók kiválaszthatják a kívánt dátumot. A választás után a dátum automatikusan átkerül a szövegmezőbe.
Ugyanilyen könnyen elkészíthető egy időmező is. Ehhez a time típusú mezőt kell használni.
<input type="time" />
A time a böngészőknek idő kiválasztására szolgáló vezérlőelemeket kell megjelenítsenek.
Hasonlóan könnyen működik a week is. Erre a hétkiválasztó mező megjelenítésére szolgál.
<input type="week" />
Továbbá lehetőség van egy hónapmező megjelenítésére.
<input type="month" />
Mindkét mezőtípus vezérlőelemek megjelenítését idézi elő, amelyeken keresztül az kívánt adatok beállíthatók.
A time és date vagy csak a dátum kiválasztását, vagy csak az idő kiválasztását teszi lehetővé, míg a datetime és a datetime-local lehetővé teszi mindkét verzió kombinációját.
A datetime-nél a dátummezőt és az időválasztás mezőjét egymás mellett jeleníti meg (a datetime jelenleg csak a Safari és az Opera által támogatott).
Már felmerült, hogy ezeket a mezőket jelenleg nem támogatják az összes böngésző. Ha mégis szeretnéd használni őket, akkor megfelelő JavaScript megoldásokhoz fordulhatsz. A nagy JavaScript keretrendszerek, mint a jQuery és a Dojo megfelelő scripteket kínálnak. A jQuery UI például így nézne ki:
<!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>Tehát biztonságban leszel, még akkor is, ha a böngésző nem támogatja a klasszikus date-ot.
Számmezők
A number segítségével egy olyan mezőt kínálunk, amely kifejezetten számok bevitelére szolgál.
A legegyszerűbb esetben egy number-mező meghatározása így néz ki:
<input type="number" />
A számokat 2 módón lehet beírni ezekbe a mezőkbe:
• billentyűzeten keresztül
• irányítóelemeken keresztül
További attribútumok megadásával a number mezők részletesebben leírhatók. Először is vannak a min és a max attribútumok, amelyek segítségével meghatározhatók a mezők értéktartományai.
• min – a legkisebb érték
• max – a legnagyobb érték
Ezen két attribútum azonban csak az irányítóelemekre vonatkoznak a böngészőkben. A felhasználók billentyűzeten történő bevitelét ezekkel nem lehet befolyásolni.
Mindkét attribútumhoz egész és tört számokat lehet rendelni.
A step attribútummal meghatározható, hogy milyen lépésekben kell haladni a böngésző irányítóelemein keresztül.
<input type="number" min="0" max="8" step="2" />
Ebben az esetben a böngésző irányítóelemein keresztül csak a 0, 2, 4, 6 és 8 értékek közül lehet választani.
Csúszka
A range típusú mezők lehetővé teszik az érték kiválasztását egy meghatározott értéktartományon belül.
A böngészők a range mezőt csúszkával értelmezik.
<input type="range" min="0" max="10" step="2" value="6">
A legkisebb értéket a min attribútum határozza meg. A max a legnagyobb értéket írja le. Hiányzó min és max attribútumok esetén a böngészők a 0 és 100 értékeket veszik alapul.
A step attribútummal meghatározható a lépésköz.
Keresőmező létrehozása
A search típusú mezőnek kezdetben nincs funkciónak. Inkább ez a mezőtípus a klasszikus szövegbeviteli mező kiegészítéseként értelmezendő. A search mezők célja csupán az, hogy vizuálisan megkülönbözzenek az egyszerű szövegmezőktől. Általában a böngészőknek kell kezelniük a search mezők megjelenítését.
<input type="search" />
Az, hogy végül hogyan valósítják meg ezt, az gyártóktól függ. Jó kombináció lehet a results attribútum hozzáadása.
<input type="search" results="5" placeholder="Keresés..." />
A results attribútum meghatározza, hogy a mezőben hány korábbi keresési bejegyzés jelenjen meg.
Azonban figyelem: A results attribútum nem része az HTML5 specifikációnak.
