Eticheta select
Eticheta select creează o listă dropdown
pentru utilizarea în formularele HTML.
Un element individual al listei trebuie să fie stocat în
eticheta option.
Atribute
| Atribut | Descriere |
|---|---|
multiple |
Prezența acestui atribut creează un multiselect -
o listă dropdown în care se pot selecta mai multe elemente, ținând apăsată
tasta Ctrl sau selectându-le cu mouse-ul.
Atribut opțional. |
name |
Numele listei dropdown. Este necesar pentru a putea accesa datele câmpului în PHP. Pentru funcționarea corectă a formularului, numele câmpurilor nu trebuie să se repete (într-un singur formular). Dacă acestea coincid - în PHP vor ajunge datele acelui câmp de introducare care este mai jos în codul HTML. |
Exemplu
Să vedem cum funcționează o listă dropdown:
<select>
<option>City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
Exemplu
Să facem lățimea listei dropdown
egală cu lățimea celui mai mare element (dacă
aceasta nu este specificată explicit folosind proprietatea CSS
width):
<select>
<option>Big City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
Exemplu . Selecție implicită
Acum să încercăm să selectăm un oraș
implicit. Vom face acest lucru folosind atributul
selected:
<select>
<option>Big City1</option>
<option selected>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
Exemplu . Multiselect
Acum să transformăm un select obișnuit într-un
multiselect folosind atributul multiple:
<select multiple name="city[]">
<option>City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
Atenție la faptul că numele selectului, specificat în atributul name,
trebuie să aibă paranteze pătrate la sfârșit. Acest lucru este necesar pentru ca în PHP
să ajungă toate valorile selectate (altfel va ajunge doar una - ultima).
Exemplu . Mai multe valori implicite în multiselect
Acum, în multiselect implicit, să încercăm să selectăm mai mult de o valoare:
<select multiple name="city[]">
<option>City1</option>
<option selected>City2</option>
<option>City3</option>
<option selected>City4</option>
</select>
:
