Construindo formulários em HTML

Marcadores: HTML Editar postagem

Os formulários em HTML são utilizados para a coleta de dados do usuário, que após podem ser manipulados com a utilização de outras linguagens como PHP. Um exemplo muito comum de um formulário em HTML é o formulário de cadastro de usuários de e-mail, cujo mesmo possui campos para nome, sobrenome, data de nascimento e etc.
Os formulários são indispensáveis em nosso dia-a-dia, para se ter uma ideia estamos utilizando os mesmos até na hora de se enviar um simples e-mail.

Criando um formulário

A tag responsável pela criação de formulários é a tag <form>. É nesta tag que precisamos decidir como irá "funcionar" o nosso formulário, mas isso nós veremos mais adiante.
Exemplo:

<form>
</form>

Criando os campos do formulário

Existem vários tipos de campos e elementos que podem ser utilizados na construção de um formulário, mas antes de explicar a vocês como criar cada um deles, irei demonstrar alguns comandos que serão muito utilizados.
Observe a tabela abaixo:

Comandos	Funções	Valores
name	Atribui um nome ao campo. É muito importante a utilização deste comando, pois é através deste nome atribuído a cada campo, que poderemos capturar os dados e manipulá-los.	Qualquer nome que não inicie com símbolos ou números, e que não contenha caracteres especiais (ç), nem acentos ou espaços.
value	Atribui um valor predefinido ao campo.	Qualquer tipo de valor. Por exemplo, frases, números entre outros.
maxlength	Determina um valor máximo de caracteres que um campo irá suportar.	Números inteiros maiores que zero.
size	Determina o tamanho do campo em caracteres.	Números inteiros maiores que zero.
rows	Determina a quantidade de linhas em uma área de texto.	Números inteiros maiores que zero.
cols	Determina a quantidade de colunas em uma área de texto.	Números inteiros maiores que zero.
disabled	Desabilita um campo ou área de texto, impossibilitando ao usuário inserir dados.	Valor disabled, em português desativado.
checked	Este comando é aplicável a caixas de seleção e a botões do tipo rádio, e quando for aplicado, a opção já aparece selecionada.	Valor checked, em português verificado/marcado/selecionado.
type	Define o tipo do campo ou elemento do formulário.	button (botão), checkbox (caixa de seleção), file (campo para a seleção de arquivos no PC), password (campo de senha), radio (botão radio), reset (botão que limpa o formulário), submit (botão que envia o formulário), text (campo de texto).

Agora que já demonstrei quase todos os comandos a serem utilizados nos elementos dos formulários, vamos ver como criar cada um deles utilizando as seguintes tags: <input>, <select> e <textarea>.

Campo de texto:

Um campo de texto é criado com a tag <input> e definindo seu tipo para texto com o comando type, e também não podemos se esquecendo de nomeá-lo com o comando name.
Exemplo:

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

Você também pode preencher um campo automaticamente com o comando value, e aplicar outros comandos explicados acima.
Exemplo:

<form>
      <input type="text" name="nome_do_usuario" value="Maik Basso" size="40" />
</form>

Campo de senha:

A única diferença entre um campo de senha e um de texto é que no campo de senha os caracteres são protegidos, ou seja, o navegador exibe asteriscos ou bolinhas em vez dos caracteres. Para criar um campo de senha defina o valor do comando type para password.
Exemplo:

<form>
      <input type="password" name="senha_do_usuario"/>
</form>

Campo para a seleção de arquivos:

Esse tipo de campo é utilizado para a seleção de arquivos no computador, e é criado definindo o tipo seu tipo para file.
Exemplo:

<form>
      <input type="file" name="imagem"/>
</form>

Nesse tipo de campo o comando value não se aplica.
Caso deseje utilizar este tipo de campo em seu formulário você deve definir um comando na tag <form> para que seja possível o envio do arquivo. O comando é enctype, esse comando deve assumir o valor de multipart/form-data.
Exemplo:

<form enctype="multipart/form-data">
      <input type="file" name="imagem"/>
</form>

Caixa de seleção:

São caixas que possibilitam ao usuário selecionar uma ou mais opções. Para criar uma caixa de seleção atribua o valor checkbox ao comando type.
Exemplo de um conjunto de caixas de seleção para coleta da resposta de uma pergunta:

<form>
      De que frutas você gosta? <br />
      <input type="checkbox" name="uva" value="uva"/>Uva <br />
      <input type="checkbox" name="maca" value="maca"/>Maçã <br />
      <input type="checkbox" name="melancia" value="melancia"/>Melancia
</form>

Botões de seleção radio:

Um conjunto destes botões permite ao usuário selecionar apenas uma opção. Para a criação destes botões atribua o valor radio ao comando type.
Exemplo de um conjunto de botões radio para coleta da resposta de uma pergunta:

