Programação Na Web Formulários HTML Envio de Informação para o servidor 1 António Gonçalves Agenda Envio de dados através de formulários A Marca FORM Controle para Text Botões tipo Push Botões Check boxes e radio Caixas tipo Combo e list Controle de envio de ficheiros Mapas de Imagens (lado do servidor) Campos escondidos Agrupamento de controles 2 http://ltodi.est.ips.pt/leonardo/ci/materialapoio.htm 1
Envio de dados pelo GET <BODY BGCOLOR="#FDF5E6"> <H2 ALIGN="CENTER">A Sample Form Using GET</H2> <FORM ACTION="http://localhost:8088/SomeProgram"> <CENTER> First name: <INPUT TYPE="TEXT" NAME="firstName" VALUE="Joe"><BR> Last name: <INPUT TYPE="TEXT" NAME="lastName" VALUE="Hacker"><P> <INPUT TYPE="SUBMIT"> </CENTER> </FORM> </BODY></HTML> 3 http://ltodi.est.ips.pt/leonardo/ci/materialapoio.htm Resultado Inicial 4 http://ltodi.est.ips.pt/leonardo/ci/materialapoio.htm 2
Resultado do envio dos Dados 5 http://ltodi.est.ips.pt/leonardo/ci/materialapoio.htm Envio de dados pelo POST <BODY BGCOLOR="#FDF5E6"> <H2 ALIGN="CENTER">A Sample Form Using POST</H2> <FORM ACTION="http://localhost:8088/SomeProgram" METHOD="POST"> <CENTER> First name: <INPUT TYPE="TEXT" NAME="firstName" VALUE="Joe"><BR> Last name: <INPUT TYPE="TEXT" NAME="lastName" VALUE="Hacker"><P> <INPUT TYPE="SUBMIT"> </CENTER> </FORM> </BODY></HTML> 6 http://ltodi.est.ips.pt/leonardo/ci/materialapoio.htm 3
Resultado Inicial 7 http://ltodi.est.ips.pt/leonardo/ci/materialapoio.htm Resultado do envio dos dados 8 http://ltodi.est.ips.pt/leonardo/ci/materialapoio.htm 4
Codificação do URL : Formulário Original 9 http://ltodi.est.ips.pt/leonardo/ci/materialapoio.htm Codificação do URL: Resultado 10 http://ltodi.est.ips.pt/leonardo/ci/materialapoio.htm 5
Tipos de Texto Textfields <INPUT TYPE="TEXT" NAME=" " > VALUE associa valor inicial Password Fields <INPUT TYPE="PASSWORD" NAME=" " > Usa sempre POST Text Areas <TEXTAREA NAME=" " ROWS=" " COLS=" "> </TEXTAREA> A interpretação normal do HTML é anulada entre as marcas <TEXTAREA > e </TEXTAREA> 11 http://ltodi.est.ips.pt/leonardo/ci/materialapoio.htm Botões Submit <INPUT TYPE="SUBMIT" > Usar NAME para ter vários botões Usar VALUE para alterar label Reset <INPUT TYPE="RESET" > Usar VALUE para alterar label JavaScript <INPUT TYPE="BUTTON" onclick="somejavascriptfunction()" > Personalizados <BUTTON TYPE="SUBMIT" >HTML</BUTTON> Internet Explorer and Netscape 6 only 12 http://ltodi.est.ips.pt/leonardo/ci/materialapoio.htm 6
Como usar vários botões do tipo Submit <CENTER> Item: <INPUT TYPE="TEXT" NAME="Item" VALUE="256MB SIMM"><BR> <INPUT TYPE="SUBMIT" NAME="Add" VALUE="Add Item to Cart"> <INPUT TYPE="SUBMIT" NAME="Delete" VALUE="Delete Item from Cart"> </CENTER> 13 http://ltodi.est.ips.pt/leonardo/ci/materialapoio.htm Caixas to tipo Check Boxes Format <INPUT TYPE="CHECKBOX" NAME=" " > O atributo CHECKED faz com que o estado inicial seja marcado Nome/valor só é enviado se a caixa estiver marcada quando é submetido o formulário Exemplo HTML <P> <INPUT TYPE="CHECKBOX" NAME="noEmail" CHECKED> Check here if you do <I>not</I> want to get our email newsletter Examplo resultado 14 http://ltodi.est.ips.pt/leonardo/ci/materialapoio.htm 7
Botões tipo Radio Formato <INPUT TYPE ="RADIO" NAME=" " VALUE=" " > Todos os botões de um mesmo grupo têm que ter o mesmo nome (NAME) Em cada instante só um botão esta activo Exemplo <DL> <DT>Credit Card: <DD><INPUT TYPE="RADIO" NAME="creditCard" VALUE="visa"> Visa <DD><INPUT TYPE="RADIO" NAME="creditCard" VALUE="mastercard"> Master Card... </DL> 15 http://ltodi.est.ips.pt/leonardo/ci/materialapoio.htm Caixas do tipo Combo Formato SELECT Valor Inícial OPTION retorna opções VALUE Exemplo Favorite language: <SELECT NAME="language"> <OPTION VALUE="c">C <OPTION VALUE="c++">C++ <OPTION VALUE="java" SELECTED>Java <OPTION VALUE="lisp">Lisp <OPTION VALUE="perl">Perl <OPTION VALUE="smalltalk">Smalltalk </SELECT> 16 http://ltodi.est.ips.pt/leonardo/ci/materialapoio.htm 8
Caixas do tipo List Formato Identico as caixas combo, mas permite definir vários Exemplo Languages you know:<br> <SELECT NAME="language" MULTIPLE> <OPTION VALUE="c">C <OPTION VALUE="c++">C++ <OPTION VALUE="java" SELECTED>Java <OPTION VALUE="lisp">Lisp <OPTION VALUE="perl" SELECTED>Perl <OPTION VALUE="smalltalk">Smalltalk </SELECT> 17 http://ltodi.est.ips.pt/leonardo/ci/materialapoio.htm Outros Botões e opções File upload controls Lets user select a file and send it to the server Server-side image maps User clicks on an image and form gets submitted. Form data gets sent as name.x=x-pos&name.y=y-pos Hidden fields Preset NAME and VALUE sent with form submission.. Grouping Controls FIELDSET lets you visually group forms. Internet Explorer and Netscape 6 only. Tab order control TABINDEX (Internet Explorer and Netscape 6 only) 18 http://ltodi.est.ips.pt/leonardo/ci/materialapoio.htm 9
Sumário General process FORM uses ACTION to specify base URL Input elements each have a NAME User enters values When form submitted, URL is baseurl?name1=value1&name2=value2& For POST requests, name/value pairs sent on separate line (not part of URL) Textfields <INPUT TYPE="TEXT" > Submit Buttons <INPUT TYPE="SUBMIT" > 19 http://ltodi.est.ips.pt/leonardo/ci/materialapoio.htm 10