Saiba como criar e utilizar formulários html para capturar e tratar dados de usuários, além de aprender sobre objetivos, pré-requisitos, parâmetros de form, elementos de form e como trabalhar com os dados enviados pelo form. Este tutorial inclui exemplos e práticas.
O que você vai aprender
Qual é o objetivo de usar formulários HTML?
Quais são os parâmetros importantes de um formulário HTML?
Como criar e utilizar diferentes tipos de elementos de entrada em um formulário HTML?
Baixe Trabalhando com Formulários HTML: Capturando e Tratando Dados de Usuários e outras Resumos em PDF para Informática, somente na Docsity!
Trabalhando com Formulários HTML
Objetivos: Neste tutorial aprenderemos como utilizar forms HTML para capturar dados entrados por usuários para utilização e tratamento no PHP. Pré-requisitos: Ter acompanhado os tutoriais anteriores da série.
Formulários HTML
Os formulários HTML são estruturas que permitem que usuários submetam dados a uma página. Esses dados podem ser tratados e/ou armazenados dependendo da aplicação. Obs.: Formulários são HTML, portanto não precisam estar entre .
Criando um Form
Os forms fazem parte do código html, portanto devem ser definidos como as tags desta linguagem. Sempre com uma tag de abertura e outra de fechamento, inserindo o conteúdo entre estas duas. Exemplo: Parâmetros do Form
Action – É o script ou página para onde os dados serão submetidos. Neste script que normalmente os dados são tratados. Method - É o método de envio dos dados. Pode ter dois valores: GET = Passa os valores pela URL, ou seja, podemos ver as variáveis passadas na Url da página destino definida no campo action. Não é muito aconselhável o uso do método GET, pois ele expõe o nome e valor das variáveis, o que pode ser utilizado por pessoas com intenções maléficas. POST = Passa as variáveis de maneira transparente para o usuário. É o método mais aconselhável. Veja mais diferenças em http://www.cs.tut.fi/~jkorpela/forms/methods.html
Elementos do Form
Podemos inserir vários tipos de entrada de dados em um formulário, a maioria delas definida pela tag input. Todo elemento possui um parâmetro name que é utilizado para identificar a variável onde o dado está contido no script destino. Lembrando que estes elementos devem ser inseridos entre as tags
. **Campo Texto** Campo para entrada de texto comum. **Declaração: Parâmetros**
Utilizado para entradas de múltipla escolha onde o usuário só pode escolher uma única opção. Para que o interpretador saiba que as opções fazem parte do mesmo grupo, e permita que só uma seja selecionada, basta colocar o mesmo nome no parâmetro name dos botões rádio. Declaração: Parâmetros Checked – Se for declarado o elemento terá seu estado inicial como selecionado. Value – É o valor que será passado à página destino quando o formulário é submetido se este elemento estiver selecionado. Botão de Checagem (CheckBox) Utilizado para entradas de múltipla escolha onde o usuário pode escolher várias opções. Cada opção deve ter um nome independente. Declaração: Parâmetros Checked – Se for declarado o elemento terá seu estado inicial como marcado.
Value – É o valor que será passado à página destino quando o formulário é submetido se este elemento estiver marcado. Botão Submeter (Submit) Botão que submete o formulário a pagina destino especificada no parâmetro action do form. Declaração: Parâmetros Value – O texto que aparecerá no Botão. Botão Reset Volta todos os campos do formulário para os valores iniciais, ou seja, os valores especificados nos parâmetros value de cada um dos campos. Declaração: Parâmetros Value – O texto que aparecerá no Botão. Botão
Value – O value de cada option é o valor passado caso aquela opção seja selecionada. Obs.: O texto da opção deve ser especificado entre as tags Área de Texto Permite a entrada de um texto no estilo Memo, com várias linhas. Declaração: Parâmetros Cols – Número e caracteres por linha. Rows – Número de linhas do campo. Obs.: não existe o parâmetro value , o texto inicial deve ser definido entre as tags
. **Trabalhando com os dados enviados pelo Form** Como já vimos anteriormente, os forms submetem os dados à um script ou página especificada no parâmetro ACTION. Este script ou página pode ser ou não o mesmo onde o form está contido. No script destino, são criadas automaticamente variáveis com os mesmos nomes dos elementos do form, contendo o valor submetido.
Por exemplo: Em uma página qualquer temos o seguinte código: Que resulta no seguinte Formulário: Quando este form for submetido, na página proc.php será criada uma variável com o nome $nome contendo o texto que foi digitado no campo. Colocando em Prática Vamos criar duas páginas no nosso servidor de teste: tut3.php – Onde colocaremos um form com algumas perguntas e resumo.php – Onde serão exibidas as respostas de uma maneira amigável. Na primeira vamos criar uma estrutura Html normal, e dentro do body criar um form que submete para a pagina resumo.php, da seguinte maneira:
Agora criaremos a página resumo.php, que receberá os dados. Colocamos a estrutura Html, e dentro do body imprimimos as variáveis. Desta maneira: Teste o formulário. Experimente adicionar outros tipos de entrada, trabalhe mais com as variáveis e etc. Conclusão Este tutorial mostrou como utilizar forms HTML, explicando detalhadamente seus elementos e respectivos parâmetros e como capturar e utilizar os dados enviados pelos mesmos.
