HTML: Referência de Tipos de Input HTML
Última atualização: 2026-09-08
O atributo type do elemento <input> determina a aparência e o comportamento do campo de entrada. O HTML fornece mais de 20 tipos de input cobrindo texto, numérico, data, seleção, botão e outros cenários.
1. Tipos de Input de Texto
Tipos de input de texto são usados para coletar várias formas de informações textuais:
type="text"— Tipo padrão, entrada de texto em linha únicatype="password"— Entrada de senha, os caracteres são mascaradostype="email"— Endereço de e-mail, valida o formato automaticamente, os teclados de celular mostram @type="tel"— Número de telefone, os teclados de celular mostram o teclado numéricotype="url"— Entrada de URL, valida o formato automaticamentetype="search"— Caixa de busca, alguns navegadores mostram um botão de limpar
▶ Exemplo
▶ Experimente2. Tipos de Input Numérico
Tipos de input numérico permitem que os usuários selecionem ou digitem números e valores de cor:
type="number"— Entrada numérica, pode restringirmin,max,steptype="range"— Seletor deslizante, retorna um valor numéricotype="color"— Seletor de cor, retorna um valor de cor hexadecimal
▶ Exemplo
▶ Experimente3. Tipos de Input de Data e Hora
Tipos de input de data e hora permitem que os usuários selecionem rapidamente datas através de um calendário ou seletor de hora:
type="date"— Seletor de data (ano-mês-dia)type="time"— Seletor de hora (hora:minuto)type="datetime-local"— Data local + horatype="month"— Seletor de mês (ano-mês)type="week"— Seletor de semana (ano-semana)
▶ Exemplo
▶ Experimente4. Tipos de Input de Seleção
Tipos de input de seleção permitem que os usuários escolham entre múltiplas opções:
type="checkbox"— Caixa de seleção, permite múltiplas seleçõestype="radio"— Botão de opção, apenas um pode ser selecionado por grupo denametype="file"— Upload de arquivo, useacceptpara restringir tipos de arquivo
▶ Exemplo
▶ Experimente5. Tipos de Input de Botão
Tipos de input de botão são usados para acionar ações do formulário:
type="submit"— Botão de envio, envia os dados do formulário ao servidortype="reset"— Botão de limpar, restaura os controles do formulário aos valores iniciaistype="button"— Botão genérico, requer JavaScript para ser funcionaltype="image"— Botão de imagem, funciona como submit mas usa uma imagem em vez de texto
▶ Exemplo
▶ Experimente6. Inputs Ocultos e Especiais
Campos type="hidden" não são exibidos na página, mas são enviados com o formulário. São comumente usados para passar metadados como IDs de usuário e tokens CSRF:
▶ Exemplo
▶ Experimente💡 Nota: Inputs ocultos são comumente usados para passar IDs de usuário, tokens e outros dados que os usuários não precisam ver. No entanto, esses dados ainda são visíveis para os usuários (basta visualizar o código-fonte). Portanto, nunca use campos ocultos para armazenar informações confidenciais — a validação real de segurança deve ser feita no servidor.
7. Tabela Completa de Referência de Tipos de Input
| Tipo | Descrição | Atributos Comuns |
|---|---|---|
text |
Texto em linha única | placeholder, maxlength, pattern |
password |
Senha (exibição mascarada) | placeholder, maxlength |
email |
Endereço de e-mail | placeholder, multiple |
tel |
Número de telefone | placeholder, pattern |
url |
URL / endereço web | placeholder |
search |
Caixa de busca | placeholder |
number |
Entrada numérica | min, max, step |
range |
Controle deslizante | min, max, step |
color |
Seletor de cor | — |
date |
Seletor de data | min, max, step |
time |
Seletor de hora | min, max, step |
datetime-local |
Data local + hora | min, max |
month |
Seletor de mês | min, max |
week |
Seletor de semana | min, max |
checkbox |
Caixa de seleção (múltipla) | checked |
radio |
Botão de opção | checked |
file |
Upload de arquivo | accept, multiple |
submit |
Botão de envio | value, formaction |
reset |
Botão de limpar | value |
button |
Botão genérico | value, onclick |
image |
Botão de imagem | src, alt |
hidden |
Campo oculto | value |
❓ Perguntas Frequentes
P Por que usar
email, tel, url em vez de apenas text?R Tipos semânticos de entrada oferecem três benefícios：1）Dispositivos móveis mostram teclados contextuais (
email mostra símbolo @, tel mostra teclado numérico); 2）Navegadores validam formato automaticamente (ex：email deve conter @); 3）Leitores de tela dizem aos usuários "este é um campo de e-mail", melhorando acessibilidade. Embora text funcione, usar o tipo correto proporciona melhor experiência do usuário.P E a inconsistência do tipo
date entre navegadores?R Este é um problema conhecido com os seletores de data HTML5 — Chrome, Firefox e Safari têm UIs diferentes. Soluções：1）Aceitar diferenças e confiar na experiência nativa do navegador; 2）Usar biblioteca de data JavaScript (como flatpickr) para UI unificada; 3）Usar tipo
text com validação JavaScript para personalização completa. Recomendação：se o design exige consistência, use opção 2 ou 3; para experiência nativa, use opção 1.P Qual é a diferença entre
number e range? Quando uso cada um?R
number é para entrada de valor preciso — o usuário pode digitar valores exatos, ideal para quantidades, idades, preços. range é um deslizante — o usuário apenas desliza dentro de um intervalo, ideal para volume, brilho, avaliações onde a precisão não é crítica. Ambos suportam min, max, step para limitar intervalo. Padrão comum：use range para ajuste grosso, number para ajuste fino, e vincule ambos.P O tipo
hidden é seguro? Os usuários podem ver?R Entradas
hidden não aparecem na página, mas os usuários podem ver seus valores via "Ver código-fonte" ou DevTools. Nunca armazene senhas, chaves de API ou informações confidenciais em hidden. Seu uso correto é passar metadados como IDs de usuário, tokens CSRF, identificadores de sessão. Princípio de segurança：nunca confie em dados do lado cliente — validação de segurança real deve acontecer no servidor.📖 Resumo
<input type="...">tem mais de 20 tipos, categorizados por uso: texto, numérico, data, seleção, botão e oculto- Tipos de texto: text, password, email, tel, url, search
- Tipos numéricos: number (preciso), range (deslizante), color (seletor de cor)
- Tipos de data: date, time, datetime-local, month, week
- Tipos de seleção: checkbox (múltipla), radio (única), file (upload)
- Tipos de botão: submit, reset, button (genérico), image
- Especial: hidden (campo oculto para passar metadados)
📝 Exercícios
- Formulário de Cadastro: Crie um formulário "Criar Conta" contendo 5+ tipos de input:
text(nome de usuário),email,password,date(data de nascimento),radio(gênero),checkbox(interesses),file(upload de avatar),submitereset. - Sincronização de Range: Crie um controle deslizante e um input numérico que sincronizem seus valores em tempo real. Range: 0—100, passo: 5.
