Atributos do HTML Input

A propriedade value

value A propriedade especifica o valor inicial do campo de entrada:

Exemplo

<form action="">
 Primeiro nome:<br>
<input type="text" name="firstname" value="Bill">
<br>
 Sobrenome:<br>
<input type="text" name="lastname">
</form>

Experimente você mesmo

A propriedade readonly

readonly A propriedade especifica que o campo de entrada é apenas leitura (não pode ser modificado):

Exemplo

<form action="">
 Primeiro nome:<br>
<input type="text" name="firstname" value="Bill" readonly>
<br>
 Sobrenome:<br>
<input type="text" name="lastname">
</form>

Experimente você mesmo

A propriedade readonly não precisa de valor. Ela é equivalente a readonly="readonly".

A propriedade disabled

disabled A propriedade especifica que o campo de entrada está desativado.

Os elementos desativados são inacessíveis e não podem ser clicados.

Os elementos desativados não serão submetidos.

Exemplo

<form action="">
 Primeiro nome:<br>
<input type="text" name="firstname" value="Bill" disabled>
<br>
 Sobrenome:<br>
<input type="text" name="lastname">
</form>

Experimente você mesmo

A propriedade disabled não precisa de valor. Ela é equivalente a disabled="disabled".

A propriedade size

size A propriedade especifica o tamanho do campo de entrada (em caracteres):

Exemplo

<form action="">
 Primeiro nome:<br>
<input type="text" name="firstname" value="Bill" size="40">
<br>
 Sobrenome:<br>
<input type="text" name="lastname">
</form>

Experimente você mesmo

A propriedade maxlength

maxlength A propriedade especifica o comprimento máximo permitido do campo de entrada:

Exemplo

<form action="">
 Primeiro nome:<br>
<input type="text" name="firstname" maxlength="10">
<br>
 Sobrenome:<br>
<input type="text" name="lastname">
</form>

Experimente você mesmo

Se estabelecer a propriedade maxlength, o controle de entrada não aceitará mais caracteres do que o permitido.

Esta propriedade não fornecerá nenhum feedback. Se precisar alertar o usuário, é necessário escrever código JavaScript.

Note:As restrições de entrada não são infalíveis. O JavaScript oferece muitos métodos para adicionar entradas ilegais. Para restringir a entrada de forma segura, o receptor (servidor) deve verificar os limites ao mesmo tempo.

Propriedades HTML5

O HTML5 adicionou as seguintes propriedades para <input>:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height e width
  • list
  • min e max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

E para <form>, adiciona-se as seguintes propriedades:

  • autocomplete
  • novalidate

Propriedade autocomplete

A propriedade autocomplete determina se o formulário ou campo de entrada deve ser preenchido automaticamente.

Quando o autocomplete está ativado, o navegador preencherá automaticamente os valores com base nas entradas anteriores do usuário.

Dica:Você pode definir o autocomplete do formulário como on, enquanto define um campo de entrada específico como off, e vice-versa.

A propriedade autocomplete é aplicável a <form> e aos seguintes tipos de <input>: text, search, url, tel, email, password, datepickers, range e color.

Exemplo

Formulários HTML com autocomplete ativado:

<form action="action_page.php" autocomplete="on">
   Primeiro nome:<input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   E-mail: <input type="email" name="email" autocomplete="off"><br>
   <input type="submit">
</form>

Experimente você mesmo

Dica:Em alguns navegadores, você pode precisar ativar manualmente a função de conclusão automática.

A propriedade 'novalidate'

A propriedade 'novalidate' pertence às propriedades '<form>'.

Se configurado, a propriedade 'novalidate' define que os dados do formulário não devem ser validados ao serem submetidos.

Exemplo

Indica que o formulário não deve ser validado ao ser submetido:

<form action="action_page.php" novalidate>
   E-mail: <input type="email" name="user_email">
   <input type="submit">
</form>

Experimente você mesmo

A propriedade 'autofocus'

A propriedade 'autofocus' é um atributo booleano.

Se configurado, define que o elemento '<input>' deve obter foco automaticamente ao carregar a página.

Exemplo

Faz com que o campo de entrada 'Primeiro nome' obtenha o foco automaticamente ao carregar a página:

Primeiro nome:<input type="text" name="fname" autofocus>

Experimente você mesmo

A propriedade 'form'

A propriedade 'form' define um ou mais formulários aos quais o elemento '<input>' pertence.

Dica:Para referenciar mais de um formulário, use uma lista de IDs de formulário separados por espaço.

Exemplo

Campos de entrada localizados fora do formulário HTML (mas ainda pertencem ao formulário):

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

Experimente você mesmo

A propriedade 'formaction'

A propriedade 'formaction' define o URL do arquivo que deve ser processado ao submeter o formulário.

A propriedade 'formaction' cobre a propriedade 'action' do elemento '<form>'.

A propriedade 'formaction' é aplicável a tipos 'submit' e 'image'.

Exemplo

Um formulário HTML com dois botões de envio para ações diferentes:

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Enviar"><br>
   <input type="submit" formaction="demo_admin.asp">
   value="Enviar como admin">
</form>

Experimente você mesmo

A propriedade 'formenctype'

A propriedade 'formenctype' define como os dados do formulário (form-data) devem ser codificados ao serem enviados para o servidor (apenas para formulários com 'method="post"').

A propriedade 'formenctype' cobre a propriedade 'enctype' do elemento '<form>'.

A propriedade formenctype se aplica a type="submit" e type="image".

Exemplo

Enviar dados do formulário (form-data) com codificação padrão e codificação "multipart/form-data" (segundo botão de envio):

<form action="demo_post_enctype.asp" method="post">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Enviar">
   <input type="submit" formenctype="multipart/form-data">
   value="Enviar como Multipart/form-data">
</form>

Experimente você mesmo

Propriedade formmethod

A propriedade formmethod define o método HTTP usado para enviar dados do formulário (form-data) para a URL de ação.

A propriedade formmethod sobrepõe a propriedade method do elemento <form>.

A propriedade formmethod se aplica a type="submit" e type="image".

Exemplo

O segundo botão de envio sobrepõe o método HTTP do formulário:

<form action="action_page.php" method="get">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Enviar">
   <input type="submit" formmethod="post" formaction="demo_post.asp">
   value="Enviar usando POST">
</form>

Experimente você mesmo

Propriedade formnovalidate

A propriedade novalidate é um atributo booleano.

Se definida, determina que não haja validação dos elementos <input> ao submeter o formulário.

A propriedade formnovalidate sobrepõe a propriedade novalidate do elemento <form>.

A propriedade formnovalidate pode ser usada com type="submit".

Exemplo

Formulário com dois botões de envio (com e sem validação):

<form action="action_page.php">
   E-mail: <input type="email" name="userid"><br>
   <input type="submit" value="Enviar"><br>
   <input type="submit" formnovalidate value="Enviar sem validação">
</form>

Experimente você mesmo

formtarget attribute

The name or keyword specified by the formtarget attribute indicates where the received response is displayed after submitting the form.

The formtarget attribute overrides the target attribute of the <form> element.

The formtarget attribute can be used with type="submit" and type="image".

Exemplo

This form has two submit buttons, corresponding to different target windows:

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit as normal">
   <input type="submit" formtarget="_blank">
   value="Submit to a new window">
</form>

Experimente você mesmo

height and width attributes

The height and width attributes specify the height and width of the <input> element.

The height and width attributes are only used for <input type="image">.

Note:Always specify the size of the image. If the browser is not aware of the image size, the page may flicker when the image is loaded.

Exemplo

Define an image as a submit button and set the height and width attributes:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

Experimente você mesmo

list attribute

The <datalist> element referenced by the list attribute contains predefined options for the <input> element.

Exemplo

Use <datalist> to set predefined values for the <input> element:

<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist>

Experimente você mesmo

Atributos min e max

Os atributos min e max definem o valor mínimo e máximo do elemento <input>.

Os atributos min e max são aplicáveis aos seguintes tipos de entrada: number, range, date, datetime, datetime-local, month, time e week.

Exemplo

Elemento <input> com valores mínimo e máximo:

Insira uma data antes de 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
 Insira uma data antes de 1980-01-01:
Insira uma data após 2000-01-01:
 Quantidade (entre 1 e 5):
<input type="number" name="quantity" min="1" max="5">

Experimente você mesmo

Propriedade multiple

A propriedade multiple é um atributo booleano.

Se definido, permite que o usuário insira mais de um valor no elemento <input>.

A propriedade multiple é aplicável aos seguintes tipos de entrada: email e file.

Exemplo

Campo de upload de arquivo que aceita múltiplos valores:

Selecione uma imagem:<input type="file" name="img" multiple>

Experimente você mesmo

Propriedade pattern

A propriedade pattern define a expressão regular usada para verificar o valor do elemento <input>.

A propriedade pattern é aplicável aos seguintes tipos de entrada: text, search, url, tel, email e password.

Dica:Use a propriedade title global para descrever o padrão e ajudar o usuário.

Dica:Aprenda mais sobre expressões regulares em nosso tutorial de JavaScript.

Exemplo

O campo de entrada pode conter apenas três letras (sem números ou caracteres especiais):

Código do país: 
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

Experimente você mesmo

Propriedade placeholder

A propriedade placeholder define o aviso (valor de exemplo ou breve descrição do formato) esperado para o campo de entrada.

Este aviso será exibido no campo de entrada antes que o usuário insira um valor.

A propriedade 'placeholder' é aplicável aos seguintes tipos de entrada: text, search, url, tel, email e password.

Exemplo

Campo de entrada com texto de marcador de posição:

<input type="text" name="fname" placeholder="Primeiro nome">

Experimente você mesmo

Propriedade 'required'

A propriedade 'required' é um atributo booleano.

Se definido, determina que o campo de entrada deve ser preenchido antes de submeter o formulário.

A propriedade 'required' é aplicável aos seguintes tipos de entrada: text, search, url, tel, email, password, selectors de data, number, checkbox, radio e file.

Exemplo

Campo de entrada obrigatório:

Username: <input type="text" name="usrname" required>

Experimente você mesmo

Propriedade 'step'

A propriedade 'step' define o intervalo de números válidos do elemento <input>.

Exemplo: Se 'step="3"', os números válidos serão -3, 0, 3, 6, etc.

Dica:A propriedade 'step' pode ser usada juntamente com as propriedades 'max' e 'min' para criar um intervalo de valores válidos.

A propriedade 'step' é aplicável aos seguintes tipos de entrada: number, range, date, datetime, datetime-local, month, time e week.

Exemplo

Campo de entrada com intervalo de números específico e legal:

<input type="number" name="points" step="3">

Experimente você mesmo