Tartalomjegyzék

Formok

Egy form (magyarul űrlap) segítségével kérhetünk be adatokat a honlapot látogatóktól. Itt egy példa, a magyarázat később jön. Töltse ki a mezőket, aztán kattintson az „Elküld” gombra!

<form action="parser.php" method="post">
  <div>
    <label for="lastname">Vezetéknév: </label>
    <input type="text" name="lastname" id="lastname">
    <br>
    <label for="firstname">Keresztnév: </label>
    <input type="text" name="firstname" id="firstname">
    <br>
    <label for="email">E-mail: </label>
    <input type="text" name="email" id="email">
    <br>
    <input type="submit" value="Elküld">
  </div>
</form>



A formunk még nem túl szép, de hamarosan megtanuljuk formázni stíluslapokkal!

Amikor a fentihez hasonló formot szeretnénk beágyazni a dokumentumba, az egészet a <form>...</form> címkék közé kell tenni.

Mivel Strict dokumentumtípusban írjuk művünket, ezért a <form>...</form> címkék közé nem szabad azonnal a label és az input elemeket írni! A form tartalmát a <div>...</div> vagy <p>...</p> címkék közé írjuk, és így a W3C validátora el fogja fogadni az oldalunkat!

Miután kitöltöttük a fenti formot, de még nem nyomtuk meg az „Elküld” gombot, akkor a bevitt adatok még csak a saját gépünkön léteznek, hiszen a formot tartalmazó honlap is a saját gépünkön található, mert a böngésző letöltötte a szerverről. A gombot megnyomva a böngésző feltölti a megadott adatokat a szerver felé, amit egy erre képes program fog értelmezni. Az eredményt láthatja: visszakaptuk a szervertől a megadott adatokat.

A <form> címkének van egy kötelező attribútuma, amit mindenképpen meg kell adnunk, ez pedig az action. Értéke annak a programnak az elérési útvonala lesz a szerveren, amelyik képes a bevitt adatok feldolgozására. Ezt azért szükséges megadni, hogy a böngésző tudja, hova kell elküldeni az adatokat, hiszen „csak úgy” nem küldheti el a szervernek, hogy az kezdjen vele valamit.

Az adatok elküldésének két módja van. Ezt szintén érdemes beállítani a formunkban, amit a method attribútummal tudunk megadni. Értéke kétféle lehet:

GET
Kisebb méretű adatok, például néhány szó elküldéséhez használható csak. Titkos adatok, például jelszó elküldésére ne használjuk, mert az elküldés után megjelenő honlap URL-jében megjelenik az összes megadott adat!
POST
Az adatok mérete itt nincs limitálva, és titkos adatokat is csak a POST-tal küldhetünk el. Általában ezt szoktuk használni a GET hátrányai miatt, mi is POST-ot fogunk használni példáinkban.

Ezután nézzük, hogyan néz ki egy form alapja:

<form action="parser.php" method="post">
</form>

A parser.php az ezzel a honlappal azonos könyvtárban lévő, szerveroldalon lefutó program, ami kezelni fogja a formon bevitt adatokat. Ha használunk hírlevélküldő programot, és a formban elkérjük a látogató e-mail címét, akkor az action értékének a hírlevélküldő program leírásában megadottnak kell lennie. Például: action="http://hirlevelkuldoprogram.hu/?md=register", ami azt jelenti, hogy az általunk használt hírlevélküldő program részére adjuk át a bevitt adatokat.

Beviteli mező

Egysoros beviteli mezőt így szúrhatunk be, a fenti példánál maradva:

<form action="parser.php" method="post">
...
<input type="text" id="lastname" name="lastname">
...
</form>

Az egysoros beviteli mező fontosabb attribútumai:

type="text"
Ez mondja meg a böngészőnek, hogy ez egy egysoros szöveges beviteli mező.
name="lastname"
A name attribútum azért kell, mert a szerveroldali parancsfájl, aminek elküldi a böngésző az adatokat és amit az action="parser.php" attribútummal adtunk meg, ez alapján fogja megtalálni a megfelelő értékeket. A parser.php parancsfájl ugyanis <név>=<érték> párokként kapja meg a beírt adatokat, ahol a név a name attribútum értéke minden egyes formelemhez, az érték pedig a felhasználó által beírt adat.
Ha mondjuk a vezetéknévhez (ez a lastname nevű mező) az írjuk be, hogy Kovács, a keresztnévhez azt, hogy Béla, végül az e-mail címhez azt, hogy [email protected], majd elküldjük a beírt adatott a szervernek, akkor a parser.php így kapja meg az bevitt adatot: lastname=Kovács&firstname=Bé[email protected]. Arra figyeljünk, hogy a név csak az angol ábécé kisbetűit, és számokat tartalmazzon, és számmal NE kezdődjön a név!
id="lastname"
Ez a label elem miatt kell, ami a beviteli mező előtti feliratot definiálja:
<label for="lastname">Vezetéknév: </label>
<input type="text" name="lastname" id="lastname">
Ugyanis a label for attribútumának a hozzá tartozó formelem id azonosítójának az értékét kell adni. Ezzel összekötöttük a beviteli mező feliratát magával a beviteli mezővel. Ez két dolog miatt is fontos. Az első, hogy így a hangos képernyőfelolvasók tudni fogják, hogy melyik formelemhez melyik felirat tartozik; a másik, hogy így ha a „Vezetéknév” feliratra kattintunk egérrel, akkor ugyanazt a hatást érjük el, mintha a beviteli mezőre kattintottunk volna.
size="4"
Mennyi karakter szélességű legyen a mező. Ez nem korlátoztta a beírható karakterek számát, csak a látható szélességet állítja be!
maxlength="4"
Beírható karakterek számának korlátozása. Például ha irányítószámot kérünk be, érdemes a beviteli mező size és maxlength attribútumait 4-re állítani, mert így 4 karakter szélességű lesz a mező, és maximum 4 karaktert fogad csak el.
value="Kezdeti szöveg a mezőben"
Alapértelmezettként ez a szöveg lesz a beviteli mező tartalma, amit azonban meg lehet változtatni.

Elküldő gomb

Az elküldő gombot ezzel tudjuk beszúrni:

<input type="submit" id="submitbutton" value="Elküld">

Fontosabb attribútumai:

type="submit"
Ennek hatására lesz ez egy elküldő gomb. Amikor rányomunk, a begépelt adatokat a böngésző feltölti a szervernek, az action attribútumban megadott program felé.
value="Elküld"
A gomb feliratát állítja be.

Grafikus elküldő gombot is létre tudunk hozni, ekkor egy általunk megadott kép fog megjelenni mint gomb. Így kell használni:

<input type="image" src="ff.png" alt="Elküld">

A type értéke legyen image, ezzel már meg is mondtuk, hogy ez egy olyan elküldő gomb, aminek kép a megjelenése. Az src a képfájl elérési útvonlát és nevét, az alt pedig azt a szöveget tartalmazza, ami akkor fog megjelenni, ha a kép akármilyen okból nem jelenne meg (az alt itt ugyanazt a célt szolgálja, mint az img címkében).

Grafikus elküldő gomb.

Jelszóbevitel

Bejelentkezéskor szükségünk van jelszóbevitelre alkalmas szövegmezőre. Ez annyiban más, mint a fenti szövegmező, hogy a beírt karakterek helyett csak csillagok vagy kis körök jelennek meg.

Jelszóbevitelt támogató form.

Többsoros beviteli mező

Többsoros beviteli mezőt a textarea elem hoz létre. A cols attribútum értéke mondja meg hány oszlopa, a rows értéke pedig hogy hány sora legyen látható a szövegmezőnek, ezeket az attribútumokat kötelező megadni! A <textarea>...</textarea> címkék közé be is írhatjuk, milyen szöveg jelenjen meg alapértelmezettként a szövegmezőben.

Többsoros beviteli mező létrehozása.

Rádiógombok

Rádiógombot akkor alkalmazunk, amikor több lehetőség közül kell egyet kiválasztunk. A type értékének most "radio"-t kell megadni. Megjelenik egy új attribútum, a value, ez legyen ugyanaz, mint a rádiógomb előtti felirat, tehát most „Fiú” vagy „Lány”. Ez azért kell, mert a szervernek a kiválasztott opció value attribútumának értékét fogja elküldeni a form. Fontos: a két rádiógomb name attribútuma legyen azonos, mert csak így lehet pontosan egyet választani közülük. Viszont a két id attribútumnak különböznie kell, mert az id-ből azonos nevű csak egy lehet egy dokumentumon belül. A label címkét az input címke mögé írtuk, hogy a rádióbombok után jelenjen meg a felirat.

Rádiógombok használata.

Rádiógombok használata előre kiválasztott értékkel.

Jelölőnégyzetek

Jelölőnégyzeteket akkor alkalmazunk, amikor több lehetőség közül kell egyet vagy többet kiválasztanunk.

Jelölőnégyzetek használata.

Jelölőnégyzetek előre kiválasztott elemmel.

Listák

Legördülő lista készítése.

Legördülő lista elemcsoportokkal.

Legördülő lista előre kiválaszott elemmel, ami nem az első elem.

Lista, amiben egyszerre több elem látható.

