Atributos de Formulário HTML

Este capítulo introduz o HTML <form> Diferentes propriedades do elemento.

Propriedade Action

action As propriedades definem a ação a ser executada ao submeter o formulário.

Normalmente, quando o usuário clica no botão "Enviar", os dados do formulário são enviados para um arquivo no servidor.

Neste exemplo, os dados do formulário são enviados para um arquivo chamado "action_page.php". Este arquivo contém um script do lado do servidor para processar os dados do formulário:

Exemplo

Após o envio, os dados do formulário serão enviados para "action_page.php":

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

Experimente você mesmo

Dica:Se a propriedade action for omitida, a ação será definida para a página atual.

Propriedade Target

target A propriedade define onde a resposta será exibida após o envio do formulário.

target A propriedade pode ser configurada com um dos seguintes valores:

O valor Descrição
_blank A resposta é exibida em uma nova janela ou aba.
_self A resposta é exibida na janela atual.
_parent A resposta é exibida no frame pai.
_top A resposta é exibida no corpo inteiro da janela.
framename A resposta é exibida em um iframe nomeado.

O valor padrão é _self, o que significa que a resposta será aberta na janela atual.

Exemplo

Aqui, o resultado do envio será aberto em uma nova aba do navegador:

<form action="/action_page.php" target="_blank">

Experimente você mesmo

Propriedade Method

A propriedade method especifica o método HTTP a ser usado ao submeter dados do formulário.

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

O método HTTP padrão ao submeter dados do formulário é GET.

Exemplo

Este exemplo usa o método GET ao submeter dados do formulário:

<form action="/action_page.php" method="get">

Experimente você mesmo

Exemplo

Este exemplo usa o método POST ao submeter dados do formulário:

<form action="/action_page.php" method="post">

Experimente você mesmo

Observações sobre GET:

  • Anexar os dados do formulário na forma de pares de 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 no Google

Observações sobre POST:

  • Anexar os dados do formulário ao corpo da solicitação HTTP (os dados do formulário submetidos não serão exibidos na URL)
  • POST não tem limites de tamanho, pode ser usado para enviar uma grande quantidade de dados.
  • A submissão do formulário com POST não pode adicionar favoritos

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

Propriedade de conclusão automática

autocomplete A propriedade define se o formulário deve abrir a função de conclusão automática.

Depois de ativar a função de conclusão automática, o navegador preencherá automaticamente os valores com base nos valores anteriormente introduzidos pelo usuário.

Exemplo

Ativar o preenchimento automático do formulário:

<form action="/action_page.php" autocomplete="on">

Experimente você mesmo

Atributo Novalidate

novalidate O atributo é um atributo booleano.

Se definido, ele define que os dados do formulário não devem ser validados ao submeter.

Exemplo

Formulário sem o atributo novalidate definido:

<form action="/action_page.php" novalidate>

Experimente você mesmo

Lista de todos os atributos <form>

Atributo Descrição
accept-charset Define o código de caractere a ser usado para a submissão do formulário.
action Define para onde os dados do formulário devem ser enviados ao submeter o formulário.
autocomplete Define se o formulário deve ativar a função de preenchimento automático (autocompletar).
enctype Define como os dados do formulário devem ser codificados ao serem enviados para o servidor (apenas para method="post").
method Define o método HTTP a ser usado ao enviar dados do formulário.
name Define o nome do formulário.
novalidate Define que o formulário não deve ser validado ao submeter.
rel Define o relacionamento entre o recurso de link e o documento atual.
target Define onde exibir a resposta recebida após a submissão do formulário.