# Guia para os novos tipos de input HTML5

> Novos tipos de inputs HTML5: email, tel, date, color e mais. Aproveite validação nativa e UX drasticamente melhorada em formulários modernos. Use já!

URL: https://dpw.dev/html/html5-inputs-novos-tipos-campos/  
Publicado em: 2015-01-01  
Categoria: html  
Tags: html, formularios  
Autor: Tárcio Zemel

> **Dica:** Este artigo foi publicado há anos atrás; à época, os inputs mostrados eram realmente uma grande novidade. Pedimos sua compreensão quanto a alguns termos usados.

## Vantagens dos novos tipos de input HTML5

Os benefícios dos novos tipos de campos em HTML5 são inúmeros, tanto para desenvolvedores web, quanto para as pessoas que acessam e os têm presentes e implementados corretamente.

Para começar, os **novos tipos de inputs HTML** reduzem a dependência de scripts (_server side_ e _client side_) para a validação de tipos de dados comuns, como datas, endereços de e-mail e URLs -- mas, de maneira alguma, as boas práticas de segurança "tradicionais" devem ser deixados de lado e/ou negligenciadas.

Para desenvolvedores web com foco em interfaces para mobile, as vantagens podem ser ainda mais surpreendentes, já que muitos dos novos tipos de campos facilitam a interação de pessoas que usam dispositivos móveis como smartphones e tablets.

Por exemplo, agora um formulário HTML pode indicar ao agente de usuário (UA) de um dispositivo móvel para tipos de teclados específicos, dependendo do tipo de entrada (_input_) que esteja sendo solicitada.

Veja um exemplo de uso de inputs de HTML4 (à esquerda) para inserir datas em um formulário web e; à direita, um input do tipo `date` de HTML5:

<figure>
  <img src="/images/blog/html5-inputs-novos-tipos-campos/html5-inputs-novos-tipos-input-date.webp" alt="HTML5 input type date" />
  <figcaption>O teclado do smartphone muda automaticamente para o selecionador nativo de datas!</figcaption>
</figure>

Veja mais exemplos:

<figure>
  <img src="/images/blog/html5-inputs-novos-tipos-campos/html5-inputs-novos-tipos-campos-email.webp" alt="HTML5 input type email" />
  <figcaption>HTML5 novo input: email</figcaption>
</figure>

<figure>
  <img src="/images/blog/html5-inputs-novos-tipos-campos/html5-inputs-novos-tipos-campos-url.webp" alt="HTML5 input type url" />
  <figcaption>HTML5 novo input: url</figcaption>
</figure>

Se você está se perguntando o que acontece quando um navegador que não suporta esses novos tipos de campo acessa uma página em que eles estão presentes, o que acontece é bem simples: o tipo específico de campo HTML5 é ignorado e, em seu lugar, é usado o tradicional `text`.

Quer dizer, você já pode usar os novos tipos de input _hoje_ que, ainda assim, sua página não vai "quebrar", continuando sendo válida e usável até em navegadores que não dão suporte ao novos tipos de input.

## Novos tipos de campos HTML5

| input type | Descrição | Marcação HTML |
| --- | --- | --- |
| `date` | Um controle para inserir data | `<input type="date">` |
| `datetime-local` | Data e hora segundo a hora local | `<input type="datetime-local">` |
| `month` | Mês e ano | `<input type="month">` |
| `time` | Hora do dia | `<input type="time">` |
| `week` | Permite escolher a semana e ano | `<input type="week">` |
| `color` | Permite selecionar um [valor de cor](http://www.w3.org/TR/html-markup/datatypes.html#form.data.color) (hexadecimal) | `<input type="color">` |
| `email` | Valida o valor informado usando o formato padrão de email | `<input type="email">` |
| `tel` | Valida formato de números verificando num padrão | `<input type="tel">` |
| `search` | Procura um conjunto de dados (como num elemento HTML `<datalist>`) | `<input type="search">` |
| `range` | Controle deslizante para escolher um valor entre 2 números | `<input type="range">` |
| `number` | Aceita somente números | `<input type="number">` |
| `url` | Aceita somente o formato de URL | `<input type="url">` |

## Demo dos novos tipos de input HTML5

<figure>
  <img src="/images/blog/html5-inputs-novos-tipos-campos/html5-inputs-novos-tipos-campos-demonstracao-demo.webp" alt="HTML5 novos inputs: demonstração" />
  <figcaption>](http://cdn.sixrevisions.com/demos/0345-new_html5_form_input_types/new-html5-form-input-types.html) Clique na imagem para ver uma demonstração dos novos tipos de campo HTML5</figcaption>
</figure>

Existe uma página com a demonstração de todos os novos campos mostrados na tabela acima: [veja a página com demonstração dos novos > **Dica:** Por falar em tipos de input HTML, confira nosso artigo relacionado [UX em validação de formulários com HTML e CSS](/ux/ux-validacao-formularios-html-css/).

Esses **novos tipos de input HTML5** ajudam a desenvolver formulários web mais centrados nas pessoas, proporcionando uma melhor experiência, agilidade no preenchimento e trazendo outros benefícios.

Perceba que, apesar de ser comum enfatizar seus benefícios em dispositivos móveis, não há dúvidas de que a pessoa acessando uma página com esses tipos de campos por qualquer meio também será beneficiada.

Como visto, não há problema algum em já implementá-los imediatamente, já que não há o perigo de as páginas que os contêm não ficarem inacessíveis.

Certamente o fato de os browsers mais antigos/ruins interpretarem o desconhecido como um campo do tipo texto foi uma boa estratégia e garante que o site esteja adequado a diversas situações e diversos casos e tipos de acesso.

Portanto, esteja à vontade para usar os **novos tipos de campos de HTML5** em seus projetos web e, caso saiba de alguma novidade/mudança na especificação, sintaxe ou forma de uso, por favor, avise nos comentários para que o artigo esteja com informações corretas para consulta.

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml