Atributos form* de Entrada HTML

Recomendação de curso: <input> Este capítulo introduce o HTML Diferentes elementos form* Atributo.

Propriedade form

do input form A propriedade define <input> O formulário ao qual o elemento pertence.

O valor deste atributo deve ser igual ao atributo id do elemento <form> ao qual pertence.

Exemplo

Campo de entrada localizado fora do formulário HTML (mas ainda é parte do formulário):

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

Experimente você mesmo

Propriedade formaction

do input formaction A propriedade define a URL do arquivo que processa os dados de entrada (dados) ao enviar o formulário.

Observação: }}Este atributo substitui <form> O atributo A propriedade Atributo.

formaction A propriedade se aplica aos seguintes tipos de entrada: submit e image.

Exemplo

Formulário HTML com dois botões de envio, com operações (action) diferentes:

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

Experimente você mesmo

Propriedade formenctype

do input formenctype A propriedade especifica como os dados do formulário devem ser codificados ao serem enviados (apenas para formulários com method="post").

Observação: }}Esta propriedade sobrepõe <form> A propriedade enctype do elemento.

formenctype A propriedade se aplica aos seguintes tipos de entrada: submit e image.

Exemplo

Formulário com dois botões de envio. O primeiro envia os dados do formulário com codificação padrão, o segundo envia os dados do formulário codificados como "multipart/form-data":

<form action="/action_page_binary.asp" method="post">
  <label for="fname">Nome:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Enviar">
  <input type="submit" formenctype="multipart/form-data"
  value="Enviar codificado como Multipart/form-data">
</form>

Experimente você mesmo

Propriedade formmethod

do input formmethod A propriedade define o método HTTP a ser usado para enviar os dados do formulário para a URL action.

Observação: }}Esta propriedade sobrepõe <form> A propriedade method do elemento.

formmethod A propriedade se aplica aos seguintes tipos de entrada: submit e image.

Os dados do formulário podem ser enviados como variáveis da URL (method="get") ou como transação HTTP POST (method="post").

Considerações sobre GET:

  • Anexar os dados do formulário na forma de pares nome/valor à URL
  • Nunca use GET para enviar dados sensíveis! (Os dados do formulário submetidos são visíveis na URL!)
  • O comprimento da URL é limitado (2048 caracteres)
  • Muito útil para submissões de formulários onde o usuário deseja adicionar os resultados como favoritos
  • GET é adequado para dados não seguros, como strings de consulta do Google

Considerações sobre POST:

  • Anexar os dados do formulário ao corpo da solicitação HTTP (os dados do formulário submetidos não são exibidos na URL)
  • POST não tem limite de tamanho, pode ser usado para enviar grandes quantidades de dados.
  • Submissões de formulários com POST não podem ser adicionadas como favoritos

Dica:Se os dados do formulário contiverem informações sensíveis ou pessoais, use POST com certeza!

Exemplo

Formulários com dois botões de envio. O primeiro envia os dados do formulário usando method="get". O segundo envia os dados do formulário usando method="post":

<form action="/action_page.php" method="get">
  <label for="fname">Sobrenome:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Nome:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submeter usando GET">
  <input type="submit" formmethod="post" value="Submeter usando POST">
</form>

Experimente você mesmo

propriedade formtarget

do input formtarget A propriedade especifica um nome ou palavra-chave, que determina onde será exibida a resposta recebida após o envio do formulário.

Observação: }}Esta propriedade sobrepõe <form> propriedade target do elemento.

formtarget A propriedade se aplica aos seguintes tipos de entrada: submit e image.

Exemplo

Formulários com dois botões de envio e diferentes janelas de destino:

<form action="/action_page.php">
  <label for="fname">Sobrenome:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Nome:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Enviar">
  <input type="submit" formtarget="_blank" value="Submeter para nova janela/aba">
</form>

Experimente você mesmo

propriedade formnovalidate

do input formnovalidate A propriedade especifica que o elemento <input> não deve ser validado ao ser submetido.

Observação: }}Esta propriedade sobrepõe <form> A propriedade novalidate do elemento.

formnovalidate O atributo se aplica aos seguintes tipos de entrada: submit.

Exemplo

Formulário com dois botões de envio (com e sem verificação):

<form action="/action_page.php">
  <label for="email">Insira seu email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Enviar">
  <input type="submit" formnovalidate="formnovalidate"
  value="Enviar sem verificação">
</form>

Experimente você mesmo

Atributo novalidate

novalidate O atributo é <form> Atributo.

Se configurado, a propriedade novalidate especifica que todos os dados do formulário não devem ser verificados ao submeter.

Exemplo

Define que não haja verificação de nenhum dado do formulário ao submeter:

<form action="/action_page.php" novalidate>
  <label for="email">Insira seu email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Enviar">
</form>

Experimente você mesmo

Elementos Form e Input do HTML

Etiqueta Descrição
<form> Definir formulários HTML para entrada de usuários.
<input> Definir controle de entrada.

Para obter uma lista completa de todas as tags HTML disponíveis, acesse nosso Manual de Referência de Tags do HTML.