A weblapkészítés technikája (HTML5, CSS3) és ergonómiája / Űrlapok /Dátum és idő megadására szolgáló beviteli mezők

Űrlapok

Űrlapok

Dátum és idő megadására szolgáló beviteli mezők

A dátum és idő megadására szolgáló mezőket együtt tárgyaljuk, mivel ezek célja nagyon hasonló és ugyanazon paramétereket használhatjuk mindegyik esetben.

Mire használjuk?

datetime:Dátum és idő megadására szolgál.
date: Dátum (év, hónap, nap) megadására szolgál időzóna megadás nélkül.
month:Dátum (év, hónap) megadására, időzóna megadás nélkül.
week:Dátum (hét) megadására szolgál, időzóna megadás nélkül.
time:idő (óra, perc, másodperc, ezredmásodperc) megadására, időzóna megadás nélkül.
datetime-local: Dátum és idő megadására (év, hónap, nap, óra, perc, másodperc, ezredmásodperc) megadására szolgál időzóna megadás nélkül.

A tag-ek paraméterei:

globális attribútumok
autocomplete
list
max: az elem által felvehető legnagyobb (maximális) érték.
min: az elem által felvehető legkisebb (minimális) érték.
readonly
required
step: a step paraméter értéke határozza meg, hogy milyen lépésekkel lehet csökkenteni, illetve növelni az adott űrlapmező értékét az érvényes határokon belül. Egy valós számot adhatunk meg, vagy az any értéket. Utóbbi esetben tetszőleges pontossággal beállítható az érték.

Példa

Interaktív példa

<!DOCTYPE html>
<html lang="hu">
<head>
<title>Űrlap készítése</title>
<meta charset="utf-8">
<link href="specialis/css/urlap.css" rel="stylesheet" type="text/css">
</head>
<body>
<form action="mailto:valaki@valahol"  method="post" name="kerdoiv" enctype="text/plain">
  <fieldset>
    <legend>Dátum megadás példák</legend>
    <p>
      <label for="talalka"><strong>Találkozó dátuma (év, hónap, nap):</strong></label>
      Ez egy date típusú mező.<br>
      <input type="date" name="talalka" id="talalka" min="2013-08-01" max="2013-09-15">
    </p>
    <p>
      <label for="kezdet"><strong>Találkozó kezdete:</strong></label>
      Ez egy time típusú mező.<br>
      <input type="time" name="kezdet" id="kezdet"  min="08:00" max="11:00">
    </p>
    <p>
      <label for="konferencia"><strong>Melyik hónapban legyen a konferencia?</strong></label>
      Ez egy month típusú mező.<br>
      <input type="month" name="konferencia" id="konferencia"  min="2014-01" max="2014-06">
    </p>
    <p>
      <label for="hatarido"><strong>Hányadik héten legyen a beadási határidő?</strong></label>
      Ez egy week típusú mező.<br>
      <input type="week" name="hatarido" id="hatarido"  min="2014-W01" max="2014-W15">
    </p>
    <p>
      <label for="talalka2"><strong>Találkozó dátuma (év, hónap, nap):</strong></label>
      Ez egy datetime típusú mező.<br>
      <input type="datetime" name="talalka2" id="talalka2"  min="2013-08-01T08:00+02:00" max="2013-08-20T18:00+02:00">
    </p>
    <p>
      <label for="talalka3"><strong>Találkozó dátuma (év, hónap, nap):</strong></label>
      Ez egy datetime-local típusú mező.<br>
      <input type="datetime-local" name="talalka3" id="talalka3"  min="2013-08-01T08:00" max="2013-08-20T18:00">
    </p>
    <p>
      <input type="submit" value="Elküld">
      <input type="reset" value="Alaphelyzetbe állít">
    </p>
  </fieldset>
</form>
</body>
</html>

Magyarázat

Ebben a példában különböző típusú dátum és idő mezőket használtunk, amelyeknél megadtuk a minimális és maximális értéket is, így a dátum/idő választásnál nem lesznek felkínálva azon időpontok, amelyek ezen kívül esnek. Figyeljük meg, hogy a min és max értékeknél milyen formátumot kellett használnunk!

Megjegyzés

Az egyes mezők megjelenése nagyon különböző is lehet a különböző böngészőkben.

<input type="number"> – Szám megadása

Mire használjuk?

Olyan beviteli mezők esetén használjuk, ahol számot kell megadnia a felhasználónak.

A tag paraméterei:

globális attribútumok
autocomplete
list
max
min
placeholder
readonly
required
step

Megjegyzés

Ezt a beviteli mezőt a range ismertetése után szereplő interaktív példában mutatjuk be.

