Formulários HTML
Aprenda formulários HTML: elemento form, action e method (GET vs POST), labels, inputs, textarea, select, botões e validação HTML5.
Um formulário HTML coleta entradas do usuário e as envia para um servidor para processamento. Um formulário é um contêiner — o elemento <form> — que contém um ou mais controles, como campos de texto, caixas de seleção, botões de rádio, listas suspensas e botões de envio. Esta página aborda o elemento <form> em si, os controles que você coloca dentro dele, como os dados são enviados (GET vs POST) e como rotular e validar entradas.
O elemento <form>
Todo formulário começa com a tag <form>. Os controles que o usuário preenche ficam entre as tags de abertura <form> e fechamento </form>. Dois atributos fazem a maior parte do trabalho:
action— a URL que recebe os dados do formulário quando o usuário o envia.method— o método HTTP usado para enviar os dados, sejaGETouPOST.
<form action="/subscribe" method="POST">
<!-- form controls go here -->
<button type="submit">Subscribe</button>
</form>Se você omitir action, o formulário é enviado de volta à URL da página atual. Se você omitir method, o navegador usa GET por padrão.
Rotulando controles
Cada input deve ter um <label>. Conecte o label ao seu controle atribuindo ao controle um id e apontando o atributo for do label para esse mesmo id:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Text Input Example</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<label for="surname">Surname:</label>
<input type="text" id="surname" name="surname" />
</form>
</body>
</html>Use um <label> real em vez de texto simples como Name:<br />. Um label conectado é lido em voz alta por leitores de tela e aumenta a área clicável, fazendo com que clicar no label foque o campo. Saiba mais no capítulo sobre a tag HTML <label>.
O elemento HTML <input>
O elemento <input> é o controle de formulário mais comum. Seu atributo type muda sua aparência e comportamento — text, email, password, number, checkbox, radio, file, submit e muitos outros.
Vamos ver alguns dos tipos de input.
Input de texto
<input type="text"> cria um campo de texto de linha única. O atributo name é a chave enviada ao servidor junto com o valor do campo.
Exemplo de input de texto:
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" />
</form>Input de botão de rádio
<input type="radio"> permite que o usuário escolha exatamente uma opção de um conjunto. Os botões de rádio compartilham o mesmo name, de modo que selecionar um desmarca os outros do grupo.
Exemplo de input de botão de rádio:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Radio Button Example</h2>
<form>
<input type="radio" id="football" name="game" value="football" checked />
<label for="football">Football</label>
<input type="radio" id="basketball" name="game" value="basketball" />
<label for="basketball">Basketball</label>
</form>
</body>
</html>Input de envio
<input type="submit"> (ou um <button type="submit">) envia os dados do formulário para o manipulador do formulário — a URL do servidor indicada no atributo action do formulário.
Exemplo de input de envio:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>HTML Form Example</h2>
<form action="/form/submit" method="POST">
<label for="firstname">Name:</label>
<input type="text" id="firstname" name="firstname" value="Tom" />
<label for="lastname">Surname:</label>
<input type="text" id="lastname" name="lastname" value="Brown" />
<label for="age">Age:</label>
<input type="number" id="age" name="age" value="21" />
<input type="submit" value="Submit" />
</form>
<p>Click the Submit button to send the form data to the action page.</p>
</body>
</html>Outros controles de formulário
Os inputs não são os únicos controles. Esses elementos oferecem texto de múltiplas linhas, listas suspensas, botões personalizados e uma forma de agrupar campos relacionados.
Texto de múltiplas linhas com <textarea>
Use <textarea> para textos mais longos, como comentários ou mensagens. Ao contrário do <input>, ele tem tags de abertura e fechamento separadas, e rows/cols definem seu tamanho visível.
<form>
<label for="message">Your message:</label>
<textarea id="message" name="message" rows="4" cols="40"></textarea>
</form>Listas suspensas com <select>
Um elemento <select> cria uma lista suspensa. Cada escolha é um <option>; o value é o que é enviado, e selected define o padrão.
<form>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="uk" selected>United Kingdom</option>
<option value="ca">Canada</option>
</select>
</form>O elemento <button>
O elemento <button> é mais flexível do que <input type="submit"> porque pode conter HTML (texto, ícones). Sempre defina seu type: submit envia o formulário, reset limpa-o, e button não faz nada sozinho (use-o com JavaScript).
<form>
<button type="submit">Send</button>
<button type="reset">Clear</button>
</form>Agrupamento com <fieldset> e <legend>
Agrupe controles relacionados em um <fieldset> e descreva o grupo com um <legend>. Isso desenha uma borda rotulada e ajuda os usuários de leitores de tela a entender como os campos se relacionam — útil para coisas como um bloco de endereço ou um conjunto de botões de rádio.
<form>
<fieldset>
<legend>Contact details</legend>
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" />
</fieldset>
</form>O atributo action
O atributo action especifica a URL para onde os dados do formulário são enviados quando o formulário é submetido. Quando o usuário clica no botão de envio, o navegador empacota os valores dos controles e os envia para essa URL.
<form action="/form/submit">O atributo target
O atributo target define onde o resultado do formulário é aberto — em uma nova aba do navegador, em um frame ou na janela atual.
_self(padrão) abre o resultado na janela atual._blankabre o resultado em uma nova aba do navegador.
<form action="/form/submit" target="_blank">O atributo method
O atributo method define o método HTTP — GET ou POST — usado para enviar os dados do formulário. A escolha afeta onde os dados vão e o que a requisição significa.
Exemplo do método GET:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>The method Attribute With the GET Method</h2>
<form action="/form/submit" method="GET">
<label for="g-name">Name:</label>
<input type="text" id="g-name" name="name" value="Tom" />
<label for="g-surname">Surname:</label>
<input type="text" id="g-surname" name="surname" value="Brown" />
<label for="g-age">Age:</label>
<input type="number" id="g-age" name="age" value="21" />
<input type="submit" value="Submit" />
</form>
</body>
</html>Após o envio, os dados aparecem na query string da URL, como /form/submit?name=Tom&surname=Brown&age=21.
Exemplo do método POST:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>The method Attribute With the Post Method</h2>
<form action="/form/submit" method="POST">
<label for="p-name">Name:</label>
<input type="text" id="p-name" name="name" value="Tom" />
<label for="p-surname">Surname:</label>
<input type="text" id="p-surname" name="surname" value="Brown" />
<label for="p-age">Age:</label>
<input type="number" id="p-age" name="age" value="21" />
<input type="submit" value="Submit" />
</form>
</body>
</html>Com POST, os dados trafegam no corpo da requisição, portanto não aparecem na URL.
GET vs POST
Os dois métodos enviam dados de maneiras diferentes e sinalizam intenções diferentes ao servidor.
GET acrescenta os dados do formulário à URL como uma query string:
- Os dados ficam visíveis na barra de endereços e podem ser marcados como favoritos ou compartilhados.
- As URLs têm um limite de comprimento (geralmente cerca de 2048 caracteres), portanto GET não é adequado para grandes volumes de dados.
- GET é idempotente — repetir a mesma requisição não deve alterar nada no servidor. Use-o para pesquisas e filtros que apenas leem dados.
Não use GET para enviar senhas ou outros dados sensíveis — eles acabam visíveis na URL, no histórico do navegador e nos logs do servidor.
POST envia os dados no corpo da requisição:
- Os dados não são exibidos na URL e não há limite prático de tamanho, portanto POST lida com cargas grandes e uploads de arquivos.
- Envios via POST não podem ser marcados como favoritos.
- POST é destinado a requisições que alteram o estado do servidor (criar uma conta, publicar um comentário, fazer um pedido).
Regra geral: use GET para ler ou consultar algo, e POST para criar ou alterar algo.
Validando entradas do usuário
O HTML5 pode verificar as entradas no navegador antes que o formulário seja enviado — sem JavaScript necessário. Adicione estes atributos aos seus controles:
| Atributo | O que faz |
|---|---|
required | O campo deve ser preenchido antes que o formulário possa ser enviado. |
minlength / maxlength | Número mínimo / máximo de caracteres para campos de texto. |
min / max | Menor / maior valor permitido para números, intervalos e datas. |
pattern | Uma expressão regular com a qual o valor deve corresponder. |
type | Alguns tipos validam o formato automaticamente: email, url, number, tel. |
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Form Validation Example</h2>
<form action="/form/submit" method="POST">
<label for="user">Username (3–12 letters):</label>
<input type="text" id="user" name="user"
required minlength="3" maxlength="12" pattern="[A-Za-z]+" />
<label for="mail">Email:</label>
<input type="email" id="mail" name="mail" required />
<label for="qty">Quantity (1–10):</label>
<input type="number" id="qty" name="qty" min="1" max="10" />
<input type="submit" value="Submit" />
</form>
</body>
</html>Se um valor não cumprir uma regra, o navegador bloqueia o envio e exibe uma mensagem. Para desativar essa verificação integrada, adicione o atributo novalidate ao <form>.
O atributo enctype
O atributo enctype define como os dados do formulário são codificados quando enviados com POST:
application/x-www-form-urlencoded— o padrão; nomes e valores dos campos são codificados por URL. Adequado para formulários de texto comuns.multipart/form-data— necessário quando o formulário contém um upload de arquivo (<input type="file">), para que os dados binários do arquivo sejam enviados corretamente.
<form action="/upload" method="POST" enctype="multipart/form-data">
<label for="photo">Profile photo:</label>
<input type="file" id="photo" name="photo" />
<button type="submit">Upload</button>
</form>Outros atributos
Abaixo estão outros atributos úteis do <form>:
| Atributo | Descrição |
|---|---|
accept-charset | O conjunto de caracteres usado no formulário enviado (padrão: o charset da página). |
autocomplete | Se o navegador pode preencher automaticamente o formulário (padrão: on). |
enctype | Como os dados enviados são codificados (padrão: application/x-www-form-urlencoded). |
name | Um nome usado para identificar o formulário. |
novalidate | Instrui o navegador a não validar o formulário ao enviar. |
Capítulos relacionados
- Tag HTML
<form> - Tag HTML
<input> - Tag HTML
<label> - Tag HTML
<textarea> - Tag HTML
<select> - Tag HTML
<button> - Tag HTML
<fieldset>