Embed Size (px)
DESCRIPTION
Curso Técnico de Gestão e Programação de Sistema Informáticos, ano lectivo 2010/2011.5 – Desenvolvimento de Páginas Web Dinâmicas: Javascript e Forumlários
Citation preview
Formulários
Agrupamento de Escolas da BatalhaMiguela FernandesMarço 2011
JAVASCRIPT
M5
Sumário
Iremos abordar: RevisõesJavaScript DOM Javascript e formuláriosFormuláriosFormulários: tipo de camposTAGsActividades práticas
MF. 2
Revisõeso O JavaScript é uma linguagem de scripting,
orientada a objectos e independente de plataformas
o Criada pela NetScape e interpretada pelos Browsers
o Código embebido em paginas HTMLo Utilizada para:
• Interactividade nas páginas HTML• Validar formulários
o Interpretada pelos BrowsersMF. 3
JavaScript DOM - Document Object Model(1)
MF. 4
o window - contém a informação sobre as janelas e frames
o document - contém informação sobre o documento HTML e permite aceder aos elementos HTML dentro do documento
o navigator - contém informação sobre o browser do utilizador
o event - contém informação sobre os eventos que ocorrem na página
JavaScript Dom - Document Object Model(2)
MF. 5
Javascript e formulários
MF. 6
Formulários: forma mais comum de interacçãoentre uma página web e o utilizador. Podemos usá-los para:– registo num site– preencher dados para Segurança Social– responder a um inquérito…
Javascript: fica responsável por validar os dados do formulário, impedindo a sua submissão até que estejam correctos.
Formulários (1)
MF. 7
o Tag <FORM> …</FORM> – Define o conjunto de informação que será enviado
para um processo a executar num servidor Web.– Atributos:
– ACTION = URL do processo que irá processar a informação transmitida;
– METHOD = “GET” | “POST”– NAME = nome do objecto– TARGET = URL onde será mostrado (_self, _parent, _blank e
_top)
Formulários (2)
MF. 8
<FORM NAME="form1" >
</FORM>
• campos de texto;• zonas de texto com várias
linhas;• listas de selecção;• botões de selecção;• botões de comando;• etc...
Formulários: tipo de campos
MF. 9
Formulários: exemplo
MF. 10
<HTML><HEAD><SCRIPT LANGUAGE="javascript">function escreve() {var test = document.form1.caixa.value;alert("Escreveste: " + test);}</SCRIPT></HEAD><BODY><FORM NAME="form1"><INPUT TYPE="text" NAME="caixa" VALUE="“/><BR><INPUT TYPE="button" NAME="botao" VALUE="Submeter"
onClick="escreve()“/></FORM></BODY></HTML>
Aceder a um campo em javascript (1)
…..<SCRIPT LANGUAGE="javascript">function verificar() {var test = document.form1.valor.value;alert("Escreveste: " + test);}</SCRIPT>……<FORM NAME="form1"><INPUT TYPE="text" NAME=“valor" VALUE="“/><BR><INPUT TYPE="button" NAME="botao" VALUE=“Enviar" onClick=" verificar()“/></FORM>……
MF. 11
http://www.truquesedicas.com/tutoriais/javascript/00012a.htm
Actividade prática 1
Faz download do powerpoint e muda o código de forma a informar o utilizador o que digitou, mas se não digitar nada também deverá saber que “Não digitou nada!!”
Publica o resultado no wikispaces.Ter algum cuidado!!!
MF. 12
Formulários: input
MF. 13
<INPUT TYPE = "TEXT" NAME="nome" SIZE = "30" MAXLENGTH="50“/> Nome<BR>
tipo de controlode input
Nome do campo
tamanho comprimentomáximo de caracteres
<INPUT TYPE = ... /> pode ser:TYPE = “text” | “password” | “radio” | “checkbox” | “image” | “file” | “submit” | “reset” | “button” | “hidden”;
http://www.w3schools.com/html/html_forms.asp
TAG: input radio e list box
MF. 14
Sexo: <INPUT TYPE="RADIO" NAME="sexo" VALUE = "M" >Masculino <INPUT TYPE="RADIO" NAME="sexo" VALUE = "F" >Feminino
Tipo de input nome campo Identificação da opçãoescolhida
Pretendo ser contactado por:<SELECT NAME="form_contacto"><OPTION VALUE="vmail" SELECTED>email <OPTION VALUE="vtel">telefone<OPTION VALUE=“vtlm“>telemóvel</SELECT>
nome do campo
Identificação da opção escolhida
opção escolhidapor defeito...
Aceder a um campo em javascript (2)
….. <SCRIPT LANGUAGE="javascript">function mudar() {
var textoin =document.form2.input.value;
document.form2.output.value=textoin } </SCRIPT>….<FORM NAME="form2"> <INPUT TYPE="text" NAME="input" VALUE=""> Entrada<BR>
<INPUT TYPE="button" NAME="botao" VALUE="Afixar" onClick=“mudar()“/><BR>
<INPUT TYPE="text" NAME="output" VALUE="“/> Saída …… MF. 15
Actividade prática 2
Reformula o código para que seja mostrado no numa janela de alerta a informação relativa ao nome da pessoa, sexo e forma de contacto.
Dica: usar funções
MF. 16
TAG: caixa de memo
MF. 17
Observações<BR>
<TEXTAREA NAME="obs" COLS = "40" ROWS="5">
</TEXTAREA> nome do camponúmero de colunas em caracteres
número de linhas
TAG: checkbox
MF. 18
Tipo de input nome campo Identificação da opçãoescolhida
Tempos livres :<INPUT TYPE=”CHECKBOX” NAME”=”hob” value=”ler” > Ler<INPUT TYPE=”CHECKBOX” NAME=”hob” value=”estud”> Estudar<INPUT TYPE=”CHECKBOX” NAME=”hob” value=”cine” checked> Cinema<INPUT TYPE=”CHECKBOX” NAME =”hob” value=”pesca”> Pescar
TAG: submit e reset
MF. 19
<INPUT TYPE = "SUBMIT" VALUE = "Enviar“/>
<INPUT TYPE = "RESET" VALUE = "Limpar“/>
<INPUT TYPE=”BUTTON” VALUE=”Carregue para ...”/>
descrição do botão
Botão
Submete os dados para processamento, vão para o servidor
TAG: FILE
MF. 20
Upload do ficheiro:
<INPUT TYPE=”FILE” NAME=”fich” size=”40” maxlength=“50”/>
tamanho em caracteres da caixa de texto
nome campo tamanho máximo do nome do ficheiro
MF. 21
<HTML><HEAD><SCRIPT LANGUAGE="javascript">function escreve() {var test = document.form1.caixa.value;alert("Escreveste: " + test);}</SCRIPT></HEAD><BODY><FORM NAME="form1"><INPUT TYPE="text" NAME="caixa" VALUE=""/><BR><INPUT TYPE="button" NAME="botao" VALUE="Submeter" onClick="escreve()"/> <br>Sexo:<INPUT TYPE="RADIO" NAME="sexo" VALUE = "M" />Masculino <INPUT TYPE="RADIO" NAME="sexo" VALUE = "F" />Feminino <br>Pretendo ser contactado por:<SELECT NAME="form_contacto"><OPTION VALUE="vmail" SELECTED>email <OPTION VALUE="vtel">telefone<OPTION VALUE=“vtlm“>telemóvel</SELECT> <br>Observações:<br><TEXTAREA NAME="obs" COLS = "40" ROWS="5"> </TEXTAREA> <br>Tempos livres :<INPUT TYPE="CHECKBOX" NAME="hob" value="ler" /> Ler<INPUT TYPE="CHECKBOX" NAME="hob" value="est"/> Estudar<INPUT TYPE="CHECKBOX" NAME="hob" value="cine" checked/> Cinema<INPUT TYPE="CHECKBOX" NAME ="hob" value="pesca"/> Pescar<INPUT TYPE=”FILE” NAME=”fich” size=”40” maxlength=“50”> <br><INPUT TYPE = "SUBMIT" VALUE = "Enviar"/><INPUT TYPE = "RESET" VALUE = "Limpar"/><INPUT TYPE="BUTTON" VALUE="Carregue para ..."/></FORM></BODY></HTML>
Formulário para envio de email…<form action="MAILTO:[email protected]" method="post"
enctype="text/plain">Nome:<br /><input type="text" name="name" value=“" /><br />Email:<br /><input type="text" name="mail" value=“" /><br />Comentário:<br /><input type="text" name="comenta" value=“" size="50" /><br /><br /><input type="submit" value="Send"><input type="reset" value="Reset"></form>…
MF. 22
Formulários (cenas dos próximos capítulos…)
MF. 23
o Transfere informação para o servidor recorrendo aos métodos HTTP:
–Método GET –Método POST
Webgrafia e Bibliografiao http://www.w3schools.com/html/html_forms.asp o http://javascript.internet.com/o https://woc.ipca.pt/est/class/getmaterial.do?idclass=
627&idyear=13
o Teagu, J. C. (2004). DHTML and CSS for the World Wide Web (2ª Ed.). USA:Peachpit Press.
MF. 24
