Tipos de input no HTML

O que são os tipos de input do HTML?

O atributo type de um elemento input escolhe que tipo de controle o navegador desenha, de uma simples caixa de texto a um seletor de data, uma amostra de cor ou um seletor de arquivos. A especificação HTML define 22 palavras-chave, e cada uma nomeia um estado: type=email é o estado Email, type=datetime-local é o estado Local Date and Time, e assim por diante.

É um atributo enumerado, o que obriga a especificação a dizer o que acontece quando o valor é algo que ela não reconhece. E ela diz: o valor padrão por ausência e o valor padrão por invalidez do atributo são ambos o estado Text. Essa única frase é a razão de esta página existir.

Leia com calma e ela cobre duas situações diferentes ao mesmo tempo. Um navegador que não implementou um tipo cai para um campo de texto — e uma palavra-chave que você simplesmente escreveu errado também. As duas produzem uma caixa de texto comum, sem erro, sem aviso no console e sem nada na tela que as diferencie.

Como usar

1. Digite uma palavra-chave na caixa para verificar. Ela começa com um erro de digitação, porque esse é o caso que vale ver primeiro. A ferramenta diz se a especificação define a palavra-chave e, quando não define, no que ela vai virar silenciosamente.
2. Leia a tabela. As 22 palavras-chave com o nome de estado que a especificação dá a cada uma, agrupadas pelo tipo de controle que são. A lista é completa, não uma seleção.
3. Olhe a última coluna. Ela é medida no navegador em que você está lendo, não copiada de uma tabela de compatibilidade. Ela pede cada tipo a um elemento input e lê o que ele diz ser.

Por que uma tabela de compatibilidade é o formato errado para esta pergunta

Quase toda página que responde quais navegadores suportam type=date entrega uma grade de versões. Essa grade fica velha no dia em que é publicada, não sabe qual navegador você usa e muito menos qual os seus usuários usam. Ela responde a uma pergunta sobre o mundo quando você queria uma resposta sobre a sua máquina.

A regra de fallback permite uma resposta melhor. Como um tipo sem suporte se resolve para o estado Text, dá para perguntar direto a um elemento: atribua a propriedade, leia de volta e, se voltar como text, o navegador não aceitou. Três linhas, sem biblioteca, sem farejar versão, e a resposta descreve o navegador que de fato está rodando o código.

É isso que a última coluna faz aqui, e é por isso que ela diz verificando o seu navegador até a página carregar em vez de desenhar um palpite no servidor. O servidor não faz ideia do que você usa; fingir o contrário seria o mesmo erro da grade.

Há uma linha que a verificação não consegue decidir, e a tabela diz isso em vez de esconder. Pedir text devolve text esteja ou não o resto suportado, então aquela linha fica marcada como por definição. Todas as outras são medição de verdade.

O erro de digitação que você nunca vai ver

Das duas coisas que a regra de fallback cobre, o erro de digitação é o que mais dói, porque é inteiramente obra sua e se parece exatamente com sucesso. Escreva type=dat em vez de type=date e você tem um campo de texto. Escreva type=nubmer e você tem um campo de texto. Escreva type=datetime, que já foi uma palavra-chave de verdade e foi removida do padrão, e você tem um campo de texto.

Nada reclama. A página renderiza, o formulário envia, o campo aceita o que você digitar. O que se perde é tudo o que a palavra-chave certa teria dado: o seletor de data, o teclado numérico no celular, a validação embutida, a restrição que impediria enviar um valor absurdo. Num navegador de desktop e em pleno desenvolvimento, um campo de texto onde deveria haver um seletor de data passa semanas despercebido.

É para isso que serve a caixa no topo. Cole o que você escreveu de fato e ela diz se a especificação já ouviu falar daquilo. É uma verificação pequena, e é a única que existe, porque por design o navegador não vai te contar.

Limites assumidos

Suporte não é uma pergunta só. Um navegador pode aceitar um tipo, desenhar um controle para ele e ainda assim se comportar diferente de outro que também aceita: a aparência do seletor de data, se um atributo step é respeitado, como um valor é formatado para o usuário. Esta página responde só à primeira pergunta, a de se o navegador aceitou o tipo. É a que a regra de fallback torna respondível, e não é a história toda.

A tabela também não consegue dizer nada sobre um navegador que não seja o seu. Se você precisa saber o que os seus visitantes recebem, a medição tem de acontecer nos navegadores deles, que é um trabalho diferente do de uma página como esta.

Faltam aqui duas colunas da tabela da própria especificação, e é de propósito. Ela também lista um tipo de dado e um tipo de controle para cada palavra-chave, e ao extraí-las as colunas se deslocaram em pelo menos uma linha: a entrada de file saiu descrevendo um tipo MIME onde vai o tipo de controle. Publicar uma tabela que parece certa e está errada é pior que publicar uma mais curta que está certa, então aqui vão só a palavra-chave e o nome de estado.

Por fim, a especificação muda. Palavras-chave foram acrescentadas ao longo dos anos e pelo menos uma foi removida, então uma lista é uma fotografia do padrão como ele está. A regra de fallback é a parte que não se moveu, e é a que vale lembrar.

Por que é grátis?

A lista é estática e a verificação roda no seu navegador. Não há servidor envolvido, então não há nada para cobrar nem conta para criar.

Nada é enviado e nada é guardado. Recarregue a página e ela terá esquecido o que você digitou.