Űrlapok

A HTML űrlapokkal adatokat küldhetünk a böngészőből a szerver felé.

Egy HTML űrlap beviteli mezőket tartalmazhat, például: szöveg mező, jelölődoboz, választógomb, "elküldő gomb". Használhatunk legördülő listákat, szövegdobozokat és címkéket is.

Az űrlapokat a <form> elemmel hozzuk létre:

<form>
...
beviteli elemek
...
</form>

Beviteli mező

A különböző beviteli mezőket az <input> elem valósítja meg. Különböző típusait az alábbiakban mutatjuk be.

Szöveges beviteli mező

Egy soros szöveg bevitelére használható az <input type="text"> elem.

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

Jelszó mező

A jelszó elem (<input type="password">), olyan szöveges beviteli mező, amely elrejti, mit gépelünk bele. 

<form>
    Jelszó: <input type="password" name="pwd">
</form>

Választógomb

Ha néhány lehetőség közül pontosan egyet lehet kiválasztani, választógombot (<input type="radio">) használunk.

<form>
    <input type="radio" name="neme" value="ffi">Férfi<br>
    <input type="radio" name="neme" value="no">Nő
</form>

Jelölődoboz

A jelöldobozzal (<input type="checkbox">) néhány lehetőség közül nullát vagy többet választhatunk.

<form>
    <input type="checkbox" name="jarmu" value="bicikli">Van biciklim<br>
    <input type="checkbox" name="jarmu" value="kocsi">Van kocsim
</form>

Lenyíló lista

A lenyíló lista (dropdown list) egy lehetőség kiválasztására jó, hasonlóan a választógombhoz, de sok opció esetén kevesebb helyet foglala el a lapon.

<form>
    <select>
      <option value="alma">Alma</option>
      <option value="korte">Körte</option>
      <option value="szilva">Szilva</option>
      <option value="barack">Barack</option>
    </select>
</form>

Elküldő gomb

Az űrlap adatainak elküldést az <input type="submit"> elemmel létrehozott gomb végzi.
  • Az űrlap adatokat az action paraméterben megadott "szkript" kapja meg. Ennek a paraméternek egy olyan programra kell mutatnia, amely képes a kapott adatok feldolgozására.
  • A paraméterek átadásának hagyományosan két különböző módja van a POST és a GET. Ezekről később lesz szó.

<form name="input" action="html_form_action.php" method="get">
    Username: <input type="text" name="user"><br>
    Password: <input type="password" name="passwd"><br>
    <input type="submit" value="Submit">
</form>

Paraméterek átadása POST és GET metódussal