Criando formulário

Os formulários são dispositivos que permitem receber entrada do usuário no HTML. Para criar um formulário, deve-se utilizar a tag <form>.

Entrada de texto

Para adicionar um campo de entrada de texto no formulário, deve-se utilizar a tag <input> com atributo "type" igual a "text". Veja o exemplo de um formulário com um campo de entrada de texto:

<form>
  <input type="text">
</form> 

Rótulos

Os rótulos permitem informar aos usuários o que se espera que seja preenchido em determinado campo do formulário. Para adicionar um rótulo a um campo de entrada, utiliza-se a tag <label>, indicando no atributo "for" o identificador do campo de entrada associado. Veja o exemplo:

<form>
  <label for="nome">Nome:</label>
  <input type="text" id="nome">
</form> 

Botão de submissão

Os botões de submissão permitem aos usuários enviar os dados do formulário. Para adicionar um botão de submissão, utilize a tag <input> com o atributo "type" igual a "submit". Veja o exemplo:

<form>
  <label for="nome">Nome:</label>
  <input type="text" id="nome">
  <input type="submit" value="Enviar dados">
</form> 

Ação de submissão

A ação de submissão deve ser informado como o atributo "action" da tag <form>. Nesse campo deve ser informado o endereço do servidor que contém um programa responsável por capturar esses dados e realizar alguma ação.

Para efeitos didáticos, utilize o endereço https://autoria-form.herokuapp.com/, que está preparado para capturar os dados e exibi-los em seguida na tela. Veja o exemplo completo:

<form action="https://autoria-form.herokuapp.com/" method="GET">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome">
  <label for="sobrenome">Sobrenome:</label>
  <input type="text"  id="sobrenome" name="sobrenome"/>
  <input type="submit" value="Enviar dados">
</form> 

Perceba que foi necessário definir o atributo name para cada campo de entrada do formulário. A definição do atributo "name" serve para facilitar a identificação do campo no formulário pelo programa escrito no servidor.

Perceba que foi utilizado o método GET para envio dos dados. Esse método utiliza o próprio endereço (URL) para transferir os dados ao servidor. Além do método GET, existe o método POST, que envia os dados no corpo da requisição HTTP e que por isso não aparece na URL ao usuário.