Etiqueta <input> de HTML

Definição e uso

<input> A tag define um campo de entrada onde o usuário pode inserir dados.

<input> O elemento é o elemento mais importante do formulário.

<input> O elemento pode ser exibido de várias maneiras, dependendo de propriedade type.

A seguir estão diferentes tipos de entrada:

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">(valor padrão)
  • <input type="time">
  • <input type="url">
  • <input type="week">

ver propriedade type，para verificar os exemplos de cada tipo de entrada!

Exemplo

Formulário HTML contendo três campos de entrada; dois campos de texto e um botão de envio:

<form action="/action_page.php">
  <label for="fname">Nome:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Sobrenome:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Enviar">
</form>

Experimente pessoalmente

Dicas e comentários

Dica:Sempre use a tag <label> para definir rótulos para os seguintes elementos:

<input type="text">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="password">

Atributo

Atributo Valor Descrição
accept
  • Extensão do arquivo
  • audio/*
  • video/*
  • image/*
  • Tipo de mídia

Define o tipo de arquivo a ser submetido pelo upload de arquivo.

Define os filtros de tipos de arquivo que o usuário pode selecionar no diálogo de entrada de arquivo (aplicável apenas a type="file").
alt texto Define o texto alternativo da imagem (aplicável apenas a type="image").
autocomplete
  • on
  • off
 Define se o elemento <input> deve habilitar a conclusão automática.
autofocus autofocus Define que o elemento <input> deve obter o foco automaticamente ao carregar a página.
checked checked Define que o elemento <input> deve ser pré-selecionado ao carregar a página (aplicável a type="checkbox" ou type="radio").
dirname inputname.dir Define a direção do texto a ser submetido.
disabled disabled Define que o elemento <input> deve ser desativado.
form ID do formulário Define o formulário ao qual pertence o elemento <input>.
formaction URL Define o URL do arquivo a ser processado pelo controle de entrada de formulário ao submeter o formulário (aplicável a type="submit" e type="image").
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
 Define como os dados do formulário devem ser codificados ao serem enviados para o servidor (apenas para type="submit" e type="image").
formmethod
  • get
  • post
 Define o método HTTP usado para enviar dados para a URL de ação (apenas para type="submit" e type="image").
formnovalidate formnovalidate Define que o formulário não deve ser validado ao submetê-lo.
formtarget
  • _blank
  • _self
  • _parent
  • _top
Nome do frame 		Define onde será exibida a resposta recebida após o envio do formulário (apenas para type="submit" e type="image").
height pixels Define a altura do elemento <input> (apenas para type="image").
list datalist_id Referencia o elemento <datalist> pré-definido que contém opções para o <input>.
max
  • número
  • Data
 Define o valor máximo do elemento <input>.
maxlength número Define o número máximo de caracteres permitidos no elemento <input>.
min
  • número
  • Data
 Define o valor mínimo do elemento <input>.
minlength número Define o número mínimo de caracteres necessários no elemento <input>.
multiple multiple Define que o usuário pode inserir múltiplos valores no elemento <input>.
name texto Define o nome do elemento <input>.
pattern Expressão regular Define a expressão regular para verificar o valor do elemento <input>.
placeholder texto Define uma breve dica de valor esperado para o elemento <input>.
popovertarget ID do elemento Define o elemento popup a ser chamado (apenas para type="button").
popovertargetaction
  • hide
  • show
  • toggle
 Define o que acontece quando você clica no botão (apenas para type="button").
readonly readonly Define que o campo de entrada é somente leitura.
required required Define que o campo de entrada deve ser preenchido antes de submeter o formulário.
size número Define a largura do elemento <input> (em número de caracteres).
src URL URL da imagem usada como botão de envio (apenas para type="image").
passo
  • número
  • qualquer
 Define o intervalo de números legais no campo de entrada.
type
  • button
  • checkbox
  • color
  • date
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week
 Define o tipo do elemento <input> a ser exibido.
value texto Define o valor do elemento <input>.
largura pixels Define a largura do elemento <input> (apenas para type="image").

Atributos globais

<input> A tag também suporta Atributos globais do HTML.

Atributos de evento

<input> A tag também suporta Atributos de evento no HTML.

Configurações CSS padrão

Nenhum.

Suporte de navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte

Páginas relacionadas

Tutorial de HTML:

Manual de referência do HTML DOM: