A webszerkesztés alapjai

Űrlapok

Form- tag

Az űrlap minden tagja a <form>.....</form> elemeként jelenik meg.
Az űrlap neve: form name:"  "
Kötelező elemei:
az <action>, mely annak az alkalmazásnak az URL címét adja meg, melyet az adatok továbbításakor meg kell hívni.
és a <method>, melynek értékei:

• method="get"  (lekérdezés), amely alapértelmezett.
• method="post" (elküldés)

Általában a post jellemzőt használják, mivel a get korlátozza a bejövő levelek formázásának módját és az adatmennyiséget.

Beviteli mezők

Megadásuk az <input> taggal történik. Attribútumai lehetnek a <type>, mely meghatározza a beviteli mező típusát. A <name> az űrlapon megadott érték megnevezése, a <value> pedig a tag kezdőértéke. Ha type-pal megjelölt mezőknél alkalmazzuk, akkor a beírt érték lesz a mező alapértelmezett tartalma.
Az összetevőket tároló elembe, például egy bekezdésben (vagy DIV szakaszban) kell elhelyezni.

<form action="#" method="post">
<p>
<label for="nev">
Neve: <input type="text" name="nev" id="nev">
</label>
</p>
</form>

Neve:

A <label for="nev"> és az id="nev" jellemzők összetartoznak. Azonos értékadás esetén összekötjük a beviteli mezőt és a beviteli mező feliratát.
Így egyrészt, ha a beviteli mező feliratára kattintunk, akkor a kurzor a beviteli mezőben jelenik meg, azt aktivizálja. Másrészt a hangos képernyő felolvasók azonosítani tudják az összetartozó mezőket.
Egy oldalon a for és az id jellemzőknek egy értékpár csak egyszer adható!

A szövegmező alapértelmezett hosszát a <size="érték"> megadásával növelhetjük, vagy csökkenthetjük.
A beírt szöveg akármennyi karakter lehet, a kurzor mozgatásával végignézhetjük a szöveget.

Beállíthatjuk a name-t egy fix értékre. Ebben az esetben csak a megadott érték hosszáig tudunk karaktereket bevinni.
Megadása: <maxlenght="érték">

<form action="#">
<p>
Neve:
<input type="text" name="nev" size="30" maxlenght="20">
</p>
</form>

Neve:

Jelszómező

Egy olyan szövegmező, ahol a mezőbe írt karakterek helyén fekete pöttyök, csillagok jelennek meg.

<form action="#">
<p>
<label for="passw">
Jelszó: <input type="password" name="jelszo" id="passw">
</label>
</p>
</form>

Jelszó:

Jelölőnégyzet és rádiógomb

A jelölőnégyzet (checkbox) és a rádiógomb (radio) mezőkkel a felhasználók több lehetőség közül választhatnak.
Különbség köztük az, hogy a rádiógombok közül csak egy lehet kiválasztva, tehát egy gomb bejelölésével a másik kikapcsolódik.

Jelölőnégyzet:

<form action="#">
<p>
<label for="yes">
<input type="checkbox" name="lista" value="igen"
checked="checked" id="yes"> Igen </label>
<label for="no">
<input type="checkbox" name="lista" value="nem" id="no">
Nem </label>
<label for="proba">
<input type="checkbox" name="lista" value="talan" 
id="proba"> Talán </label>
</p>
</form>

Igen Nem Talán

<checked="checked"> utasítással mindkét esetben egy alapértelmezett esetet tudunk beállítani.

Rádiógomb:

<form action="#">
<p>
<label for="igen">
<input type="radio" name="lista" value="igen" 
checked ="checked" id="igen"> Igen </label>
<label for="nem">
<input type="radio" name="lista" value="nem" id="nem"> 
Nem </label>
<label for="talan">
<input type="radio" name="lista" value="talan" id="talan">
Talán </label>
</p>
</form>

Igen Nem Talán

Menük

A menüt a <select> taggal, a menük elemeit az <option> taggal lehet létrehozni. A <select> kötelező attribútuma a <name>.

<form action="#">
<p>
<label for="lista">
<select name="lista" id="lista">
<option value="igen">Igen</option>
<option value="nem" selected="selected">Nem</option>
<option value="talan">Talán</option>
</select>
</label> 
</p>
</form>

Igen Nem Talán

A <size="érték"> paranccsal beállíthatjuk, hogy mennyi menüelemet jelenítsünk meg. Alapértelmezett az egy mező.
Beállíthatjuk, hogy melyik legyen a mező alapértelmezett értéke.
<option selected="selected">érték</option>
A <multiple> jellemzővel engedélyezhetjük, hogy a felhasználó több lehetőséget is kiválaszthasson egyszerre. Ehhez általában egy billentyűkombinációra van szükség, amit nem árt jelezni.
<select name="lista" multiple="multiple" size="3">

