- Página Inicial
- Códigos HTML Prontos
- HTML Select
- Voltar
Neste artigo vamos abordar sobre a tag HTML select.
A tag HTML select é utilizada quando desejamos exibir uma lista de um determinado assunto. As opções dentro do menu são representadas pelo elemento <option> dentro da teg <form> Também é conhecido como drop-drown.
O elemento select
é usado para criar uma lista suspensa.
O
elemento select é usado em um formulário, para coletar a entrada do usuário.
O name
atributo é necessário para referenciar os dados do formulário após o envio do formulário (se você omitir o name
atributo, nenhum dado da lista suspensa será enviado).
O id
atributo é necessário para associar a lista suspensa a um rótulo.
As tags <option> e <select>
dentro do elemento definem as opções disponíveis na lista suspensa.
Veja um exemplo:
<label for="aprender">Quero Aprender:</label> <select name="aprender" id="aprender"> <option value="html5">Html5</option> <option value="css3">Css3</option> <option value="jquery">jQuery</option> <option value="Design Responsivo">Design Responsivo</option> </select>
Atributos
autofocus – especifica que a lista suspensa deve obter o foco automaticamente quando a página for carregada
<form action="dados.php"> <label for="aprender">aprender:</label> <select name="aprender" id="aprender" autofocus> <option value="html">html</option> <option value="css">css</option> <option value="jquery">jquery</option> </select> <input type="submit" value="Enviar"> </form>
disabled – especifica que uma lista suspensa deve ser desabilitada
<form action="dados.php"> <label for="aprender">aprender:</label> <select name="aprender" id="aprender" disabled> <option value="html">html</option> <option value="css">css</option> <option value="jquery">jquery</option> </select> <input type="submit" value="Enviar"> </form>
form – define a qual formulário a lista suspensa pertence
Veja no exemplo abaixo o atributo form especifica a qual formulário a lista suspensa pertence:
A lista suspensa é definida fora do elemento de formulário, mas será enviada com o formulário.
Reparem que a tag form=”dados” esta no select.
<form action="dados.php" id="dados"> <label for="nome">Nome:</label> <input type="text" id="nome" name="nome"> <input type="submit" value="Enviar"> </form> <br> <label for="aprender">Aprender:</label> <select id="aprender" name="lista" form="dados"> <option value="html">html</option> <option value="css3">css3</option> <option value="jquery">jquery</option> <option value="seo">Seo</option> </select>
multiple – especifica que várias opções podem ser selecionadas de uma só vez
O atributo multiple especifica que várias opções podem ser selecionadas de uma só vez:
Mantenha pressionado o botão Ctrl (Windows) ou Command (Mac) para selecionar várias opções.
<form action="dados.php"> <label for="aprender">aprender:</label> <select name="aprender" id="aprender" multiple> <option value="html">html</option> <option value="css">css</option> <option value="jquery">jquery</option> </select> <input type="submit" value="Enviar"> </form>
name – define um nome para a lista suspensa
O atributo de nome de seleção
O atributo name <select name=”frontend”> especifica o nome de uma lista suspensa:
O atributo name também é usado para referenciar elementos em um JavaScript ou para referenciar dados de formulário após o envio de um formulário.
OBS: o nome frontend
Outro exemplo: <select name=”cursos”>
<form action="dados.php"> <label for="aprender">aprender:</label> <select name="frontend"> <option value="html">html</option> <option value="css">css</option> <option value="jquery">jquery</option> </select> <input type="submit" value="Enviar"> </form>
required – Especifica que o usuário deve selecionar um valor antes de enviar o formulário
O atributo obrigatório selecionado
O atributo required especifica que o usuário deve selecionar um valor antes de enviar o formulário:
<form action="dados.php"> <label for="aprender">aprender:</label> <select name="frontend" required> <option value="">Selecione um Curso</option> <option value="html">html</option> <option value="css">css</option> <option value="jquery">jquery</option> </select> <input type="submit" value="Enviar"> </form>
size – define o número de opções visíveis em uma lista suspensa
O atributo size especifica o número de opções visíveis em uma lista suspensa:
Neste exemplo abaixo:
<option value="PHP">PHP</option> <!--A opção PHP Não vai aparecer porque o size especificamos somente 3 -->
<form action="dados.php"> <label for="aprender">aprender:</label> <select name="frontend" size="3"> <option value="html">html</option> <option value="css">css</option> <option value="jquery">jquery</option> <option value="PHP">PHP</option> </select> <input type="submit" value="Enviar"> </form>
optgroup – A tag optgroup é usada para agrupar opções relacionadas em uma lista suspensa:
<form action="dados.php"> <label for="cursos">Escolha um curso:</label> <select name="cursos" id="cursos"> <optgroup label="Back-end"> <option value="php">PHP</option> <option value="mysql">MySql</option> <option value="python">Python</option> </optgroup> <optgroup label="Front-end"> <option value="html">Html</option> <option value="css">Css</option> <option value="jquery">jQuery</option> <option value="angular">Angular JS</option> </optgroup> </select> <input type="submit" value="enviar"> </form>
O que é e quando usar o select ?
A tag HTML <select> é utilizada quando desejamos exibir uma lista com vários elementos para que usuário selecione uma ou várias opções exibidas na lista.
Ela também é utilizada em conjunto com a tag (HTML <select> option), que é responsável por armazenar o valor correspondente do item, que deve ser indicado no atributo value, além de exibir o valor alternativo, que é o texto exibido na tela para o melhor entendimento para o usuário.
O elemento HTML <select> nos oferece uma série de atributos que permitem tornar a aplicação web mais interativa, pois ele contém uma variedades de recursos que facilitam a comunicação com p usuério e são simples de configurar, como a definição do tamanho de itens exibidos, a possibilidade de agrupamento e a seleção de múltiplos valores. como visto nos exemplos acima.
Curtiu o artigo sobre HTML <select>?
Veja mais sobre Tags Html
Conheça as principais tags semânticas do html5
Html – Tags de Formatação de Texto
Link Html – Veja como criar links no html
Publicado por: Loop Nerd
2.031 Visualizações
Deixe um comentário