Ce face <select multiple>
Cu atributul multiple, elementul <select> nu mai este o listă derulantă, ci o casetă cu mai multe rânduri vizibile (implicit 4), din care se pot alege mai multe opțiuni. Atributul size schimbă numărul de rânduri vizibile.
Pe calculator, alegerea mai multor opțiuni se face cu Ctrl + clic (Cmd + clic pe Mac) pentru opțiuni separate și cu Shift + clic pentru un interval. Mulți utilizatori nu știu aceste combinații, de aceea scrie un text de ajutor lângă listă. Pe telefon, lista se deschide ca o fereastră cu căsuțe de bifat.
La trimitere, fiecare opțiune aleasă se trimite separat, cu același nume: limbi=ro&limbi=en. În PHP numele trebuie să se termine cu [] (limbi[]), altfel se păstrează doar ultima valoare. required cere cel puțin o opțiune aleasă.
Atribute
| Atribut | Descriere |
|---|---|
multiple |
Permite alegerea mai multor opțiuni. |
size |
Numărul de rânduri vizibile (implicit 4 când există multiple). |
name |
Numele câmpului; pentru PHP, cu [] la final. |
required |
Cere cel puțin o opțiune aleasă. |
Exemple
Exemplul 1: Limbi vorbite, cu text de ajutor
Două opțiuni sunt alese din start cu selected.
<label for="limbi">Limbi vorbite</label>
<select id="limbi" name="limbi[]" multiple size="5">
<option value="ro" selected>Română</option>
<option value="en" selected>Engleză</option>
<option value="fr">Franceză</option>
<option value="de">Germană</option>
<option value="it">Italiană</option>
</select>
<p>Ține apăsat Ctrl (Cmd pe Mac) ca să alegi mai multe.</p>
Ce afișează browserul
O casetă cu 5 rânduri; Română și Engleză sunt evidențiate.
Cu Ctrl + clic pe Italiană, se adaugă și ea; serverul primește limbi[]=ro&limbi[]=en&limbi[]=it.
Exemplul 2: Citirea valorilor în PHP
Datorită lui [], $_POST['limbi'] este un tablou.
<!-- în formular: <select name="limbi[]" multiple> -->
<?php
$limbi = $_POST['limbi'] ?? [];
echo 'Ai ales: ' . implode(', ', $limbi);
?>
Ce afișează pagina după trimitere
Ai ales: ro, en, it
Greșeli frecvente
- Numele fără
[]într-un formular citit cu PHP:$_POST['limbi']conține doar ultima opțiune aleasă. - Lipsa unui text care explică Ctrl + clic: mulți utilizatori aleg o singură opțiune fără să știe că pot alege mai multe.
- Liste multiple foarte lungi: pentru zeci de variante, un grup de căsuțe
type="checkbox"este mai ușor de folosit.
Comenzi înrudite
<select> și <option>: Creează un meniu derulant (drop-down list) de unde utilizatorul alege una sau mai multe opțiuni.<optgroup>: Grupează opțiunile unei liste select sub un titlu care nu poate fi ales, de exemplu orașele pe regiuni.<input type=checkbox>: Căsuța de bifat pentru opțiuni de tip da/nu sau pentru alegerea mai multor variante dintr-o listă.<form>: Containerul principal pentru colectarea datelor de la utilizator și trimiterea lor către un server.<label>: Etichetă accesibilă pentru un control de formular: dând clic pe etichetă, activezi sau bifezi câmpul asociat.