Textarea

Többsoros szövegmező létrehozásához használható. Méretét meghatározhatjuk a <cols> (szélesség, azaz leütés) és a <rows> (magasság, azaz sor) értékekkel. Ha a felhasználó túllépi a megadott sor értéket, a jobb oldalon görgetősáv jelenik meg és lehet folytatni a beírást.

<form action="#">
<p>
<textarea name="megjegyzes" cols="25" rows="3">
szöveg beírása
</textarea>
</p>
</form>

szöveg beírása

Ha a szövegmezőben valamilyen szöveget szeretnénk eleve megjeleníteni, akkor azt a <textarea>......</textarea> tartalmaként tehetjük meg.

Fieldset

Az űrlap elemeit csoportokra lehet osztani az elem használatával. Alalpértelmezett megjelenése egy keret a befoglalt csoport körül, melynek nevet is adhatunk.
A név a <legend>....</legend> tag közé kerül.

<form action="#">
<p>
<fieldset><legend>Kérdőív</legend>
<label for="ok">
<input type="radio" name="lista" value="igen" id="ok">Igen
</label>
<label for="ne">
<input type="radio" name="lista" value="nem" id="ne">Nem
</label>
</fieldset>
</p>
</form>

Kérdőív

Igen Nem

Fájlok feltöltése

Engedélyezhetjük különböző fájlok feltöltését. Ehhez a <method="post"> és az <input type="file"> jellemzőt kell használni. A <type="file"> használata automatikusan létrehoz egy tallózógombot.

<form action="#" method="post" 
enctype="multipart/form-data">
<p>
<label for="tolt"> 
<input type="file" id="tolt">
</label>
</p>
</form>

Az <enctype="#"> jellemzővel a kiszolgálóra küldendő tartalomtípust lehet megadni.

Reset és a Submit gomb

A reset gomb visszaállítja a beviteli mezőket az alapállapotukba.
A submit hatására:

1. A böngésző kódolja és a szervernek elküldi az űrlap adatait.
2. Megkéri a szervert, hogy a <form action="#"> attribútumban megadott szerveroldali programot hajtsa végre. Ez az űrlap feldolgozása után választ küld a felhasználónak.

<form action="#">
<p>
<input type="reset" value="Alapállapot">
<input type="submit" value="Elküld">
</p>
</form>

Rejtett mezők: <hidden>

Az űrlapokon használhatunk rejtett mezőket, melyek a böngészőben nem láthatóak, de a feldolgozásban nagy segítséget nyújthatnak.
Megadásuk az <input type="hidden"> jellemzővel történik.
A betekintő ablakban tanulmányozhatod a rejtett mezőket.
Az első rejtett mező, mely a böngészőben nem látszik:
<input type="hidden" name="targy" value="oktatoprogram">
A feldolgozónak az első információ, ami a levélben így jelenik meg:
targy=oktatoprogram
A második rejtett mező:
<input type="hidden" name="kerdes1" value="progikezeles egyszeru?">
Megjelenése a levélben:
kerdes1=progikezeles egyszeru?
A betekintő táblában több rejtett mező is van, melyek az alábbi módon jelennek meg a levelezésben:

targy=oktatoprogram
kerdes1=progikezeles egyszeru?
valasz1=igen
kerdessor=valtoztatas
semmin=semmivaltoz
elkuld=KĂźldĂŠs

Érdemes ékezet nélküli neveket és értékeket választani ahol lehet, mert a levelező programok helytelenül jelenítik meg azokat:

targy=oktatĂłprogram
kerdes1=progikezelĂŠs egyszerĹą?
valasz1=igen
kerdessor=valtoztatĂĄs
semmin=semmivĂĄltoz
elkuld=KĂźldĂŠs

Űrlap tartalmának küldése levélben

A módszer az e-mailhoz hasonló módon oldható meg:

<form name="mail" action="mailto:emailcim.hu" method="post" enctype="text/plain">

Az action attribútumnál azt az e-mail címet kell megadni, amelyre az űrlap adatait szeretnénk megkapni.
Az enctype attribútum "text/plain" értékénél a tartalom kódolatlanul, olvasható formában kerül továbbításra.
A módszer előnye, hogy nem igényel JavaScript utasítást, nincs szükség szerver oldalon futtatott CGI programra.
Az egyik hátránya, hogy a feldolgozásnál, válaszadásnál nincs automatikus feldolgozás. A másik, hogy a küldő, alapértelmezett levelezőprogram hiányában nem tudja az űrlapot elküldeni.