Tag input do HTML parte 1: A tag <input> é, sem dúvida, o elemento mais versátil e fundamental dos formulários HTML. Ela serve como a principal ponte de comunicação entre o usuário e o servidor, permitindo a inserção e a seleção de dados.
A flexibilidade do <input> reside em seu atributo type, que transforma um campo de texto genérico em um seletor de data, um campo de senha ou um botão de rádio.
Neste artigo, exploraremos os atributos essenciais do <input> e os tipos mais básicos e de seleção, focando na semântica correta.
1. O Esqueleto do <input>
O <input> é um elemento vazio (sem tag de fechamento) e, tipicamente, um elemento em linha. Para que funcione corretamente, especialmente dentro de um formulário (<form>), ele exige atributos específicos.
Atributos Fundamentais
É crucial entender a função de name e id para garantir o envio de dados e a acessibilidade.
| Atributo | Função | Uso |
type | Obrigatório: Define o comportamento e a aparência do campo. | Ex: text, password, email. |
name | Servidor/Envio: Nome que identifica o dado quando ele é enviado ao servidor. | Fundamental para o backend. |
id | Interface/Acessibilidade: Identificador único na página. Usado para vincular o campo ao seu <label>. | Fundamental para o <label> e JavaScript. |
Atributos de Validação e UX
| Atributo | Função |
value | Define o valor inicial (padrão) do campo. |
placeholder | Exibe um texto de dica dentro do campo que desaparece ao digitar. |
required | Ativa a validação nativa: o formulário não será enviado se o campo estiver vazio. |
disabled | Impede totalmente a interação do usuário. O dado não é enviado ao servidor. |
readonly | Impede a edição, mas permite a seleção. O dado é enviado ao servidor. |
maxlength | Limita o número máximo de caracteres que podem ser digitados. |
2. Tipos de Campos de Texto e Numéricos
Esses tipos solicitam entrada manual de texto e números e dependem muito dos atributos de validação.
| type | Função | Validação Nativa (UX) | Exemplo de Código |
text | Texto genérico de linha única. | Nenhuma, aceita qualquer caractere. | <input type="text" name="nome"> |
password | Oculta a entrada do usuário (mascaramento). | Nenhuma. | <input type="password" name="senha"> |
email | Destinado a endereços de e-mail. | Obrigatório: Valida se a entrada contém o formato @. | <input type="email" name="email_user"> |
number | Aceita apenas números. | Aparece com botões de incremento/decremento. | <input type="number" name="idade"> |
Detalhe do type="number"
O campo numérico utiliza atributos extras para controle preciso:
minemax: Definem o intervalo mínimo e máximo permitido.step: Define o incremento do valor (ex:step="0.1"permite números decimais com uma casa).
Exemplo Numérico Completo:
HTML
<label for="qtd">Quantidade (entre 1 e 10, de 1 em 1):</label>
<input type="number" id="qtd" name="quantidade" min="1" max="10" step="1" value="1">
3. Tipos de Seleção
Esses tipos permitem ao usuário escolher entre opções pré-definidas.
A. type="radio" (Opção Única)
- Permite selecionar apenas uma opção dentro de um grupo.
- Regra de Ouro: Todos os radios do mesmo grupo devem ter o mesmo atributo
name. O valor (value) é o que será enviado ao servidor.
Exemplo:
HTML
<input type="radio" id="m" name="genero" value="M"> <label for="m">Masculino</label>
<input type="radio" id="f" name="genero" value="F"> <label for="f">Feminino</label>
B. type="checkbox" (Múltipla Escolha)
- Permite selecionar zero ou mais opções dentro de um grupo.
- Regra Prática: No backend, é comum adicionar colchetes (
[]) aoname(ex:name="hobbies[]") para indicar que múltiplos valores podem ser enviados.
Exemplo:
HTML
<input type="checkbox" id="ler" name="hobbies[]" value="ler"> <label for="ler">Ler</label>
<input type="checkbox" id="vi" name="hobbies[]" value="viajar"> <label for="vi">Viajar</label>
✅ Conclusão Tag input do HTML parte 1
A tag <input> é a base da interação. Dominar seus atributos fundamentais (type, name, id) e entender a diferença semântica entre radio (escolha única) e checkbox (múltipla escolha) é essencial para construir formulários que coletam dados de forma precisa e que oferecem uma boa experiência de usuário.
Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo:
E se você gosta do nosso conteúdo, não deixe de contribuir adquirindo os serviços e produtos dos nossos apoiadores e empresas que somos associados:
