Diferentes tipos de campos de entrada: <input>, <textarea>, e <select>

Ao criar formulários em HTML, podemos utilizar diferentes tipos de campos de entrada para coletar informações dos usuários.

Cada tipo de campo é adequado para diferentes tipos de dados e finalidades. A seguir, vamos explicar os três tipos mais comuns: <input>, <textarea> e <select>.

1. <input>: É a tag mais versátil para campos de entrada. Podemos usar o atributo type para definir o tipo de campo desejado. Alguns exemplos de type são:

• type="text": Campo de texto simples, usado para inserir uma ou mais linhas de texto.
• type="password": Campo de senha, oculta os caracteres digitados.
• type="number": Campo numérico, permite apenas números.
• type="email": Campo de e-mail, valida se o texto inserido está em um formato de e-mail válido.
• type="checkbox": Caixa de seleção, permite ao usuário escolher uma ou mais opções.
• type="radio": Botão de opção, permite ao usuário selecionar apenas uma opção em um conjunto.

Exemplo de código para um campo de texto e uma caixa de seleção:

<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" required>

<label>Gênero:</label>
<input type="radio" id="masculino" name="genero" value="masculino">
<label for="masculino">Masculino</label>
<input type="radio" id="feminino" name="genero" value="feminino">
<label for="feminino">Feminino</label>

2. <textarea>: Usado para campos de texto maiores, como comentários ou descrições. Não possui o atributo type, apenas um name para identificação e o atributo rows para definir o número de linhas de texto visíveis.

Exemplo de código para um campo de texto maior:

<label for="comentario">Comentário:</label>
<textarea id="comentario" name="comentario" rows="4" required></textarea>

3. <select>: É utilizado para criar listas suspensas, também conhecidas como “dropdowns”. Podemos definir opções usando a tag <option>, onde o atributo value representa o valor que será enviado ao servidor quando a opção for selecionada.

Exemplo de código para uma lista suspensa de seleção de país:

<label for="pais">País:</label>
<select id="pais" name="pais" required>
  <option value="">Selecione um país</option>
  <option value="brasil">Brasil</option>
  <option value="eua">Estados Unidos</option>
  <option value="japao">Japão</option>
</select>

Em resumo, podemos utilizar diferentes tipos de campos de entrada em formulários HTML, como <input> para campos de texto, <textarea> para campos de texto maiores e <select> para listas suspensas.

Cada tipo de campo oferece funcionalidades específicas para coletar informações dos usuários de maneira clara e interativa.

Pratique a criação de formulários com esses campos para aprimorar suas habilidades em HTML e tornar suas páginas mais interativas e amigáveis para os usuários.

Compartilhar

Compartilhar

Siga-me