Anda di halaman 1dari 52

Programao para Web I

Aula 4
PROF. DNIS L. ZANIRO

Aula 4 - Sumrio
Objetivos Criao de formulrios

Exerccios

Objetivos
Entender conceitos fundamentais sobre submisso

de dados na Web. Criar formulrios em HTML explorando as caractersticas dos principais elementos de controle.

Elaborao de formulrios
Os formulrios constituem um dos recursos mais

importantes da linguagem HTML. Formulrios recebem o suporte de quase todos os navegadores e tornam possvel criar aplicaes que coletam e processam dados do usurio. A grande maioria das aplicaes Web atualmente apresentam formulrios de diversos tipos: formulrios para login, formulrios para cadastro, formulrios de busca, etc.

Elaborao de formulrios
Formulrios so constitudos de uma ou mais caixas de

entrada de texto, botes, caixas de mltipla-escolha, menus, e assim por diante. Pode haver mais de um formulrio em um mesmo documento HTML. Dentro de cada formulrio, pode-se inserir qualquer tipo de contedo, incluindo texto e imagens.
Nesse formulrio, h texto (Nome:, Endereo: e Idade:), 3 caixas para insero de valores e dois botes que podem ser ativados pelo usurio.

Elaborao de formulrios
O usurio preenche todos (ou alguns) campos no formulrio e clica em um boto para submeter os dados. O navegador empacota os valores fornecidos pelo usurio e os envia para um servidor ou para um endereo de e-mail.

Nesse caso, os programas executando no lado do servidor processam a informao e criam uma resposta, normalmente em HTML (ou XHTML).

Nesse caso, as informaes do formulrio so simplesmente enviadas para a caixa de e-mails de uma pessoa, cujo endereo tenha sido especificado no cdigo HTML do formulrio.

Elaborao de formulrios
Formulrios so inseridos em documentos HTML usando-se o

par de tags <FORM>...</FORM>. <html> <head> Todos os elementos do <title>...</title> formulrio devem ser </head> inseridos nesse trecho: entre as tags <form> e <body> </form>. <form> ... </form> </body> </html>

Elaborao de formulrios
A tag <FORM>, assim como todas as tags <HTML>, admite

atributos.
Existem 3 atributos principais que devem ser usados na tag

<FORM>:

Action Method
Enctype

Esse atributo usado para especificar o endereo (URL) da aplicao que dever processar os dados do formulrio (caso exista um servidor), ou um endereo de e-mail. Esse atributo usado para especificar o mtodo de transmisso de dados que o navegador dever usar para enviar os valores preenchidos no formulrio. Esse atributo usado para especificar o tipo de codificao dos dados que dever ser usado para que a transmisso acontea pela rede.

Elaborao de formulrios
Action = URL_da_aplicao | mailto: endereo_de_email

<html> <head> <title>...</title> </head> <body> <form action=...> Exemplo: ... </form> <form action=http ://www.kumquat.com/cgi-bin/update> ... </body> </form> </html>

Elaborao de formulrios
Method = POST | GET

<html> <head> <title>...</title> </head> <body> <form action=... method=...> ... </form> Exemplo: </body> <form action=URL_da_aplicao method=get> ... </html>
</form>

Elaborao de formulrios
Usando o mtodo POST, o navegador enviar os dados do

formulrio em dois passos: 1 Passo:


Browser Web
Solicitao de conexo

2 Passo:
Browser Web
Dados do formulrio

Elaborao de formulrios
Usando o mtodo GET, o navegador enviar os dados do

formulrio em um nico canal de transmisso:


Browser Web
Solicitao de conexo + Dados do formulrio

Usando o mtodo GET, o navegador concatena os dados URL do servidor, especificada no atributo action.

Elaborao de formulrios
Exemplo (GET):

http://www.kumquat.com/cgi-bin/update

Cliente

Servidor
http://www.kumquat.com/cgi-bin/update?Nome=Dnis&Endereo=Rua+13&Idade=25

URL

Dados

Elaborao de formulrios
Para pequenos formulrios, a melhor alternativa para obter

um desempenho razovel na transmisso dos dados usar o mtodo GET (mtodo mais eficiente). Para formulrios com muitos campos, devemos usar o mtodo POST. Alm disso, se precisarmos enviar arquivos pelo formulrio (dados binrios), o mtodo POST dever ser obrigatoriamente usado. Se a segurana for um requisito crtico para o site, deveremos usar o mtodo POST, uma vez que o mtodo GET insere os valores do formulrio diretamente na URL, conforme foi observado anteriormente.

Elaborao de formulrios
Enctype = application/x-www-form-urlencoded | multipart/form-data encoding | text/plain <html> <head> <title>...</title> </head> <body> <form action=... method=... enctype=...> Dos trs atributos, apenas ... o atributo enctype no </form> obrigatrio, e seu valor </body> default application/xwww-form-urlencoded. </html>

Elaborao de formulrios
A tag <input> usada para definir a maioria dos

elementos de controle de formulrios. Esses elementos incluem campos de texto simples, campos para senha, campos para envio de arquivos, listas de mltipla e nica escolhas e botes. Embora haja muitos atributos para a tag <input>, apenas dois so obrigatrios: type e name.

Elaborao de formulrios
O atributo name usado para A tag <input> usada para maioria dos atribuir um definir nome a a cada elementos de controle elemento de formulrios. do formulrio. Esse nome importante porque Esses elementos incluem campos de texto simples, ser usado pelo servidor campos para senha, campos envio dos de arquivos, durante o para processamento dados. listas de mltipla e nica escolhas e botes.

Embora atributos para a tag <input>, O atributohaja type muitos usado para

apenas so obrigatrios: type e name. definir odois tipo de controle a ser


usado em um formulrio. O navegador criar o controle na tela de acordo com o valor desse atributo.

Elaborao de formulrios
Type = Tipo_de_controle
<html> <head> <title>...</title> </head> <body> <form action=... method=... enctype=...> <input type=...> </form> Exemplo: </body> <form action= ... method= ... enctype= ...> </html>
<input type=text> </form>

Elaborao de formulrios
Name = Nome_do_campo
<html> <head> <title>...</title> </head> <body> <form action=... method=... enctype=...> <input type=... name=...> </form> Exemplo: </body> <form action= ... method=... enctype=... > </html>
<input type=text name=nome> </form>

Elaborao de formulrios
Type = text
Esse o tipo de controle mais simples e mais usado

em formulrios. Esse tipo de controle admite a insero de texto comum, incluindo letras, nmeros e quaisquer outros caracteres. H trs atributos bsicos que permitem controlar propriedades desse tipo de elemento de controle: size, maxlength e value.

Elaborao de formulrios
Type = text
Esse o tipo de controle mais simples e mais usado

em formulrios. O atributo size recebe O atributo maxlength um Esse de que controle usado admite insero de texto valortipo numrico para a definir a determina a largura da comum, incluindo letras, nmeros quantidade mxima de e quaisquer caixa na tela. caracteres que o campo outros caracteres. pode aceitar. H trs atributos bsicos que permitem controlar propriedades desse tipo de elemento de controle: size, maxlength e value. O atributo value
permite definir um valor default que aparecer no campo.

Elaborao de formulrios
Type = password
Esse

tipo de controle possui o mesmo comportamento que o tipo text, exceto que, nesse caso, os caracteres digitados pelo usurio no aparecem na tela. Esse campo normalmente usado para inserir senhas. importante observar que o valor digitado pelo usurio apenas no aparecer na tela. Os mesmos atributos que podem ser usados com o tipo text - size, maxlength e value - tambm podem ser aplicados ao tipo password.

Elaborao de formulrios
Type = file
Esse tipo de controle permite selecionar e submeter um

arquivo armazenado na mquina local. Assim, sempre que esse controle for inserido em um cdigo HTML, o navegador apresentar, alm da caixa de texto, um boto direita da caixa com o rtulo "procurar". O atributo size pode ser usado da mesma forma como ele usado para os outros dois tipos de controle. J o atributo maxlength no deve ser usado. Quando usamos esse tipo, precisamos definir o mtodo de transmisso como post e o tipo de codificao como multipart/form-data encoding.

