Űrlapmezők létrehozása

Kapcsolómezők definiálása - gördíthető lista

A gördíthető lista már nem tartozik az <INPUT> tag-ek közé. Ettől függetlenül nagyon hasonlít a rádiógombokra, csak itt egy listából lehet kiválasztani a szükséges elemet. Sőt! A checkbox-okra is hasnolót, hiszen nem csak egy elemet lehet kiválasztani...
select kapcsolómező attribútumai

Használata | <SELECT name="hajszin"> <OPTION value="barna"> Barna </OPTION> <OPTION value="szoke" selected="selected"> Szőke </OPTION> <OPTION value="voros"> Vörös </OPTION> </SELECT> Figyeld meg, hogy a <SELECT> </SELECT> páros csak a gördíthető menüt készíti el, magukat az elemeket az <OPTION> </OPTION> tag-ek között kell definiálnunk. Tehát ez voltaképpen 2 tag, de együtt alkalmazzuk őket.
name | Nem kötelező paraméter, de érdemes megadni, hogy egyértelműen hivatkozhassunk rájuk.
size | Opcionális attribútum, megadható vele, hogy hány soros legyen a lista. Alapértelmezésben 1 soros, ekkor egy legördülő listát kapunk. Ha ennél nagyobb számot alkalmazunk, akkor már lista a neve. Természetesen a böngésző gondoskodik a görgetésről, amennyiben szükséges.
multiple | Megengedi több elem kijelölését a felhasználónak. Több elemet általában a CTRL gomb nyomva tartásával lehet kijelölni, vagy a Shift billentyűvel, amennyiben egymás alatt levő elemekről van szó. Használata: multiple="multiple".
value | Ezt az értéket kapjuk vissza a name attribútum értékeként.
selected | Ez az attribútum meghatározza, hogy alapértelmezésben melyik mező legyen kijelölve. Ha szükséges, használata a következő: selected="selected". A rövid változat nem szabványos, a HTML 4.01 nem ajánlja, az XHTML pedig már nem is támogatja.

Megint csak egy sütit választhatunk, alapértelmezésben a Gyümölcsös szelet kiválasztva:
... és a forrás:

    <FORM method="GET">
       <SELECT name="suti">
    	<OPTION value="dobos"> Dobostorta </OPTION><BR />
          	<OPTION value="kremes"> Franciakrémes </OPTION><BR />
          	<OPTION SELECTed="SELECTed" value="gyumolcsos"> Gyümölcsös szelet</OPTION><BR />
       </SELECT>
    </FORM>

A visszadott érték ugyanaz, mint a rádiógombnál: a name által definiált változó tartalma felveszi a kiválasztott <OPTION> sorban adott value értékét. Egyszerűbben: ha a franciakrémest szeretem, akkor a "suti=kremes" értéket kapom vissza. Ha alkalmaztuk a multiple attribútumot, akkor megváltoznak a játékszabályok: a name paramétert másképpen kell megadni, nem egyszerűen name="hajszin", hanem name="hajszin[]" formában. Ezzel azt értük el, hogy a visszadott érték egy tömb lesz, amelynek az elemei fogják jelenteni rendre a visszaadott értékeket. Például hajszin[1]-ben fogod megtalálni az elsőként kiválasztott értéket, hajszin[2] fogja tartalmazni a második értéket, stb. Ebben csak az a probléma, hogy ehhez viszont már majdnem elengedhetetlen egy szerver oldali nyelv (pl. PHP) használata.
Gondolkodjunk együtt!

A sejtésed beigazolódott: megint bővítjük az előző programot. Fejleszd tovább úgy, hogy egy többszörös választású listából ki tudja választani a megkérdezett, hogy milyen kedvenc elfoglaltságai vannak.