HTML formok

Elmélet, alapok

Mi is az a form?

Röviden: egy olyan felület, elem, ahol felhasználói adatokat kérünk be, gyűjtünk össze = űrlap

Bővebben:

• a valós életből vett űrlapok adták az alapokat

• eleinte viszonylag kevés elem, típus állt rendelkezésre

• szinte minden weboldalon találni egy formot

• az alapjai sok-sok éve változatlanok

Mi is az a form?

A form az az elem, ahol a felhasználó közvetlenül kapcsolatba lép az oldallal (a szerverrel) vagy az applikációval.

Alap esetben a bevitt adatok elküldésre kerülnek a szerver felé, természetesen ezt felülbírálhatjuk és kezelhetjük, módosíthatjuk ezeket a kéréseket. (erről később esik majd szó)

Mi is az a form?

A form működése nem igényel javascriptet! Ez fontos, mivel egy oldalnál sokszor a fő funkciókat formok látják el.

(pl. belépés / regisztráció / kapcsolati űrlapok)

Persze javascript és css segítségével az űrlapjainkat szebbé, használhatóbbá tenni.

Form felépítése

• <form> elemen belül nem lehet másik <form> elem

• sok OS / böngésző függő kiegészítő attribútuma létezik,
  ezeket most nem vesszük végig, de érdemes figyelni rá!

• legfontosabb, a <form> taghez kapcsolódó
  attribútumok: action, method és enctype

• infó: 

<form action="submit.php" method="post" enctype="multipart/form-data">
...
</form>

https://developer.mozilla.org/en/docs/Web/HTML/Element/form

Form felépítése

“action” attribútum:

• egy URI-t vár (legtöbbször ez egy URL)

• az űrlap ide fogja küldeni (“posztolni”) az adatokat

• ha nincs megadva, akkor az éppen aktuális oldal URL-jét használja, kivéve, ha ez az action érték felül van bírálva (<button> vagy <input> elemen)

<form action="submit.php" method="post" enctype="multipart/form-data">
...
</form>

Form felépítése

“method” attribútum:

• “get” és “post” értéke lehet, alapértelmezetten “get”

• “post” esetén a form adatok a HTTP message törzsében lesznek elküldve

• “get” esetén a form adatok az “action” URL-hez lesznek fűzve, karakterláncként

• a két módra különböző szabályok vonatkoznak, ezért használatuk előtt mindig vizsgáljuk meg a feladatot, hogy mire használjuk a formot

<form action="submit.php" method="post" enctype="multipart/form-data">
...
</form>

Form felépítése

“enctype” attribútum:

• az elküldött adat mime-type-ját állítja be / definiálja

• a formban lévő input típusok alapján kell beállí- tanunk, pl. ha van egy fájl típusú input mezőnk, akkor az “enctype” a kódrészletben látható “multipart/form-data” kell, hogy legyen

• ha nem jó a form “enctype” attribútuma, akkor a szervernek nem megfelelő formában lesz elküldve az adat

• csak akkor érvényesül, ha a form “method” “post”-ra van állítva

<form action="submit.php" method="post" enctype="multipart/form-data">
...
</form>

Form felépítése - elemek

<form action="submit.php" method="post" enctype="multipart/form-data">
  <fieldset>
    <legend>Minta fieldset</legend>
    
    <label>
      Felhasználó neve
      <input type="text" name="felhasznalonev" placeholder="minta.anita" />
    </label>
    
    <label for="jelszo">Jelszó</label>
    <input type="password" id="jelszo" name="felhasznalojelszo" />
    
    <input type="submit" name="kuldes" value="Küldés" />
  </fieldset>
</form>

Form felépítése - elemek

<form action="submit.php" method="post" enctype="multipart/form-data">
  <fieldset>
    <legend>Minta fieldset</legend>
    ...
  </fieldset>
</form>

fieldset:

• form elemek csoportosítására használjuk, logikailag egybetartozó elemeket rakunk egy fieldseten belülre

• lehet neki “disabled” attribútuma, ilyenkor a fieldseten belül található elemek le lesznek tiltva, nem editálhatóak

Form felépítése - elemek

<form action="submit.php" method="post" enctype="multipart/form-data">
  <fieldset>
    <legend>Minta fieldset</legend>
    ...
  </fieldset>
</form>

legend:

• a fieldsetnek tudunk címkét beállítani, a csoportosítás logikájára érdemes itt utalni, pl.: “Felhasználói adatok” vagy “Cím adatok”

Form felépítése - elemek

<form action="submit.php" method="post" enctype="multipart/form-data">
    ...
    <label>
      Felhasználó neve
      <input type="text" name="felhasznalonev" placeholder="minta.anita" />
    </label>    
    ...
</form>

label:

• egy form elemhez tartozó címkét jelöl, ezzel írhatjuk le az elem szerepét

• sokszor rosszul vagy nem használják (pl.: a “placeholder” attribútumot használják helyette => rossz!!!)

• két módon lehet használni (beágyazva az inputot vagy a “for” attribútummal)

Form felépítése - elemek

<form action="submit.php" method="post" enctype="multipart/form-data">
    ...
    <label>
      Felhasználó neve
      <input type="text" name="felhasznalonev" placeholder="minta.anita" />
    </label>    
    ...
</form>

label - beágyazva:

• ebben az esetben a label a benne elhelyezett input elemhez tartozik

