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:
