HTML Select

Postado: 11 de março de 2022

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.

elemento select é usado para criar uma lista suspensa.

O elemento select é usado em um formulário, para coletar a entrada do usuário.

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).

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

HTML – Tags Básicas

Atributo de classe HTML

Estrutura Básica do html

Como inserir Vídeo com Html5

Link Html – Veja como criar links no html

Publicado por: loopnerd

802 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado.