Formulário HTML

O formulário HTML é usado para coletar diferentes tipos de entradas do usuário.

O elemento <form>

O formulário HTML é usado para coletar entradas do usuário.

O elemento <form> define o formulário HTML:

Exemplo

<form>
 .
form elements
 .
</form>

O formulário HTML contémElementos de formulário.

Elementos de formulário se referem a diferentes tipos de elementos <input>, caixas de seleção, botões de opção única, botões de submit, etc.

Elementos <input>

<input> Elemento mais importanteElementos de formulário.

O elemento <input> tem muitos formatos, dependendo dos type Atributo.

Esses são os tipos usados neste capítulo:

Tipo Descrição
text Definir entrada de texto comum.
radio Definir entrada de botão de opção única (escolher uma das opções)
submit Definir botão de submit (submeter formulário)

Nota:Você aprenderá mais sobre os tipos de entrada mais tarde neste tutorial.

Entrada de texto

<input type="text"> Definir paraEntrada de textoCampo de entrada de linha única do:

Exemplo

<form>
 Nome:<br>
<input type="text" name="firstname">
<br>
 Sobrenome:<br>
<input type="text" name="lastname">
</form>

Experimente pessoalmente

No navegador, isso parece assim:

Nome:


Sobrenome:

Nota:O formulário em si não é visível. Além disso, note que o tamanho padrão do campo de texto é de 20 caracteres.

Entrada de botão de opção única

<input type="radio"> DefinirBotão de opção única.

Os botões de opção única permitem que o usuário escolha um dos itens limitados:

Exemplo

<form>
<input type="radio" name="sex" value="male" checked>Masculino
<br>
<input type="radio" name="sex" value="female">Feminino
</form>

Experimente pessoalmente

Os botões de opção única parecem assim no navegador:

Masculino

Feminino

Botão de submit

<input type="submit"> Definir paraProcessador de formulário（form-handler）SubmitOs botões do formulário.

O processador de formulário é geralmente uma página do servidor que contém scripts para lidar dos dados de entrada.

O processador de formulário no formulário action Especificado no atributo:

Exemplo

<form action="action_page.php">
Nome:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Sobrenome:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Experimente pessoalmente

No navegador, isso parece assim:

Nome:


Sobrenome:


Atributo Action

Atributo actionDefinir a ação a ser executada ao submeter o formulário.

A prática usual para submeter um formulário para o servidor é usar um botão de submit.

Normalmente, o formulário é submetido para uma página na web do servidor.

No exemplo acima, foi especificado um script do servidor para lidar do formulário submetido:

<form action="action_page.php">

Se a propriedade action for omitida, o action será configurado para a página atual.

Propriedade Method

propriedade methodDefine o método HTTP usado ao submeter o formulário (GET ou POST)

<form action="action_page.php" method="GET">

ou:

<form action="action_page.php" method="POST">

Quando usar GET?

Você pode usar GET (método padrão):

Se a submissão do formulário for passiva (por exemplo, consultas de motores de busca) e não houver informações sensíveis.

Quando você usar GET, os dados do formulário estarão visíveis na barra de endereços da página:

action_page.php?firstname=Mickey&lastname=Mouse

Nota:GET é mais adequado para submissões de dados em pequena quantidade. O navegador define limites de capacidade.

Quando usar POST?

Você deve usar POST:

Se o formulário está atualizando dados ou contém informações sensíveis (por exemplo, senhas).

POST é mais seguro, pois os dados submetidos na barra de endereços da página não são visíveis.

Propriedade Name

Cada campo de entrada deve ter uma propriedade name definida para ser submetido corretamente.

Este exemplo submeterá apenas o campo de entrada "Sobrenome":

Exemplo

<form action="action_page.php">
Nome:<br>
<input type="text" value="Mickey">
<br>
Sobrenome:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Experimente pessoalmente

Use <fieldset> para combinar dados de formulário

<fieldset> Elementos combinam dados relacionados no formulário

<legend> O elemento <fieldset> define o título.

Exemplo

<form action="action_page.php">
<fieldset>
<legend>Informações pessoais:</legend>
Nome:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Sobrenome:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

Experimente pessoalmente

Este código HTML parece assim no navegador:

Informações Pessoais:
Nome:


Sobrenome:


Atributos do Formulário HTML

O elemento <form> HTML, com todos os possíveis atributos, é assim:

Exemplo

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
 .
</form>

A seguir está a lista de atributos do <form>:

Atributo Descrição
accept-charset Define o conjunto de caracteres usado no formulário submetido (padrão: conjunto de caracteres da página).
action Define o endereço (URL) para onde o formulário deve ser submetido (página de submissão).
autocomplete Define se o navegador deve completar automaticamente o formulário (padrão: habilitado).
enctype Define a codificação dos dados submetidos (padrão: url-encoded).
method Define o método HTTP usado ao submeter o formulário (padrão: GET).
name Define o nome que identifica o formulário (para DOM: document.forms.name).
novalidate Define que o navegador não deve validar o formulário.
target Define o destino da propriedade action (padrão: _self).

Nota:Você aprenderá mais sobre atributos nas seções abaixo.