HTML - Lenyíló lista (select)

<select...> </select>

A lenyíló lista(select):

Név	Angol eredete	Hatás	Jellemzők
<select>	Select	Lenyíló lista létrehozására szolgáló páros címke.	Általános ; Események
<option>	Option	Lenyíló lista elemeinek megadására szolgáló páros címke.	Általános ; Események

A nyitó és záró címkéje között elhelyezett <option> címkékben megadott értékek közül lehet kiválasztani alapesetben egyet, de a multiple jellemző megadása esetén akár többet is.

A lenyíló lista(select) jellemzői:

Név	Érték	Leírás
disabled	disabled	Segítségével az elem kikapcsolható. (Nem lehet szerkeszteni. Értéke nem kerül elküldésre.)
multiple	multiple	Több elem kiválasztását teszi lehetővé.
name	szöveg	Az elem neve. Az adatok feldolgozását végző scriptek, az elem azonosítására használják.
size	szám	Segítségével állítható be, hogy hány listaelem legyen megjelenítve.
autofocus	autofocus	Hatására a weboldal betöltését követően az elem kapja meg a fókuszt. (aktív lesz)
form	form_id	Megadja, hogy az adott elem melyik űrlaphoz tartozik.
required	required	Kötelező a beviteli mező kitöltése. (Ha a mező nincs kitöltve, az űrlap nem továbbítható.)

Az (option) elem jellemzői:

Név	Érték	Leírás
disabled	disabled	Segítségével az elem kikapcsolható. (Nem lehet szerkeszteni. Értéke nem kerül elküldésre.)
value	szöveg	Az itt megadott érték kerül továbbításra a szerver felé a kiválasztott elemek esetén.
label	szöveg	A listaelem felirata. Amennyiben megadjuk, akkor ez jelenik meg adott listaelemnél. Egyébként a nyitó és záró címkék közötti szöveg.
selected	selected	Alapértelmezetten kiválasztott. (Az oldal betöltésekor ki lesz választva.)

A name jellemző értékét és a kiválasztott elem(ek) value jellemzőjének értékét küldi el a böngésző, az űrlap feldolgozását végző fájlnak.

Az <option> elem selected jellemzőjével a listában bármelyik elem alapértelmezetten kiválasztottá tehető. A disabled jellemzővel a tílthatjuk az elemet.

1. példa:

Forráskód


<form action="html5_select_1.php"  method="post">
   <select name="select1" size=”3”>
      <option value="pc">Komplett PC</option>
      <option value="laptop">Laptop</option>
      <option value="alaplap" selected>Alaplap</option>
   </select>
   <select name="select2" size=”1”>
      <option value="gyarto1">Gyártó 1</option>
      <option value="gyarto2">Gyártó 2</option>
      <option value="gyarto3">Gyártó 3</option>
      <option value="gyarto4" selected>Gyártó 4</option>
   </select>
  <br>
  <input type="submit" name="submit"  >				
</form>

Eredmény*

* Az eredmény megjelenítése az Ön által használt böngészőtől függ.