Liste di selezione in XHTML Mobile Profile
Per inviare il valore della voce di lista al server, il tag <select> deve essere usato con il tag <form<. Si può vedere l' uso del tag <form< e come fare per leggere il valore dell' articolo selezionato, in una delle lezioni successive del corso.
L' attributo "name" del tag <select> specifica il nome della lista di selezione. Sul server il nome sarà usato per richiamare il valore dell' articolo selezionato.
Il valore di un articolo è specificato con l' attributo "value" del tag <option>.
Diamo un' occhiata all' esempio successivo. Può aiutarci a capire meglio di cosa andremo a realizzare.
<form method="post" action="xhtml_processa.asp">
<p>
<select name="lista_menu">
<option value="tutorial_1">XHTML MP Tutorial Parte 1</option>
<option value="tutorial_2">XHTML MP Tutorial Parte 2</option>
<option value="tutorial_3">XHTML MP Tutorial Parte 3</option>
</select>
</p>
</form>
</body>
La figura successiva è la visualizzazione, attraverso un dispositivo mobile, della lista di selezione appena scritta:
Selezionare opzioni multiple
Nel precedente esempio un utente può scegliere solo una opzione dalla lista. Per permettere che egli possa selezionare più voci, si deve usare l' attributo "multiple" del tag <select>. L' attributo deve essere assegnato attraverso il valore "multiple". Le opzioni, in tale genere di liste di selezione, sono visualizzate come caselle di controllo sullo schermo.
Vediamo uno stralcio di codice:
<form method="post" action="xhtml_processa.asp">
<p>
<select name="List_menu" multiple="multiple">
<option value="tutorial_1">XHTML MP Tutorial Parte 1</option>
<option value="tutorial_2">XHTML MP Tutorial Parte 2</option>
<option value="tutorial_3">XHTML MP Tutorial Parte 3</option>
</select>
</p>
</form>
</body>
Di seguito l' immagine della screen-shot attraverso l' emulatore online:
Per poter selezionare più di una voce dall' elenco basta selezionarne una, premere il pulsante CTRL (sulla tastiera) più una seconda voce.
Organizzare per gruppi le voci di un menu
Se una lista di selezione contiene molte voci, potrebbe sembrare un pò difficoltoso districarsi al suo interno, oltre che avere la parvenza di un disordine. Per risolvere questo problema si possono organizzare le opzioni in gruppi. Per definire un gruppo si usa il tag <optgroup></optgroup>. L' attributo "label" del tag <optgroup>, specifica il titolo di un gruppo di opzioni. L' uso di <optgroup></optgroup> è riportato di seguito:
<form method="post" action="xhtml_processa.asp">
<p>
<select name="selectionList">
<optgroup label="Tutorial Capitolo 1">
<option value="lezione_1A">Lezione 1A</option>
<option value="lezione_1B">Lezione 1B</option>
<option value="lezione_1C">Lezione 1C</option>
</optgroup>
<optgroup label="Tutorial Capitolo 2">
<option value="lezione_2A">Lezione 2A</option>
<option value="lezione_2B">Lezione 2B</option>
<option value="lezione_2C">Lezione 2C</option>
</optgroup>
<optgroup label="Tutorial Capitolo 3">
<option value="lezione_3A">Lezione 3A</option>
<option value="lezione_3B">Lezione 3B</option>
<option value="lezione_3C">Lezione 3C</option>
</optgroup>
</select>
</p>
</form>
</body>
Di seguito l' immagine del menu con il tag optgroup:
| < Prec. | Succ. > |
|---|
