Docs executáveis de HTML: Tipos de input

Q: Quantos tipos de input existem no HTML?

22: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url e week. Um tipo desconhecido ou ausente se comporta como text.

Q: Qual é o tipo de input padrão no HTML?

text. Um sem type, ou com um tipo que o navegador não conhece, é um campo de texto de uma linha.

Q: Devo usar type="number" para telefone ou CEP?

Não. number é para quantidades: ele adiciona botões de incremento e rejeita o +, os espaços e os hífens que os telefones têm. Use type="tel" para telefones e type="text" com inputmode="numeric" para códigos como CEP e número de cartão.

Q: Qual formato o input type date usa?

O valor é sempre YYYY-MM-DD, como 2026-09-24, seja qual for o formato que o usuário vê na tela. A exibição segue a localidade do usuário; o valor enviado e lido pelo script não.

Q: A tag input precisa de tag de fechamento?

Não. é um elemento vazio: escreva . Um de fechamento é inválido, e a barra de auto fechamento em é permitida, mas não faz nada.

A tag input e seus tipos

<input> é um campo de formulário, e o seu atributo type decide o tipo. A mesma tag cria uma caixa de texto, um controle deslizante, um seletor de data ou um seletor de cor. Teste cada campo abaixo e aperte Submit para ver o que o formulário envia:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Input types</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: grid; grid-template-columns: 90px auto; align-items: center; gap: 8px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>text <input type="text" name="text" value="Hello"></label>
    <label>email <input type="email" name="email" value="ada@example.com"></label>
    <label>password <input type="password" name="password" value="secret"></label>
    <label>number <input type="number" name="number" value="3" min="1" max="10"></label>
    <label>range <input type="range" name="range" min="0" max="100" value="40"></label>
    <label>date <input type="date" name="date" value="2026-09-24"></label>
    <label>color <input type="color" name="color" value="#2563eb"></label>
    <label>checkbox <input type="checkbox" name="checkbox" value="on" checked></label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

<input> é um elemento vazio, então não tem tag de fechamento. O seu name é a chave com que o valor é enviado, e value é o valor inicial. Um type ausente ou digitado errado gera um campo de texto simples.

Todos os tipos de input do HTML

`type`	O que é	Observações
`text`	Uma linha de texto	O padrão
`password`	Texto mostrado como pontos	Não é criptografado por si só; envie por HTTPS
`email`	Um endereço de e-mail	Valida o formato; tecla `@` no teclado do celular
`url`	Um endereço web	Precisa começar com um esquema como `https://`
`tel`	Um número de telefone	Teclado numérico no celular, sem verificação de formato
`search`	Uma caixa de busca	Muitas vezes mostra um botão de limpar
`number`	Um número	Botões de incremento, `min`, `max`, `step`
`range`	Um controle deslizante	Impreciso de propósito; o valor é um número
`date`	Uma data	O valor é `YYYY-MM-DD`
`time`	Uma hora do dia	O valor é `HH:MM` (24 horas)
`datetime-local`	Data e hora, sem fuso horário	O valor é `YYYY-MM-DDTHH:MM`
`month`	Um ano e mês	Não é suportado em todos os navegadores
`week`	Um ano e número da semana	Não é suportado em todos os navegadores
`color`	Um seletor de cor	O valor é `#rrggbb` em minúsculas
`checkbox`	Uma caixa liga e desliga	Veja checkbox no HTML
`radio`	Uma escolha dentro de um grupo	Veja radio button no HTML
`file`	Um seletor de arquivo	`accept`, `multiple`
`hidden`	Um valor enviado, mas não mostrado	Para IDs e tokens
`submit`	Um botão de envio	`<button type="submit">` é mais flexível
`reset`	Um botão de limpar	Raramente é uma boa ideia
`button`	Um botão que não faz nada sozinho	Para JavaScript
`image`	Um botão de envio desenhado como imagem	Também envia as coordenadas do clique

Tipos de texto e teclados de celular

email, url, tel, search e text parecem todos uma caixa de texto no computador. A diferença está na validação e, no celular, no teclado que abre. A borda neste exemplo fica verde ou vermelha conforme o navegador avalia o valor:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text types</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    input { display: block; font: inherit; margin-top: 4px; padding: 4px 8px; border: 2px solid #9ca3af; border-radius: 6px; }
    input:valid { border-color: #16a34a; }
    input:invalid { border-color: #dc2626; }
  </style>
</head>
<body>
  <form>
    <label>email <input type="email" name="email" value="ada@example"></label>
    <label>url <input type="url" name="site" value="example.com"></label>
    <label>tel <input type="tel" name="phone" value="+1 555 0100"></label>
    <label>text with inputmode="numeric" <input type="text" name="zip" inputmode="numeric" pattern="[0-9]{5}" value="02134"></label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

ada@example é um e-mail válido para o navegador: ele só verifica se há texto, @ e um domínio, não se o domínio tem ponto. A verificação de verdade acontece no servidor.
example.com não é uma url válida, porque não tem esquema. https://example.com é.
tel aceita qualquer coisa. Os formatos de telefone variam demais entre países, então não há verificação nativa; adicione um pattern se precisar.
inputmode="numeric" pede ao celular um teclado de dígitos sem os problemas de type="number", e por isso é a escolha certa para CEP, códigos de uso único e números de cartão.

number e range

Os dois aceitam min, max e step. number é para valores exatos; range é um controle deslizante para valores em que o número exato importa menos. Um range não mostra número, então combine-o com um <output>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>number and range</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 12px; }
  </style>
</head>
<body>
  <form>
    <label>Tickets
      <input type="number" name="tickets" min="1" max="8" step="1" value="2">
    </label>
    <label>Price per kg
      <input type="number" name="price" min="0" step="0.01" value="4.99">
    </label>
    <label>Volume
      <input type="range" name="volume" id="volume" min="0" max="100" step="5" value="60">
      <output for="volume" id="shown">60</output>
    </label>
    <button type="submit">Submit</button>
  </form>

  <script>
    const volume = document.querySelector('#volume');
    volume.addEventListener('input', () => {
      document.querySelector('#shown').textContent = volume.value;
    });
  </script>
</body>
</html>

step vale 1 por padrão em number, então um campo de preço sem step="0.01" rejeita 4.99 quando o formulário é enviado. No JavaScript, input.value é sempre uma string; use input.valueAsNumber para obter um número.

Datas e horas

Os tipos de data e hora abrem o seletor próprio do navegador. O que o usuário vê segue a sua localidade (09/24/2026, 24.09.2026), mas o valor tem sempre o mesmo formato fixo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Date and time</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    code { background: #e5e7eb; padding: 2px 6px; }
  </style>
</head>
<body>
  <form>
    <label>date <input type="date" name="date" value="2026-09-24" min="2026-01-01"></label>
    <label>time <input type="time" name="time" value="14:30"></label>
    <label>datetime-local <input type="datetime-local" name="when" value="2026-09-24T14:30"></label>
  </form>
  <p>Values: <code id="out"></code></p>

  <script>
    const form = document.querySelector('form');
    const show = () => {
      document.querySelector('#out').textContent =
        [...form.elements].map((f) => f.value).join('  |  ');
    };
    form.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Esse formato fixo é o que o servidor recebe e o que o JavaScript lê, então você nunca precisa interpretar "24.09.2026". min e max usam o mesmo formato. datetime-local não tem fuso horário: se isso importa, converta no servidor usando o fuso do usuário.

color e file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>color and file</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 12px; }
    #swatch { display: inline-block; width: 60px; height: 24px; border-radius: 4px; vertical-align: middle; }
  </style>
</head>
<body>
  <form>
    <label>Theme color <input type="color" name="color" id="color" value="#16a34a"></label>
    <p>Preview: <span id="swatch"></span></p>
    <label>Photos <input type="file" name="photos" accept="image/*" multiple></label>
    <button type="submit">Submit</button>
  </form>

  <script>
    const color = document.querySelector('#color');
    const paint = () => { document.querySelector('#swatch').style.background = color.value; };
    color.addEventListener('input', paint);
    paint();
  </script>
</body>
</html>

accept="image/*" limita o seletor de arquivos a imagens (e oferece a câmera no celular); ele também aceita extensões, como accept=".pdf,.docx". É só uma dica para o seletor, então verifique o tipo do arquivo no servidor. multiple permite vários arquivos. Um upload de verdade também precisa de method="post" e enctype="multipart/form-data" no formulário.

Sugestões com datalist

Um <datalist> dá a um campo de texto uma lista de sugestões e ainda aceita qualquer valor. Ligue os dois com o atributo list:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>datalist</title>
</head>
<body>
  <form>
    <label>Language
      <input name="language" list="languages" placeholder="Start typing">
    </label>
    <datalist id="languages">
      <option value="JavaScript"></option>
      <option value="Python"></option>
      <option value="Java"></option>
      <option value="Rust"></option>
    </datalist>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Digite "ja" no campo para ver as sugestões correspondentes. Ao contrário de um select, o usuário pode digitar um valor que não está na lista.

Atributos que funcionam nos inputs

Atributo	Faz
`name`	A chave com que o valor é enviado
`value`	O valor inicial
`placeholder`	Uma dica mostrada enquanto o campo está vazio (não é um label)
`required`	Precisa ser preenchido antes do envio
`disabled`	Não pode ser usado e não é enviado
`readonly`	Não pode ser editado, mas é enviado
`autocomplete`	O que preencher automaticamente: `email`, `name`, `current-password`, `one-time-code`, `off`
`min`, `max`, `step`	Limites para números, ranges, datas e horas
`minlength`, `maxlength`	Limites de tamanho para os tipos de texto
`pattern`	Uma expressão regular que o valor inteiro precisa satisfazer
`inputmode`	Qual teclado mostrar no celular: `numeric`, `decimal`, `email`, `tel`, `url`
`list`	O `id` de um `<datalist>`
`multiple`	Vários valores, para `email` e `file`
`accept`	Tipos de arquivo para `file`

Erros comuns

type="number" para telefones, CEPs ou números de cartão. Não são quantidades. Use tel ou text com inputmode="numeric".
Um campo de preço sem step="0.01". Valores decimais falham na validação.
Usar placeholder como label. Ele some assim que o usuário digita.
Contar com accept ou type="email" para segurança. São conveniências; o servidor verifica de novo.
type="month" ou type="week" sem alternativa. Alguns navegadores mostram um campo de texto simples.
Uma tag de fechamento </input>. <input> é vazio.

Perguntas frequentes

Quantos tipos de input existem no HTML?

22: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url e week. Um tipo desconhecido ou ausente se comporta como text.

Qual é o tipo de input padrão no HTML?

text. Um <input> sem type, ou com um tipo que o navegador não conhece, é um campo de texto de uma linha.

Devo usar type="number" para telefone ou CEP?

Não. number é para quantidades: ele adiciona botões de incremento e rejeita o +, os espaços e os hífens que os telefones têm. Use type="tel" para telefones e type="text" com inputmode="numeric" para códigos como CEP e número de cartão.

Qual formato o input type date usa?

O valor é sempre YYYY-MM-DD, como 2026-09-24, seja qual for o formato que o usuário vê na tela. A exibição segue a localidade do usuário; o valor enviado e lido pelo script não.

A tag input precisa de tag de fechamento?

Não. <input> é um elemento vazio: escreva <input type="text" name="city">. Um </input> de fechamento é inválido, e a barra de auto fechamento em <input /> é permitida, mas não faz nada.

Conceitos relacionados