A HTML 5 sok hiányt pótol ezen a rendkívül fontossá vált területen. A HTML 5 nélkül különböző kliens és szerver oldali megoldásokkal próbáltuk pótolni azokat a hiányosságokat, amelyek a jelenlegi űrlapok használata esetén mutatkoznak. De nézzük meg, melyek azok a lehetőségek, amelyek könnyíthetik a munkánkat.
Kezdjük először az újfajta űrlap elemekkel.
Szám mező
Gyakran van szükségünk arra, hogy számadatot kérjünk be a látogatótól. A következő példa mutatja, hogy milyen lehetőségeink vannak.
<input type="number" min="10" max="20" step="2">
Jól látszik, hogy az intervallum határait és a lépésközt is megadhatjuk.
Csúszka használata
Akár számadatok esetén, akár más szituációban érdekes megoldás lehet a csúszka használata.
<input type="range" min="0" max="10" step="2" value="6">
Arra azonban érdemes figyelni, hogy itt a csúszka számszerű értéke nem jelenik meg közvetlenül. JavaScript segítségével viszont összeköthetjük a csúszka működését más űrlap elemekkel.
Dátum/idő megadása
Nagyon körülményes megoldásokat kellett alkalmaznunk a dátum és időpont megadásokhoz a korábbiakban. De erre is van egy nagyszerű megoldásunk:
<input type="date" … >
<input type="time" … >
Az eredmény:
Ezen kívül használható a
datetime, month és week típusú mező is.Szín megadása
A szín megadására is jó lehetőségünk van:
<input type="color">További lehetőségek
A következő példák jól mutatják az igényeket. A böngészők megoldása már nem ilyen egyértelmű.
<input type="tel">
<input type="email">
<input type="url">Automatikus fókusz
Automatikusan megkapja a fókuszt a következő elem:
<input type="text" autofocus … >Validálás
A JavaScript használata helyett további lehetőségeket is kaptunk.
Kötelező kitölteni a következő mezőt:
<input type="text" … required >
Lehetőség van reguláris kifejezések használatára is:
<input type="text" … pattern="[az]{3}[0-9]{3}" >
Nincsenek megjegyzések:
Megjegyzés küldése