Programacao para A Web Aula 4 Conteudo

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.
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.
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.
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>
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.
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>
Method = POST | GET
<html> <head> <title>...</title> </head> <body> <form action=... method=...> ... </form> Exemplo: </body> <form action=URL_da_aplicao method=get> ... </html>
</form>
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
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.
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
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.
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>
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.
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.
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>
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>
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.
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.
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.
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.
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>
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.
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.
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.
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.
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>
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.
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.
Exemplo:
<input type=radio name=topico value=A> A <input type=radio name=topico value=B> B <input type=radio name=topico value=C> C
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.
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.
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.
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.
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.
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>
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>
Exemplo:
<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>
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.
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>
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>.
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>
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>.
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>
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.

Programacao para A Web Aula 4 Conteudo

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Programacao para A Web Aula 4 Conteudo

Uploaded by

Copyright:

Available Formats

Programao para Web I

formulrio em dois passos: 1 Passo:

formulrio em um nico canal de transmisso:

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

composto dos seguintes campos:

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

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

para a tag <select>: multiple e size.

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

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

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

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

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

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

seguintes atributos, usados em um formulrio HTML:

Accesskey Disabled Readonly Tabindex

Faa uma pesquisa tambm para descobrir quais so

Mato Araraquara So Carlos

You might also like