terça-feira, 14 de setembro de 2010

Formulários HTML

Formulários HTML são geralmente usados para facilitar a comunicação entre os internautas que acessam um determinado site e os administradores do mesmo.

Com formulários, é possível criar salas de bate-papo, livros de visita, enquetes, e muito mais.


Todo Formulário HTML é composto por controles que podem ser “Botões”, “Caixas de Textos”, “Caixas de Senha”, etc. São diversos tipos de controles que podem ser utilizados. A imagem abaixo mostra um exemplo de Formulário HTML e uma legenda que informa o nome de cada controle e a Tag usada para exibi-lo:
Controles de um Formulário HTML
Nota 1: Existem ainda outros controles (menos utilizados) que explicarei em posts futuros aqui no blog.

Nota 2: Não se assuste com o número de opções. Apesar da quantidade de controles ser grande, eles são de fácil entendimento. Além disso, com tempo você irá escrever esses comandos naturalmente, sem precisar fazer consultas para relembrar.

A Tag de Formulário <form>

A Tag <form> serve para informar o início e o término de um formulário, ou seja, é necessário que todos os controles do formulário fiquem posicionados entre a abertura e o fechamento da Tag <form> para que os dados sejam enviados corretamente.

A estrutura é a seguinte:
<form>
Os controles devem ser adicionados aqui
</form>
A Tag <form> possui dois parâmetros importantes: action e method. O primeiro serve para informar o arquivo que irá processar as informações enviadas pelo formulário. Já o segundo serve para informar o método de envio de informações.

Para entender melhor esses parâmetros, observe a estrutura alterada:
<form action="envia-formulario.php" method="post">
Os controles devem ser adicionados aqui
</form>
Utilizamos o parâmetro action para informar que os dados do formulário devem ser processados pelo arquivo envia-formulario.php que esta localizado no mesmo diretório do arquivo do formulário. O arquivo normalmente possui extensão de alguma tecnologia que roda no Servidor Web como: “.php”, .”asp”, “.aspx”, “.jsp”, etc. Isso porque a Linguagem HTML não é capaz de processar esses dados. No post Aprenda a receber dados de Formulário com PHP, como o próprio título diz, explico como a Linguagem PHP recebe dados de um formulário. Depois, explicarei o mesmo em outras tecnologias.

Já no parâmetro method, informamos que as informações devem ser enviadas pelo método post, ou seja, pelo corpo do documento.

Poderíamos ter atribuído o valor get ao parâmetro method. Assim, os valores preenchidos nos campos do formulário seriam enviados pela Barra de Endereços do Navegador.

Devemos ter cuidado ao utilizar o método get pois as vezes não queremos que algumas informações sejam exibidas na Barra de Endereços (como senha por exemplo).

Caixa de Texto

A Tag <input> é uma Tag Vazia usada para criação de vários tipos de controle.

A Tag <input> normalmente vem acompanhada do parâmetro type que, como o próprio nome já diz, serve para informar o tipo de controle que desejamos criar. No nosso caso, como desejamos criar uma Caixa de Texto, o parâmetro type deve ser definido como text.

Além disso, devemos definir um nome para nossa Caixa de Texto utilizando o parâmetro name. Esse nome será usado pelo arquivo que irá receber e processar os dados do formulário.

Segue a estrutura:
<input type="text" name="email" />

Caixa de Senha

Agora fica fácil entender como criar uma Caixa de Senha, pois a estrutura é praticamente a mesma usada para criar uma Caixa de Texto. A única diferença é que o parâmetro type deve ser definido como password conforme abaixo:
<input type=”password” name=”senha” />
Existem parâmetros da Tag <input> que funcionam apenas com determinados tipos de controle, ou seja, de acordo com o valor do parâmetro type. Conheça alguns parâmetros que podemos utilizar quando o valor do parâmetro type é igual a text ou password:
Parâmetro Descrição Exemplo
size Define a largura da Caixa de Texto em número de caracteres <input type="text" name="email" size="50" />
maxlength Define o numero máximo de caracteres que a Caixa de Texto suporta <input type="text" name="estado" maxlength="2" />
value Define o valor padrão da caixa de texto <input type="text" name="estado" value="RJ" />

Botões de Envio e Reset

O Botão de Envio serve para submeter os dados a um arquivo que será responsável pelo processamento. Esse arquivo deve ser definido no parâmetro action da Tag <form>.

Já o Botão de Reset serve para recarregar o formulário, fazendo com que ele fique com seu aspecto inicial (antes do preenchimento).

Para criar um Botão de Envio e um Botão de Reset também utilizamos a Tag <input>. No entanto, os valores dos parâmetros type devem ser definidos como submit e reset respectivamente.

Além disso, devemos definir o parâmetro value em ambos os botões para informar os textos que devem ser exibidos neles.

Veja uma amostra de código:
<input type="submit" value=”Enviar” />
<input type="reset" value=”Cancelar” />
Para finalizar, vamos criar um Formulário de Login simples:
<html>
<head>
<title>Formulário de Login</title>
</head>
<body>
<h1>Formulário de Login</h1>
<form method="post" action="efetuar-login.php">
E-mail:<br />
<input type="text" name="email" />
<br /><br />
Senha:<br />
<input type="password" name="senha" />
<br /><br />
<input type="submit" value="Efetuar Login" />
<input type="reset" value="Cancelar" />
</form>
</body>
</html>

Observe o resultado:
Formulário HTML

Nota 3: Se quiser melhorar a organização dos controles do formulário, você pode colocar seus controles dentro de uma Tabela.

6 comentários:

  1. OLA TENHO UM CÓDGIO DE CADASTRO DE CLIENTE ASSIM: nome email, senha, e botao enviar cadastro e limpar cadastro. esta funcionando...
    mais gostaria de aprender como eu consigo pegar o confirmar senha?? como devo fazer? pois, no banco de dados clientes tem o id_clientes, nome, email cidade senha e eles estão pegando e funcionando menos no confirmar senha e até tirei ele do banco de dados de clientes como faço ele pegar o registro de confirmar senha?

    E a outra pergunta é:
    Tenho a tela de login que é email e senha,

    * COMO FAÇO O EFETUAR_LOGIN.PHP????

    TEM COMO FAZER O VIDEO DESSA PERGUNTA??? OU MANDAR UMA RESPOSTA PRO MEU EMAIL??
    O MEU NOVO EMAIL E MSN SÃO:
    kellyhorio2010@hotmail.com

    Abraço!!!

    ResponderExcluir
  2. Muito didático e bem explicado. Muito obrigado!

    ResponderExcluir
  3. Olá! Boa noite! Gostei demais de teu site Dainel você é profissional!
    Em fim, estou com uma dúvida: como faço para meu formulario após executado abrir uma nova janela em meu browser, ou seja, como uso a tag Texto dentro da tag form para que meu formulario retorne uma nova janela em meu browser ou então venha abrir na mesma janela? poor favor coloque este dois exemplos. desde já agradeço pelo teu carinho!!! Abraços, Ricardo Libório Rivas De Castro

    ResponderExcluir
  4. No tutorial php tem esta solução, abraços.
    tambem estou pesquisando.

    ResponderExcluir

O que você achou do post? Faça um comentário.

Todos os direitos reservados.

Todos os direitos reservados.