O <form> elemento
formulários HTML são usados para coletar a entrada do usuário.
O <form> elemento define um formulário HTML:
<form>
.
Formulários HTML conter elementos de formulário. elementos de formulário são diferentes tipos de elementos de entrada, caixas de seleção, botões de rádio, botões de envio, e muito mais.
O <input> Elemento
O <input> elemento é o mais importante elemento de formulário.
O <input> elemento tem muitas variações, dependendo do type atributo.
Aqui estão os tipos usados neste capítulo:
Tipo Descrição text Define a entrada de texto normal radio Define a entrada botão de rádio (for selecting one of many choices) submit Define um botão de envio (for submitting the form)
Você vai aprender muito mais sobre os tipos de entrada mais tarde neste tutorial.
Entrada de texto
<input type="text"> define um campo de entrada de uma linha para a entrada de texto:
Exemplo
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
Tente você mesmo " Isto é como ele vai olhar como em um navegador:
Primeiro nome:
Último nome:
Note: A forma em si não é visível. Observe também que a largura padrão de um campo de texto é de 20 caracteres.
Radio botão de entrada
<input type="radio"> define um radio botão.
Radio botões permitem que um usuário selecionar um de um número limitado de opções:
Exemplo
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
Tente você mesmo " Isto é como o código HTML acima será exibido em um navegador:
Masculino
Fêmea
De outros
O botão Enviar
<input type="submit"> define um botão para enviar um formulário a um formulário-manipulador.
A forma de manipulador é tipicamente uma página do servidor com um script para processar dados de entrada.
A forma de manipulador é especificado no formulário action atributo:
Exemplo
<form action="action_page.php">
First name:<br>
<input type="text"
name="firstname" value="Mickey"><br>
Last name:<br>
<input
type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
Tente você mesmo " Isto é como o código HTML acima será exibido em um navegador:
Primeiro nome:
Último nome:
A Action Atributo
A action atributo define a ação a ser executada quando o formulário é enviado.
A forma mais comum de enviar um formulário para um servidor, é usando um botão de envio.
Normalmente, o formulário é enviado para uma página web em um servidor web.
No exemplo acima, um script do lado do servidor é especificado para lidar com a forma apresentada:
<form action="action_page.php ">
Se a action atributo for omitido, a ação está definida para a página atual.
O Method Atributo
O method atributo especifica o método HTTP ( GET ou POST ) para ser utilizado aquando da apresentação das formas:
<form action="action_page.php" method="get" > ou:
<form action="action_page.php" method="post" >
Quando usar GET ?
Você pode usar GET (the default method) :
Se o envio do formulário é passiva (like a search engine query) , e sem informação sensível.
Quando você usa GET , os dados do formulário será visível no endereço da página:
action_page.php?firstname=Mickey&lastname=Mouse GET é mais adequado para curtos períodos de dados. limitações de tamanho são definidos no seu browser.
Quando usar POST ?
Você deve usar POST :
Se o formulário é atualizar dados, ou inclui informações sensíveis (password) .
POST oferece melhor segurança porque os dados apresentados não é visível no endereço da página.
O Name Atributo
A apresentar corretamente, cada campo de entrada deve ter um name atributo.
Este exemplo só apresentará o "Last name" campo de entrada:
Exemplo
<form action="action_page.php">
First name:<br>
<input type="text"
value="Mickey"><br>
Last name:<br>
<input
type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
Tente você mesmo "
Agrupando dados de formulário com <fieldset>
Os <fieldset> grupos de elementos de dados relacionados em um formulário.
O <legend> elemento define uma legenda para a <fieldset> elemento.
Exemplo
<form action="action_page.php">
<fieldset>
<legend>Personal
information:</legend>
First name:<br>
<input type="text" name="firstname"
value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
Tente você mesmo " Isto é como o código HTML acima será exibido em um navegador:
HTML Form Atributos
Um HTML <form> elemento, com todos os atributos possíveis definido, será parecido com este:
<form action="action_page.php" method="post" target="_blank"
accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded"
autocomplete="off" novalidate>
.
Teste-se com exercícios! Exercício 1 » Exercício 2» Exercício 3 » Exercício 4»
Aqui está a lista de <form> atributos:
Atributo Descrição accept-charset Especifica a codificação usada na forma apresentada (padrão: a página charset). action Especifica um endereço (url) para onde enviar o formulário (padrão: a página de submeter). autocomplete Especifica se o navegador deve autocomplete forma (default: on) . enctype Especifica a codificação dos dados apresentados (default: is url-encoded) . method Especifica o método HTTP usado ao enviar o formulário (default: GET) . name Especifica um nome utilizado para identificar a forma (para uso DOM: document.forms.name). novalidate Especifica que o navegador não deve validar o formulário. target Especifica o destino do endereço na action atributo (padrão: _self).
Você vai aprender mais sobre os atributos nos próximos capítulos.
mais Exemplos
Enviar e-mail a partir de um formulário
Como enviar e-mail de um formulário.