HTML: Referência de Tipos de Input HTML
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
HTML
<form>
<label>Nome de usuário: <input type="text" name="username" placeholder="Digite o nome de usuário"></label><br>
<label>Senha: <input type="password" name="password" placeholder="No mínimo 6 caracteres"></label><br>
<label>E-mail: <input type="email" name="email" placeholder="voce@exemplo.com"></label><br>
<label>Telefone: <input type="tel" name="phone" placeholder="(11) 99999-9999"></label><br>
<label>Site: <input type="url" name="website" placeholder="https://"></label><br>
<label>Busca: <input type="search" name="q" placeholder="Termos de busca"></label>
</form>
2. 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
HTML
<form>
<label>Quantidade (1-10): <input type="number" name="qty" min="1" max="10" value="1"></label><br>
<label>Volume: <input type="range" name="volume" min="0" max="100" value="50"></label><br>
<label>Cor do tema: <input type="color" name="theme" value="#ff6600"></label>
</form>
<!-- Sincronização de range e number (requer JS) -->
<input type="range" id="slider" min="0" max="100" value="50">
<input type="number" id="numDisplay" min="0" max="100" value="50">
<script>
const slider = document.getElementById('slider');
const num = document.getElementById('numDisplay');
slider.addEventListener('input', () => num.value = slider.value);
num.addEventListener('input', () => slider.value = num.value);
</script>
3. 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
HTML
<form>
<label>Data: <input type="date" name="date"></label><br>
<label>Hora: <input type="time" name="time"></label><br>
<label>Data + Hora: <input type="datetime-local" name="datetime"></label><br>
<label>Mês: <input type="month" name="month"></label><br>
<label>Semana: <input type="week" name="week"></label>
</form>
4. 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
HTML
<form>
<p>Hobbies (múltiplas seleções permitidas):</p>
<label><input type="checkbox" name="hobby" value="leitura"> Leitura</label>
<label><input type="checkbox" name="hobby" value="musica"> Música</label>
<label><input type="checkbox" name="hobby" value="esportes"> Esportes</label>
<p>Gênero (seleção única):</p>
<label><input type="radio" name="genero" value="masculino"> Masculino</label>
<label><input type="radio" name="genero" value="feminino"> Feminino</label>
<p>Upload de avatar (apenas imagens):</p>
<input type="file" name="avatar" accept="image/png, image/jpeg, image/gif">
</form>
5. 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
HTML
<form action="/submit" method="post">
<label>Nome: <input type="text" name="name"></label><br>
<!-- Botão de envio -->
<input type="submit" value="Enviar Formulário">
<!-- Botão de limpar -->
<input type="reset" value="Limpar">
<!-- Botão genérico -->
<input type="button" value="Clique Aqui" onclick="alert('Olá!')">
<!-- Botão de imagem -->
<input type="image" src="btn-submit.png" alt="Enviar">
</form>
6. 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
HTML
<form action="/atualizar-perfil" method="post">
<!-- Invisível para os usuários, mas enviado com o formulário -->
<input type="hidden" name="user_id" value="12345">
<input type="hidden" name="token" value="abc123xyz">
<label>Apelido: <input type="text" name="nickname"></label>
<input type="submit" value="Salvar">
</form>
💡 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.