Fájlfeltöltés

Létezik olyan űrlapmező is, amellyel a felhasználó egy teljes fájlt (pl. képet) tud feltölteni a szerver felé. Ez egy szöveges beviteli mező, ami mellett van egy „Tallózás...” feliratú gomb, amire ha rákattintunk, akkor bejön egy fájl kiválasztó dialógus, amiben ki tudjuk keresni a feltölteni kívánt fájlt.

Ahhoz, hogy működjön a fájlfeltötés, még az alábbi tennivalóink vannak:

Fájlfeltöltés engedélyezése.

Az űrlap formázása stíluslappal

Most, hogy megismertük az összes űrlapmezőt, ideje szebbé tennünk a formunk kinézetét!

Form rendezése stíluslappal, táblázat nélkül.

Most nézzük meg a fieldset és a legend elemeket, amikkel csoportokba tudjuk gyűjteni az összetartozó űrlapmezőket.

Összetartozó űrlapmezők csoportba gyűjtése.

A legend elem feliratát aztán tetszőlegesen formázhatjuk. A fieldset tulajdonképpen csak egy keret (border), ezért a border tulajdonsággal tudjuk eltüntetni, vagy módosítani a fieldset elemet.

A legend és a fieldset elem formázása.

A :focus álosztállyal meg tudjuk változtatni azoknak az űrlapmezőknek a színét, amelyiknél éppen van a fókusz, azaz amelyik fogadja a billentyűzetleütéseket. Az Internet Explorer nem kezeli a :focus álosztályt.

Fókuszált mező díszítése.

A formelemeket díszíthetjük sítuslappal, azonban minden böngésző máshogy tudja a CSS-t alkalmazni a formelemekre. A most következő két példa ilyen díszítéseket mutat be. Azonban ha élesben alkalmazunk stíluslapot formelemekre, akkor minél több böngészővel tesztelnünk kell művünket, nehogy egyes böngészőkön használhatatlan legyen a formunk!

Egy teljeskörű leírás található arról itt, hogyan néznek ki a formelemek díszítve és díszítetlenül az egyes operációs rendszerek és böngészők alatt!

Keresőmező díszítése.

Egy hosszabb form formázása.

Kód Kinézet
<label for="nev">Név: </label>
<input type="text" name="nev" id="nev">
<br>

Egysoros szöveges beviteli mező

value="Kezdeti érték": Milyen szöveg jelenjen meg kezdetben a mezőben

size="4": Mennyi karakter szélességű legyen a mező.

maxlength="4": Beírható karakterek számának korlátozása
<label for="jelszo">Jelszó: </label>
<input type="password" name="jelszo" id="jelszo">
<br>

Egysoros jelszóbeviteli mező.

Ugyanazok használhatók nála, mint a sima szöveges mezőnél.
<label for="szovegmezo">Megjegyzés: </label>
<textarea name="szovegmezo" id="szovegmezo" rows="3" cols="20">Ide írhatja megjegyzését</textarea>
<br>
Többsoros szövegmező.

rows="3": Sorok számát adja meg, kötelező attribútum.

cols="20": Oszlopok számát adja meg, kötelező attribútum.
<label>
<input type="radio" name="szin" value="Fekete">
Fekete </label>
<br>
<label>
<input type="radio" name="szin" value="Fehér">
Fehér </label>
<br>
Több lehetőség közül egyet kiválasztani engedő rádiógombok.

checked="checked": Amelyik gombnál megjelenik, az lesz kiválasztva kezdetben.
<label>
<input type="checkbox" name="leves" value="Kérek levest">
Kérek levest</label>
<br>
<label>
<input type="checkbox" name="foetel" value="Kérek főételt">
Kérek főételt</label>
<br>
<label>
<input type="checkbox" name="desszert" value="Kérek desszertet">
Kérek desszertet</label>
<br>
Több lehetőség közül többet kiválasztani engedő jelölőnégyzetek.

checked="checked": Amelyik gombnál megjelenik, az ki lesz választva kezdetben.

<label for="orszagok">Válasszon országot:</label>
<select name="orszagok" id="orszagok">
<option value="HU">Magyarország</option>
<option value="AT">Ausztria</option>
<option value="BE">Belgium</option>
<option value="BG">Bulgária</option>
</select>
<br>

Lenyíló lista. A select címke attribútumai:

size="3": Egyszerre látható listaelemek száma, az alapértelmezett érték 1.

multiple="multiple": Ha meg van adva, akkor több listaelem is kiválasztható a Ctrl vagy a Shift billentyű lenyomása közben.

Az option címke attribútumai:

