Olá Pessoal,
Hoje invadimos o fantástico mundo dos formulários web. Com o uso de formulários podemos criar mecanismos de interação do usuário com o site, desde caixas de busca até complexas fichas de cadastro e compra de produtos. Usamos formulários o tempo inteiro: para fazer login, buscas, cadastros, compras e enviar mensagens via fale conosco. Quando enviamos emails ou scraps no Orkut, pesquisamos no Google, participamos de fóruns e chats, em todos esses momentos fazemos uso de formulários web. Portanto, fiquem de olhos abertos e estudem com atenção, porque o assunto é MUITO IMPORTANTE.
Características Gerais
Veja o formulário abaixo:
Podemos perceber que esse formulário é composto de duas partes: uma caixa de texto e um botão. Todo formulário é composto por elementos ou controles, e o usuário interagirá com esses controles seja digitando dados, subindo arquivos, escolhendo opções etc. A primeira coisa que vocês precisam aprender: todo formulário é marcado pelas tags <form></form>, e dentro dessas tags são inseridos os controles do formulário. A tag <form> exige alguns atributos essenciais para o seu bom funcionamento:
- ACTION: Declaramos a página de destino do formulário, ou seja o documento que receberá todos os dados inseridos pelo usuário. Essa página possuirá algum script, que verificará a consistência dos dados inseridos, e por fim enviará o formulário para seu destino (banco de dados, email etc.);
- METHOD: Define a forma como enviaremos o formulário, ou seja como os dados serão transmitidos. Admite dois valores GET e POST.
Qual é a diferença entre GET e POST?
No método GET, enviamos os dados do formulário como parte da URL declarada no atributo ACTION. Imaginem um formulário com um campo apenas: texto_busca. Declaramos o atributo ACTION com o valor “processa_form.php” (essa página receberá os dados do formulário, verificará se está tudo ok e executará uma ação). Quando o usuário clicar no botão de disparo do formulário, o mesmo será enviado para a página declarada na ACTION, e o valor digitado dentro da caixa de texto fará parte da URL. Ficará assim: processa_form.php?texto_busca=valor digitado pelo usuário.
Quando você acessa o site do Google, na verdade, está pedindo uma permissão ao servidor do site. Seu navegador faz uma requisição ao servidor, pedindo acesso, o servidor decide se você pode ou não ver o site. Em linhas gerais, a coisa funciona mais ou menos assim. No método POST, os dados do formulário são enviados em anexo à essa requisição ao servidor. Tais dados são enviados de forma oculta, podendo ser criptografados e tratados por outros mecanismos de segurança.
Ok, a diferença entre um e outro todos já sabem, mas qual deles devemos usar? Existem uma série de fatores relacionados ao trabalho do programador, o que não é do nosso escopo. Simplificando o problema: usamos GET para formulários que exijam rapidez e poucos requisitos de segurança, tais como formulários de busca; e para todo o resto (login, cadastro, fale conosco, compras online etc.), usamos POST.
Elementos de um formulário: INPUT
Vamos aprender a escrever nossos formulários web, e conhecer seus principais elementos.
Caixa de texto simples – input text
Quando fazemos uma busca no Google, digitamos algo naquela caixa de texto e clicamos no botão “buscar”, e aí acessamos a página de resultados. Simples assim, né? Pois então, aquela caixa de texto é obtida pela tag HTML <input type=”text” />. A tag <input /> cria um campo de formulário para entrada de dados, com o atributo TYPE podemos criar diferentes tipos de campos, e a caixa de texto simples é um deles. Veja como ficaria o código abaixo:
1 2 3 | <form action="" method="post"> <input type="text" /> </form> |
Resultado:
Reparem que todos os elementos de um formulário ficam dentro das tags <form></form>. Não podemos usar nenhum controle, fora dessas tags.
Checkbox – input checkbox
Checkbox são aquelas caixas de seleção, onde marcamos ou desmarcamos uma opção. São campos de entrada de dados, onde o usuário assinala os campos que deseja responder com “SIM”, e deixa em branco aqueles que deseja marcar com “NÃO”. Veja o código abaixo:
1 2 3 | <form action="" method="post"> <input type="checkbox" /> </form> |
Resultado:
Radio buttons – input radio
O controle input radio permite ao usuário escolher apenas uma, dentre uma lista de opções. Ao contrário do controle input checkbox, onde o usuário pode escolher vários itens dentro de uma lista. Veja o código abaixo:
1 2 3 4 5 6 | <form action="" method="post"> <input type="radio" name="form" /> <input type="radio" name="form" /> <input type="radio" name="form" /> <input type="radio" name="form" /> </form> |
Resultado:
* Estudaremos mais adiante o atributo NAME.
Campo oculto – input hidden
Podemos armazenar informações sobre o usuário em campos ocultos de um formulário. Esses campos não serão renderizados pelo navegador, e são de grande importância para qualquer sistema dinâmico (que utiliza alguma linguagem de programação). Veja o código abaixo:
1 2 3 | <form action="" method="post"> <input type="hidden" value="valor do campo oculto" /> </form> |
* Estudaremos mais adiante o atributo VALUE.
Caixa de texto para senhas – input password
Já perceberam que quando vamos digitar uma senha em qualquer site, ao invés de aparecer o texto digitado, surgem pequenos marcadores (normalmente bolinhas escuras e preenchidas)? Pois é, não seria nada legal digitar nossas senhas, para que qualquer um possa ver na tela do nosso monitor. Podemos criar campos de formulários específicos para digitação de senhas. Veja o código abaixo:
1 2 3 | <form action="" method="post"> <input type="password" /> </form> |
Resultado:
Campo para upload de arquivos – input file
Em muitas situações precisamos anexar arquivos aos nossos formulários (uma foto, um arquivo de texto, uma planilha etc.). Nesses casos, sempre há um caixa de texto com um botão embutido, e ao clicar nele podemos escolher um arquivo qualquer em nosso computador, para fazer um upload. Para criar esse campo, basta seguir o código abaixo:
1 2 3 | <form action="" method="post"> <input type="file" /> </form> |
Resultado:
Botões – input submit e reset
Podemos também criar botões para enviar formulários, ou simplesmente apagar seus dados. Veja o código abaixo:
1 2 3 4 | <form action="" method="post"> <input type="submit" value="ENVIAR" /> <input type="reset" value="LIMPAR" /> </form> |
Resultado:
Bom pessoal, por hoje finalizamos! No próximo tutorial vamos terminar a lista de elementos de um formulário. Bom estudo e até lá!
Abraços,
Diego.