Főol

Űrlap, azaz a form elemei.

Témakörök:

  1. Text, szövegmező.
  2. Textarea, szövegterület.
  3. Checbox, jelölőnégyzet.
  4. Checbox, jelölőnégyzetek.
  5. Radio, egy választás.
  6. Select, listás megjelenítés.
  7. Hidden, rejtett mező.
  8. Password, jelszó mező.
  9. 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.

Melyik a kedvenc tantárgyad?





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.)

Írtál már, PHP programot?



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.

Van már, weblapod?

Ismered a JavaScript programot?

Írtál már, PHP programot?



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.

Melyik témakör a kedvenced? </p>

Matematika?

Fizika?

Kémia?



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.

Melyik témakör a kedvenced?



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





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

<form action="feldolgozó.php" method="POST">
<p>
<input type='hidden' name='betolthet' value='matematika'>

<input type='submit' name='submit' value="TESZTELÉS mehet?">
</p>
</form>

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.

Írd be a jelszavad.





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.

Írd be a jelszavad, és kattints a törlőgombra.






 

Visszalépés a lap elejére!