selected="selected": Ha meg van adva, akkor a megadott opció fog látszani kezdetben.
<label for="kinalat">Válasszon a kínálatból:</label>
<select name="kinalat" id="kinalat">
  <optgroup label="Zöldségek">
  <option value="Paradicsom">Paradicsom</option>
  <option value="Paprika">Paprika</option>
  <option value="Káposzta">Káposzta</option>
  </optgroup>
  <optgroup label="Gyümölcsök">
  <option value="Mandarin">Mandarin</option>
  <option value="Eper">Eper</option>
  <option value="Szőlő">Szőlő</option>
  </optgroup>
</select>
<br>
Lenyíló lista elemcsoportokkal.

Ugyanazok használhatók nála, mint az előző lenyíló listánál.
<label for="fajl">Kép feltöltése:</label>
<input type="file" name="fajl" id="fajl">
<br>

Fájlfeltöltést támogató szöveges beviteli mező. Ha használjuk, ezt a két attribútumot fel kell venni a form címkébe: enctype="multipart/form-data" és method="post".

Ugyanazok használhatók nála, mint a sima szöveges mezőnél.
<input type="submit" value="Elküld">
Az űrlap adatait elküldő gomb.

Form elrendezése táblázattal

A formokat általában táblázat segítségével szokták elrendezni. A fejezetben javasoltam ehelyett egy másik megoldás, amikor csak CSS-sel rendezzük el a formot. Ez áttekinthetőbb kódot eredményez.

Azonban ha egy olyan elrendezést kívánunk megvalósítani, amivel sehogyan sem boldogulunk stíluslapokkal, akkor használhatunk táblázatot is ebben az esetben. Ilyenkor a table címkének ne adjuk meg a summary attribútumát, mert nem adattábla, hanem elrendezéshez használt táblázat.

<form method="post" action="order.php">
  <table>
    <tr>
      <td><label for="lname">Vezetéknév:</label></td>
      <td><input type="text" id="lname" name="lastname"></td>
    </tr>
    <tr>
      <td><label for="fname">Keresztnév:</label></td>
      <td><input type="text" id="fname" name="firstname"></td>
    </tr>
    <tr>
      <td><label for="mail">E-mail cím:</label></td>
      <td><input type="text" id="mail" name="email"></td>
    </tr>
    <tr>
      <td><label for="mailagain">E-mail cím újra:</label></td>
      <td><input type="text" id="mailagain" name="emailagain"></td>
    </tr>
    <tr>
      <td><label for="phone">Telefonszám:</label></td>
      <td><input type="text" id="phone" name="phone"></td>
    </tr>
    <tr>
      <td><label>Érdeklődési terület:</label></td>
      <td><label>
        <input type="checkbox" id="option1" name="option1" value="Honlapkészítés">
        Honlapkészítés</label>
        <br>
        <label>
        <input type="checkbox" id="option2" name="option2" value="Online marketing">
        Online marketing</label>
        <br>
        <label>
        <input type="checkbox" id="option3" name="option3" value="Webdesign">
        Webdesign</label>
        <br>
        <label>
        <input type="checkbox" id="option4" name="option4" value="Webhosting">
        Webhosting</label></td>
    </tr>
    <tr>
      <td><label for="country">Ország:</label></td>
      <td><select id="country" name="country">
          <option value="HU">Magyarország</option>
          <option value="AT">Ausztria</option>
          <option value="BE">Belgium</option>
          <option value="BG">Bulgária</option>
          <option value="GR">Görögország</option>
          <option value="CZ">Csehország</option>
        </select></td>
    </tr>
    <tr>
      <td><label for="postal_code">Irányítószám:</label></td>
      <td><input type="text" id="postal_code" name="postal_code"></td>
    </tr>
    <tr>
      <td><label for="city">Város:</label></td>
      <td><input type="text" id="city" name="city"></td>
    </tr>
    <tr>
      <td><label for="address">Utca, házszám:</label></td>
      <td><input type="text" id="address" name="address"></td>
    </tr>
    <tr>
      <td><label>Átvétel módja:</label></td>
      <td><label>
        <input type="radio" name="delivery" value="Postai utánvéttel" checked="checked">
        Postai utánvéttel</label>
        <br>
        <label>
        <input type="radio" name="delivery" value="Elektronikus letöltés">
        Elektronikus letöltés</label>
      </td>
    </tr>
  </table>
  <p style="text-align:center">
    <input type="submit" value="Rendelés">
  </p>
</form>

Ajánlott linkek

W3C specifikációja: http://www.w3.org/TR/html4/interact/forms.html

Akadálymentesített form: http://www.webstandards.org/learn/tutorials/accessible-forms

Tartalomjegyzék Impresszum, szerzői jogok