HTML: formulários - select
HTML:
select (ou menu de opções )
(Elivelto Ebermam)
Select é um tipo de campo que
permite selecionar opções em uma espécie de caixa clicável. Veja a imagem
abaixo:
Como observado, o campo select é
uma caixa de texto, onde há um texto e uma seta apontada para baixo ao lado. Ao
clicar nessa seta, abre-se um menu de opções e o usuário pode selecionar uma
opção. Ao clicar em uma opção, o menu de opções some, ficando apenas a caixa de
texto novamente, porém o texto dela irá ser o item que você selecionou.
E qual é o código do select em
HTML? Uma estrutura genérica para ele é a seguinte:
A tag <select> deve conter o atributo
name, o valor (ou seja, qual nome você vai atribuir a ele) você que define.
Entretanto temos que usar também a tag <option> para inserir algumas
opções para o usuário escolher, afinal, um menu de opções sem opções não faz
sentido.
Tag <option>
Essa tag insere uma opção (ou
item) no campo select. Nessa tag usamos o atributo value. Não confunda value
com valor do atributo, value nesse casso é o nome do atributo, e você irá
definir um valor para ele. Veja um exemplo:
<select name=”serie”>
<option value=”serie1”> 1ª série </option>
<option value=”serie2”> 2ª série </option>
<option value=”serie3”> 3ª série </option>
</select>
Lembrando que para construir uma
página web, devemos escrever o código completo, observe:
<html>
<head>
<title> Exemplo
</title>
</head>
<body>
<p> Escolha sua série </p>
<form
action="servidor.php" method="post">
<select name=”serie”>
<option value=”serie1”>
1ª série </option>
<option value=”serie2”>
2ª série </option>
<option value=”serie3”>
3ª série </option>
</select>
</form>
</body>
</html>
Se inserirmos esse código no editor online do site W3Schools
[1], acessado através link https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default
, e depois clicarmos em “run”, temos o seguinte resultado:
Tag <optgroup>
Existe também uma outra tag que
pode ser usada dentro do select, essa tag é a <optgroup>. Ela faz um
agrupamento de tags <option>. Dessa forma dentro de <optgroup> deve
haver tags <option>. Essa tag é usada com o atributo label, onde deve ser
inserido um texto que identifique o nome do agrupamento. Veja um exemplo:
Referências
[1] HTML Tutorial. W3Schools,
2020. Disponível em <https://www.w3schools.com/html/>.
Acesso em: 4 de mai. de 2020.
Comentários
Postar um comentário