<form>
      Você tem carro? <br />
      <input type="radio" name="carro" value="sim"/>Sim <br />
      <input type="radio" name="carro" value="nao"/>Não
</form>

Observe que neste tipo de botão de seleção o comando name de todas as opções deve ter o mesmo valor.
No caso da caixa de seleção e dos botões radio, o valor a ser enviado é o valor do comando value.

Botões com função indefinida:

Esse tipo de botão não tem uma função definida em um formulário, a mesma deve ser estabelecida através de outra linguagem de programação como Java script. Para a criação destes botões atribua o valor button ao comando type.
Exemplo:

<form>
      <input type="button" name="meu_botao" value="Clique aqui!"/>
</form>

Neste caso o valor do comando value é o texto do botão.

Botões enviar e limpar:

Esses botões têm a função de enviar ou limpar um formulário. Para a criação de botões de envio atribua o valor submit ao comando type, e para criar botões para limpar o formulário atribua o valor reset ao comando type.
Exemplo:

<form>
      <input type="reset" name="botao_limpar" value="Limpar"/>
      <input type="submit" name="botao_enviar" value="Enviar"/>
</form>

Como no caso acima, o valor do comando value é o texto do botão.

Áreas de texto:

A diferença de uma área de texto para um campo de texto é que na área de texto se tem a opção de escrever em mais de uma linha, e quando a texto ocupa uma região maior que a estabelecida para a área, aparecem barras de rolagem.
Áreas de texto são ideais para formulários de e-mail e comentários por comportarem uma quantidade de texto maior que os campos de texto. Para criar uma área de texto utilize a tag <textarea>.
Exemplo:

<form>
      <textarea name="minha_area_de_texto" rows="12" cols="50"></textarea>
</form>

Neste caso para predefinir um valor a uma área de texto apenas escreva o texto entre as tags <textarea> e </textarea>
Exemplo:

<form>
      <textarea name="minha_area_de_texto" rows="12" cols="50">Escreva aqui!</textarea>
</form>

Menu drop-down:

Tem a função semelhante aos botões radio, pois permitem apenas a escolha de uma única opção. Sua utilização é recomendada quando se tem um número muito grande de opções de resposta.
Para criar um menu drop-down utilize a tag <select> e para criar cada uma das opções utilize a tag <option>.
Exemplo:

<form>
      Qual é o seu estado? <br />
      <select name="estado">
            <option>RS</option>
            <option>SC</option>
            <option>PR</option>
            <option>RJ</option>
            <option>SP</option>
      </select>
</form>

Ações e métodos de envio dos formulários:

Após termos construído nosso formulário, devemos informar a ele o método de envio das informações, e também a página que receberá as informações para a manipulação.
Então para informar ao navegador o método de envio dos dados do formulário utilize o comando method, esse comando pode assumir os seguintes valores:
POST - envia os dados do formulário de forma invisível ao usuário.
GET - envia os dados de forma visível ao usuário. Supomos que temos um formulário de login com campos para nome e senha (denominados nome e senha), os dados serão passados pela URL da página, e ao enviar o formulário irá aparecer o seguinte sufixo na URL: ?nome=valor_do_campo_nome&senha=valor_do_campo_senha.
Agora para definir a página que receberá as informações do formulário utilize o comando action. Como valor deste comando coloque a URL da página que irá receber os dados.
Exemplo:

<form action="index.html" method="post">
      Nome:<br />
      <input type="text" name="nome_do_usuario"/><br />
      Senha:<br />
      <input type="password" name="senha_do_usuario"/><br />
      <input type="submit" name="botao_entrar" value="Entrar"/>
</form>

Também é possivel criar formulários que enviam e-mails através de gerenciadores de e-mails como o Outlook, para isso coloque como valor do comando action do formulário mailto:seu_email, depois coloque text/plain como valor do comando enctype do formulário, e defina o método de envio para get.
Exemplo:

<form action="mailto:maik@maikbasso.com.br" method="get" enctype="text/plain">
</form>

Exemplo de formulário:

Agora que você já sabe como criar formulários, observe abaixo o exemplo que criei para esta postagem, utilizando uma tabela para organizar um formulário de login.
Exemplo:

<h1>Faça login</h1>
<form action="index.html" method="post">
      <table>
            <tr>
                  <td>
                        Nome:
                  </td>
            </tr>
            <tr>
                  <td>
                        <input type="text" name="nome_do_usuario"/>
                  </td>
            </tr>
            <tr>
                  <td>
                        Senha:
                  </td>
            </tr>
            <tr>
                  <td>
                        <input type="password" name="senha_do_usuario"/>
                  </td>
            </tr>
            <tr>
                  <td>
                        <input type="submit" name="botao" value="Entrar"/>
                  </td>
            </tr>
      </table>
</form>

---

---

Postagens relacionadas: