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>

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

Made with Slides.com