Il Tag HTML Select – Come Creare un Menu a Discesa o un Elenco Combinato

Articolo originale: https://www.freecodecamp.org/news/html-select-tag-how-to-make-a-dropdown-menu-or-combo-list/

Il tag HTML select viene utilizzato per creare menu a discesa, in modo che gli utenti possano selezionare il valore che vogliono. È una caratteristica strumentale nella raccolta dei dati da inviare a un server.

Il tag select normalmente si trova all'interno di un elemento form, con le opzioni tra cui scegliere codificate all'interno di un altro tag,  <option>. Può anche essere un elemento a sé stante, ma comunque associato a un form con uno dei suoi attributi speciali, form.

In questo tutorial, ti guiderò nella creazione di un menu a discesa con il tag select, in modo che tu possa iniziare a usarlo nel codice dei tuoi progetti per raccogliere dati. Parlerò anche di come applicare uno stile al tag select perché è notoriamente difficile da definire.

Attributi del Tag Select

Prima di approfondire come creare un menu a discesa con il tag select, dobbiamo discutere gli attributi che esso possiede.

Gli attributi sono:

• name (nome):  devi attribuire un nome a ogni elemento di un form, poiché sarà usato per referenziare i dati dopo che sono stati inviati al server.
• multiple (multiplo): questo attributo consente all'utente di selezionare opzioni multiple dal menu a discesa.
• required (richiesto): è tipicamente usato per la validazione. Con questo attributo il form non invierà i dati a meno che l'utente non scelga almeno una opzione dal menu a discesa.
• disabled (disabilitato): questo attributo impedisce all'utente l'interazione con le opzioni.
• size (dimensione): espressa con un valore numerico, questo attributo viene usato per specificare quante opzioni saranno visibili alla volta.
• autofocus: questo attributo può essere usato su tutti gli elementi di un form, select incluso, per specificare quale di essi dovrebbe ricevere il focus quando la pagina viene caricata.

Come Creare un Menu a Discesa con il Tag Select

Per creare un menu a discesa con il tag select, innanzitutto ti serve un elemento form. Questo perché dovrai anche avere un pulsante di tipo submit all'interno del form stesso per poter inviare i dati al server.

<form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

Ho aggiunto qualche semplice regola CSS per centrare il menu a discesa e il pulsante, e dare al corpo uno sfondo grigio chiaro:

body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh;
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

Per renderlo più elaborato e accessibile, potresti anche associare all'elemento select un'etichetta, vale a dire un elemento label, in modo che riceva il focus quando viene fatto click sul testo dell'etichetta stessa. Puoi farlo con questo codice:

<form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

Ho inserito un cancelletto (#) come valore dell'attributo action in modo che non si ottenga un errore 4o4 quando si fa click sul pulsante di invio.

Ora però dobbiamo fare una piccola modifica nel CSS:

 body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh; 
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

label {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

select {
     margin-bottom: 10px;
     margin-top: 10px;
   }

Alla fine questo è il risultato:

Non finisce qui. Uno degli elementi del menu a discesa appare come predefinito e verrebbe scelto se l'utente facesse click sul pulsante di invio immediatamente, una volta arrivato sulla pagina.

Questa non è una buona esperienza utente. Puoi rimediare inserendo un elemento fittizio tipo "select a language" (seleziona un linguaggio) come primo elemento del menu a discesa.

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="select">Select a language</option>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

Quando l'utente fa click sull'elemento per selezionare un'opzione, il menu a discesa va a coprire il pulsante di invio – un'altra cosa che influisce negativamente su una buona esperienza utente.

Puoi modificare questo con l'attributo size, che mostrerà un predefinito numero di opzioni e mostrerà una barra di scorrimento verticale per le restanti  nel menu a discesa.

Questo ti consente anche di sbarazzarti della prima opzione fittizia "select a language", visto che alcuni degli elementi saranno visibili all'utente automaticamente e nessuno di essi sarà selezionato.

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang" size="4">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

Con l'attributo multiple puoi consentire all'utente di selezionare più opzioni dal menu a discesa

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang" multiple>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

Questo rende visibili 4 elementi nella modalità predefinita. Per selezionare più opzioni, l'utente deve tenere premuto il tasto "shift" o "ctrl" mentre effettua la selezione con il mouse.

Questo non è tutto quello che si può fare con i tag select e <option>. Puoi anche creare un elemento select multi livello  inserendo l'elemento <optgroup> all'interno di un tag <select> .

Per crearlo puoi utilizzare il menu a discesa già fatto modificando il codice in questo modo:

<form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <optgroup label="first-choice">
          <option value="select">Select a language</option>
          <option value="javascript">JavaScript</option>
          <option value="php">PHP</option>
          <option value="java">Java</option>
          <option value="golang">Golang</option>
        </optgroup>
        <optgroup label="second-choice">
          <option value="python">Python</option>
          <option value="c#">C#</option>
          <option value="C++">C++</option>
          <option value="erlang">Erlang</option>
        </optgroup>
      </select>
      <input type="submit" value="Submit" />
</form>

Come Dare uno Stile all'Elemento Select

Applicare uno stile all'elemento select è spesso fonte di confusione e non c'è uniformità nella presentazione dello stesso da parte dei browser. Puoi tuttavia provare quanto segue:

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="select">Select a Language</option>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

 select {
        margin-bottom: 10px;
        margin-top: 10px;
        font-family: cursive, sans-serif;
        outline: 0;
        background: #2ecc71;
        color: #fff;
        border: 1px solid crimson;
        padding: 4px;
        border-radius: 9px;
      }

Nel frammento di codice CSS qui sopra ho dato al testo che appare nella casella di selezione il seguente aspetto:

• famiglia di font cursive e colore bianco,
• ho eliminato il brutto contorno che appare quando l'elemento riceve il focus, dando alla proprietà outline il valore di 0,
• uno sfondo verdastro,
• un bordo spesso 1 pixel di colore cremisi,
• un leggero arrotondamento degli angoli del bordo di 4 pixel tramite la proprietà border-radius,
• un riempimento di 4 pixel per meglio spaziare il testo all'interno della casella di selezione.

La casella di selezione ora ha un aspetto migliore:

Conclusione

Il tag select è molto utile quando si creano menu a discesa o elenchi combinati in HTML. È come avere caselle di spunta e pulsanti di opzione in un singolo pacchetto.

Ricordati che con un pulsante di opzione puoi selezionare solo un elemento da una lista – ma con una casella di spunta puoi selezionare più elementi. Select è più flessibile, in quanto lo puoi configurare affinché accetti una singola opzione o più opzioni.

Un problema è che è molto difficile applicare uno stile al tag select. Una soluzione ragionevole è usare una libreria CSS che offre delle buone classi di utilità per applicare uno stile a un form, compreso l'elemento select.

Spero che questo tutorial ti abbia reso più familiare con il tag select, in modo che tu possa iniziare a utilizzarlo nei tuoi progetti.

Grazie per avere letto e continua a programmare.