Scribd
Carregar
50 visualizações

Aula 5 - Formulários HTML e JavaScript

Este documento apresenta os principais recursos de formulários HTML e conceitos básicos de JavaScript. Formulários são usados para entrada de dados do usuário através de elementos como <input>, <select> e <textarea>. JavaScript permite acessar e manipular os dados do formulário através de eventos como onClick e onChange.

Enviado por

Fábio Dos Santos
Direitos autorais
© © All Rights Reserved
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
50 visualizações

Aula 5 - Formulários HTML e JavaScript

Este documento apresenta os principais recursos de formulários HTML e conceitos básicos de JavaScript. Formulários são usados para entrada de dados do usuário através de elementos como <input>, <select> e <textarea>. JavaScript permite acessar e manipular os dados do formulário através de eventos como onClick e onChange.

Enviado por

Fábio Dos Santos
Direitos autorais
© © All Rights Reserved
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 2

Formulários HTML e JavaScript <BODY>

MBADSPHP - Tópico 1 / Aula 5 <form action="teste.php" method="POST">


<p> Formulário de Cadastro
Objetivo <p> Nome: <input type=”text” name=”nome”>
<p> Senha: <input type=password name=”nome”>
O objetivo desta aula é apresentar os recursos de formulário <p> Hobbie:
HTML e também mostrar alguns conceitos básicos de <br> <INPUT TYPE=CHECKBOX NAME="hobbie"
JavaScript. VALUE="leitura">Leitura
<br> <INPUT TYPE=CHECKBOX NAME="hobbie"
Conteúdo VALUE="esporte">Esporte
<br> <INPUT TYPE=CHECKBOX NAME="hobbie"
Formulários são utilizado basicamente para entrada de dados VALUE="cinema">Cinema
do usuário, como cadastro, atualização, remoção e <p> Sexo:
atualização de informações. O elemento <form> é utilizado <br> <INPUT TYPE=RADIO NAME="sexo"
para definir os elementos HTML responsáveis pela entrada de VALUE="masculino">Masculino
dados, e deve ser definido como <form action=”arquivo_script” <br> <INPUT TYPE=RADIO NAME="sexo"
method=”método”>. VALUE="feminino">Feminino
<p> Estado
No nosso Tópico, o conteúdo de arquivo_script será sempre <br>
um arquivo PHP, e o método será sempre POST, significando <select name=”estado”>
que os dados entrados pelo usuário fazem parte do corpo da <option> São Paulo
mensagem enviado ao servidor. <option> Rio de Janeiro
<option> Paraná
Os elementos HTML que possibilitam criar campos para </select>
entrada do usuário são INPUT, SELECT e TEXTAREA. <p> Observação:
<textarea cols=”30” rows=”5” name=”observacao”>
O elemento INPUT possui 7diferentes formas, de acordo com Aqui ... </textarea>
o conteúdo do atributo TYPE. <p> <input type=submit value=Submeter>
<input type=reset value=Cancelar>
• <input type=”text” name=”nome”> : insere uma caixa de </form>
texto para entrada de dados; </BODY>
</HTML>
• <input type=”hidden” name=”nome”> : cria uma caixa de
texto que não aparece para o usuário. Isso torna-se útil
para passar variáveis de um programa PHP para outro
programa PHP;

• <input type=”password” name=”nome”> : insere uma


caixa de texto para entrada de dados do tipo senha,
inserindo círculos preenchidos ao invés dos valores que o
usuário digita;

• <input type=”checkbox” name=”nome” value=”valor”>:


insere um botão para seleção ou não do usuário.
Normalmente, são utilizados vários desses juntos, dando
ao usuário a opção de selecionar um ou várias opções;

• <input type=”radio” name=”nome” value=”valor”> : insere


um botão para seleção ou não do usuário. Normalmente,
são utilizados vários desses juntos, dando ao usuário a
opção de selecionar um ou várias opções. A diferença
aqui é que os botões são mutualmente exclusivos. Os
outros “radio” da mesma categoria devem ter o mesmo
nome para que a exclusão possa funcionar corretamente.

• <input type=”submit” value=”valor”>: apresenta um botão


que gera o envio dos dados para o servidor. Figura 1

• <input type=”reset” value=”valor”>: apresenta um botão A linguagem JavaScript é muito utilizada para programação
que anula os valores entrados pelo usuário. na Web. Sendo assim, utilizaremos também essa linguagem
para programar com a linguagem PHP. Como haverá no curso
O elemento SELECT apresenta uma lista de dados por meio um Tópico exclusivamente para o ensino de JavaScript, esta
do campo OPTION. Exemplo: aula tem o objetivo de explicar os recursos utilizados nos
Tópicos posteriores deste curso.
<select name=”nome”>
<option> Dado 1 Para se ter acesso aos dados entrados pelo usuário através
<option> Dado 2 de um formulário, é necessário utilizar uma regra padrão
<option> Dado 3 JavaScript. Essa regra determina que o conteúdo dos campos
</select> de um formulário é acessado como:
document.nome_formulario_nome_campo.value.
O elemento TEXTAREA fornece uma área com mais uma
linha para entrada de texto. Exemplo: <textarea cols=”30” Considerando o formulário a seguir, pode-se acessar o valor
rows=”5” name=”observacao”> Aqui ... </textarea> da caixa de texto através do comando
“document.formula.nome.value”. Este comando é utilizado
A Figura 1 ilustra um formulário composto a partir do para todos os outros campos de um formulário.
documento HTML que segue. O exemplo procura se utilizar de
todos os elementos de formulário descritos anteriormente. <form name=”formula” action=”teste.php” method=”POST”>
<HTML> <input type=”text” name=”nome”
<HEAD>
<TITLE>Coloque o assunto aqui </TITLE> </form>
</HEAD>

© Daniel Facciolo Pires, 2007


Os eventos em JavaScript são executados quando o usuário
interage de alguma forma com um formulário HTML. Esse
evento permite que o JavaScript dispare ações que sejam
úteis para o programa em execução. Alguns tipos de evento
JavaScript são:

• onClick: utilizado normalmente quando um botão é


pressionado. Exemplo:

<input type=”submit” value=”Confirmar” onClick=”…”

• onBlur: utilizado muito quando uma caixa de texto perde o


foco. Exemplo:

<input type=”text” name=”nome” onBlur=”…”

• onChange: utilizado muito associado ao elemento


<SELECT>. Exemplo:

<select name=”hobbie” onChange=”.......”

Exemplificações de preenchimento destes eventos, bem como


sua praticidade, serão melhor explicadas nos Tópicos
posteriores.

Exercícios

1. Verifique como é possível alterar o comprimento das


caixas de texto.

2. Verifique como é possível definir que em um SELECT


pode-se selecionar mais de um item.

3. Verifique como é possível definir em um SELECT a


aparição de apenas 3 itens da lista.

4. Verifique como é possível definir em um SELECT a


seleção-padrão de um item da lista.

5. Refaça o formulário da Figura 1 utilizando o recurso de


Tabela. Verifique como fica bem melhor.

6. Consulte outros exemplos de evento em JavaScript.

7. Consulte exemplos práticos de evento em JavaScript.

© Daniel Facciolo Pires, 2007

Você também pode gostar