Você está aqui: Principal » Lista Completa de Tutoriais

Sobre este Tutorial

Autor:	Júlio César da Silva Abreu
Data:	10-05-2005
Categoria:	Programação Web
Assunto:	PHP - BÁSICO
Visitas:

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 <? e ?>.

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 <form> e </form>.

Campo Texto

Campo para entrada de texto comum.

Declaração:

Parâmetros

Size – O tamanho do elemento em caracteres na página Html (que será exibido na tela).

Maxlength – É o tamanho máximo do texto que pode ser inserido no elemento.

Value – É utilizado quando há necessidade de se pré-definir um valor para o elemento. Este valor pode ser normalmente alterado pelo usuário.

Campo Senha

Tipo de campo idêntico ao anterior, mas quando o usuário digita, os caracteres são substituídos por “*”.

Obs.: O campo senha não possui nenhum tipo de criptografia, apenas coloca uma mascar no texto inserido.

Declaração:

Parâmetros

Size – O tamanho do elemento em caracteres na página Html (que será exibido na tela).

Maxlength – É o tamanho máximo do texto que pode ser inserido no elemento.

Value – É utilizado quando há necessidade de se pré-definir um valor para o elemento. Este valor pode ser normalmente alterado pelo usuário.

Botão Rádio (Radio button)

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

Utilizado para chamar funções que rodam no browser (Javascript).

Declaração:

Parâmetros

Value – O texto que aparecerá no Botão.

Select

Utilizado para selecionar uma ou mais opções de uma lista predefinida.

Declaração:

Parâmetros

Multiple – Se existir, permite que sejam selecionadas múltiplas opções através das teclas Ctrl ou Shift.

Size – Número de opções exibidas por vez na tela. Se o size estiver setado para “1” que é o default e não existir o parâmetro multiple, o elemento é exibido como um Combo Box. Caso contrário é exibido como um Select List.

Option – cada subtag option adiciona uma opção ao elemento.

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 <option> e </option>

Á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 <textarea> e </textarea>.

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

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 vamos colocar alguns elementos para entrada de dados.

Criar um campo texto para entrada do nome, um checkbox perguntando se o usuário leu o tutorial e um campo select para entrada da nota dada ao tutorial. Assim:

A página deve ficar 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.

LISTA DE TODOS OS TUTORIAIS DISPONÍVEIS

LIVROS CAMPEÕES DE VENDA NO SITE

Cursos Online com Certificado e Suporte à Dúvidas

CURSOS ONLINE COM CERTIFICADO - INDICADOS POR JÚLIO BATTISTI EM PARCERIA COM BRAVA CURSOS
INFORMÁTICA
Curso de Digitação Formatando e Instalando Computador Excel para Iniciantes Curso Compre no Ebay Informática Educativa Curso de Linux	Segurança na Internet Montagem e Manutenção de Computadores Curso Remoção de Vírus Curso Ubuntu Instalação Linux - Ubuntu
AdministraÇÃo
Gestão de Projetos e Empreendedorismo Benefícios da Previdência Curso HP 12C Matemática Financeira Curso Análise Salarial	Processo de Elaboração de Questionário Excelência no Atendimento ao Cliente Logística do Transporte Licitações e Contratos Administrativos
Profissionalizante
Adestramento Canino Como fazer pesquisa Científica e Monografia Curso de Corte e Costura Supervisor de Telemarketing Balconista de Padaria Curso Educação Infantil	Recepcionista e Secretaria Velas Artesanais Relações Interpessoais Curso de Arbitragem Bullying e Cyberbullying Capacitação de Tutores em EAD
EstÉtica
Curso de Massoterapia Curso de Depilação Drenagem Linfática Curso de Maquiagem Limpeza Turbinada de Pele	Alisamento e Relaxamento Capilar Curso de Etiqueta SPA de Vinhoterapia na Estética Facial Curso de Shantala Introdução à Colorimetria Capilar
Pessoal
Curso de Caligrafia Memorização Chefia e Liderança Curso Falar em Público Curso Bases Neurológicas Leitura Dinâmica Planejamento de Projeto Pessoal Reforma Ortográfica	Como Passar em Concursos Públicos Direção Defensiva Administração do Tempo Curso de Redação Curso de Meditação Como Passar no Vestibular Atualização Gramatical
NegÓCIOS
Relações Humanas e Ética Profissional Marketing e Vendas Diretas	Persuasão em Vendas
Entretenimento
Curso de Mágica
SaÚde
Primeiros Socorros Curso de Fitoterapia Curso de Aromaterapia Medicina Alternativa Plantas Medicinais	Técnicas básicas de Enfermagem O Trabalho do Agente Comunitário de Saúde Ergonomia - Postura Correta em Frente ao Computador Ética Profissional - Ênfase em Radiologia Adolescência: Visão Saúde do Assunto
Meio Ambiente
Curso Gestão Ambiental Jardinagem e Paisagismo	Curso de Reciclagem Curso de Bonsai
MÚsica
Curso de Violão
NutriÇÃo
Higiene e Manipulação de Alimentos Congelamento de Alimentos	Culinária Básica Culinária Intermediária
RelaÇÕes Humanas
Curso Gestão de Pessoas Departamento Pessoal Desenvolvimento Pessoal Empresarial Curso de Telemarketing Curso Dinâmica em Grupo Rescisão Contrato de Trabalho Folha de Pagamento na Prática	Atendimento ao Cliente Adm. da Empregada Doméstica Curso de Homolognet Recursos Humanos - Férias Recursos Humanos - 13° Salário Registro de Empregados
Web Master
Curso de HTML Curso de WordPress	Curso de HTML5
Designer GrÁfico
Curso de Corel Draw Efeitos Especiais com InDesign CS5	Efeitos Tipográficos com InDesign CS5

CURSO EM FORMATO DE VÍDEO-AULA

EXEMPLOS PRÁTICOS PASSO A PASSO COM SOM E IMAGEM

Clique no curso para informações detalhadas

Curso

Duração

Informações

ACCESS

Vídeo Aula: Access 2007 - Consultas - Curso Completo e Prático

4:30h

LOJA DE LIVROS

VÍDEO-AULAS

E-BOOKS/CURSOS

CURSOS ONLINE COM CERTIFICADO

CURSOS COMPLETOS EM CD

CD-01

CD-02

CD-03

CD-04

CD-05

CD-06

CD-07

CD-08

CD-09

CD-10

CONTATO

Você está aqui: Principal » Lista Completa de Tutoriais

Sobre este Tutorial

Trabalhando com Formulários HTML

Formulários HTML

Criando um Form

Elementos do Form

Trabalhando com os dados enviados pelo Form

Colocando em Prática

Conclusão

:: Tutoriais Relacionados

CURSOS
COMPLETOS EM CD