Formulários HTML. Envio de Informação para o servidor

Tamanho: px

Começar a partir da página:

Download "Formulários HTML. Envio de Informação para o servidor"

Márcia Castilhos Alcântara
10 Há anos
Visualizações:

1 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 1

boxes e radio Caixas tipo Combo e list Controle de envio de ficheiros Mapas de Imagens (lado do

2 Envio de dados pelo GET <BODY BGCOLOR="#FDF5E6"> <H2 ALIGN="CENTER">A Sample Form Using GET</H2> <FORM ACTION=" <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 Resultado Inicial 4 2

Last name: <INPUT TYPE="TEXT" NAME="lastName" VALUE="Hacker"><P> <INPUT TYPE="SUBMIT"> </CENTER> </FORM>

3 Resultado do envio dos Dados 5 Envio de dados pelo POST <BODY BGCOLOR="#FDF5E6"> <H2 ALIGN="CENTER">A Sample Form Using POST</H2> <FORM ACTION=" 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 3

ACTION="http://localhost:8088/SomeProgram" METHOD="POST"> <CENTER> First name: <INPUT TYPE="TEXT" NAME="firstName"

4 Resultado Inicial 7 Resultado do envio dos dados 8 4

5 Codificação do URL : Formulário Original 9 Codificação do URL: Resultado

6 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 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

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

7 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 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="no " CHECKED> Check here if you do <I>not</I> want to get our newsletter Examplo resultado

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

8 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 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>

9 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 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)

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.

10 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" >

name1=value1&name2=value2& For POST requests, name/value pairs sent on separate line (not part

Documentos relacionados

Programação para Internet I

Programação para Internet I Aulas 09 e 10 Fernando F. Costa [email protected] Formulários O formulário representa o modo mais importante de interatividade que a linguagem HTML oferece. Um formulário pode