Tipos de campo que economizam JavaScript
Um seletor de data, uma barra deslizante, um seletor de cor: coisas que antes exigiam bibliotecas inteiras de JavaScript hoje são um único atributo type.
Estudar esta lição interativa →Antes de tipos de campo específicos existirem, um seletor de data decente exigia baixar uma biblioteca de JavaScript, configurá-la, e ainda torcer para ela funcionar direito no celular. Hoje, boa parte disso é um único atributo type, com o próprio navegador desenhando (e adaptando ao sistema operacional) o controle inteiro.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. date, range, color e datalist, cada um resolvendo um problema que antes pedia JavaScript.
date
type="date"Abre um calendário nativo. O valor entregue é sempre no formato aaaa-mm-dd, mesmo que a exibição siga o idioma do navegador.
range
type="range"Uma barra deslizante entre min e max. Ótima para faixas aproximadas (volume, orçamento máximo), não para um valor exato que a pessoa precise digitar, como o número de pessoas de uma reserva (para isso, use type="number").
color
type="color"Abre o seletor de cor do sistema operacional e devolve um valor hexadecimal, como #f97316.
datalist
list="id-da-datalist"Conecta um input comum a uma lista de sugestões (autocomplete). Diferente do select, a pessoa pode digitar qualquer valor, a lista é só uma ajuda.
Um exemplo de produto real: o campo de data de nascimento de qualquer cadastro sério usa type="date", evitando o clássico erro de digitação de datas em formato livre (31/02, por exemplo). Um controle de orçamento máximo numa busca de imóveis costuma usar type="range". E um campo de "cidade" com sugestões (mas que ainda aceita qualquer texto digitado) é o padrão exato de uma datalist.
Um range sozinho não mostra, visualmente, o número escolhido, apenas a posição da barra: se isso importa para quem preenche, é preciso um pouco de JavaScript exibindo o valor ao lado (uma das raras pontes honestas com JS que valem a pena, mesmo neste curso de HTML). Uma datalist não restringe o valor às opções sugeridas, ela só sugere, então não é substituto de um select quando você precisa garantir que só um conjunto fechado de valores seja aceito. E o valor de um date chega sempre em aaaa-mm-dd por baixo dos panos, independente de como aparece na tela, isso importa se você for processar essa data depois.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Ajuste os dois tipos de campo.