Nyitó

Gyorstalpaló

Tervezés

HTML

CSS

Sablonok

Bevezetés

Szintaktika

Dokumentum szerkezet

Általános attribútumok

Szöveg megadása

Linkek

Kép beillesztése

Táblázatok

Listák

Űrlapok

Szkriptek

Űrlapok - Választó listák. A <select>, <option> és <optgroup> tagok

Egy HTML űrlapon a választó listák helytakarékos alternatívái lehetnek az <input> taggal létrehozható rádió gomboknak vagy jelölő négyzeteknek.

Egy választó lista a <select> és a </select> tagok közötti tartalom. A zárótag használata is kötelező.

A <select> tag fontosabb attribútumai:
  • name: Az elem neve. Az űrlap adatait feldolgozó program ez alapján tudja azonosítani a felhasználó által megadott adatokat.
  • size: A választó listában egyszerre látható sorok számát definiálja.
  • multiple:
    • Alapértelmezés szerint nincs beállítva. Ilyenkor a listából csak egy elemet választhat ki a felhasználó, hasonlóan ahhoz, mint amikor rádió gombok állnak a rendelkezésére.
    • Ha be van állítva, akkor több elem is megjelölhető. Ebben az esetben a választó lista a jelölő négyzetek funkciójához hasonlít.
    Ha a multiple attribútum be van állítva, akkor a böngészők jellemzően többsoros módon jelenítik meg a választó listát.

A választó lista elemeit az <option> tag segítségével lehet megadni. A </option> zárótag használata nem kötelező.

Az <option> tag fontosabb attribútumai:
  • value: Az elem értékét adja meg. Ha az elemet kiválasztja a felhasználó, akkor az űrlap elküldésekor ezt az értéket juttatja el a böngésző a szervernek.
  • selected: Ha meg van adva, akkor a listaelem alapértelmezés szerint kiválasztott. A HTML 4.01 ajánlása szerint egy választólistában egy option elemet kiválasztottként kell megadni a forráskódban. (Ellenkező esetben a böngészők vagy az első elemet jelenítik meg kiválasztottként, vagy pedig megjelenítéskor még nem lesz kiválasztott elem.)

Példa:

<select name="carlist1">
   <option value="none" selected>Válassz autó márkát</option>
   <option value="honda">Honda</option>
   <option value="nissan">Nissan</option>
   <option value="suzuki">Suzuki</option>
   <option value="toyota">Toyota</option>
   <option value="audi">Audi</option>
   <option value="bmw">BMW</option>
   <option value="mercedes">Mercedes</option>
   <option value="opel">Opel</option>
   <option value="vw">Volkswagen</option>
</select>

Ami így jelenik meg:

Egy hosszabb lista áttekinthetőségét javítja, ha logikailag csoportosítjuk a kiválasztható elemeket. Az <optgroup> és </optgroup> tagok közötti opciók alkotnak egy csoportot. (A zárótag használata is kötelező.)

Az <optgroup> tag legfontosabb attribútuma a label, ennek értéke fog megjelenni a csoport megnevezéseként.

A 4.01-es HTML szabvány nem engedélyezi a csoportok egymásba ágyazását. (Egy optgroup elem nem tartalmazhat másik optgroup elemet.)

A következő forráskód ugyan azokat a választási lehetőségeket adja meg, mint ami a fenti példában is látható, de a lista elemek csoportosítva vannak és a felhasználók egyszerre több opciót is megjelölhetnek.

<select name="carlist2" multiple size="5">
   <option value="none" selected>Válassz autó márkát</option>
   <optgroup label="Japán autók">
      <option value="honda">Honda</option>
      <option value="nissan">Nissan</option>
      <option value="suzuki">Suzuki</option>
      <option value="toyota">Toyota</option>
   </optgroup>
   <optgroup label="Német autók">
      <option value="audi">Audi</option>
      <option value="bmw">BMW</option>
      <option value="mercedes">Mercedes</option>
      <option value="opel">Opel</option>
      <option value="vw">Volkswagen</option>
   </optgroup>
</select><br>
A Ctrl gomb lenyomásával többet is kiválaszthatsz

Ez a kód a böngészőben ilyen választó listát eredményez:


A Ctrl gomb lenyomásával többet is kiválaszthatsz

Címkék. A <label> tag »


Tőzsde és technikai elemzés érthetően