5 – Desenvolvimento de Páginas Web Dinâmicas:Formulários

1. M5 JAVASCRIPT Formulários Agrupamento de Escolas da Batalha MiguelaFernandes Março 2011

3. JavaScript DOM

4. Javascript e formulários

5. Formulários

6. Formulários: tipo de campos

7. TAGs

8. Actividades práticasMF. 2

9. Revisões O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela NetScape e interpretada pelos Browsers Código embebido em paginas HTML Utilizada para: Interactividade nas páginas HTML Validar formulários Interpretada pelos Browsers MF. 3

10. JavaScript DOM - DocumentObjectModel(1) MF. 4 window - contém a informação sobre as janelas e frames document - contém informação sobre o documento HTML e permite aceder aos elementos HTML dentro do documento navigator - contém informação sobre o browser do utilizador event - contém informação sobre os eventos que ocorrem na página

11. JavaScript Dom - DocumentObjectModel(2) MF. 5

12. Javascript e formulários MF. 6 Formulários: forma mais comum de interacção entre 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.

13. Formulários (1) MF. 7 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)

15. zonas de texto com várias linhas;

16. listas de selecção;

17. botões de selecção;

18. botões de comando;

20. Formulários: exemplo MF. 10 <HTML> <HEAD> <SCRIPT LANGUAGE="javascript"> function escreve() { vartest = 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>

21. Aceder a um campo em javascript (1) …..<SCRIPT LANGUAGE="javascript">function verificar() {vartest = 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

22. 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

24. TAG: input radio e list box Sexo: <INPUT TYPE="RADIO" NAME="sexo" VALUE = "M" >Masculino <INPUT TYPE="RADIO" NAME="sexo" VALUE = "F" >Feminino Tipo de input Identificação da opção escolhida nome campo nome do campo Pretendo ser contactado por: <SELECT NAME="form_contacto"> <OPTION VALUE="vmail" SELECTED>email <OPTION VALUE="vtel">telefone <OPTION VALUE=“vtlm“>telemóvel </SELECT> opção escolhida por defeito... Identificação da opção escolhida MF. 14

25. Aceder a um campo em javascript (2) ….. <SCRIPT LANGUAGE="javascript">function mudar() { vartextoin =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

26. 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

27. TAG: caixa de memo número de linhas Observações<BR> <TEXTAREA NAME="obs" COLS = "40" ROWS="5"> </TEXTAREA> nome do campo número de colunas em caracteres MF. 17

28. TAG: checkbox MF. 18 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 Tipo de input Identificação da opção escolhida nome campo

29. TAG: submit e reset MF. 19 Submete os dados para processamento, vão para o servidor <INPUT TYPE = "SUBMIT" VALUE = "Enviar“/> <INPUT TYPE = "RESET" VALUE = "Limpar“/> <INPUT TYPE=”BUTTON” VALUE=”Carregue para ...”/> descrição do botão Botão

30. 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

31. MF. 21 <HTML> <HEAD> <SCRIPT LANGUAGE="javascript"> function escreve() { vartest = 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>

32. Formulário para envio de email … <formaction="MAILTO:miguela@sapo.pt" 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

33. Formulários (cenas dos próximos capítulos…) MF. 23 Transfere informação para o servidor recorrendo aos métodos HTTP: Método GET Método POST

34. Webgrafia e Bibliografia http://www.w3schools.com/html/html_forms.asp http://javascript.internet.com/ https://woc.ipca.pt/est/class/getmaterial.do?idclass=627&idyear=13 Teagu, J. C. (2004). DHTML and CSS for the World Wide Web (2ª Ed.). USA:Peachpit Press. MF. 24

5 – Desenvolvimento de Páginas Web Dinâmicas:Formulários

Recomendados

Recomendados

Mais conteúdo relacionado

Mais de Agrupamento de Escolas da Batalha

Mais de Agrupamento de Escolas da Batalha (20)

Último

Último (20)

5 – Desenvolvimento de Páginas Web Dinâmicas:Formulários