Cap. 2 - PHP Intermediário
2.3 - Formulario HTML com PHP
Objetivo: Trabalhar com Formulários HTML usando PHP.Conteúdo da Aula:
- 1. Introdução
- 2. Conceitos Gerais dos Formulários
- 3. Texts Fields (Campos de Texto)
- 4. Radios Buttons (Múltipla Escolha)
- 5. Checboxes (Múltiplas Opções)
- 6. Drop-Dow Buttons (Menus) e a opção select
- 7. Uploads
- 8. Tipo escondido (hidden)
- 9. Submeter o Formulário
- 10. Recebendo Dados: GET e POST
- 11. Exercícios
1. Introdução
Formulários (forms) são páginas HTML que permitem que o usuário envie algum tipo de informação.
Os formulários em HP são compostos por elementos específicos, ou form elements.
Veja a página do W3C sobre formulários: w3c-forms
Confira alguns links com explicações e exemplos de formulários
Links Adicionais
2. Conceitos Gerais dos Formulários
2.1 TAG FORM
Um formulário é definido com a TAG <form>
<form> elementos do formuário </form>
2.2 Elemento input
A tag de formulário mais usada é a tag <input>
Existem diferentes tipos de entrada que podem ser definidos dentro da tag <input>
Utiliza-se o atributo type para defini-los.
Assim, um formulário conterá a tag <input> com seus atributos.
<form> <input COM SEUS ATRIBUTOS > </form>
2.3 Tipos de atributos do input
Existem diferentes tipos de entrada de dados via formulario:
Caixa e Áreas de Texto
Múltipla Escolha
Seleção
Opção de Upload
Esses tipos serão vistos nas próximas seções
Veja nos links abaixo modelos de Formulários com diferentes tipos.2.3.1 Exemplo de Utilização do INPUT com um tipo texto
<form> Nome: <input type="text" name="nome" /> <br /> Sobrenome: <input type="text" name="sobrenome" /> </form>
Como fica a aparência desse formulário:
No formulário acima foram criadas duas caixas de texto, para receberem dados via INPUT, cada uma com um nome de variável. Veremos em detalhes como trabalhar com formulário.
Ainda falta alguma coisa no formulário acima...
Antes de ver o que falta, vamos passar pelos tipos de entrada do formulário
Nas próximas seções (seções 3 a 9) veremos os TIPOS que são usados na tag INPUT.
3. Texts Fields (Campos de Texto)
Como visto acima, o tipo texto deve ser chamado a partir da tag input com o tipo text:
<form> LABEL <input type="text" name="NOME_DA_VARIAVEL" /> <br />
Sendo LABEL o nome que aparecerá no browser e NOME_DA_VARIAVEL o nome (interno) da variável que receberá o texto.
4. Radios Buttons (Múltipla Escolha)
Radio Buttons são usados para selecionar uma opção dentre várias.
Veja o exemplo a seguir
<form>
<input type="radio" name="sex" value="m" /> Masculino
<br />
<input type="radio" name="sex" value="f" /> Feminino
</form>
Importante
O tipo radio contém um nome (atributo name) e um valor (atributo value).
Veja como ficará no Browser:
Repare que APENAS UMA OPÇÃO PODE SER MARCADA
5. Checboxes (Múltiplas Opções)
As caixas de seleção possibilitam ao usuário escolher várias opções de um conjunto. São construídas com o tipo checkbox.
Veja o exemplo (extraído de w3schools)
<form> I have a bike: <input type="checkbox" name="vehicle" value="Bike" />
<br /> I have a car: <input type="checkbox" name="vehicle" value="Car" /> <br /> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane" /> </form>
Importante
Repare na utilização do atributo name que deve ser o mesmo para todas as opções, cada uma com um valor diferente.
Como ficará no browser:
Repare que você pode selecionar várias opções
6. Drop-Dow Buttons (Menus) e a opção select
<form> <select name="cars"> <option value="volvo">Volvo</option> <option value="bmw">BMW</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form>
Veja o exemplo seguinte
Existe a possibilidade de se ter uma seleção que não seja um menu. A opção select, quando usada com o modificador multiple possibilita uma lista de escolhas. Veja o formulário seguinte.
A diferença em relação ao anterior é que a opção select foi escrita:
<select name="cars" multiple>
Importante
Repare na utilização do atributo select que deve ter um nome. E as opções são definidas com o comando option, cada uma com seu value.
7. Upload
Para se usar uma caixa de diálogo para importar um arquivo deve-se utilizar a opção file para o tipo de entrada. Veja o exemplo a seguir.
<input name="file" type="file" />
Veja um outro exemplo (extraido de http://www.cs.tut.fi/~jkorpela/forms/file.html)
Importante
Veja nesse segundo exemplo que foi adicionado um botão que não comentamos ainda: o botão "enviar" (no caso do exemplo, send).
8. Tipo escondido
A opção hidden (escondido) é usada quando se deseja enviar algum dado (veremos adiante que o form envia o dado para algum lugar) que o usuário não vai digitar. Quem vai informar esse dado é o "próprio formulário".
Veja um exemplo de utilização do hidden
para envio de um, arquivo.<input type="hidden" name="MAX_FILE_SIZE" value="100" /> <input name="file" type="file" />
9. Submeter o Formulário
Obviamente, os dados informados tem que ser submetidos (para algum lugar...).
Todo formulário, portanto, deverá ter algum meio de ser enviado. No caso, vamos usar um botão de enviar, com o tipo submit
Veja como o botão enviar deve ser usado.
Repare que o valor (value) indica o que vai escrito no botão.
<input type="submit" value="Enviar">
10. Recebendo os dados
Até agora vimos os formulários em HTML que estruturam a página que irá receber os dados.
PERGUNTA (que não quer calar): onde entra o PHP.
Bem, o PHP entra na parte que RECEBE os dados.
Vejamos....
Métodos GET e POST
O PHP possui métodos (ou funções) para recebimento de dados (via algum protocolo)? GET e POST.
Método GET
Antes de explicar me detalhes, veja o exemplo (extraido de w3schools)
<form action="teste.php" method="get"> Name: <input type="text" name="fname" /> Age: <input type="text" name="age" /> <input type="submit" /> </form>
Execute o exemplo acima e repare o que acontecerá no seu browser
Veja como ficará o formulário
O que acontece quando temos um formulário e desejamos enviar para um programa PHP?
RESPOSTA: Devemos usar a opção action="nome_do_arquivo_PHP"
No caso acima, deve existir um arquivo PHP que irá receber, VIA MÉTODO GET, os dados.
Veja como deve ser o arquivo PHP
<?php //recebe dados $nome = $_GET["fname"]; $idade = $_GET["age"]; echo $nome."possui a idade de ".$idade." anos"; ?>
IMPORTANTE
Repare nas variáveis, na forma como o método é usado e o que acontece no endereço do seu browser.
Método POST
Veja agora, o mesmo exemplo, usando o método POST.
Execute o formulário abaixo. Repare o que acontece no seu browser.
Pergunta
Qual a diferença entre o método GET e POST que você percebeu?
Veja nos links abaixo.