Tekintsük át a weboldalak űrlapjain (formjain) leggyakrabban használatos párbeszédelemeket!
egyszerű (egysoros) beviteli mező:
<input type='text'>
jelszó beviteli mező:
<input type='password'>
jelölőnégyzet (checkbox):
<input type='checkbox'> Egyetértek...
Egyetértek... kiválasztó gomb (rádiógomb):
<input type='radio' name='gender'> fiú
<input type='radio' name='gender'> lány
fiú
lány
fájl-tallózó:
<input type='file'> Nincs fájl kiválasztva
e-mail beviteli mező:
<input type='email'>
Szerepe az adatok elküldésekor mutatkozik meg: formailag hibás e-mail cím esetén nem enged továbblépni.
szám beviteli mező:
<input type='number'>
választás értéktartományból:
<input type='range'>
dátum beviteli mező:
<input type='date'>
éééé.hh.nn.
(Ha nem működik, a böngésző frissítése lehet szükséges.)
időpont beviteli mező:
<input type='time'>
--:--
(Ha nem működik, a böngésző frissítése lehet szükséges.)
színválasztó mező:
<input type='color'>
(Ha nem működik, a böngésző frissítése lehet szükséges.)
többsoros beviteli mező:
<textarea cols=40 rows=4></textarea>
választó elem:
<select>
<option>---Válassz!--- </option>
<option>Biológia </option>
<option>Fizika </option>
<option>Földrajz </option>
<option>Kémia </option>
</select>
---Válassz!---
választó elem a lehetőségek csopotosításával:
<select title='Válassz úticélt!'>
<option disabled=disable selected>---Válassz!--- </option>
<optgroup label='Ausztria'>
<option>Neusiedler See</option>
<option>Wolfgangsee</option>
<option>Wörthersee</option>
</optgroup>
<optgroup label='Olaszország'>
<option>Lago di Como</option>
<option>Lago di Garda</option>
</optgroup>
<optgroup label='Szlovénia'>
<option>Blejsko jezero</option>
<option>Bohinjsko jezero</option>
</optgroup>
</select>
---Válassz!---
beviteli mező előre definiált adatokkal:
<input list='programnyelv'>
<datalist id='programnyelv'>
<option value='C#'>
<option value='Java'>
<option value='PHP'>
<option value='Python'>
</datalist>
alaphelyzetbe állító nyomógomb:
<input type='reset'>
tetszőleges funkciójú nyomógomb, jellemzően JavaScript nyelven történő feldolgozáshoz:
<input type='button' value='Feldolgozás'>
elküldés nyomógomb, jellemzően PHP nyelven történő feldolgozáshoz:
<input type='submit'>
A párbeszédelemek feldolgozhatóságának szinte mindig feltétele, hogy azok egy űrlapon (formon) legyenek elhelyezve:
<form>
<!-- párbeszédelemek -->
</form>
Ennek hiányában pl. még a reset gomb sem fogja tudni alaphelyzetbe állítani a form elemeit - hiszen nincs is form.
A párbeszédelemek HTML-ben történő megjelenítése önmagukban semmilyen interakciót nem valósítanak meg. A feldolgozáshoz programozásra, tehát pl. JavaScriptre, vagy PHP-ra van szükség.
Példa
<!DOCTYPE html>
<html lang="hu"),
<head>
<meta charsets'UTF-8">
<meta name="viewport" contents"widthdevice-width, initial-scale=1.0"›
<meta http-equiv."X-UA-Compatible" contents"ie=edge">
<title>Form</title>
</head>
<body>
<form action="results.html" methods-POST->
<div>
<br><br><br><br><br><br><br><center>
<label>Felhasználói név</label>
<input names-names>
</div>
<div>
<center> <label>Jelszó</label>
<input names-passwords>
</div>
<button)Submit</button></center>
</form;
</body>
</html>
----------------
Űrlapok || formok...
Elérkeztünk a gyakorlás végéhez. Újra belevágunk az "elméletbe". Mivel már rengeteget foglalkoztunk a HTML-lel, nem fogom annyira elmagyarázni a kódokat, hiszen már magatoktól is rá tudtok jönni. Persze ha valami nem érthető, akkor írjatok egy hozzászólást. A W3-as kezdő szintből kimaradtak a formok, vagy űrlapok. Ezzel fogunk ma foglalkozni.
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>
Eredmény
"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
</form>
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
A checked="yes" itt is működik, csak értelem szerűen több helyen is használhatjuk.
"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
A value attribútum értéke jelenik meg a gombon.
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 <select>-en belüli multiple="yes" attribútum és érték segítségével több elem is kiválasztható. <select name="os" multiple="yes">
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
TEXTAREA:
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>
Születési év: <input type="text" size="10">
</fieldset>
</form>
Eredmény
Nincsenek megjegyzések:
Megjegyzés küldése