programandoai

Tipos de campo

O atributo type de um input muda o teclado no celular, ativa validações prontas do navegador e comunica a intenção do campo.

Estudar esta lição interativa →

Dá para escrever todo campo de um formulário como type="text" e funcionaria, tecnicamente. Mas isso desperdiça um recurso valioso: o HTML já sabe distinguir "isto é um e-mail" de "isto é um número" de "isto é uma data", e usa esse conhecimento para ajudar tanto quem preenche quanto quem programa.

🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. email, number, checkbox e radio, cada um com seu comportamento próprio.

No celular, um campo type="email" costuma abrir um teclado com o @ em destaque; um type="number" costuma abrir o teclado numérico. Além disso, alguns tipos já vêm com validação embutida no navegador: um type="email" avisa sozinho se falta o @ ao tentar enviar o formulário, sem você escrever nenhuma linha de lógica para isso. Já checkbox e radio resolvem escolhas: use checkbox quando várias opções podem ser marcadas ao mesmo tempo (ex.: "aceito os termos"), e radio quando só uma pode ser escolhida entre várias (ex.: forma de contato preferida). Repare que todos os radios de um mesmo grupo compartilham o mesmo name, é isso que garante que marcar um desmarque os outros. E a pergunta ("Forma de contato preferida") não é um <p> solto: o grupo de radios fica dentro de um <fieldset> com uma <legend>, como no exemplo, para que o leitor de tela anuncie a pergunta junto com cada opção. O Módulo 8 aprofunda esse agrupamento.

Erro comum com radio

Se cada <input type="radio"> de um grupo tiver um name diferente, o navegador trata cada um como um grupo separado de um único item, e todos podem ficar marcados ao mesmo tempo, o que quebra completamente a ideia de "escolha só uma opção". O name igual entre eles é o que faz o agrupamento funcionar.

🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Ajuste os dois tipos de campo.

← Voltar ao índice do curso