HTML formok
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
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ó)
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> 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>
“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>
“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>
“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 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 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 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 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 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 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)
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
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 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 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 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 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 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 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)
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.