Űrlapok HTML szintaxis

A form elem más űrlap elemeket tartalmaz. Ezek az űrlap elemek teszik lehetővé az adatbevitelt.

A leggyakrabban használt elem az input. A type tulajdonságával állítható be, hogy pontosan milyen adatbeviteli módot szeretnénk.

Szöveges mezők

A szöveges mezők lehetővé teszik, hogy betűkből, számokból, írásjelekből álló karaktersorozatot lehessen begépelni.

<form>
  Vezetéknév:
  <input type="text" name="vezeteknev">
  <br>
  Keresztnév:
  <input type="text" name="keresztnev">
</form>

Az eredmény:

Az űrlap elemek soron belüli (inline) elemek. Ha egymás alá akarjuk tenni, akkor azt valamilyen módon külön meg kell adnunk a HTML, vagy még szebb, ha a CSS segítségével.

Érdemes megfigyelni, hogy maga a form elem vizuálisan nem látható, csak a benne elhelyezett elemek. Ha (ahogy ebben a példában is) nem adjuk meg a mezők szélességét, a legtöbb böngésző alapértelmezetten 20 karakter szélesen jeleníti meg. Ez azonban nem korlátozza a ténylegesen begépelhető szöveg hosszát.

Jelszavak begépeléséhez password típusú (type="password") beviteli mezőt szokás létrehozni. Ez viselkedésében csak annyiban tér el a text típustól, hogy a begépelt szöveg helyett * (egyes böngészőkben vagy operációs rendszerek alatt •) karakterek jelennek meg, és vágólapra nem lehet kimásolni a tartalmát.

Az elrejtés csak a képernyőre vonatkozik, a hálózaton egyszerű adatként utazik a jelszó.

Rádiógombok

A rádiógombokat akkor használhatjuk, ha a látogatónak néhány választható elem közül kell választási lehetőséget adni. Az elemek közül mindig csak az egyik lehet aktív. Érdemes megfigyelni a következő listában, hogy aname tulajdonság azonossága rendeli a rádiógombokat logikailag egy csoporttá, vagyis egymást kizáró választási lehetőségekké. Tehát ebből a szempontból sem a vizuális elrendezés számít.

<form>
  <input type="radio" name="nem"
    value="no">Nő</input>
  <br>
  <input type="radio" name="nem"
    value="ferfi">férfi</input>
</form>

Az eredmény:

Az ábrán látszik, hogy alapértelmezetten egyik elem sincs kiválasztva. Ha valamelyik választási lehetőséget alapértelmezettnek tekintjük, akkor ezzel könnyíthetjük is az űrlap kitöltését:

<input type="radio" name="nem" value="no" checked>Nő</input>

Jelölőnégyzetek

A jelölőnégyzetek arra szolgálnak, hogy a felhasználó egy vagy több elemet is ki tudjon választani a rendelkezésre álló lehetőségek közül. Más megközelítésben úgy is lehetne fogalmazni, hogy egy jelölőnégyzet ki- vagy bekapcsolt állapotban lehet, függetlenül más beviteli elemektől.

<form>
  <input type="checkbox" name="bicikli">
  Van biciklim
  <br>
  <input type="checkbox" name="auto">
  Van autóm
</form>

Az eredmény:

Itt is van lehetőségünk az alapértelmezetten ki nem választott állapot helyett bejelölve megjeleníteni a jelölőnégyzetet:

<input type="checkbox" checked name="bicikli">

A label elem

Érdemes megfigyelni, hogy rádiógomb és jelölőnégyzet esetén a kattintható terület a kör, illetve négyzet alakú területre korlátozódik. Az elemek mellett megjelenő szövegek a böngésző számára függetlenek a jelölő elemektől, csupán a vizuális helyzet jelzi nekünk az összefüggést.

A label elem használatával ez a függetlenség megszüntethető: a szöveget a jelölőelemmel aktív kapcsolatba hozhatjuk. Ez azt jelenti, hogy lehet kattintani a szövegre is.

<form>
  <input type="radio" name="nem" value="no" id="no">
  <label for="no">Nő</label>
  <br>
  <input type="radio" name="nem" value="ferfi" id="ferfi">
  <label for="ferfi">férfi</label>
</form>

Az előző verzióhoz képest fontos kiegészítés, hogy a value mellett az id is megkapta az azonosító szövegeket, mivel a label tag for tulajdonsága az id alapján azonosítja az elemeket.

Űrlap adatok elküldése

Az esetek jelentős részében a felhasználó azért tölt ki egy űrlapot, hogy adatokat tudjon a szerver felé küldeni valamilyen hatás érdekében.

Az eddigi példákból két fontos rész kimaradt. Először is a felhasználó számára szokás biztosítani egy küldés (vagy valami hasonló feliratú) gombot, hogy erre kattintva kezdeményezhesse az adatok elküldését. Másrészt aform tag – egyébként kötelezően kitöltendő – action tulajdonsága határozza meg, hogy melyik oldalnak kell a kérést feldolgoznia.

<form name="input" action="feldolgoz.php" method="get">
  Felhasználói név:
  <input type="text" name="nev">
  <input type="submit" value="Küldés">
</form>

Az eredmény:

Ha a felhasználó begépeli a nevet, majd kattint a Küldés gombra, akkor a szöveg továbbításra kerül a feldolgoz.php számára.

Nyomógombokat a button taggal is létre lehet hozni.

Lenyíló lista

Bizonyos esetekben rádiógombok helyett célszerű inkább a lenyíló listák alkalmazása. (Elsősorban terjedelmi, áttekinthetőségi okokra kell gondolni.)

Két tag használatára lesz mindenképpen szükség: először is a select tag adja meg a lista kereteit, míg az option tagok a választható elemeket.

<form>
  <select name="autok">
    <option value="audi">Audi</option>
    <option value="fiat">Fiat</option>
    <option value="skoda">Skoda</option>
    <option value="suzuki" selected>Suzuki</option>
  </select>
</form>

A selected tulajdonság lehetővé teszi az alapértelmezett elem kijelölését. Ha ez nem szerepel a forrásban, akkor az első elem lesz a kiválasztott betöltődéskor.

Lehetőség van olyan lista létrehozására is, ahol egyszerre akár több elem is kiválasztható:

<select name="autok" multiple>

A size attribútum segítségével a lenyíló lista több soros listává alakítható.

<select name="autok" size="5">

Végül megemlítjük a hosszabb, csoportosítással áttekinthetővé tehető listák esetén hasznos optgroup tagot. Az alábbi példa a négy választási lehetőséget két vizuális csoportba sorolja.

<select>
  <optgroup label="Olasz autók">
    <option value="fiat">Fiat</option>
    <option value="ferrari">Ferrari</option>
  </optgroup>
  <optgroup label="Német autók">
    <option value="vw">VW</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Több soros szöveges mezők

Lehetőség van hosszabb szöveg begépelését, szerkesztését lehetővé tevő beviteli mezőt is létrehozni. Erre szolgál a textarea elem. A következő példán a méretek megadásán túl a kezdőszöveg is definiált:

<textarea rows="10" cols="30">Kezdőszöveg</textarea>

Mezőcsoportok

Hosszabb űrlapok esetén hasznos lehetőség, hogy az egyes mezőket vizuálisan csoportosíthatjuk a fieldset, és akár címmel is elláthatjuk a legend taggal. Nézzünk egy rövid példát egyetlen csoporttal. (A gyakorlatban egymás után több csoportot szoktunk létrehozni.)

<form>
  <fieldset>
    <legend>Személyes</legend>
    Név: <input type="text" size="30"><br>
    E-mail cím: <input type="text" size="30"><br>
    Születési év: <input type="text" size="10">
  </fieldset>
</form>

Az eredmény: