HTML Input Atributos

O value Atributo

O value atributo especifica o valor inicial para um campo de entrada:

O readonly atributo

O readonly atributo especifica que o campo de entrada é apenas de leitura (cannot be changed) :

O readonly atributo não precisa de um valor. É o mesmo que escrever readonly = "somente leitura".

A disabled Atributo

A disabled atributo especifica que o campo de entrada é desativado.

Um elemento com deficiência é un-utilizável e un-clicável.

elementos com deficiência não serão submetidas.

A disabled atributo não precisa de um valor. É o mesmo que escrever disabled = "desativado".

O size Atributo

O size atributo especifica o tamanho (in characters) para o campo de entrada:

O maxlength Atributo

O maxlength atributo especifica o comprimento máximo permitido para o campo de entrada:

Com um maxlength atributo, o controlo de entrada não vai aceitar mais do que o número permitido de caracteres.

O atributo não fornece qualquer feedback. Se você quiser alertar o usuário, você deve escrever o código JavaScript.

Atributos HTML5

HTML5 aditados os following atributos para <input> :

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

e os following atributos para <form> :

• autocomplete
• novalidate

O autocomplete Atributo

O autocomplete atributo especifica se um campo de formulário ou entrada deve ter autocomplete ligado ou desligado.

Quando autocomplete está ligado, o navegador valores completar automaticamente com base nos valores que o usuário tenha entrado antes.

Tip: É possível ter autocomplete "on" para a forma, e "off" para campos de entrada específicos, ou vice-versa.

O autocomplete atributo trabalha com <form> e os seguintes <input> tipos: text, search, url, tel, email, password, datepickers, range, and color .

Exemplo

Um formulário HTML com autocomplete em (and off for one input field) :

<form action="action_page.php" autocomplete="on">
  First name:<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>

Tente você mesmo "

Dica: Em alguns navegadores pode ser necessário ativar o autocomplete função para que isso funcione.

O novalidate Atributo

O novalidate atributo é um <form> atributo.

Quando presente, novalidate especifica que os dados do formulário não deve ser validada quando submetidos.

Exemplo

Indica que a forma não é para ser validado em apresentar:

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

Tente você mesmo "

O autofocus Atributo

O autofocus atributo é um atributo booleano.

Quando presente, ele especifica que um <input> elemento deve receber automaticamente o foco quando a página é carregada.

Exemplo

Deixe o "First name" campo de entrada receber automaticamente o foco quando a página é carregada:

First name:<input type="text" name="fname" autofocus>

Tente você mesmo "

O form Atributo

A form atributo especifica uma ou mais formas de um <input> elemento pertence.

Tip: Para se referir a mais de uma forma, use uma lista separada por espaços de form ids .

Exemplo

Um input field localizado fora do formulário HTML (but still a part of the form) :

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

Last name: <input type="text" name="lname" form="form1">

Tente você mesmo "

O formaction Atributo

O formaction atributo especifica a URL de um arquivo que irá processar o controle de entrada quando o formulário é enviado.

O formaction atributo substitui a action atributo do <form> elemento.

O formaction atributo é usado com type = "submit" e digite = "image".

Exemplo

Um formulário HTML com dois botões de envio, com 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="Submit"><br>
  <input type="submit" formaction="demo_admin.asp"
  value="Submit as admin">
</form>

Tente você mesmo "

O formenctype Atributo

O formenctype atributo especifica como o formulário-dados devem ser codificados quando enviá-lo para o servidor (only for forms with method="post" ) .

O formenctype atributo substitui o enctype atributo do <form> elemento.

O formenctype atributo é usado com type="submit" e type="image" .

Exemplo

Enviar form-data que está codificado padrão (the first submit button) , e codificado como "multipart/form-data" (the second submit button) :

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

Tente você mesmo "

O formmethod Atributo

O formmethod atributo define o método HTTP para o envio form-data para a URL ação.

O formmethod atributo substitui o method atributo do <form> elemento.

O formmethod atributo pode ser usado com type="submit" e type="image" .

Exemplo

O segundo botão de enviar substitui o método HTTP da forma:

<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="Submit">
  <input type="submit" formmethod="post" formaction="demo_post.asp"
  value="Submit using POST">
</form>

Tente você mesmo "

O formnovalidate Atributo

O novalidate atributo é um atributo booleano.

Quando presente, ele especifica que o <input> elemento não deve ser validada quando submetidos.

O formnovalidate atributo substitui a novalidate atributo do <form> elemento.

O formnovalidate atributo pode ser usado com type="submit" .

Exemplo

Um formulário com dois botões de envio (with and without validation) :

<form action="action_page.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formnovalidate value="Submit without validation">
</form>

Tente você mesmo "

O formtarget Atributo

O formtarget atributo especifica um nome ou uma palavra-chave que indica onde a exibir a resposta que é recebido após a submissão do formulário.

O formtarget atributo substitui a target atributo do <form> elemento.

O formtarget atributo pode ser usado com type = "submit" e digite = "image".

Exemplo

Um formulário com dois botões de envio, com diferentes janelas alvo:

<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>

Tente você mesmo "

Os height e width Atributos

Os height atributos e largura especificar a altura ea largura de um <input> elemento.

Os height e width atributos são usados apenas com <input type="image"> .

Exemplo

Definir uma imagem como o botão enviar, com altura e largura atributos:

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

Tente você mesmo "

A list Atributo

A list atributo refere-se a um <datalist> elemento que contém opções pré-definidas para um <input> elemento.

Exemplo

Um <input> elemento com os valores pré-definidos num <datalist> :

<input list="browsers">

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

Tente você mesmo "

Os min e max Atributos

O min e max atributos especificar o valor mínimo e máximo para um <input> elemento.

A min e max atributos de trabalho com os seguintes tipos de entrada: number, range, date, datetime, datetime-local, month, time and week .

Exemplo

<Entrada> elementos com valores mínimo e máximo:

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

Tente você mesmo "

O multiple Attribute

O multiple atributo é um atributo booleano.

Quando presente, ele especifica que o utilizador tem permissão para introduzir mais do que um valor na <input> elemento.

O multiple atributo funciona com os seguintes tipos de entrada: email e file .

Exemplo

Um campo de upload de arquivo que aceita vários valores:

Select images: <input type="file" name="img" multiple>

Tente você mesmo "

O pattern Atributo

O pattern atributo especifica uma expressão regular que o <input> valor do elemento de é verificado contra.

O pattern atributo funciona com os seguintes tipos de entrada: text, search, url, tel, email, and password .

Dica: Use o mundial título atributo para descrever o padrão para ajudar o usuário.

Tip: Saiba mais sobre expressões regulares em nosso tutorial JavaScript.

Exemplo

Um campo de entrada que pode conter apenas três letras (no numbers or special characters) :

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

Tente você mesmo "

O placeholder Atributo

O placeholder atributo especifica um indício de que descreve o valor esperado de um campo de entrada (a sample value or a short description of the format) .

A sugestão é exibida no campo de entrada antes de o utilizador introduzir um valor.

O placeholder atributo funciona com os seguintes tipos de entrada: text, search, url, tel, email, and password .

Exemplo

Um campo de entrada com um espaço reservado para texto:

<input type="text" name="fname" placeholder="First name">

Tente você mesmo "

O required atributo

O required atributo é um atributo booleano.

Quando presente, ele especifica que um campo de entrada deve ser preenchido antes de apresentar o formulário.

O required atributo funciona com os seguintes tipos de entrada: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file .

Exemplo

Um campo de entrada exigido:

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

Tente você mesmo "

O step Atributo

O step atributo especifica os intervalos de número legal para um <input> elemento.

Exemplo: se etapa = "3", os números poderiam ser legais -3, 0, 3, 6, etc.

Tip: O step atributo pode ser utilizado em conjunto com a max e min atributos para criar uma gama de valores legais.

O step atributo funciona com os seguintes tipos de entrada: number, range, date, datetime, datetime-local, month, time and week .

Exemplo

Um campo de entrada com intervalos de números legais especificados:

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

Tente você mesmo "

Teste-se com exercícios!

Exercício 1 » Exercício 2» Exercício 3 » Exercício 4»