Etiqueta <form> de HTML

Definição e uso

<form> A tag é usada para criar formulários HTML para recebimento de entrada do usuário.

<form> Os elementos podem conter um ou mais dos seguintes elementos de formulário:

Veja também:

Tutorial HTML:Formulários e Entradas HTML

Manual de Referência do DOM HTML:Objeto Form

Tutorial CSS: Definir estilo de formulário

Exemplo

Exemplo 1

Formulário HTML com dois campos de entrada e um botão de envio:

<form action="/action_page.php" method="get">
  <label for="fname">Nome:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Sobrenome:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Enviar">
</form>

Experimente você mesmo

Exemplo 2

Formulário HTML com caixas de seleção:

<form action="/action_page.php" method="get">
  <input type="checkbox" name="vehicle1" value="Bicicleta">
  <label for="vehicle1">Eu tenho uma bicicleta</label><br>
  <input type="checkbox" name="vehicle2" value="Carro">
  <label for="vehicle2">Eu tenho um carro</label><br>
  <input type="checkbox" name="vehicle3" value="Barco" checked>
  <label for="vehicle3">Eu tenho um barco</label><br><br>
  <input type="submit" value="Enviar">
</form>

Experimente você mesmo

Exemplo 3

Formulário HTML com botões de rádio:

<form action="/action_page.php" method="get">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS" checked="checked">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Enviar">
</form>

Experimente você mesmo

Atributo

Atributo Valor Descrição
accept-charset Conjunto de caracteres Define o código de caracteres a ser usado ao submeter o formulário.
action URL Define onde os dados do formulário devem ser enviados ao submeter o formulário.
autocomplete
  • on
  • off
 Define se o formulário deve ativar a função de conclusão automática.
enctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
 Define como os dados do formulário devem ser codificados ao submeter dados para o servidor.
method
  • get
  • post
 Define o método HTTP a ser usado ao enviar dados do formulário.
name Texto Define o nome do formulário.
novalidate novalidate Define que não deve haver validação do formulário ao submeter.
rel
  • external
  • help
  • license
  • next
  • nofollow
  • noopener
  • noreferrer
  • opener
  • prev
  • search
 Define o relacionamento entre o recurso de link e o documento atual.
target
  • _blank
  • _self
  • _parent
  • _top
 Define onde exibir a resposta recebida após a submissão do formulário.

Atributos globais

<form> A tag também suporta Atributos globais no HTML。

Atributo de evento

<form> A tag também suporta Atributo de evento no HTML。

Configurações CSS padrão

A maioria dos navegadores usará os seguintes valores padrão para exibir <form> Elemento:

form {
  display: block;
  margin-top: 0em;
}

Experimente você mesmo

Suporte ao navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte