Tag HTML <form>
A tag <form> cria um formulário web. Agrupa campos e controles e os envia via os atributos action e method.
A tag <form> é usada para adicionar formulários HTML à página web para entrada de dados do utilizador. Os formulários são usados para enviar ao servidor os dados submetidos pelo utilizador. Os dados são enviados ao pressionar o botão "Submit". Se não houver esse botão, as informações são enviadas quando a tecla "Enter" é pressionada.
Sintaxe
A tag <form> vem em pares. O conteúdo é escrito entre as tags de abertura (<form>) e de fechamento (</form>).
O elemento <form> contém outras tags HTML que definem o método de entrada de dados:
- A tag
<input>define um campo de entrada do utilizador. - A tag
<textarea>define um campo de formulário para criar uma área de entrada de múltiplas linhas. - A tag
<button>é usada para colocar um botão dentro de um formulário. - A tag
<select>configura um controle para criar uma caixa de lista suspensa. - A tag
<option>define os itens na lista suspensa definida pela tag<select>. - A tag
<optgroup>agrupa dados relacionados na lista suspensa definida pela tag<select>. - A tag
<fieldset>agrupa visualmente os elementos dentro do formulário definido pela tag<form>. - A tag
<label>define o rótulo de texto para o elemento<input>. - A tag
<legend>define o cabeçalho para o elemento<fieldset>.
Exemplo da tag HTML <form>:
Exemplo da tag HTML <form>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="POST" >
<label for="fname">Name</label>
<input type="text" name="FirstName" id="fname" value="Mary"/><br /><br />
<label for="lname">Surname</label>
<input type="text" name="LastName" id="lname" value="Thomson"/><br /><br />
<input type="submit" value="Submit"/>
</form>
</body>
</html>Resultado
Exemplo da tag HTML <form> com as tags <input> e <label>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="POST" >
<label for="fname">Name</label>
<input type="text" name="Name" id="fname" value="Mary"/><br /><br />
<label for="number">Phone</label>
<input type="number" name="Phone" id="number"/><br /><br />
<label for="email">Email</label>
<input type="email" placeholder="Enter Email" name="email" required /> <br /><br />
<input type="submit" value="Submit"/>
</form>
</body>
</html>Exemplo da tag HTML <form> com a tag <textarea>:
O atributo for da tag <label> está vinculado ao id do <textarea>, de modo que clicar no rótulo foca o campo e os leitores de ecrã o anunciam corretamente.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Form example</h1>
<form action="/form/submit" method="POST" >
<label for="message">Message</label><br />
<textarea id="message" name="message" rows="3" cols="30" placeholder="Type some text here"></textarea><br />
<input type="submit" value="Submit"/>
</form>
</body>
</html>GET vs POST: qual método usar
O atributo method controla como o navegador envia os dados do formulário. Os dois valores comportam-se de forma bastante diferente:
method="get" acrescenta os dados do formulário à URL do action como uma string de consulta (?name=value&name=value). Use quando:
- A submissão apenas lê ou filtra dados (formulários de pesquisa, filtros).
- Pretende que o resultado seja guardado nos favoritos ou partilhável — os dados ficam visíveis na URL.
Como os dados ficam na URL, o GET tem limitações reais: o comprimento da URL é limitado pelos navegadores e servidores, os valores são visíveis na barra de endereço e nos registos do servidor, e nunca deve transportar palavras-passe ou outros dados sensíveis.
method="post" envia os dados do formulário no corpo do pedido HTTP, e não na URL. Use quando:
- A submissão altera algo no servidor (criar uma conta, publicar um comentário, efetuar um pagamento).
- Estiver a enviar grandes quantidades de dados ou ficheiros (o POST não tem limite de tamanho prático e é necessário para envio de ficheiros).
- Os dados são sensíveis e não devem aparecer na URL.
As submissões POST não são guardáveis nos favoritos e recarregar a página de resultado normalmente volta a acionar o pedido. Leia mais em métodos HTTP.
Envio de ficheiros
Para permitir que os utilizadores façam upload de ficheiros, o formulário deve usar method="post" juntamente com enctype="multipart/form-data", e incluir um <input type="file">. A codificação padrão application/x-www-form-urlencoded não consegue transportar dados binários de ficheiros, portanto o upload não funcionará sem isso.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="avatar">Choose a profile picture:</label><br />
<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" /><br /><br />
<input type="submit" value="Upload" />
</form>
</body>
</html>Note que o atributo accept (a lista de tipos de ficheiro permitidos) pertence ao elemento <input type="file">, e não à tag <form>.
Ignorar validação com novalidate
Por padrão, os navegadores validam restrições como required, type="email" ou pattern antes de submeter o formulário. Adicionar o atributo boolean novalidate na tag <form> diz ao navegador para ignorar essa validação integrada e submeter mesmo assim — útil, por exemplo, quando trata a validação manualmente com JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="post" novalidate>
<label for="email">Email</label>
<input type="email" id="email" name="email" required /><br /><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>Atributos
| Atributo | Valor | Descrição |
|---|---|---|
| accept-charset | character_set | Especifica as codificações de caracteres que o servidor aceita para os dados do formulário submetido. |
| action | URL | A URL para onde os dados do formulário são enviados para processamento — normalmente um endpoint de API ou uma rota do servidor. Omita (ou defina como string vazia) para submeter à mesma página que contém o formulário. |
| autocomplete | on / off | Ativa ou desativa o preenchimento automático dos campos do formulário pelo navegador. O padrão é on. |
| enctype | application/x-www-form-urlencoded / multipart/form-data / text/plain | Determina como os dados do formulário são codificados antes de serem enviados. O padrão é application/x-www-form-urlencoded. Use multipart/form-data quando o formulário contiver upload de ficheiros. Aplica-se apenas quando method é post. |
| method | get / post | Especifica o método HTTP usado para submeter o formulário. O padrão é get. Consulte GET vs POST abaixo. |
| name | text | Define o nome do formulário, usado para referenciar o formulário em scripts. |
| novalidate | novalidate | Quando presente, o navegador não valida os campos do formulário antes de submeter. |
| target | _blank / _self / _parent / _top / framename | Determina onde exibir a resposta recebida após a submissão do formulário. |
A tag <form> também suporta os atributos globais e os atributos de evento.