Elaborao de formulrios
Exemplo:

<html> A tag <input>, nesse exemplo, criar uma caixa <head> de edio que receber o <title>...</title>caminho de um arquivo que </head> tenha que ser submetido. <body> <form action=... method=... enctype=...> <input type=file name=imagem> </form> </body> </html>

Elaborao de formulrios
Type = submit
Esse tipo de controle cria um boto que permite

submeter todos os dados preenchidos no formulrio. Todos os valores so submetidos, incluindo rtulos de botes. Conforme j mencionado, esses dados podem ser enviados a um servidor ou a um endereo de e-mail qualquer. Devemos usar dois atributos para esse tipo de controle: name e value.

Elaborao de formulrios
Type = submit
Esse tipo de controle cria um boto que permite
O atributo name usado para submeter todos os dados preenchidos no formulrio. atribuir um ao boto. Todos os nome valores so submetidos, incluindo rtulos Esse nome importante de botes. porque ser usado pelo servidor durante o Conforme j mencionado, esses dados podem ser processamento dos dados. O atributo value usado enviados a um servidor ou para a um endereo de e-mail definir um rtulo ao boto. o nome que qualquer. aparecer na tela ao Devemos usar dois atributos usurio. para esse tipo de controle: name e value.

Elaborao de formulrios
Type = reset
Esse tipo de controle cria um boto no formulrio

que possui como funo fazer os campos de um formulrio voltarem para o seu estado original. Ao contrrio do boto submit, o boto reset no inicia o processamento do formulrio. Os mesmos atributos - name e value - vlidos para o tipo submit tambm devem ser usados para o tipo reset.

Exerccio
Elabore um formulrio de cadastro de pessoas em HTML

composto dos seguintes campos:


Nome (no pode haver nomes com mais de 30 caracteres). Endereo (o tamanho do campo de endereo deve ser maior que o tamanho do campo de nome). Telefone (no pode haver telefones com mais de 20 caracteres e o valor default deve ser (00) 0000-00-00). Senha (no pode haver senhas com mais de 6 caracteres). Foto (deve haver a possibilidade de o usurio selecionar uma foto a partir da sua mquina local. O formulrio deve ter dois botes: um para submeter os dados e outro para fazer o formulrio voltar ao seu estado original.

Elaborao de formulrios
Type = checkbox
Esse tipo de controle permite selecionar um ou vrios itens

de um conjunto predeterminado de opes. Alm do atributo name, o tipo checkbox exige o atributo value. O atributo value deve receber o valor que ser enviado ao servidor, caso a opo correspondente a ele seja selecionada pelo usurio. Pode-se tambm utilizar o atributo checked em um controle do tipo checkbox para deixar uma opo pr-selecionada assim que o formulrio for carregado.

Elaborao de formulrios
Exemplo:
<html> <head> <title>...</title> </head> <body> <form action=... method=... enctype=...>
<input type=checkbox name=topico value=A> A
<input type=checkbox name=topico value=B> B <input type=checkbox name=topico value=C> C

</form> </body> </html>

Elaborao de formulrios
Exemplo:
<html> Para cada item que deve <head> Esse o valor que ser exibido ao usurio, ser exibido na tela ao devemos inserir uma <title>...</title> usurio, do lado da checkbox. </head> caixa de seleo. <body> <form action=... method=... enctype=...> Para <input cada item, o type=checkbox name=topico value=A> A atributo name deve ser <input type=checkbox name=topico value=B> B igual para que o Para o atributo value, <input name=topico value=C> C servidor saiba type=checkbox que os devemos inserir o valor </form> valores referem-se ao que ser enviado ao mesmo grupo. servidor, referente </body> opo selecionada pelo </html> usurio.

Elaborao de formulrios
Type = radio
Esse tipo de controle permite selecionar apenas um item

de um conjunto predeterminado de opes. Alm do atributo name, o tipo radio exige o atributo value, da mesma forma que o tipo checkbox. Pode-se tambm utilizar o atributo checked em uma radio, da mesma forma que na checkbox. Se uma opo j estiver marcada e o usurio marcar outra opo, o navegador automaticamente eliminar a marcao anterior para deixar apenas uma opo selecionada. O tipo radio usado para os casos em que somente uma opo deve ser selecionada.

Elaborao de formulrios
Exemplo:
<html> <head> <title>...</title> </head> <body> <form action=... method=... enctype=...>
<input type=radio name=topico value=A> A <input type=radio name=topico value=B> B <input type=radio name=topico value=C> C

</form> </body> </html>

Elaborao de formulrios
Exemplo:
<html> Para cada item, o Esse o valor que <head> atributo name deve ser ser exibido na tela ao <title>...</title> igual, da mesma forma usurio, do lado da </head> que na checkbox. caixa de seleo. <body> <form action=... method=... enctype=...>
<input type=radio name=topico value=A> A <input type=radio name=topico value=B> B <input type=radio name=topico value=C> C Para o atributo value,

Para cada item que deve </form> ser exibido ao usurio, </body> devemos inserir um tipo radio. </html>

devemos inserir o valor que ser enviado ao servidor, da mesma forma que na checkbox.

Elaborao de formulrios
A tag <textarea> define outro elemento para controle de

formulrios: uma rea de texto. A diferena entre a tag <textarea> e a tag <input> - text - que a primeira permite inserir texto em vrias linhas (texto longo). A tag <textarea> exige o atributo name, cujo valor deve representar o elemento especfico do formulrio. Alm do atributo name, podemos usar outros dois atributos: cols e rows.

Elaborao de formulrios
A tag <textarea> define outro elemento para controle de

formulrios: uma rea de texto. A diferena entre a tag <textarea> e a tag <input> - text - que a primeira permite inserir texto em vrias linhas (texto Esse atributo admite um longo). valor inteiro que define a A tag <textarea> exige o atributo name, cujo quantidade de valor linhas deve de representar o elemento especfico do formulrio. uma textarea, ou, em outras palavras, a suaoutros altura. dois Alm do atributo name, podemos usar atributos: cols e rows. Esse atributo admite um
valor inteiro que define a quantidade de colunas de uma textarea, ou, em outras palavras, a sua largura.

Elaborao de formulrios
Exemplo:
<html> <head> Cada textarea deve <title>...</title> A tag <textarea> ter um nome, por deve ter uma tag </head> meio do atributo final </textarea>. <body> name. <form action=... method=... enctype=...>
... <textarea name=area cols=9 rows=8>...</textarea>

Entre as tags <textarea> e </textarea> </form> podemos inserir um contedo que ser </body> exibido na rea de texto e poder ser </html> modificado. O contedo inserido deve ser do tipo plain text.

Elaborao de formulrios
Os controles do tipo radio e checkbox possibilitam que seja

apresentada uma lista de opes ao usurio. Caso haja muitas opes, trabalhoso e demorado escrever o cdigo para cada opo. Assim, para esse caso, podemos utilizar a tag <select>. Para definir todas as opes de uma lista, essa tag deve ser usada em conjunto com a tag <option>. Assim como para os outros elementos de um formulrio, a tag <select> exige o atributo name. Alm do atributo name, podemos usar outros dois atributos para a tag <select>: multiple e size.

Elaborao de formulrios
Alm do atributo name, podemos usar outros dois atributos

para a tag <select>: multiple e size.

O atributo multiple permite que o usurio selecione mais de uma opo ao mesmo tempo - simulando uma checkbox. Exemplo: <select name=frutas multiple> .... </select>

O atributo size define a quantidade de opes que sero exibidas assim que o formulrio for carregado na tela. Exemplo: <select name=frutas size=5> .... </select>

Elaborao de formulrios
Conforme j foi mencionado, para exibir cada item dentro

de um componente select, precisamos inserir a tag <option>. Cada item inserido entre as tags <option> e </option>. H dois atributos que podem ser usados para a tag <option>: selected e label. O atributo label pode ser
O atributo selected permite deixar uma opo pr-selecionada na tela. Exemplo: <select name=frutas> <option>Ma</option> <option selected>Pra</option> </select> usado para mostrar o valor de cada opo ao usurio. Nesse caso, esse atributo opcional. Exemplo: <select name=frutas> <option>Ma</option> <option label=Pra> </select>

Elaborao de formulrios
Exemplo:
<html> <head> <title>...</title> </head> <body> <form action=... method=... enctype=...>
<select name=frutas>
<option>Ma</option> <option>Pra</option>

Nesse exemplo, temos uma lista composta de duas opes. Como no usamos o atributo multiple na tag <select>, apenas uma das duas opes poder ser selecionada pelo usurio.

</select>

</form> </body> </html>

Elaborao de formulrios
Muitas

vezes, necessrio agrupar as opes apresentadas em uma lista. A tag <optgroup> pode ser usada dentro da tag <select> para esse propsito. A tag <optgroup> possui uma tag final </optgroup>, e todas as tags <option> devem ficar dentro de uma tag <optgroup>. Essa tag exige apenas um atributo - o atributo label, usado para definir o nome de uma categoria de valores.

Elaborao de formulrios
Exemplo:

<html><head>...</head><body> <form action=... method=... enctype=...>


<select name=cidades> <optgroup label=SP> <option>Araraquara</option> <option>So Carlos</option> </optgroup> <optgroup label=MG> <option>Uberlndia</option> <option>BH</option> </optgroup> </select>

</form> </body></html>

Elaborao de formulrios
Muitas vezes necessrio agrupar elementos de um

formulrio. A tag <fieldset> permite encapsular uma seo do formulrio criando um grupo de elementos relacionados. Essa tag no exige nenhum atributo e ela deve ser usada entre as tags <form> e </form>. Podemos ter vrias sees em um mesmo formulrio. A tag <fieldset> exige uma tag final </fieldset>.

Elaborao de formulrios
Exemplo:

<html> <head>...</head> <body> <form action=... method=... enctype=...>


<fieldset> Nome:<input type=text name=nome> Tel:<input type=text name=tel> </fieldset> <fieldset> ... </fieldset>

</form> </body> </html>

Elaborao de formulrios
A tag <legend> pode ser usada em conjunto com

a tag <fieldset> para definir um ttulo para uma seo do formulrio. Essa tag no exige nenhum atributo e ela deve ser usada entre as tags <fieldset> e </fieldset>. A tag <legend> exige uma tag final </legend>.

Elaborao de formulrios
Exemplo:

<html> <head>...</head><body> <form action=... method=... enctype=...>


<fieldset> <legend>Dados bsicos</legend> Nome:<input type=text name=nome> Tel:<input type=text name=tel> </fieldset> <fieldset> ... </fieldset>

</form> </body> </html>

Exerccio
Modifique o exerccio anterior acrescentando-se a

possibilidade de se informar a formao acadmica de uma pessoa (Graduado, Especialista, Mestre e Doutor) e seus interesses (Poltica, Economia, Esporte, Tecnologia e Educao). Agrupe os campos do formulrio de acordo com sees (Use a tag fieldset).

Pesquisa
Faa uma pesquisa para saber o significado dos

seguintes atributos, usados em um formulrio HTML:


Accesskey Disabled Readonly Tabindex

Faa uma pesquisa tambm para descobrir quais so

as tags que permitem trabalhar com imagens e mapas em HTML. Um mapa pode ser considerado como uma imagem que contenha vrios links.

Pesquisa
Com base na pesquisa realizada, escreva uma pgina HTML que

contenha o mapa apresentado abaixo. Cada quadradinho (representando uma cidade), ao ser clicado, dever levar o usurio a uma outra pgina HTML contendo informaes especficas daquela cidade em questo.

Mato Araraquara So Carlos

Rio Claro

Dvidas e exerccios

Dvidas?

Referncias bibliogrficas
Musciano, C; Kennedy, B. HTML & XHTML: The

Definitive Guide. 4. ed., OReilly, 2000. Duckett, J. Beginning Web Programming with HTML, XHTML, and CSS. 2. ed., Wiley Publishing, 2008.