In questo articolo, ti mostrerò come utilizzare il tag opzione in HTML, questo è il tag fornito con il tag select per creare opzioni nell'elenco.

Il tag opzione crea un'opzione nell'elenco di opzioni del tag <select> .

Utilizzare il tag <option> all'interno di una coppia di tag <select> o <datalist> .

Nota :

• Il tag < optton> può essere utilizzato senza alcun attributo. Tuttavia, se si desidera inviare i dati selezionati al server, è necessario utilizzare l'attributo value.
• Se hai troppe opzioni, puoi usare il tag <optgroup>.

1. Come utilizzare il tag opzione in HTML

Esempio : utilizzare l'opzione per creare opzioni nell'elenco dei corsi su web888.vn.

 <select> <option>PHP</option> <option>Javascript</option> <option>HTML-CSS</option> <option>Database</option> <option>Lập trình mobile</option> </select>

Ogni corso è in una coppia di tag <option> , quando si sceglie un'opzione, il valore di tale opzione sarà il valore del tag <select> .

2. Attributo del tag opzione in HTML

Ecco un attributo comunemente usato nel tag select.

• disabilitato : disabilita l'opzione, sarà comunque visibile ma non potrà essere scelta dall'utente.
• etichetta : imposta un'etichetta breve per l'opzione.
• selezionato – se qualsiasi opzione ha questo attributo, sarà il valore predefinito selezionato dopo il caricamento della pagina.
• value – il valore dell'opzione, anche il valore di select se tale opzione è selezionata.

Ad esempio, utilizzare il valore e gli attributi selezionati del tag opzione. quando inviato avviserà il valore di select.

 <form> <select id="select"> <option value="php">PHP</option> <option value="js">Javascript</option> <option value="html/css" selected="selected">HTML-CSS</option> <option value="db">Database</option> <option value="mobile">Lập trình mobile</option> </select> <input type="submit" name="Submit" onclick='alert(document.getElementById("select").value)'> </form>

3. Aggiungi CSS per il tag opzione html

Raramente utilizziamo i CSS per i tag delle opzioni. Tuttavia, se vuoi modellarlo, usa quanto segue:

 option{ color:red }

Oppure si imposta un ID/Classe per esso e quindi si utilizza una query di selezione.