<input>

• Categorias de conteúdo Conteúdo de fluxo, listado, enviável, resetável, elemento associado a formulário, conteúdo fraseado.
  Se o atributo type não tiver o valor hidden, elemento rotulável, conteúdo palpável.
• Conteúdo permitido Nenhum, este é um elemento vazio.
• Omissão de tags Deve ter uma tag de abertura e não deve ter uma tag de fechamento.
• Elementos pais permitidos Qualquer elemento que aceite conteúdo fraseado.
• Interface do DOM HTMLInputElement

Atributos

Este elemento inclui os atributos globais.

type

O tipo de controle a ser exibido. O tipo padrão é text, se este atributo não for especificado. Os valores possíveis são:

• button: Um botão sem comportamento padrão.
• checkbox: Uma caixa de marcação. Você deve usar o atributo value para definir o valor enviado por este item. Use o atributo checked para indicar se o item está selecionado por padrão. Você também pode usar o atributo indeterminate para indicar que a caixa de marcação está em um estado indeterminado (na maioria das plataformas, isso desenha uma linha horizontal cortando a caixa).
• color: HTML5 Um controle para especificar cores. A interface de um seletor de cores não tem nenhuma funcionalidade obrigatória a não ser aceitar cores simples em texto (mais informações — em inglês).
• date: HTML5 Um controle para inserir uma data (ano, mês e dia, sem horário).
• datetime: HTML5 Um controle para inserir data e horário (hora, minuto, segundo e fração de segundo) baseado no fuso horário UTC.
• datetime-local: HTML5 Um controle para inserir data e horário, sem fuso horário.
• email: HTML5 Um campo para editar um endereço de e-mail. O valor do campo é validado para estar vazio ou ter um único endereço de e-mail válido antes de ser enviado. As pseudoclasses CSS :valid e :invalid são aplicadas apropriadamente.
• file: Um controle que permite ao usuário selecionar um arquivo. Use o atributoaccept para definir os tipos de arquivo que o controle pode selecionar.
• hidden: Um controle que não é exibido mas cujo valor é enviado ao servidor.
• image: Um botão gráfico para enviar o formulário. Você deve usar o atributo src para definir a fonte da imagem e o atributo alt para definir um texto alternativo. Você pode usar os atributos height e width para definir o tamanho da imagem em pixels.
• month: HTML5 Um controle para inserir mês e ano, sem fuso horário.
• number: HTML5 Um controle para inserir um número de ponto flutuante.
• password: Um campo de texto com uma só linha cujo valor é obscurecido. Use o atributo maxlength para especificar o comprimento máximo do valor que pode ser inserido.
• radio: Um botão de escolha. Você deve usar o atributo value para definir o valor a ser enviado por este item. Use o atributo checked para indicar se este item deve estar selecionado por padrão. Botões de escolha que têm o mesmo valor para o atributo name estão no mesmo "grupo de botões de escolha"; apenas um botão de escolha no grupo pode estar selecionado de cada vez..
• range: HTML5 Um controle para inserir um número cujo valor exato não é importante. Este tipo de controle usa os seguintes valores padrão se os atributos correspondentes não forem especificados:
  • min: 0
  • max: 100
  • value: min + (max-min)/2, ou min se max for menos que min
  • step: 1
• reset: Um botão que faz o conteúdo do formulário voltar a ter seus valores padrão.
• search: HTML5 Um campo de texto com uma só linha para digitar termos de busca; quebras de linha são automaticamente removidas do valor entrado.
• submit: Um botão que envia o formulário.
• tel: HTML5 Um controle para inserir um número de telefone; quebras de linha são automaticamente removidas do valor entrado, mas nenhuma outra sintaxe é imposta. Você pode usar atributos como pattern e maxlength para restringir os valores inseridos no controle. As pseudoclasses CSS :valid e :invalid são aplicadas apropriadamente.
• text: Um campo de texto com uma só linha; quebras de linha são automaticamente removidas do valor entrado.
• time: HTML5 Um controle para inserir um horário sem fuso horário.
• url: HTML5 Um campo para editar uma URL. O valor inserido é validado para ser vazio ou uma URL absoluta válida antes de ser enviado. Quebras de linha e espaços em branco antes e após o valor inserido são automaticamente removidos. Você pode usar atributos como pattern e maxlength para restringir os valores inseridos no controle. As pseudoclasses CSS :valid e :invalid são aplicadas apropriadamente.
• week: HTML5 Um controle para inserir uma data consistindo de ano da semana e número da semana sem fuso horário.

accept

Se o valor do atributo type for file, este atributo indica quais tipos de arquivo o servidor aceita; caso contrário, este atributo é ignorado. O valor deve ser uma lista de especificadores de tipo únicos separados por vírgula:

• Uma extensão de arquivo começando com o caractere STOP (U+002E). (Exemplo: ".jpg,.png,.doc")
• Um tipo MIME válido sem extensões
• audio/* representando arquivos de som HTML5
• video/* representando arquivos de vídeo HTML5
• image/* representando arquivos de imagem HTML5

accesskey HTML 4 only, Obsolete since HTML5

Um único caractere que o usuário pode pressionar para mudar o foco de entrada de dados para este controle. Este atributo é global no HTML5.

mozactionhint

Especifica uma "dica de ação" usada para determinar como rotular a tecla Enter em dispositivos móveis com teclados virtuais. Os valores suportados são go, done, next, search e send; estes valores são automaticamente mapeados para o texto apropriado (maiúsculas e minúsculas não são diferenciadas).

autocapitalize

Este é um atributo não padronizado usado pelo iOS Safari Mobile que controla se e como o texto deveria ser automaticamente capitalizado conforme o usuário insere/edita. Os valores não obsoletos estão disponíveis no iOS 5 e posteriores. Os valores possíveis são:

• none: Desabilitar completamente a capitalização automática.
• sentences: Capitalizar automaticamente a primeira letra das frases.
• words: Capitalizar automaticamente a primeira letra das palavras.
• characters: Capitalizar automaticamente todas as letras.
• on: Obsoleto desde o iOS 5.
• off: Obsoleto desde o iOS 5.

autocomplete HTML5

Este atributo indica se o valor do controle pode ser completado automaticamente pelo navegador. Este atributo é ignorado se o valor do atributo type é hidden, password, checkbox, radio, file ou um tipo de botão (button, submit, reset, image). Os valores possíveis são:

• off: O usuário deve inserir explicitamente um valor neste campo a cada uso, ou o documento implementa seu próprio método de autocompletar; o navegador não completa a entrada automaticamente.
• on: O navegador pode completar automaticamente o valor baseado em valores que o usuário inseriu no passado.

Se o atributo autocomplete não está especificado num elemento <input>, o navegador usa o valor do atributo autocomplete do formulário dono do <input>. O formulário dono deste <input> é o elemento <form> que contém este <input> ou o elemento <form> cujo id é referenciado pelo atributo form do elemento <input>. Para mais informações, veja o atributo autocomplete no elemento <form>.

O atributo autocomplete também controla se o Firefox vai, ao contrário de outros navegadores, persistir o estado dinâmico de desabilitado e marcado (se aplicável) de um <input> entre carregamentos de página. A funcionalidade de persistir é habilitada por padrão. Definir o valor do atributo autocomplete para off desabilita esta funcionalidade; isto funciona mesmo quando o atributo autocomplete não se aplica ao <input> por causa de seu type. Veja bug 654072.

autocorrect

Este é um atributo não padronizado suportado pelo Safari que é usado para controle se a correção automática deveria ser habilitada quando o usuário entra/edita o texto do <input>. Os valores possíveis são:

• on: Habilita correção automática
• off: Desabilita correção automática

autofocus HTML5

Este atributo booleano permite que você especifique que um controle de formulário deve ter o foco de entrada de dados assim que a página carrega, a não ser que o usuário sobrescreva este comportamento digitando em um controle diferente, por exemplo. Apenas um elemento de formulário em um documento pode ter o atributo autofocus, que é booleano. Este atributo não pode ser aplicado se o atributo type estiver definido como hidden (isto é, você não pode colocar automaticamente o foco em um controle escondido).

autosave HTML5

Este atributo deve ser definido com um valor único. Se o valor do atributo type for search, termos de busca anteriores serão persistidos no menu entre carregamentos de página.

checked

Quando o valor do atributo type é radio ou checkbox, a presença deste atributo booleano indica que o controle é selecionado por padrão; caso contrário, este atributo é ignorado.

O Firefox vai, por padrão, ao contrário de outros navegadores, persistir o estado dinâmico de marcado de um <input> entre carregamentos de página. Use o atributo autocomplete para controlar esta funcionalidade.

disabled

Este atributo booleano indica que o controle de formulário não está disponível para interação. Em particular o evento click não será disparado em controles desabilitados. Além disso, o valor de um controle desabilitado não é enviado com o formulário.

O Firefox vai, por padrão, ao contrário de outros navegadores, persistir o estado dinâmico de desabilitado de um <input> entre carregamentos de página. Use o atributo autocomplete para controlar esta funcionalidade.

form HTML5

O elemento <form> ao qual o elemento <input> está associado (seu formulário dono). O valor do atributo deve ser um id de um elemento <form>. Este atributo permite que você coloque elementos <input> em qualquer lugar num documento, não apenas como descendentes de seus elementos <form>. Um <input> só pode estar associado a um único formulário.

formaction HTML5

A URI de um programa que processa a informação enviada pelo elemento, se ele for um botão ou uma imagem de envio de formulário. Se especificado, ele sobrescreve o atributo action do formulário dono do elemento.

formenctype HTML5

Se o elemento for um botão ou uma imagem de envio de formulário, este atributo especifica o tipo de conteúdo que deve ser usado para enviar o formulário para o servidor. Os valores possíveis são:

• application/x-www-form-urlencoded: O valor padrão se o atributo não for especificado.
• multipart/form-data: Use este valor se você estiver usando um elemento <input> com o atributo type definido como file.
• text/plain

Se este atributo for especificado, ele sobrescreve o atributo enctype do formulário dono do elemento.

formmethod HTML5

Se o elemento for um botão ou uma imagem de envio de formulário, este atributo especifica o método HTTP que o navegador deve usar para enviar o formulário. Os valores possíveis são:

• post: Os dados do formulário são incluídos no corpo do formulário e enviados para o servidor.
• get: Os dados do formulário são acrescentados ao URI do atributo form, com um '?' como separador, e o URI resultante é enviado ao servidor. Use este método quando o formulário não tem efeitos colaterais e contém somente caracteres ASCII.

Se especificado, este atributo sobrescreve o atributo method do formulário dono do elemento.

formnovalidate HTML5

Se o elemento for um botão ou uma imagem de envio de formulário, este atributo booleano especifica que o formulário não deve ser validado quando enviado. Se especificado, este atributo sobrescreve o atributo novalidate do formulário dono do elemento.

formtarget HTML5

Se o elemento for um botão ou uma imagem de envio de formulário, este atributo é um nome ou palavra-chave indicando onde mostrar a resposta recebida após a submissão do formulário. Este é o nome de, ou palavra-chave para, um contexto de navegação (por exemplo aba, janela ou frame inline). Se especificado, este atributo sobrescreve o atributo target do formulário dono do elemento. As seguintes palavras-chave têm significado especial:

• _self: Carrega a resposta nom mesmo contexto de navegação que o atual. Este é o valor padrão se o atributo não for especificado.
• _blank: Carrega a resposta num novo contexto de navegação anônimo.
• _parent: Carrega a resposta no contexto de navegação pai do atual. Se não houver pai, esta opção tem o mesmo comportamento de _self.
• _top: Carrega a resposta no contexto de navegação raiz (isto é, o contexto de navegação que é ancestral do atual e não tem pai). Se não houver pai, esta opção tem o mesmo comportamento de _self.

height HTML5

Se o valor do atributo type for image, este atributo define a altura da imagem mostrada para o botão.

incremental

Este é um atributo não padronizado suportado pelo Safari que é aplicado somente quando o type é search. Se o atributo estiver presente, independentemente do valor que ele tiver, o <input> dispara eventos search conforme o usuário edita o texto do campo. Este evento somente é disparado um tempo após a última tecla ter sido pressionada; este tempo é definido pela implementação e novas digitações zeram o contador de tempo. Em outras palavras, o disparo do evento é filtrado (debounced). Se o atributo não estiver presente, o evento search só é disparado quando o usuário iniciar explicitamente uma busca (por exemplo, pressionando a tecla Enter enquanto estiver no campo).

inputmode HTML5

Uma dica para o navegador de qual teclado deve ser mostrado. Este atributo se aplica quando o valor do atributo type é text, password, email ou url. Os valores possíveis são:

• verbatim: Conteúdo alfanumérico que não seja prosa, como nomes de usuário e senhas.
• latin: Conteúdo no alfabeto latino na língua preferida do usuário, com auxílios de entrada como predição de texto habilitados. Para interações humano-computador como caixas de busca.
• latin-name: Como latin, mas para nomes humanos.
• latin-prose: Como latin, mas com auxílios de entrada mais agressivos. Para comunicações entre humanos como mensagens instantâneas ou email.
• full-width-latin: Como latin-prose, mas para as línguas secundárias do usuário.
• kana: Entrada em kana ou romaji, tipicamente hiragana, usando caracteres de largura total, com suporte à conversão para kanji. Para entrada de texto em língua japonesa.
• katakana: Entrada em katakana, usando caracteres de largura total, com suporte à conversão para kanji. Para entrada de texto em língua japonesa.
• numeric: Entrada numérica, incluindo teclas para os dígitos de 0 a 9, o caractere separador de milhar preferido pelo usuário e o caractere para indicar números negativos. Para códigos numéricos como números de cartão de crédito. Para números de verdade, prefira usar <input type="number">
• tel: Entrada de números de telefone, incluindo as teclas asterisco e cerquilha. Use <input type="tel"> se possível em vez disso.
• email: Entrada de email. Use <input type="email"> se possível em vez disso.
• url: Entrada de URLs. Use <input type="url"> se possível em vez disso.

list HTML5

Identifica uma lista de opções pré-definidas de sugestões para o usuário. O valor deve ser o id de um elemento <datalist> no mesmo documento. O navegador mostrará apenas opções que são valores válidos para este elemento. Este atributo é ignorado quando o valor do atributo type é hidden, checkbox, radio, file ou um tipo de botão.

max HTML5

O valor máximo (numérico ou data) para este item, que não deve ser menor que seu valor mínimo (atributo min).

maxlength

Se o valor do atributo type for text, email, search, password, tel ou url, este atributo especifica o número máximo de caracteres (em pontos de código Unicode) que o usuário pode inserir; para outros tipos de controle, este atributo é ignorado. Seu valor pode exceder o do atributo size. Se não for especificado, o usuário pode inserir uma quantidade ilimitada de caracteres. Especificar um valor negativo resulta no comportamento padrão, isto é, o usuário vai poder inserir um número ilimitado de caracteres. Esta regra só é validada quando o valor do atributo é modificado.

min HTML5

O valor mínimo (númerico ou data) para este item, que não deve ser maior do que seu máximo (atributo max).

minlength HTML5

Se o valor do atributo type for text, email, search, password, tel ou url, este atributo especifica o número mínimo de caracteres (em pontos de código Unicode) que o usuário pode inserir; para outros tipos de controle, este atributo é ignorado.

multiple HTML5

Este atributo booleano indica se o usuário pode inserir mais de um valor. Ele é aplicado quando o atributo type está definido como email ou file; em outros casos, é ignorado.

name

O nome do controle, que é enviado junto com os dados do formulário.

pattern HTML5

Uma expressão regular usada para validar o valor do controle. O padrão deve casar com o valor completo da entrada, não apenas uma parte. Use o atributo title para descrever o padrão para ajudar o usuário. Este atributo é aplicado quando o valor do atributo type é text, search, tel, url ou email; caso contrário ele é ignorado. A linguagem da expressão regular é a mesma do JavaScript. O padrão não deve estar entre barras.

placeholder HTML5

Uma dica para o usuário do que ele pode inserir no controle. O texto do atributo não deve conter quebras de linha. Este atributo é aplicado quando o valor do atributo type é text, search, tel, url ou email; caso contrário, ele é ignorado.

Nota: Não use o atributo placeholder no lugar de um elemento <label>. Os propósitos de cada um são diferentes: o atributo <label> descreve o papel o elemento do formulário, isto é, ele indica que tipo de informação é esperada. Já o atributo placeholder é uma dica sobre o formato que o conteúdo deveria ter. Há casos em que o atributo placeholder nunca é exibido para o usuário, portanto o formulário deve ser inteligível sem ele.

readonly

Este atributo booleano indica que o usuário não pode modificar o valor do controle.

HTML5 Este atributo é ignorado se o valor do atributo type for hidden, range, color, checkbox, radio, file ou um tipo de botão.

required HTML5

Este atributo especifica que o usuário deve preencher o campo com um valor antes de enviar o formulário. Ele não pode ser usado quando o atributo type está definido como hidden, image ou um tipo de botão (submit, reset ou button). As pseudoclasses CSS :optional e :required serão aplicadas ao campo como for apropriado.

selectionDirection HTML5

A direção na qual a seleção ocorreu. Vale forward se a seleção foi feita no mesmo sentido da escrita do idioma usado ou backward se a seleção foi feita na direção oposta. Pode ainda ser none se a direção da seleção não for conhecida.

size

O tamanho inicial do controle. Este valor é em pixels a não ser que o valor do atributo type seja text ou password. Neste caso, este valor é um número inteiro de caracteres. A partir do HTML5, este atributo é aplicado apenas quando o atributo type está definido como text, search, tel, url, email ou password; caso contrário, ele é ignorado. Além disse, o tamanho deve ser maior que zero. Se você não especificar um tamanho, o valor padrão 20 é usado.

spellcheck HTML5

Definir o valor deste atributo como true indica que o elemento deve passar por um corretor ortográfico e gramatical. O valor default indica que o elemento deve agir de acordo com seu comportamento padrão, possivelmente baseado no valor do atributo spellcheck de seu elemento pai. O valor false indica que o elemento não deve ser verificado.

src

Se o valor do atributo type for image, este atributo especifica uma URI para a localização de uma imagem a ser exibida no botão gráfico; caso contrário, este atributo é ignorado.

step HTML5

Trabalha junto com os atributos min e max para limitar os incrementos em que valores numéricos ou datas podem ser alterados. Seu valor pode ser any ou um número de ponto flutuante positivo. Se o valor não for any, o controle aceita somente valores múltiplos valor do incremento maiores que o mínimo.

tabindex element-specific in HTML 4, global in HTML5

A posição do elemento na ordem de navegação pela tecla Tab no documento atual.

usemap HTML 4 only, Obsolete since HTML5

O nome de um elemento <map> para ser usado como um mapa de imagem.

value

O valor inicial do controle. Este atributo é opcional exceto quando o valor do atributo type for radio ou checkbox.
Note que, quando a página é recarregada, Gecko and IE ignorarão o valor especificado no código HTML se o valor tiver sido alterado antes do recarregamento.

width HTML5

Se o valor do atributo type for image, este atributo define a largura da imagem exibida para o botão.

x-moz-errormessage

Essa extensão da Mozilla permite que você especifique a mensagem de erro a ser exibida quando um campo não valida com sucesso.

Notas

Entradas de arquivo

Você não pode definir o valor de um seletor de arquivos a partir de um script; fazer algo como o seguinte não tem efeito:

var e = getElementById("algumaEntradaDeArquivo");
e.value = "foo";

Mensagens de erro

Se você quiser que o Firefox mostre uma mensagem de erro personalizada quando a validação de um campo falha, você pode usar o atributo x-moz-errormessage para isso:

<input type="email" x-moz-errormessage="Por favor, especifique um endereço de e-mail.">

Note, no entanto, que isso não é padronizado e não terá efeito em outros navegadores.

Exemplos

Uma caixa de entrada simples

<!-- Um campo básico -->
<input type="text" name="input" value="Digite aqui">

Um caso de uso comum

<!-- Um formulário comum que inclui tags input -->
<form action="getform.php" method="get">
    Nome: <input type="text" name="nome" /><br />
     Sobrenome: <input type="text" name="sobrenome" /><br />
        E-mail: <input type="email" name="email_usuario" /><br />
<input type="submit" value="Enviar" />
</form>

Usando o mozactionhint no Firefox mobile

Você pode usar o atributo mozactionhint para especificar o texto para o rótulo da tecla Enter no teclado virtual quando seu formulário é exibido no Firefox mobile. Por exemplo, para ter um rótulo "Próximo", você pode fazer o seguinte:

<input type="text" mozactionhint="next" name="sometext" />

O resultado é:

Especificações

Compatibilidade de navegadores

[1]: Envio de arquivos não funcionava no Safari Mobile para iOS 8.0 e 8.0.1. O bug foi corrigido no iOs 8.0.2.

Safari Mobile para iOS aplica um estilo padrão de opacity: 0.4 para elementos textuais desabilitados. Outros navegadores principais não usam esse estilo padrão específico atualmente.

No Safari Mobile para iOS, definir display: block num <input> com type="date", type="time", type="datetime-local" ou type="month" faz com que o texto dentro do <input> fique verticalmente desalinhado.

A partir do Chrome v39, um <input type="date"> estilizado com display: table-cell; width: 100%; terá um min-width imposto pelo Chrome e não poderá ficar mais estreito do que essa largura mínima. Veja o bug do Chromium #346051.

Notas do Gecko

O Firefox vai, por padrão, ao contrário de outros navegadores, persistir o estado dinâmico de desabilitado e (se aplicável) checado de um <input> entre carregamentos de página. Definir o valor do atributo autocomplete como off desabilita essa funcionalidade; isso funciona mesmo quando o atributo autocomplete não seria aplicado normalmente ao <input> por causa de seu type. Veja bug 654072.

A partir do Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6), o Firefox para Android permite aos usuários capturar imagens usando suas câmeras e enviá-las, sem a necessidade de sair do navegador. Desenvolvedores web podem implementar essa funcionalidade simplesmente especificando o valor do atributo accept para "image/*" nos seus campos file desta forma:

<input type="file" accept="image/*">

Firefox para Android define uma background-image padrão gradiente em todos os campos com type="text", type="file", type="button" e type="submit". Isso pode ser desabilitado usando background-image: none.

Firefox para Android também define uma border padrão em todos os elementos <input type="file">.

Localização

Os valores permitidos para certos tipos de <input> dependem do locale. Em alguns locales, 1,000.00 é um número válido, enquanto que em outros a maneira correta de inserir este número é 1.000,00.

Firefox usa as seguintes heurísticas para determinar o locale para validar a entrada do usuário (pelo menos para type="number"):

• Tentar a língua especificada por um atributo 'lang'/'xml:lang' no elemento ou qualquer um de seus ancestrais;
• Tentar a língua especificada por qualquer cabeçalho HTTP Content-Language ou
• Se nenhum for especificado, usar o locale do navegador.

Veja também

• Outros elementos relacionados a formulários: <form>, <button>, <datalist>, <legend>, <label>, <select>, <optgroup>, <option>, <textarea>, <keygen>, <fieldset>, <output>, <progress> e <meter>.
• Cross-browser HTML5 placeholder text