Tag input do HTML parte 2: Na Parte 1, exploramos os tipos básicos de texto e seleção. Nesta segunda parte, vamos nos aprofundar nos tipos de <input> que utilizam recursos avançados do navegador — como seletores de calendário, cores e controles deslizantes — além dos tipos essenciais para ações e fluxos de dados.
O uso desses tipos otimiza a experiência do usuário (UX), especialmente em dispositivos móveis, e aprimora a semântica do seu formulário.
1. Tipos de Data e Tempo (UX Aprimorada)
O HTML5 introduziu tipos que delegam a seleção de valores complexos (data e hora) para a interface nativa do sistema operacional, melhorando a consistência e a usabilidade.
| type | Função | Formato da Entrada |
date | Permite a seleção de uma data (dia, mês e ano). | AAAA-MM-DD |
time | Permite a seleção de uma hora (hora e minuto). | HH:MM |
month | Permite a seleção de um mês e ano. | AAAA-MM |
week | Permite a seleção de uma semana e ano. | AAAA-W## |
datetime-local | Permite a seleção de data e hora em um único campo. | AAAA-MM-DDThh:mm |
Exemplo:
HTML
<label for="nasc">Data de Nascimento:</label>
<input type="date" id="nasc" name="data_nascimento">
<label for="event">Horário Local do Evento:</label>
<input type="datetime-local" id="event" name="evento_hora">
2. Tipos de Seleção de Valor e Mídia
Esses tipos fornecem controles interativos não textuais.
| type | Função | Atributos Importantes | Exemplo |
color | Abre o seletor de cores nativo do navegador. | value (define a cor padrão, ex: #000000) | <input type="color" name="cor_tema"> |
range | Cria um controle deslizante (slider). | min, max (intervalo) e step (incremento). | <input type="range" name="volume" min="0" max="100" value="50"> |
file | Permite ao usuário selecionar um ou mais arquivos para upload. | accept (filtra tipos de arquivo: ex: image/* ou .pdf). multiple (permite múltiplos arquivos). | <input type="file" name="arquivo_upload" accept=".pdf,.doc"> |
3. Tipos Essenciais de Ação e Meta-Dados
Esses tipos não são para entrada de dados visíveis, mas para controle de fluxo e UX:
| type | Função | Uso Primário |
search | Campo de texto semanticamente otimizado para buscas. | O navegador pode adicionar um botão “X” para limpar o texto. Em mobile, o teclado se adapta. |
tel | Campo para números de telefone. | Em mobile, força a exibição do teclado numérico, sem as restrições de validação do type="number". |
hidden | Campo não visível para o usuário. | Usado para enviar dados importantes que o usuário não deve alterar (ex: IDs de sessão, tokens de segurança) junto com o resto do formulário. |
Exemplo de UX e Controle:
HTML
<input type="search" name="busca" placeholder="Buscar no site...">
<input type="hidden" name="token_seguranca" value="123abc456">
4. Tipos de Botão: <input> vs. <button>
O <input> pode ser usado para criar botões, mas a tag <button> é geralmente preferida por ser mais flexível (permite aninhar HTML, como ícones).
| type | Função (na tag <input>) | Uso |
submit | Envia o formulário. | Deve ser usado para a ação principal do formulário. |
reset | Limpa todos os campos do formulário para o valor inicial. | Uso desaconselhado, pois confunde o usuário. |
button | Botão genérico, não envia o formulário. | Usado para executar funções JavaScript (ex: validar antes de enviar, abrir um modal). |
image | Cria um botão de envio usando uma imagem. | Requer os atributos src e alt. Ao clicar, envia as coordenadas X/Y do clique. |
Exemplo de Botão de Ação (type="button"):
HTML
<input type="button" value="Validar Dados" onclick="alert('Validado')">
✅ Conclusão Tag input do HTML parte 2
A tag <input> é um camaleão do HTML. Ao explorar tipos como date, range, color e os tipos focados em UX como search e tel, você pode criar formulários que se integram perfeitamente com os recursos nativos dos dispositivos. Além disso, o uso estratégico do type="hidden" garante que metadados cruciais de segurança sejam transmitidos de forma invisível. Dominar essa vasta gama de tipos é fundamental para o desenvolvimento de aplicações web modernas e eficientes.
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:
