Tag HTML <input>
A tag <input> é usada em formulários HTML para definir o campo onde o usuário pode inserir dados. Descrição, atributos e exemplos de uso.
A tag <input> é usada dentro do elemento <form> e define campos para a entrada do usuário. O tipo do campo — caixa de texto, caixa de seleção, botão de opção, campo de senha, seletor de arquivo e muito mais — é determinado pelo valor do atributo type. O elemento é vazio: não possui conteúdo de texto e carrega apenas atributos.
<input> pertence ao grupo de elementos de formulário e é uma das tags mais utilizadas em páginas interativas. Quase toda caixa de login, barra de pesquisa e formulário de cadastro é construída com um ou mais elementos <input>.
Para rotular um campo de modo que os usuários (e tecnologias assistivas) saibam para que ele serve, associe-o a uma tag <label>. Para transformar uma entrada em uma ação — enviar ou redefinir o formulário — use um input de submit/reset ou o elemento <button>.
Esta página abrange a sintaxe, todos os valores de type com exemplos executáveis, como os pares name/value são enviados, associação de rótulo e validação HTML integrada.
Sintaxe
A tag <input> é vazia, o que significa que a tag de fechamento não é necessária. Mas em XHTML, a tag (<input>) deve ser fechada (<input/>).
Exemplo da tag HTML <input>:
Exemplo da tag HTML <input>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="get">
<input type="email" name="user_email" placeholder="Enter your email" />
<input type="submit" value="Submit" />
</form>
</body>
</html>Exemplo da tag HTML <input> com a tag HTML <label>:
Exemplo da tag HTML <input> com a tag HTML <label>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.form-group { margin-bottom: 10px; }
</style>
</head>
<body>
<form action="/form/submit" method="get">
<div class="form-group">
<label for="first_name">Your Name:</label>
<input type="text" id="first_name" name="first_name" />
</div>
<div class="form-group">
<label for="last_name">Your Surname:</label>
<input type="text" id="last_name" name="last_name" />
</div>
<div class="form-group">
<label for="user_email">Enter Your E-Mail:</label>
<input type="email" id="user_email" name="user_email" />
</div>
<input type="submit" value="Submit" />
</form>
</body>
</html>Associando um rótulo a um input
Uma caixa de input simples não dá aos usuários nenhuma indicação do que digitar. A tag <label> resolve isso, e faz mais do que apenas exibir texto:
- Leitores de tela anunciam o rótulo quando o input recebe foco, para que usuários de tecnologia assistiva saibam o que o campo espera.
- A área clicável aumenta. Clicar no texto do rótulo foca o input (e alterna uma caixa de seleção ou botão de opção). Isso é uma grande melhoria de usabilidade em caixas de seleção pequenas.
Há duas maneiras de associar um rótulo a um input:
1. Explícita — for corresponde a id. O atributo for do rótulo deve ser igual ao id do input:
<label for="username">Username:</label>
<input type="text" id="username" name="username" />2. Implícita — envolver o input dentro do rótulo. Nenhum id/for é necessário:
<label>
Username:
<input type="text" name="username" />
</label>Prefira a forma explícita quando seu layout CSS separa o rótulo e o campo. De qualquer forma, dê a cada input um rótulo — o atributo placeholder não é um substituto, porque a dica desaparece assim que o usuário começa a digitar.
Atributos
O principal atributo que determina o tipo de campo de input é o type. Se o atributo estiver ausente, o valor padrão é "text".
| Atributo | Valor | Descrição |
|---|---|---|
| accept | audio/* video/* image/* MIME_type | Especifica os tipos de arquivos que podem ser enviados via campo de upload de arquivo. (Usado com type="file"). |
| align | left right top middle bottom | Define o tipo de alinhamento da imagem. (Usado apenas com imagens). Não suportado em HTML5. |
| alt | text | Define o texto alternativo para a imagem. (Usado apenas com imagens). |
| autocomplete | on off | Ativa/desativa o preenchimento automático. Novo atributo em HTML5. |
| autofocus | autofocus | Indica que o campo do formulário deve receber o foco após o carregamento da página. Novo atributo em HTML5. |
| checked | checked | Indica que o elemento deve ser pré-selecionado quando a página carregar. (Usado apenas para <input type = "checkbox"> e <input type = "radio">). |
| disabled | disabled | Indica que o elemento não deve estar disponível para interação do usuário. |
| form | form_id | Indica o formulário (especificado pelo elemento <form>) do elemento de controle. O valor é o identificador (id) do formulário no mesmo documento. Novo atributo em HTML5. |
| formaction | URL | Especifica o endereço para onde os dados do formulário serão enviados ao clicar no botão. (Usado apenas para <input type = "image"> e <input type = "submit">). |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | Determina como os dados do formulário são codificados antes de serem enviados ao servidor. (Usado apenas com <input type="image"> e <input type="submit">). Valores: application/x-www-form-urlencoded (padrão, codifica todos os caracteres), multipart/form-data (sem codificação, usado para upload de arquivos), text/plain (espaços viram +, outros caracteres não são codificados). |
| formmethod | get post | Indica o método de requisição HTTP que será usado ao enviar os dados do formulário. (Usado apenas para <input type = "image"> e <input type = "submit">). get envia os dados do formulário na barra de endereços. post envia os dados ao servidor para processamento. |
| formnovalidate | formnovalidate | Indica que não é necessário verificar a correção dos dados. (Usado apenas para <input type = "submit">). |
| formtarget | _blank _self _parent _top | Especifica onde exibir a resposta após o envio do formulário. (Usado apenas para <input type = "image"> e <input type = "submit">). |
| height | pixels | Define a altura do elemento (usado apenas para <input type = "image">). |
| inputmode | none text decimal numeric tel search email url | Sugere qual layout de teclado virtual exibir em dispositivos touch (por exemplo, numeric exibe um teclado numérico). |
| list | datalist_id | Define uma lista de opções dentre as quais o usuário pode escolher. O valor do atributo é o id do elemento <datalist>. |
| max | number date | Define o valor máximo para inserção de um número ou data. |
| maxlength | number | Define o número máximo de caracteres que o usuário pode inserir. |
| min | number date | Define o valor mínimo para inserção de um número ou data. |
| multiple | multiple | Indica que o usuário pode inserir mais de um valor no elemento (apenas para <input type = "file"> e <input type = "email">). |
| name | text | Define o nome do elemento. (Usado para identificação do formulário). |
| pattern | regular expression | Especifica uma expressão regular segundo a qual os dados no campo do formulário devem ser inseridos e verificados. (Apenas para elementos de controle text, search, tel, url, email e password). |
| placeholder | text | Define uma dica curta que descreve o valor esperado para o campo de input. O usuário vê uma dica no campo de input. Ela desaparece quando o usuário começa a inserir dados ou quando o campo recebe o foco. |
| readonly | readonly | Define que o campo de input é habilitado apenas para leitura. O usuário não pode fazer alterações. |
| required | required | Indica que o campo de input deve ser preenchido antes do envio do formulário. |
| size | number | Define a largura visível do campo de texto em caracteres. (Apenas para text, search, tel, url, email e password). O padrão é 20 caracteres. |
| src | URL | Indica o caminho para a imagem usada como botão "enviar". (Usado apenas para <input type = "image">). |
| step | number | Define o incremento (valor de incremento) para campos numéricos. Usado com os atributos min e max, que definem os valores mínimo e máximo. |
| type | button checkbox color date datetime (deprecated) datetime-local email file hidden image month number password radio range reset search submit tel text time url week | Define o tipo do campo de input. |
| value | text | Define o valor do elemento. |
| width | width | Define a largura do elemento (apenas para <input type = "image">). |
A tag <input> também suporta os Atributos Globais e os Atributos de Evento.
Valores do atributo type
| Valor | Descrição |
|---|---|
| button | Define um botão ativo. |
| checkbox | Caixa de seleção (o usuário pode selecionar mais de uma opção). |
| color | Especifica uma paleta de cores (o usuário pode selecionar valores de cor em hexadecimal). |
| date | Define o campo de input para data do calendário. |
| datetime (deprecated) | Define o campo de input para data e hora. (Obsoleto em HTML5, use datetime-local em vez disso.) |
| datetime-local | Define o campo de input para data e hora sem fuso horário. |
| Define o campo de input para e-mail. | |
| file | Define o controle com o botão Procurar, ao clicar no qual é possível selecionar e carregar o arquivo. |
| hidden | Define um campo de input oculto. Não é visível para o usuário. |
| image | Indica que uma imagem é usada em vez de um botão para enviar dados ao servidor. O caminho para a imagem é indicado pelo atributo src. O atributo alt também pode ser usado para especificar texto alternativo, e os atributos height e width para especificar a altura e largura da imagem. |
| month | Define o campo de seleção de mês, após o qual os dados serão exibidos como ano-mês (por exemplo: 2018-07). |
| number | Define o campo de input para números. |
| password | Define um campo para inserção de senha (os caracteres inseridos são exibidos como asteriscos, pontos ou outros caracteres). |
| radio | Cria um botão de opção (ao escolher um botão de opção, todos os outros serão desativados). |
| range | Cria um controle deslizante para selecionar números em um intervalo especificado. O intervalo padrão é de 0 a 100. O intervalo de números é especificado pelos atributos min e max. |
| reset | Define um botão para redefinir informações. |
| search | Cria um campo de texto para pesquisa. |
| submit | Cria um botão de envio dos dados do formulário (botão "submit"). |
| text | Cria um campo de texto de linha única. |
| time | Especifica um campo numérico para inserção de hora no formato 24 horas (por exemplo, 13:45). |
| url | Cria um campo de input para URL. |
| week | Cria um campo para seleção de semana, após o qual os dados serão exibidos como ano-semana (por exemplo: 2018-W25). |
Exemplos dos tipos de input mais comuns
O valor de type muda a aparência e o comportamento de um input. Aqui estão os que você usará com mais frequência.
Caixas de seleção e agrupamento com name
Uma caixa de seleção permite que o usuário ative ou desative uma opção. Use checked para pré-selecioná-la. Quando várias caixas de seleção compartilham o mesmo name, elas formam um grupo, e cada caixa marcada é enviada separadamente como name=value:
<form>
<label><input type="checkbox" name="topping" value="cheese" checked /> Cheese</label>
<label><input type="checkbox" name="topping" value="bacon" /> Bacon</label>
<label><input type="checkbox" name="topping" value="onion" /> Onion</label>
</form>Enviar com Cheese e Onion marcados envia topping=cheese&topping=onion.
Botões de opção (mesmo name)
Botões de opção que compartilham o mesmo name são mutuamente exclusivos — selecionar um desmarca os outros. Sempre defina um value em cada um para que o servidor saiba qual opção foi selecionada:
<form>
<p>Choose a size:</p>
<label><input type="radio" name="size" value="s" /> Small</label>
<label><input type="radio" name="size" value="m" checked /> Medium</label>
<label><input type="radio" name="size" value="l" /> Large</label>
</form>Upload de arquivo
type="file" adiciona um botão Procurar. Adicione accept para filtrar o seletor de arquivo e multiple para permitir a seleção de mais de um arquivo:
<form>
<label for="avatar">Profile picture:</label>
<input type="file" id="avatar" name="avatar" accept="image/*" />
</form>Número com min, max e step
type="number" exibe um campo numérico com setas de incremento. min/max limitam o intervalo e step define o incremento (use step="0.01" para valores monetários, step="any" para permitir qualquer decimal):
<form>
<label for="qty">Quantity (1–10):</label>
<input type="number" id="qty" name="qty" min="1" max="10" step="1" value="1" />
</form>Controle deslizante de intervalo
type="range" é um controle deslizante para um valor aproximado que o usuário não precisa ver com exatidão. Usa os mesmos atributos min, max e step:
<form>
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="5" value="50" />
</form>Senha
type="password" mascara os caracteres digitados. O valor ainda é enviado em texto simples, portanto o formulário deve ser enviado por HTTPS:
<form>
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd" minlength="8" required />
</form>Como name e value são enviados
Quando um formulário é enviado, o navegador constrói uma string de consulta com pares name=value a partir de seus controles. O papel de value depende do tipo de input:
- Campos similares a texto (
text,email,url,password,number,search,tel):valueé o texto padrão exibido na caixa; o que o usuário digitar substitui esse valor e é enviado. - Radio e checkbox:
valueé o dado enviado apenas quando aquele controle está marcado. Uma caixa desmarcada não envia nada. Por isso, cada opção precisa do seu própriovalue. - Submit e button:
valueé o rótulo impresso no botão. Um botão de submit com nome também envia seu parname=value, o que permite ao servidor identificar qual botão foi pressionado.
Um input sem name nunca é enviado — ainda pode ser útil para scripts no lado do cliente, mas o servidor nunca o vê.
Validação de formulário
Os navegadores podem validar inputs antes do envio do formulário, sem JavaScript. Se um campo falhar, o navegador bloqueia o envio e exibe uma mensagem. As principais ferramentas são:
required— o campo não pode estar vazio.type="email"/type="url"— o valor deve ser um e-mail ou URL sintaticamente válido.pattern— uma expressão regular que o valor deve corresponder (funciona em text, search, tel, url, email, password).min/max/step— limites de intervalo numérico e de data.minlength/maxlength— limites de comprimento de string.
Este exemplo combina todos eles. Tente enviá-lo vazio e depois com dados inválidos:
<!DOCTYPE html>
<html>
<head>
<title>Form validation</title>
<style>
.form-group { margin-bottom: 10px; }
label { display: block; }
</style>
</head>
<body>
<form action="/form/submit" method="post">
<div class="form-group">
<label for="email">Email (required):</label>
<input type="email" id="email" name="email" required />
</div>
<div class="form-group">
<label for="site">Website (must start with https://):</label>
<input type="url" id="site" name="site" pattern="https://.*" placeholder="https://example.com" />
</div>
<div class="form-group">
<label for="zip">ZIP code (5 digits):</label>
<input type="text" id="zip" name="zip" pattern="[0-9]{5}" maxlength="5" required />
</div>
<div class="form-group">
<label for="age">Age (18–99):</label>
<input type="number" id="age" name="age" min="18" max="99" step="1" required />
</div>
<input type="submit" value="Submit" />
</form>
</body>
</html>Para ignorar essa verificação integrada em um botão de submit específico, adicione formnovalidate. Para direcionar um campo com CSS, as pseudo-classes :valid, :invalid e :required correspondem ao estado de validação. Para mais informações sobre como configurar formulários e seu envio, consulte a tag <form>.