Űrlap, azaz a form elemei.

Témakörök:

Text, szövegmező.
Textarea, szövegterület.
Checbox, jelölőnégyzet.
Checbox, jelölőnégyzetek.
Radio, egy választás.
Select, listás megjelenítés.
Hidden, rejtett mező.
Password, jelszó mező.
Reset, törlőgomb.

Adatok feldolgozásának megtekintéséhez, töltsük ki az űrlapmezőt, és kattintsunk a gombra.
Teszt oldalakról, a lap tetején található zöld nyílra kattintva tudunk ide visszalépni!

1. A text szövegterület.

XHTML fájl formátum, kiterjesztése html.

<body>
<form name="input_ablak" method="GET" action="imputablak.php" id="input_ablak">
<p> Melyik a kedvenc tantárgyad? <br />
<input type="text" name="Tantargy">

<input type="submit" value="Küldőgomb">
</form>
</body>

Fenti programunk az űrlapon, így jelenik meg.

Megjegyzés:
A fent látható imput szöveges ablak mérete, az alpforma.
Ha ettől, elakarunk térni, azaz szélesebb ablakot szertnénk megjeleníteni, akkor a "size" utasítással megtehetjük.
PÉLDA:
<input type="text" name="Tantargy" size="85">

Megjelenési ablakméret, ez lesz:

Visszalépés a lap elejére!

2. A textarea szövegterület.

XHTML fájl formátum, kiterjesztése html.

<body>
<form name="textarea_ablak" method="POST" action="szovegablak.php" id="textarea_ablak">

<textarea name="szovegAblak" cols="80" rows="6">
Ide, előre beírhatunk tájékoztató szöveget arról, hogy mit várunk el a felhasználótól, de, üresen is hagyható!
</textarea>

<input type="submit" value="Küldőgomb">
</form>
</body>

Fenti programunk az űrlapon, így jelenik meg.

Megjegyzés:
A textarea ablak méreteinek meghatározása:
- cols, az ablak szélessége.
- rows, az ablak magassága, azaz mennyi szövegsor jeleníthető meg, egymás alatt.

Visszalépés a lap elejére!

3. Jelölőnégyzet. ( checkbox )

Egy választási lehetőség kijelölése.

XHTML fájl formátum, kiterjesztése html.

<body>
<form name="jelolonegyzet" method="POST" action="jelolonegyzet.php" id="jelolonegyzet">
<p> Írtál már, PHP programot? <br />
<input type="checkbox" name="Valasz">
</p>

<input type="submit" value="Küldőgomb">
</form>
</body>

Fenti programunk az űrlapon, így jelenik meg.
(Ha, a jelölőnégyzetet üresen hagyjuk, akkor azt jelenti, hogy nem, ha kipipájuk, akkor igen a válasz.)

Visszalépés a lap elejére!

4. Jelölőnégyzetek. ( checkbox )

Több választási lehetőség is, kijelölhető.

XHTML fájl formátum, kiterjesztése html.

<body>
<form name="jelolonegyzetek" method="POST" action="jelolonegyzetek.php" id="jelolonegyzetek">

<p> Van már, weblapod? <br /> <input type="checkbox" name="Valasz01"> </p>

<p> Ismered a JavaScript programot? <br /> <input type="checkbox" name="Valasz02"> </p>

<p> Írtál már, PHP programot? <br /> <input type="checkbox" name="Valasz03"> </p>

<input type="reset" value="Törlőgomb"> <input type="submit" value="Küldőgomb">
</form>

Fenti programunk az űrlapon, így jelenik meg.

Visszalépés a lap elejére!

5. Rádiógombok. ( radio )

Több választási lehetőség is megadunk, de ezek közül, csak egy jelölhető ki.

XHTML fájl formátum, kiterjesztése html.

<body>
<form name="radiogombok" method="GET" action="radiogombok.php" id="radiogombok">
<p> Melyik témakör a kedvenced? </p>
<p> <input type="radio" name="Kerdes01" value="Matematika"> Matematika? </p>

<p> <input type="radio" name="Kerdes01" value="Fizika"> Fizika? </p>

<p> <input type="radio" name="Kerdes01" value="Kémia"> Kémia? </p>

<input type="submit" value="Küldőgomb">
</form>

Fenti programunk az űrlapon, így jelenik meg.

Visszalépés a lap elejére!

6. Űrlap listaelemek. (select option és multiple )

Rádiógombokhoz hasonlóan működnek.
Két külön témakör választási lehetőségei közül, minegyiknél csak egy jelölhető ki, azaz, egy - egy ajánlat választható.

XHTML fájl formátum, kiterjesztése html.

<body>
<form name="select" method="POST" action="select.php" id="select">
<p> Melyik témakör a kedvenced? </p>

<select name="Temakorok">
<option> Matematika </option>
<option> Fizika </option>
<option> Kémia </option>
<option> Történelem </option>
</select>
<br /><br />

<p> Milyen osztályzatot kaptál utoljára, a kedvenc témakörödre? </p>

<select multiple name="OsztalyzatErteke[ ]" >
<option> 2-es, elégséges</option>
<option> 3-as, közepes </option>
<option> 4-es, jó </option>
<option> 5-ös, kiváló </option>
</select>

<input type="submit" value="Küldőgomb">
</form>

Fenti programunk az űrlapon, így jelenik meg.

Megjegyzés:
Kettő select típusú ablakunk is van.
- Az első normál formátum, ahol az ablaknyílra történő kattintással jelennek meg a további választási lehetőségek.
- Második select ablakba, multiple meghatározást írtunk be, melynek hatására több választási lehetőség jelenik meg egyszerre.
Ha sokkal több választási lehetőséget írunk be, akkor az ablak görgetősávjával lehet megtekinteni a további választási lehetőségeket.

Visszalépés a lap elejére!

7. Rejtet mezők

Megtekintéséhez és teszteléséhez, kattints ide!

Visszalépés a lap elejére!

8. Jelszómező (password).

A password, azaz jelszó megadása is rejtve marad.
A beírt karakterek, pontok formájában jelennek meg.

XHTML fájl formátum, kiterjesztése html.

<body>
<form name="jelszoablak" method="POST" action="jelszoablak.php" id="jelszoablak">
<p> Írd be a jelszavad. <br />
<input type="password" name="Jelszo">

<input type="submit" value="Küldőgomb">
</form>
</body>

Fenti programunk az űrlapon, így jelenik meg.

Visszalépés a lap elejére!

9. Törlőgomb (reset).

Törlő, azaz visszaállító gomb szerepe:
- Felhasználó elrontotta az űrlap kitöltését, lehetősége van küldés előtt törölni az addig beírtakat.

XHTML fájl formátum, kiterjesztése html.

<body>
<form name="torlogomb" method="POST" action="jelszoablak.php" id="torlogomb">
<p> Írd be a jelszavad. <br />
<input type="password" name="Jelszo">

<input type="reset" value="Törlőgomb">
</form>
</body>

Fenti programunk az űrlapon, így jelenik meg.

Visszalépés a lap elejére!