<select multiple> în HTML

Lista din care utilizatorul alege mai multe opțiuni deodată, afișată ca o casetă cu mai multe rânduri vizibile.

Sintaxă tag
<select name="limbi[]" multiple size="4">
  <option>română</option>
</select>

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.