Aprenda a usar <select>, <textarea> e <datalist> em HTML

Quando criamos formuláriosIntrodução a Formulários: `<form>`, `action`, `method`Explore este tutorial sobre formulários HTML, conhecendo a função dos atributos action e method para envio seguro e organizado dos dados do usuário. em HTML, precisamos de elementos que permitam ao usuário inserir, selecionar ou visualizar dados de maneira mais completa. Além dos campos básicos, como <input type="text">, existem outros controles mais avançados. Neste tutorial, exploraremos três deles:

• <select>: utilização de listasListas Ordenadas e Não Ordenadas: `<ul>`, `<ol>`, `<li>`Aprenda a criar listas ordenadas e não ordenadas em HTML. Descubra exemplos práticos e boas práticas para organizar conteúdos e facilitar a compreensão. suspensas (dropdown) ou seleção múltipla.
• <textarea>: campos para textos extensos, ideais para comentários ou descrições.
• <datalist>: criação de sugestões (auto-complete) para campos de texto.

Vamos entender cada um em detalhes, suas principais características e como empregá-los em situações práticas.

<select>: Listas Suspensas e Múltiplas Opções🔗

O elementoTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. <select> é utilizado quando precisamos disponibilizar ao usuário uma listaListas Ordenadas e Não Ordenadas: `<ul>`, `<ol>`, `<li>`Aprenda a criar listas ordenadas e não ordenadas em HTML. Descubra exemplos práticos e boas práticas para organizar conteúdos e facilitar a compreensão. de opções para escolha. Ele pode ser apresentado como uma caixa de seleção única (dropdown) ou permitir múltiplas escolhas.

Estrutura Básica de <select>

<select name="opcoes">
  <option value="valor1">Opção 1</option>
  <option value="valor2">Opção 2</option>
  <option value="valor3">Opção 3</option>
</select>

• name: Define o nome do elemento no formulárioIntrodução a Formulários: `<form>`, `action`, `method`Explore este tutorial sobre formulários HTML, conhecendo a função dos atributos action e method para envio seguro e organizado dos dados do usuário., fundamental para identificar o campo na submissão dos dados.
• <option>: Cada opção que o usuário pode selecionar.
  • value: Valor enviado ao processamento do formulárioIntrodução a Formulários: `<form>`, `action`, `method`Explore este tutorial sobre formulários HTML, conhecendo a função dos atributos action e method para envio seguro e organizado dos dados do usuário. (por exemplo, no backend).
  • O conteúdo entre <option> e </option> é o que aparece para o usuário.

Seleção Múltipla

Para permitir que o usuário escolha mais de um item, use o atributo multiple:

<select name="lista-multipla" multiple size="4">
  <option value="vermelho">Vermelho</option>
  <option value="verde">Verde</option>
  <option value="azul">Azul</option>
  <option value="amarelo">Amarelo</option>
</select>

• size="4": Quantidade de itens visíveis na caixa sem precisar rolar.
• multiple: Possibilita selecionar mais de um valor, geralmente com Ctrl+Clique (ou Cmd+Clique no macOS).

Agrupando Opções com <optgroup>

Em listasListas Ordenadas e Não Ordenadas: `<ul>`, `<ol>`, `<li>`Aprenda a criar listas ordenadas e não ordenadas em HTML. Descubra exemplos práticos e boas práticas para organizar conteúdos e facilitar a compreensão. muito extensas, podemos agrupar opções usando <optgroup>:

<select name="frutas">
  <optgroup label="Tropicais">
    <option value="manga">Manga</option>
    <option value="abacaxi">Abacaxi</option>
  </optgroup>
  <optgroup label="Cítricas">
    <option value="limao">Limão</option>
    <option value="laranja">Laranja</option>
  </optgroup>
</select>

• <optgroup labelLabels e Fieldsets: Melhorando a UsabilidadeAprenda como aplicar labels e fieldsets em formulários para melhorar a acessibilidade, otimizar a usabilidade e potencializar o SEO do seu site.="...">: Cria um rótulo para agrupar opções, facilitando a organização (e a leitura) de longas listasListas Ordenadas e Não Ordenadas: `<ul>`, `<ol>`, `<li>`Aprenda a criar listas ordenadas e não ordenadas em HTML. Descubra exemplos práticos e boas práticas para organizar conteúdos e facilitar a compreensão..

<textarea>: Campo de Texto Multilinhas🔗

O <textarea> é ideal para inserir textos mais longos, como comentários, descrições ou mensagens. Diferente de um <input type="text">, esse elementoTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. permite múltiplas linhas.

Exemplo de Uso

<textarea name="mensagem" rows="5" cols="30" placeholder="Digite sua mensagem aqui..."></textarea>

• rows e cols: Definem, respectivamente, altura (em linhas) e larguraSeletores e Propriedades CSS EssenciaisAprenda a dominar o CSS com nosso tutorial completo: entenda seletores, propriedades essenciais e técnicas para criar layouts modernos e atrativos. (em caracteres) da caixa de texto.
• placeholder: Mensagem exibida quando o campo está vazio, orientando o usuário sobre o que digitar.

Você pode adaptar o tamanho conforme a necessidade do conteúdo esperado. É comum definir o tamanho via CSSO que é CSS?Descubra como o CSS transforma a aparência das páginas web, separando conteúdo de design para melhor organização e flexibilidade., mas o uso de rows e cols ainda é válido como configuração inicial.

