Atributos de entrada HTML
Este capítulo descreve os diferentes atributos para o <input>elemento HTML.
O atributo de valor
O atributo input valueespecifica um valor inicial para um campo de entrada:
Exemplo
Campos de entrada com valores iniciais (padrão):
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
O atributo readonly
O readonlyatributo input especifica que um campo de entrada é somente leitura.
Um campo de entrada somente leitura não pode ser modificado (no entanto, um usuário pode tabular até ele, realçá-lo e copiar o texto dele).
O valor de um campo de entrada somente leitura será enviado ao enviar o formulário!
Exemplo
Um campo de entrada somente leitura:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
O atributo desabilitado
O disabledatributo input especifica que um campo de entrada deve ser desabilitado.
Um campo de entrada desativado é inutilizável e não pode ser clicado.
O valor de um campo de entrada desabilitado não será enviado ao enviar o formulário!
Exemplo
Um campo de entrada desativado:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
O atributo tamanho
O atributo input sizeespecifica a largura visível, em caracteres, de um campo de entrada.
O valor padrão para sizeé 20.
Observação: o sizeatributo funciona com os seguintes tipos de entrada: texto, pesquisa, tel, url, email e senha.
Exemplo
Defina uma largura para um campo de entrada:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" size="50"><br>
<label
for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
size="4">
</form>
O atributo maxlength
O maxlengthatributo de entrada especifica o número máximo de caracteres permitidos em um campo de entrada.
Nota: Quando a maxlengthfor definido, o campo de entrada não aceitará mais do que o número especificado de caracteres. No entanto, esse atributo não fornece nenhum feedback. Portanto, se você deseja alertar o usuário, deve escrever o código JavaScript.
Exemplo
Defina um comprimento máximo para um campo de entrada:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" size="50"><br>
<label
for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
maxlength="4" size="4">
</form>
Os atributos mínimo e máximo
A entrada mine maxos atributos especificam os valores mínimo e máximo para um campo de entrada.
Os atributos mine funcionam com os seguintes tipos de entrada: número, intervalo, data, data e hora local, mês, hora e semana.max
Dica: Use os atributos max e min juntos para criar um intervalo de valores válidos.
Exemplo
Defina uma data máxima, uma data mínima e um intervalo de valores legais:
<form>
<label for="datemax">Enter a date before
1980-01-01:</label>
<input type="date" id="datemax" name="datemax"
max="1979-12-31"><br><br>
<label for="datemin">Enter a date
after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin"
min="2000-01-02"><br><br>
<label for="quantity">Quantity
(between 1 and 5):</label>
<input type="number" id="quantity"
name="quantity" min="1" max="5">
</form>
O atributo múltiplo
O atributo input multipleespecifica que o usuário tem permissão para inserir mais de um valor em um campo de entrada.
O multipleatributo funciona com os seguintes tipos de entrada: email e arquivo.
Exemplo
Um campo de upload de arquivo que aceita vários valores:
<form>
<label for="files">Select files:</label>
<input
type="file" id="files" name="files" multiple>
</form>
O atributo padrão
O atributo input patternespecifica uma expressão regular com a qual o valor do campo de entrada é verificado quando o formulário é enviado.
O patternatributo funciona com os seguintes tipos de entrada: texto, data, pesquisa, url, tel, email e senha.
Dica: Use o atributo global title para descrever o padrão para ajudar o usuário.
Dica: saiba mais sobre expressões regulares em nosso tutorial de JavaScript.
Exemplo
Um campo de entrada que pode conter apenas três letras (sem números ou caracteres especiais):
<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
O atributo placeholder
O atributo input placeholderespecifica uma dica curta que descreve o valor esperado de um campo de entrada (um valor de amostra ou uma breve descrição do formato esperado).
A dica curta é exibida no campo de entrada antes que o usuário insira um valor.
O placeholderatributo funciona com os seguintes tipos de entrada: texto, pesquisa, url, tel, email e senha.
Exemplo
Um campo de entrada com um texto de espaço reservado:
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
O atributo necessário
O requiredatributo input especifica que um campo de entrada deve ser preenchido antes de enviar o formulário.
O requiredatributo funciona com os seguintes tipos de entrada: text, search, url, tel, email, password, date pickers, number, checkbox, radio e file.
Exemplo
Um campo de entrada obrigatório:
<form>
<label for="username">Username:</label>
<input
type="text" id="username" name="username" required>
</form>
O atributo step
O atributo input stepespecifica os intervalos de números legais para um campo de entrada.
Exemplo: if step="3", os números legais podem ser -3, 0, 3, 6, etc.
Dica: Este atributo pode ser usado junto com os atributos max e min para criar um intervalo de valores válidos.
O stepatributo funciona com os seguintes tipos de entrada: número, intervalo, data, data e hora local, mês, hora e semana.
Exemplo
Um campo de entrada com intervalos de números legais especificados:
<form>
<label for="points">Points:</label>
<input
type="number" id="points" name="points" step="3">
</form>
Nota: As restrições de entrada não são infalíveis e o JavaScript oferece muitas maneiras de adicionar entrada ilegal. Para restringir a entrada com segurança, ela também deve ser verificada pelo receptor (o servidor)!
O atributo de foco automático
O autofocusatributo input especifica que um campo de entrada deve obter foco automaticamente quando a página for carregada.
Exemplo
Deixe o campo de entrada "Primeiro nome" receber o foco automaticamente quando a página for carregada:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Os atributos de altura e largura
A entrada heighte widthos atributos especificam a altura e a largura de um <input
type="image">elemento.
Dica: Sempre especifique os atributos de altura e largura para imagens. Se a altura e a largura forem definidas, o espaço necessário para a imagem será reservado quando a página for carregada. Sem esses atributos, o navegador não sabe o tamanho da imagem e não pode reservar o espaço apropriado para ela. O efeito será que o layout da página mudará durante o carregamento (enquanto as imagens são carregadas).
Exemplo
Defina uma imagem como o botão de envio, com atributos de altura e largura:
<form>
<label for="fname">First name:</label>
<input
type="text" id="fname" name="fname"><br><br>
<label for="lname">Last
name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
O atributo lista
listO atributo input refere-se a um <datalist>elemento que contém opções pré-definidas para um elemento <input>.
Exemplo
Um elemento <input> com valores pré-definidos em um <datalist>:
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
O atributo de preenchimento automático
O atributo input autocompleteespecifica se um formulário ou campo de entrada deve ter o preenchimento automático ativado ou desativado.
O preenchimento automático permite que o navegador preveja o valor. Quando um usuário começa a digitar em um campo, o navegador deve exibir opções para preencher o campo, com base nos valores digitados anteriormente.
O autocompleteatributo funciona com <form>os seguintes <input>tipos: texto, pesquisa, url, tel, email, senha, datepickers, intervalo e cor.
Exemplo
Um formulário HTML com preenchimento automático ativado e desativado para um campo de entrada:
<form action="/action_page.php" autocomplete="on">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname"
name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
Dica: Em alguns navegadores, pode ser necessário ativar uma função de preenchimento automático para que isso funcione (procure em "Preferências" no menu do navegador).
Exercícios HTML
Formulário HTML e elementos de entrada
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
Para obter uma lista completa de todas as tags HTML disponíveis, visite nossa Referência de tags HTML .