• a labelen belül nyugodtan használhatunk extra elemeket (pl.: <span>-t a label szöveg stílusozásához)

• nem jobb vagy rosszabb mint a másik megoldás

Form felépítése - elemek

<form action="submit.php" method="post" enctype="multipart/form-data">
    ...
    <label for="jelszo">Jelszó</label>
    <input type="password" id="jelszo" name="felhasznalojelszo" />  
    ...
</form>

label - “for” attribútummal:

• az attribútum értéke az input elem “id” attribútumával kell hogy egyezzen

• így lehetőségünk van kiemelni a labelt és az inputot

• az első megegyező “id” attribútumot fogja megkeresni, figyeljünk oda hogy ne legyen “id” duplikáció (ami egyébként sem helyes)

Form felépítése - elemek

input elem típusok (23 típus van!!!):

• alapértelmezett (ha nem adunk meg “type” attribútumot) a szöveges (text)

• text: szöveges input, legáltalánosabb input elem

• password: jelszó típusú input, a karakterek rejtve vannak

• submit: a form elküldésére szolgáló egyszerű input

• button: egyszerű gomb típus

Form felépítése - elemek

• radio: értékkel kell hogy rendelkezzen, az azonos nevű (“name” attribútum) radio inputok “egyválasztós” inputként működnek

• checkbox: értékkel kell hogy rendelkezzen, több checkbox is kiválasztható (“többválasztós” input)

• hidden: rejtett input mező, speciális szerepe van általában, a felhasználó számára rejtett, nincs hatása a megjelenésre

Form felépítése - elemek

<form action="submit.php" method="post" enctype="multipart/form-data">
    ...
    <textarea cols="30" rows="5" wrap="hard" maxlength="140">
    Ez egy textarea típusú input elem
    </textarea>    
    ...
</form>

textarea elem:

• több soros beviteli mező

• különleges attribútumai a “cols” és a “rows” ill. a “wrap”

• a többi attribútuma kb. megegyezik a sima text input-tal

Form felépítése - elemek

<form action="submit.php" method="post" enctype="multipart/form-data">
    ...
    <select name="honapok" size="5" multiple>
      <option value="01" selected>Január</option>
      <option value="02">Február</option>
      <option value="03">Március</option>
    </select>    
    ...
</form>

select típusú elem:

• lenyíló, több opciót kináló lista elem

• van belőle “multiselect” verzió is (amikor több lehetőséget is kiválaszthatunk) - alapértelmezetten egy elemet lehet

• a választási opciókat az <option> tagekkel adhatjuk meg

Form felépítése - elemek

<form action="submit.php" method="post" enctype="multipart/form-data">
    ...
    <button type="submit" name="gomb" formmethod="post">Nyomj meg</button>
    <input type="submit" name="gomb2" formmethod="get" value="Nyomj meg" />  
    ...
</form>

button elem:

• gomb elem, a viselkedését a “type” attribútuma határozza meg

• lehetőség van a globális form viselkedést is befolyásolni (pl. átállíthatjuk a form method-ját)

• a button elemen belül lehet még elemünk, de csak “phrasing content” lehet (+ 1-2 kivétel, pl. lehet benne <a> tag is)

• nem csak form-on belül létezhet

Form felépítése - elemek

<form action="submit.php" method="post" enctype="multipart/form-data">
    ...
    <label>
      <input type="radio" name="radio-teszt" value="1" checked />
      Rádió 1
    </label>
    <label>
      <input type="radio" name="radio-teszt" value="2" />
      Rádió 2
    </label>
    ...
</form>

radio elem:

• azonos nevű radio elemek közül egyszerre csak 1 lehet kiválasztva

• csak a bejelölt radio elem értéke lesz a formadatokkal elküldve

Form felépítése - elemek

<form action="submit.php" method="post" enctype="multipart/form-data">
    ...
    <label>
      <input type="checkbox" name="checkbox-1" value="1" checked />
      Checkbox 1
    </label>
    <label>
      <input type="checkbox" name="checkbox-2" value="2" />
      Checkbox 2
    </label>
    ...
</form>

checkbox elem:

• ha nincs bejelölve az elem, akkor az értéke nem kerül küldésre

Form felépítése - elemek

<form action="submit.php" method="post" enctype="multipart/form-data">
    <label>
      Fájl feltöltése
      <input type="file” name="profilkep" accept="image/*" />
    </label>
</form>

file input elem:

• ezzel az inputtal tudunk egyszerűen fájlokat kiválasztani

• nagyon limitáltak a formázási lehetőségek

• iOS és Android esetében a kamera is egy lehetőség (“Take a photo”)

• az “accept” paraméterrel szűrhetjük / szűkíthetjük, hogy mit engedünk kiválasztani, lehet MIME type, vagy kiterjesztés (pl. .jpg)

Form validálás

Lehetőség van a formok natív, beépített validációt használni.

A helyes és a hibás beviteli mezőket CSS-ben is meg tudjuk különböztetni az :invalid és a :valid pszeudo osztályokkal.

Pl. egy “number” típusú input elem “invalid” lesz, ha nem számokat írunk bele.
 

Ezen felül még mintákat, “pattern”-eket is megadhatunk egy inputnak, az ellenőrzést ezen minta alapján hajtja végre, pl. pattern=”alma|korte”.

Csak az “alma” vagy a “korte” szavak lesznek validak.

Alap form (MDN minta)

Form, sok-sok elemmel