Programming the World Wide Web

Fejezet

2

2.9. Form elemek

A form elem használata általánosan:

<form name="formNeve"
action="...valamilyen szerveroldali erőforrás, ami majd feldolgozza a kérést ..." method="post">
...
</form>

Az oldalon szereplő példa-űrlap (form) esetében mégis kivételesen mailto szerepel az action attribútum értékeként:

<form method="post" action="MAILTO:e-mailcim..." enctype="text/plain">

mivel esetünkben nem az a cél, hogy az adataink szerver oldalon kerüljenek feldolgozásra, hanem inkább az érdekel, hogy:

az action attribútum értékének (mailto:...) hatására pedig az adatok küldésekor a gépre telepített alapértelmezett levélküldő kliensprogram fog elindulni, a levél törzsében pedig láthatjuk az űrlap kitöltése nyomán küldött adatokat.

Szövegmező:

egy egyszerű szövegmező:

<input type="text" name="szovegmezo" />

mégegy szövegmező, előre kitöltve:

<input type="text" name="Tantargynev" value="Web-programozás" />

Jelszó (password):

<label for="passwd">írd be a jelszót:</label>
<input type="password" name="jelszo" id="passwd" size="20" />

A label elem segítségével összekapcsolható egy szöveg egy bizonyos form-elemmel (lásd: a label for attribútuma, illetve az input elem id attribútuma) csupán annyi a hatása, hogy ha a szövegre kattintunk, a hozzárendelt form-elem lesz kiválasztva.

Rejtett mező (hidden): itt bizony nem látszik semmi, pedig itt van egy rejtett mező. Ezt a plusz adatot is elküldhetjük a szervernek.

<input type="hidden" name="rejtett mezo" value="21" />

Rádiógombok: (választógomb, választókapcsoló)
Első gomb
Második gomb

<input type="radio" name="radio1" value="ertek1" /> Első gomb<br /> <input type="radio" name="radio1" value="ertek2" /> Második gomb

Ez itt egy másik rádiógomb-csoport:
pl2: első gomb (alapértelmezés szerint ez van kiválasztva)
pl2: második gomb

<input type="radio" name="radio2" value="ertek1" checked="checked" /> pl2: első gomb (alapértelmezés szerint ez van kiválasztva)<br /> <input type="radio" name="radio2" value="ertek2" /> pl2: második gomb

Jelölőnégyzet (checkbox):
Első válaszási lehetőség:
Második válaszási lehetőség
Harmadik válaszási lehetőség:

Első válaszási lehetőség:
<input type="checkbox" name="opciok11" value="opcio1" /><br />
Második válaszási lehetőség
<input type="checkbox" name="opciok12" value="opcio2" /><br />
Harmadik válaszási lehetőség:
<input type="checkbox" name="opciok13" value="opcio3" />

Előre kiválasztott, illetve nem módosítható négyzet (... ez egy „gonosz” példa):
- Nem kérek csokit
- Ha kérek csokit, akkor tejcsoki legyen
- Ha kérek csokit, akkor mellé gesztenyepürét is tejszínhabbal

<input type="checkbox" name="opciok2" value="opcio1" checked="checked" disabled="disabled" />
- Nem kérek csokit <br />
<input type="checkbox" name="opciok2" value="opcio2" />
- Ha kérek csokit, akkor tejcsoki legyen <br />
<input type="checkbox" name="opciok2" value="opcio3" checked="checked" />
- Ha kérek csokit, akkor mellé gesztenyepürét is tejszínhabbal

Legördülő lista (drop down box - select tag):

<select name="listaelemek">
   <option value="elem1">Első elem</option>
   <option value="elem2">Második elem</option>
   <option value="elem3">Harmadik elem</option>
   <option value="elem4">Utolsó elem</option>
</select>

Itt a méret is meg van adva (3), előre ki van választva egy elem, és több elemet is ki lehet választani:

<select name="listaelemek2" size="3" multiple="multiple">
<option value="elem1">Első elem</option>
<option value="elem2">Második elem</option>
<option value="elem3" selected="selected">Harmadik elem</option>
<option value="elem4">Utolsó elem</option>v </select>

Szövegdoboz (textarea tag):

<textarea name="szoveg" rows="10" cols="30">
Ez a szöveg van most a szövegdobozban, de át lehet írni.
</textarea>

File feltöltése (ez itt most nem működik, mivel nem egy bizonyos szerver-oldali programnak küldjük az adatokat...):

Amikor file-t is feltöltünk, nem csak egyéb form-adatokat küldünk, a form enctype attribútumát mindenképp be kell állítni "multipart/form-data" értékre:

<form action="..."
    enctype="multipart/form-data"
    method="post">
...
   <input type="file" />
...
</form>

Gomb (button): itt most nem történik semmi...

tipikus használata:

<input type="button" value="nyomd meg!"
   onclick="javascript:meghiv();"/>

ahol a meghiv függvény JavaScript-ben van megírva.

A form-elemek eredeti értékeinek visszaállítása (reset):

<input type="reset" value="Reset" />

Adatok elküldése (submit):

<input type="submit" value="Submit"/>

Adatok elküldése képre kattintva (image):
A submit-hoz hasonlóan lesznek elküldve az adatok, illetve a képre való kattintás pozíciójának x és y koordinátája.

<input type="image" src="img/madar.jpg" name="kep" style="width:60px; height:60px;"/>

További (angol nyelvű) formokkal kapcsolatos dokumentáció: itt

Ugrás az oldal tetejére