Valasztolista es menustruktura

Modern ismeretek WEB oldalon : Javascript ismertető HTML formátumban

Választólista és menüstruktúra

Választólista definiálása
Többszörös választás engedélyezése
Előválasztás a listából
Elküldési érték megadása
Menüstruktúra létrehozása
További lehetőségek

Választólista definiálása

Kényelmes a használata a választólistának, melynek előre bevitt értékeiből a felhasználó egy vagy többet kiválaszthat. A kiválasztott elem szövege kerül átvitelre.

Példa:

<p>Hét napjai:</p>
<select name="napok" size=3>
<option> Hétfo
<option> Kedd
<option> Szerda
<option> Csötörtök
<option> Péntek
<option> Szombat
<option> Vasárnap
</select>

Magyarázat:

<select ...> Tag vezeti be az elemek felsorolását, nevet kötelező adni a name="valami" által, mely csak az angol ABC betűit, számokat és aláhúzás jelet tartalmazhat (ez utóbbit a szóköz helyett használjuk). Lehetséges attributumok : size= amivel a látható elemek számát határozzuk meg. Ha az elemek száma ennél nagyobb, akkor egy görgdítősáv is látható lesz. Ha a size=1 akkor egy un. "Drop-Down-Liste" azaz legördülő lista jelenik meg az űrlapon.Az <option> után kell megadni a lista elemeit. Az </option> Tag használata megengedett, de nem kötelező. A záró </select> Tag azonban szükséges. Az elemek szélességét a leghosszabb elem határozza meg, de külön is megadhatjuk. Lásd : További lehetőségek

Többszörös választás engedélyezése

Alapértelmezésként csak egy elemet választhatunk, de a multiple attributum által, melyet a bevezető <select> Tag-ban kell megadni, lehetővé válik több elem választása is.

Példa:

<p>A tánckar legszebb lányai :(többet is választhat)</p>
<select name="lanyok" size=4 multiple>
<option> Kati
<option> Vera
<option> Beáta
<option> Icus
<option> Mari
<option> Évike
<option> Lujzi
<option> Zsuzsa
</select>

Figyelem:

A felhasználó figyelmét érdemes külön felhívni, hogy több elemet is választhat. Ez általában a Ctrl és a kiválasztott elemre való klikkeléssel történik.

Előválasztás a listából

Lehetséges bizonyos elem(ek) eloválasztása (melyet a felhasználó felülbírálhat) az <option...> Tag-ban megadott selected attributum segítségével. A többszörös választási lehetőséggel kombinálva is használhatjuk.

Példa:

<p>A tánckar legszebb lányai :(többet is választhat)</p>
<select name="lanyok" size=4 multiple>
<option> Kati
<option> Vera
<option selected> Beáta
<option selected> Icus
<option> Mari
<option> Edit
<option> Lujzi
<option> Zsuzsa
</select>

Elküldési érték meghatározása

Alapértelmezésben a kiválasztott elem(ek) kerül(nek) elküldésre, de külön is meghatározhatjuk az elküldendő értéket, melyet az <option value= > által adunk meg.

Példa:

<p>Az Ön palacsinta rendelése:</p>
<select name="palacsinta" size=5 multiple>
<option value="P01"> Diós
<option value="P02"> Ízes
<option value="P03"> Túrós
<option value="P04"> Mákos
<option value="P05"> Kakaós
<option value="P06"> Húsos
<option value="P07"> Hortobágyi
</select>

Menüstruktúra létrehozása

A legújabb böngészők képesek (lesznek) az űrlapon egymásba ágyazott menüstruktúrák megjelenítésére. Ezt a <select> és </select> HTML Tag-ek között megadott <optgroup> és </optgroup>parancsok segítségével érhetjük el. Az almenü elemeit rendesen az<option> Tag-ban kell megadni. A label="" -ben megadott értéket mutatja, ha az almenü elemén áthúzzuk az egeret. További almenü struktúrát az <optgroup> és </optgroup> ismételt kiadásával hozhatunk létre.

A Netscape 4.0 és az MS Internet Explorer 4.0 még nem tudja értelmezni ezeket az utasításokat.

Példa:

<html><head><title>Teszt</title>
</head><body>
<form name="urlap_neve" action="mailto:sajat@magam.hu">
<select name="lanyok" size=3>
 <optgroup label="Lányok A-val">
   <optgroup label="Első sorban:"> 
      <option label="Annabella"> Annabella 
      <option label="Andrea"> Andrea
      <option label="Anasztázia"> Anasztázia
   </optgroup>
   <optgroup label="Második sorban:"> 
      <option label="Anita"> Anita 
      <option label="Anikó"> Anikó
      <option label="Anna"> Anna
   </optgroup>
</optgroup>
 <optgroup label="Lányok B-vel">
  <option label="Bella"> Bella
  <option label="Barbara"> Barbara
  <option label="Berta"> Berta
 </optgroup>
 <optgroup label="Lányok K-val">
  <option label="Kati"> Kati
  <option label="Klaudia"> Klaudia
  <option label="Krisztina"> Krisztina
 </optgroup>
</select>
</form>
</body></html>

További lehetőségek

A <select> és <option> Tag-ben megadhatunk univerzális attributumokat,ahogy az egysoros beviteli mező esetében bemutattuk. Éppúgy lehetséges CSS Stíluslap megadást a különböző űrlapelemekhez hozzárendelni.( igaz ezeket a parancsokat a Netscape 4.x verzió még nem, csak aMS Internet Explorer 4.x ismeri fel.

Készült : 1999-10-10. Lengyel Sándor