Neste artigo, vou mostrar como usar a tag option em HTML, essa é a tag que vem com a tag select para criar opções na lista.

A tag option cria uma opção na lista de opções da tag <select> .

Use a tag <option> dentro de um par de tags <select> ou <datalist> .

Nota :

• A tag < optton> pode ser usada sem nenhum atributo. No entanto, se você quiser enviar dados selecionados para o servidor, precisará usar o atributo value.
• Se você tiver muitas opções, poderá usar a tag <optgroup>.

1. Como usar a tag de opção em HTML

Exemplo : Use a opção para criar opções na lista de cursos em web888.vn.

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

Cada curso está em um par de tags <option> , ao escolher uma opção, o valor dessa opção será o valor da tag <select> .

2. Atributo da tag de opção em HTML

Aqui está um atributo comumente usado na tag select.

• desativado – desativa a opção, ela ainda estará visível, mas não para o usuário escolher.
• label – defina um rótulo curto para a opção.
• selecionado – se alguma opção tiver este atributo, será o valor padrão selecionado após o carregamento da página.
• value – o valor da opção, também o valor de select se essa opção for selecionada.

Por exemplo, use o valor e os atributos selecionados da tag de opção. quando submetido irá alertar o valor de 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. Adicione CSS para tag de opção html .

Raramente usamos CSS para tags de opção. No entanto, se você quiser estilizá-lo, use o seguinte:

 option{ color:red }

Ou você define um ID/Classe para ele e, em seguida, usa uma consulta seletora.