HTML Űrlapok

HTML Űrlapok

Az űrlap a HTML dokumentum olyan területe, amely űrlap kezeléssel kapcsolatos elemeket is tartalmazhat egyéb HTML elemek mellett. Az űrlap elemek lehetővé teszik hogy a felhasználó információkat adhasson meg. Ilyenek a szöveges mezők, legördülő menük, gombok, radio gombok és jelölőnégyzetek. Az űrlap a <form> tagel definiálható.

Szintaktika:

<form>

űrlap és egyéb HTML elemek...

</form>

A form tag action attribútuma és a submit gomb

Amikor a felhasználó rákattint a submit típusú gombra az űrlap adatait a böngésző elküldi a kiszolgálónak. A form tag action attribútmában definiálható annak a fájlnak a neve amely megkapja a form adatait. Ez a file határozza meg, hogy a továbbiakban mi történjen az elküldött adatokkal.

Szintaktika:

<form name="input" action="/form-test" method="get" target="_blank">
    Felhasználónév:
    <input type="text" name="user" />
    <input type="submit" value="Küldés" />
</form>

Megjelenés a böngészőben:

Felhasználónév:

A form tag id és az űrlap elem form attribútuma

A form attribútum meghatározza mely űrlaphoz tartozik az elem. Az értékének meg kell egyezni a form elem id attribútumával. Akkor kötelező használni, ha az űrlap elem a form elemen kívül van.

<form action="/path/to/file" method="get" id="login">
   ...
</form>

<button type="submit" form="login" value="Submit">Belépés</button>

Űrlap mezők name és value attribútuma

Az űrlap mezőket képviselő tageknek általában van name és value attribútumuk. Az űrlap ebből a kettőből rakja össze a szervernek küldendő változót. A name attribútum értéke lesz a változó neve, a value attribútum értéke pedig a változó értéke lesz.

Egyéb űrlap mező attribútumok

Legtöbb űrlap mezőt létrehozó tagnek lehet disabled és readonly attribútuma. Mind a két attribútum ha létezik, letiltja a mezőt, azaz nem lesz módosítható a tartalma. A különbség az, hogy readonly esetében a mező tartalom kijelölhető és értéke elküldésre kerül, míg a disabled attribútum teljesen inaktívvá teszi a mezőt és a tartalma sem lesz elküldve a szervernek.

Űrlap elemek lehetőségei

Szintaktika:

<form>
    Név: <input type="text" name="nev" />
    <br />
    <fieldset>
        <legend>Adatok:</legend>
        Nem:
        <label for="ff">Férfi</label>
        <input type="radio" name="nem" id="ff" value="ff"/>
        <label for="no">Nő</label>
        <input type="radio" name="nem" id="no" value="no"/>
        <br />
        Hírlevél: <input type="checkbox" name="hirlevel" value="igen" />
        <br />
        Autó márka:
        <select>
            <optgroup label="Svéd autók">
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
            </optgroup>
            <optgroup label="Német autók">
                <option value="mercedes">Mercedes</option>
                <option value="audi">Audi</option>
            <optgroup>
        </select>
        <br />
    </fieldset>
    <textarea rows="2" cols="50">
        Írja meg véleményét!
    </textarea>
    <br />
    <button type="button">Ez meg itt egy gomb</button>
</form>

Megjelenés a böngészőben:

Név:

Adatok:

Nem: Férfi Nő
Hírlevél:
Autó márka: Volvo Saab Mercedes Audi

Írja meg véleményét!
Ez meg itt egy gomb

Űrlapokkal kapcsolatos tagek

Tag	Leírás
<form>	Űrlap definiálása
<input />	Beviteli mező definiálása
<textarea>	Többsoros szövegbevitel definiálása
<label>	Címke definiálása beviteli mezőhöz
<fieldset>	Beviteli mezőcsoport definiálása
<legend>	Beviteli mezőcsoport cím definiálása
<select>	Választható lista (legördülő menü) definiálása
<optgroup>	Opció csoport definiálása választható listához
<option>	Opció definiálása választható listához
<button>	Nyomógomb definiálása