- Mikor használjuk? - Ha az olvasónak valamilyen módon lehetőséget szeretnénk adni visszajelzésre, adatok megadására.
A <form> definiál egy űrlapot. Leggyakoribb eleme az <input>, ennek a tag-nek a type attribútumának értéke adja meg a beviteli módot. Ezekből fogunk néhányat megnézni:
"text" - Ezzel az értékkel szövegmezőt adhatunk meg. Lényege, hogy segítségével számokat, betűket lehet begépelni.
PÉLDA:
<form>
Vezetéknév:
<input type="text" name="vezeteknev">
<br>
Keresztnév:
<input type="text" name="keresztnev">
</form>
"password" - a "text" testvére. Lényege, hogy ilyenkor a szövegmezőbe írt szöveg nem látható (csak más karakterek) és nem is másolható
"radio" - Ezzel az értékkel rádiógombot adhatunk meg. Lényege, hogy a szöveg előtt, vagy után egy kör jelenik meg. A körre kattintva kijelöljük azt.
<form>
<input type="radio" name="sex" value="women">Nő</input>
<br>
<input type="radio" name="sex" value="man">férfi</input>
 |
| Eredmény |
Az azonos nevű (name attribútum értéke) rádiógombok közül csak egyet választhatunk. A value attribútum is kötelező. Arra való, hogyha majd tovább küldjük az adatokat (erről majd később), akkor ezt fogjuk megkapni (tehát nem így: sex: Nő, hanem így: sex: women). Ha valamelyik kört alapértelmezetten kiválasztottá akarjuk tenni, akkor használjuk a checked="yes" attribútumot és értéket.
<input type="radio" name="sex" value="women" checked="yes">
"checkbox" - ezzel az értékkel jelölőnégyzetet hozhatunk létre. Lényege ugyan az, mint a rádiógombok esetén, csak egyszerre többet is kiválaszthatunk.
<form>
<input type="checkbox" name="szamito" value="notebook"/>
Van notebookom
<br>
<input type="checkbox" name="szamito" value="pc"/>
Van pc-m
</form>
 |
| Eredmény |
"submit" - ezzel az értékkel egy gombot hozhatunk létre, melyet megnyomva teljesül a <form> action attribútumának értéke (erről majd később).
<form>
<input type="submit" value="Elküldés">
</form>
 |
| Eredmény |
FONTOS:
Fontos még megjegyezni a <label>-t is. Figyeljük meg, hogy egy rádiógomb esetén a választási felület egy kis négyzetre korlátozódik. A label segítségével ezt változtathatjuk meg. Először is az <input>-on belül meg kell adnunk egy id attribútumot. Értéke legyen ugyan az mint a value értéke. Erre azért van szükség, mert a <label> az id alapján azonosítja az <input>-ot. Ezután a <label for="az input idje"> és a </label> közé megadjuk a választási felületet.
<form>
<input type="radio" name="sex" value="women" id="woman">
<label for="woman">Nő</label>
<br/>
<input type="radio" name="sex" value="man" id="man">
<label for="man">férfi</label>
</form>
 |
| Eredmény A kurzor a férfi 'i' betűjén van :D |
"number" - Segítségével számokat kérhetünk be. A min attribútum értéke a legkisebb, a max a legnagyobb a step pedig a lépsét mutatja meg. HTML5-től támogatott (majd későbbi leckékben)
<input type="number" min="0" max="20" step="1">
 |
| Eredmény |
ŰRLAP ELKÜLDÉSE:
A <form> action attribútumának értéke határozza meg, hogy melyik oldalnak kell az adatot feldolgozni. Mi most egyszerűen egy emailt fogunk küldeni. A <form>-on belül meg kell ismernünk néhány attribútumot:
- action: értéke meghatározza, hogy melyik oldalnak kell az adatot feldolgozni (még mindig :D), mi csak egy emailt küldünk, tehát értéke számunkra "mailto:valami@valami.hu"
- method: meghatározza, hogy a <form> milyen módon küldje az adatokat. Értéke két féle lehet: "get" és "post". A "get"-et néhány szó küldése esetén használjuk, kivéve olyan adatoknál, melyek titkosak, hiszen ezek megjelennek az URL-ben is. A "post"-ot hosszabb adatoknál is hasznáhatjuk és az adat titkosítva marad. Mi a "post"-ot fogjuk használni.
- enctype: értéke megadja, hogy az adat milyen kódolással legyen elküldve. Értéke három féle lehet:"application/x-www-form-urlencoded" esetén minden szóköz +-nak, a különleges karakterek pedig ASCII kódnak megfelelően van kódolva. "multipart/form-data" esetén semmi sincs kódolva. Akkro használjuk, ha az adatmegadás fájlfeltöltés alapú. "text/plain" esetén pedig csak a szóközök +-ok. Mi a "text/plain"-t fogjuk használni.
<form action="mailto:valami@valami.hu" method="post" enctype="text/plain">
Felhasználói név:
<input type="text" name="nev">
<input type="submit" value="Küldés">
</form>
 |
| Eredmény |
LENYÍLÓ LISTA:
Bizonyos esetekben rádiógombok helyett célszerű lenyíló listát használni (választási lehetőségek terjedelme, áttekinthetősége). A<selected> definiál egy legördülő listát, az <option> pedig a lista elemeit. <option>-on belül ismét használnunk kell a value attribútumot. A selected="yes" segítségével alapértelmezetten kiválasztott elemet adhatunk meg.
<form>
<select name="os">
<option value="windows">Windows</option>
<option value="osx" selected="yes">OSX</option>
<option value="linux">Linux</option>
</select>
</form>
 |
| Eredmény |
A size attribútummal a lista többsorossá alakítható.
<select name="os" size="5">
Az <optgroup> segítségével pedig címekkel láthatjuk el a listánkat.
<form>
<select name="os">
<optgroup label="zárt">
<option value="windows">Windows</option>
<option value="osx" selected="yes">OSX</option>
</optgroup>
<optgroup label="nyílt">
<option value="linux">Linux</option>
</optgroup>
</select>
</form>
 |
| Eredmény |
Segítségével többsoros szövegmezőt adhatunk meg. Nem kell <form>-ba rakni. <textarea> tag-en belül 4 attribútummal ismerkedjünk meg:
- cols - attribútum. Értéke az oszlopok számát határozza meg.
- rows - attribútum. Értéke a sorok számát határozza meg.
- wrap - attribútum. Értéke a szöveg tördelésének a módját határozza meg ("hard" - mindent tördel, "off" - semmit nem tördel, görgetősáv jelenik meg, ha a szöveg túl hosszú)
- readonly - attribútum. Értéke az szerkeszthetőséget határozza meg. "yes" - csak olvasható, "no" - szerkeszthető (ez az alapértelmezett, ha nem akarjuk változtatni, akkor kihagyhatjuk)
<textarea rows="10" cols="30" readonly="yes" wrap="hard">
Ez lesz a szövegdobozban, ami nem szerkeszthető
</textarea>
 |
| Eredmény A méretek nem egyeznek meg... |
MEZŐCSOPORTOK:
Segítségével az egyes mezőket csoportosíthatjuk a <fieldset> segítségével. A <legend>-el pedig címet adunk neki.
<form>
<fieldset>
<legend>Adatok</legend>
Név: <input type="text" size="30"><br>
Város: <input type="text" size="30"><br>
</fieldset>
</form>
 |
| Eredmény |