<input type="range"> – Szám megadása

Mire használjuk?

Olyan beviteli mezők esetén használjuk, ahol számot kell megadnia a felhasználónak.

A tag paraméterei:

globális attribútumok
autocomplete
list
max
min
step

Példa

Interaktív példa

Magyarázat

Az első esetben egy szám mezőt használtunk, ahol a minimum és maximum értéket is megadtuk. A második esetben már a step értéket is megadtuk, hogy 0.5-es értékkel lehessen növelni/csökkenteni az értéket.

A harmadik esetben egy intervallumot adtunk meg, amelyet csúszkaként jelenít meg a böngészőprogram.

<input type="color"> – Szín megadása

Mire használjuk?

Egy szín megadására szolgál. A mező értéke a kiválasztott szín kódját adja vissza.

A tag paraméterei:

globális attribútumok
autocomplete
list

Példa

Magyarázat

Ebben az esetben egy színválasztó vezérlőre tudunk kattintani. A mező értéke a kiválasztott szín kódját veszi fel.

Szín kiválasztás űrlapmező

<input type="file"> – Fájl kiválasztása

Mire használjuk?

Olyan űrlapmező létrehozására, amelynek segítségével kijelölhet egy vagy több fájlt a felhasználó.

A tag paraméterei:

globális attribútumok
accept: azt adhatjuk meg, hogy milyen típusú fájlok az elfogadottak. Néhány példa:
- audio/* : hangállományok
- video/*: videóállományok
- image/*: képállományok
- mime-típust is megadhatunk
- kiterjesztést is megadhatunk (pl. .pdf, .rtf)
multiple
required

Példa

Interaktív példa

Magyarázat

Az első esetben csak egy fájl kiválasztását engedjük meg. A második esetben szerepeltetjük a multiple paramétert, így több fájl is kiválasztható.

<input type="image"> – Kép típusú gomb

Mire használjuk?

Az elküldés (submit) gombot egy képpel is helyettesíthetjük, ekkor az image típusú mezőt kell alkalmaznunk. Itt a képeknél tárgyalt szokásos paraméterek mindegyike alkalmazható (width, height stb.) A mező különlegessége az, hogy azt is elküldi, hogy a kattintás a kép melyik koordinátájú pontján történt. Ezt a koordinátát név.x, illetve név.y formában kapjuk meg. Ezzel lehetőségünk van olyan tesztek készítésére is, ahol az a cél, hogy a kép megfelelő részére kattintson rá a látogató. Szerveroldali alkalmazással ellenőrizhetjük, hogy a megadott koordináta elfogadható tartományba esik-e.

A tag paraméterei:

globális attribútumok
alt
formaction: ezzel a paraméterrel közvetlenül a submit gombon határozhatjuk meg, hogy milyen akció hajtódjon végre a gomb lenyomásakor. Ha ez hiányzik, akkor az űrlapnál megadott action paraméter kerül végrehajtásra.
formenctype: ezzel a paraméterrel közvetlenül a submit gombon határozhatjuk meg, hogy milyen kódolás típus legyen használva. Ha ez hiányzik, akkor az űrlapnál megadott enctype paraméter tartalma lesz figyelembe véve.
formmethod: ezzel a paraméterrel közvetlenül a submit gombon határozhatjuk meg, hogy milyen metódussal legyen az űrlap elküldve. Ha ez hiányzik, akkor az űrlapnál megadott method paraméter tartalma lesz figyelembe véve.
formnovalidate: ezzel a paraméterrel közvetlenül a submit gombon határozhatjuk meg, hogy szükséges-e az űrlap validálása, vagy sem az elküldés előtt. Ha ez hiányzik, akkor az űrlapnál megadott novalidate paraméter tartalma lesz figyelembe véve.
formtarget: ezzel a paraméterrel közvetlenül a submit gombon határozhatjuk meg, hogy mi a megfelelő böngészési környezet. Ha ez hiányzik, akkor az űrlapnál megadott target paraméter tartalma lesz figyelembe véve.
height
src
width

Példa

Magyarázat

Ebben a példában az emberi test egy részletét ábrázoló képet használtuk fel. A feladat hogy a kép azon részére kattintsunk, amely a hasnyálmirigyet tartalmazza. Láthatjuk, hogy az űrlap elküldésekor a kattintás koordinátái továbbítódnak, amelyeket szerveroldalon ki lehetne értékelni, hogy a megfelelő tartományba esnek-e.

Vissza a tartalomjegyzékhez

Fel a lap tetejére

A projekt az Európai Unió támogatásával, az Európai Szociális Alap társfinanszirozásával valósul meg.

A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.