<datalist>: Sugestões de Entrada (Auto-Complete)🔗

O <datalist> fornece uma lista de sugestões para um campo de textoCampos de Entrada: `<input type='text'>`, `password`, `email`Este tutorial ensina os conceitos essenciais de inputs text, password e email, demonstrando atributos e boas práticas para formulários em HTML.. Ao digitar, o usuário pode selecionar facilmente entre as opções que aparecem em forma de auto-complete.

Estrutura Básica de <datalist>

<label for="linguagem">Linguagem de Programação:</label>
<input list="linguagens" id="linguagem" name="linguagem">
<datalist id="linguagens">
  <option value="HTML"></option>
  <option value="CSS"></option>
  <option value="JavaScript"></option>
  <option value="Python"></option>
</datalist>

• datalist: Cria a listaListas Ordenadas e Não Ordenadas: `<ul>`, `<ol>`, `<li>`Aprenda a criar listas ordenadas e não ordenadas em HTML. Descubra exemplos práticos e boas práticas para organizar conteúdos e facilitar a compreensão. de sugestões.
• option dentro de <datalist>: Cada opção, fornecida como dica para o usuário.
• input list="id_do_datalist": Vincula o campo de textoCampos de Entrada: `<input type='text'>`, `password`, `email`Este tutorial ensina os conceitos essenciais de inputs text, password e email, demonstrando atributos e boas práticas para formulários em HTML. às sugestões definidas no <datalist>.
• idAtributos HTML: `id`, `class`, `style`, `data-*`Aprenda a aplicar atributos id, class, style e data-* no HTML para organizar, estilizar e dinamizar sua página com praticidade e eficiência.: O mesmo valor informado em list deve ser o idAtributos HTML: `id`, `class`, `style`, `data-*`Aprenda a aplicar atributos id, class, style e data-* no HTML para organizar, estilizar e dinamizar sua página com praticidade e eficiência. do <datalist>.

Com essa configuração, ao começar a digitar em <input>, o navegador exibirá uma listaListas Ordenadas e Não Ordenadas: `<ul>`, `<ol>`, `<li>`Aprenda a criar listas ordenadas e não ordenadas em HTML. Descubra exemplos práticos e boas práticas para organizar conteúdos e facilitar a compreensão. suspensa com as opções que correspondem ao que foi digitado até o momento.

Vantagens e Características de Cada Elemento🔗

Para facilitar a visualização, segue uma tabelaCriando Tabelas: `<table>`, `<tr>`, `<td>`, `<th>`Descubra como montar tabelas HTML com tags básicas. Este tutorial prático ensina o uso de <table> <tr> <td> e <th> para organizar dados de forma eficiente. comparativa:

Boas Práticas🔗

1. Nomeação Semântica: Use valores de name e idAtributos HTML: `id`, `class`, `style`, `data-*`Aprenda a aplicar atributos id, class, style e data-* no HTML para organizar, estilizar e dinamizar sua página com praticidade e eficiência. que façam sentido. Isso facilita a manutenção do código e o entendimento do formulárioIntrodução a Formulários: `<form>`, `action`, `method`Explore este tutorial sobre formulários HTML, conhecendo a função dos atributos action e method para envio seguro e organizado dos dados do usuário..

2. Placeholder com Moderação: O placeholder deve ser uma instrução clara para o usuário. Não substitua rótulos (labelsLabels e Fieldsets: Melhorando a UsabilidadeAprenda como aplicar labels e fieldsets em formulários para melhorar a acessibilidade, otimizar a usabilidade e potencializar o SEO do seu site.) por placeholders.

3. Agrupamento de Opções: Quando tiver várias opções em um <select>, utilize <optgroup> para melhorar a organização.

4. AcessibilidadeInserindo Imagens: `<img>`, Formatos, `alt` e `title`Aprenda a inserir imagens em HTML utilizando a tag <img> com foco em acessibilidade e performance, explorando atributos, formatos e melhores práticas.:

• Procure sempre associar <label> ao elemento de formulárioIntrodução a Formulários: `<form>`, `action`, `method`Explore este tutorial sobre formulários HTML, conhecendo a função dos atributos action e method para envio seguro e organizado dos dados do usuário..
• Teste a navegação do keyboard (Tab) para garantir uma experiência inclusiva.

5. Teste em Diferentes Navegadores: Ainda existem discrepâncias na forma como cada navegador lida com estilos e sugestões (no caso do <datalist>).

Conclusão🔗

Os controles avançados <select>, <textarea> e <datalist> aumentam as possibilidades na criação de formulários, tornando-os mais dinâmicos, organizados e amigáveis. Seja uma lista suspensa para escolher a cor favorita, um grande campo de textoCampos de Entrada: `<input type='text'>`, `password`, `email`Este tutorial ensina os conceitos essenciais de inputs text, password e email, demonstrando atributos e boas práticas para formulários em HTML. para descrições detalhadas ou uma caixa de auto-complete para agilizar a digitação, cada um desses elementos tem seu papel fundamental na experiência do usuário e na coleta eficiente de dados.

Pratique constantemente em projetos simples e vá refinando o uso dessas tags conforme a necessidade. Essa familiaridade será muito útil na hora de construir formuláriosIntrodução a Formulários: `<form>`, `action`, `method`Explore este tutorial sobre formulários HTML, conhecendo a função dos atributos action e method para envio seguro e organizado dos dados do usuário. mais complexos e profissionais!