Scribd Logo
Carica

Benvenuto in Scribd!

  • KJKJNKJNKJN

    Caricato da

    bostekiko
    7 visualizzazioni9 pagine

    Titolo originale

    kjkjnkjnkjn

    Copyright

    © © All Rights Reserved

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    7 visualizzazioni9 pagine

    KJKJNKJNKJN

    Caricato da

    bostekiko

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 9

    1

    Aula 7: Formulrios

    Com certeza voc j deve ter preenchido algum formulrio em suas "viagens"
    pela Internet, pois esta uma forma cada vez mais comum de interagir com os
    visitantes de um site, para obter dados do visitante ou registrar sua opinio. Os
    formulrios so feitos como qualquer pgina. Eles so o assunto desta aula.


    Objetivos:
    Nesta aula voc vai aprender tudo sobre construo de formulrios e estar se
    habilitando a cri-los. Conhecer:
    - as formas de envio pelos mtodos POST e GET,
    - o envio por e-mail,
    - os diversos elementos de interao: campos de entrada de texto, botes de
    seleo exclusiva e no-exclusiva e listas de seleo.


    Pr-requisitos:
    As aulas anteriores de links e tabelas sero importantes para entender bem os
    formulrios.


    1. Aspectos Gerais dos Formulrios

    A principal forma de trocar informaes entre o usurio de uma pgina e o
    responsvel por um site atravs de formulrios. A linguagem HTML oferece
    uma srie de elementos de interao com o usurio que podem ser agrupados
    em um formulrio.

    O resultado desta interao posteriormente enviado diretamente pela rede
    para um programa executado no servidor ou enviado por e-mail para o
    responsvel pelo site.

    A tag <FORM> ... </FORM> delimita a rea ocupada pelo formulrio. Isto
    , toda a seqncia de entrada de dados e de formatao do formulrio deve ser
    delimitada por essa tag.

    Esta tag possui dois atributos principais que indicam quem vai receber os dados
    do formulrio (atributo ACTION) e a forma como eles sero enviados pela rede
    (atributo METHOD).

    O atributo ACTION serve para informar a URL do programa CGI que ir
    processar o formulrio. possvel utilizar este atributo para informar ao
    administrador do site que os dados do formulrio sero enviados por e-mail.
    Neste caso, o mtodo de envio deve, obrigatoriamente, ser definido como
    POST.

    So duas as formas de envio pela rede:
    Get - os dados so anexados URL.
    Post - os dados so enviados separados da URL.

    Programas CGI
    (Common Gateway
    Interface) so
    programas
    executados pelo
    servidor Web, de
    onde recebem seus
    dados de entrada e
    para quem produzem
    sua sada (que
    geralmente uma
    pgina Web).
    Freqentemente ,so
    escritos em uma
    linguagem de script,
    como Perl.

    2
    Quando o atributo METHOD recebe o valor GET, o contedo do formulrio
    enviado para o servidor anexado URL definida no atributo ACTION. Este
    mtodo adequado a formulrios pequenos, com pouca informao. Tambm
    no conveniente enviar dados sigilosos por este mtodo pois, alm deles
    serem transmitidos sem nenhuma proteo, estaro visveis na rea de
    endereos do navegador.

    O outro valor que pode ser atribudo a METHOD POST. Neste caso, as
    informaes do formulrio so enviadas separadas da URL.

    O exemplo a seguir mostra um formulrio que ser enviado para o endereo
    joao@nce.ufrj.br:
    <FORM METHOD=POST ACTION="mailto:joao@nce.ufrj.br">
    ... </FORM>

    O interior da tag <FORM>...</FORM> pode conter quatro novos tipos de tag
    que servem para definir os diversos elementos de interao. Estas tags so:
    <INPUT>
    <SELECT> ... </SELECT>
    <OPTION>
    <TEXTAREA> ... </TEXTAREA>

    Antes de descrevermos os detalhes destas novas tags, vejamos um exemplo.
    Nas linhas abaixo, veremos o cdigo que permitiu a criao do formulrio
    mostrado na figura 7.1.
    <HTML>
    <HEAD>
    <TITLE> Curso CEDERJ: Construo de Pginas Web -
    Aula 7: Formulrios
    </TITLE>
    </HEAD>
    <BODY BGCOLOR="#DDFFFF">

    <FORM METHOD="POST" ACTION="mailto:aconci@ic.uff.br">

    <p>Se voce tem uma pagina relacionada a temas deste
    curso, ou visitou uma pagina que ache interessante,
    contribua apresentando este link para incluirmos aos
    nossos.</p>

    <p>Seu e-mail:
    <INPUT TYPE="TEXT" NAME ="Seu nome" SIZE="30"></p>

    <p>Qual o endereco do site?
    <INPUT TYPE="TEXT" NAME ="homepage" VALUE ="http://"
    SIZE =50 MAXLENGHT=100></p>

    <p>sexo:
    M <INPUT TYPE=radio NAME ="sex" VALUE =M>
    F <INPUT TYPE=radio NAME ="sex" VALUE =F></p><BR>

    <p>De onde voce vem?
    Brasil <INPUT TYPE=checkbox NAME ="country" VALUE
    ="Brasil" CHECKED>
    Portugal <INPUT TYPE=checkbox NAME ="country" VALUE
    ="Portugal">

    3
    Cabo Verde <INPUT TYPE=checkbox NAME ="country"
    VALUE ="Cabo Verde">
    Angola <INPUT TYPE=checkbox NAME ="country" VALUE
    ="Angola">
    Mocambique <INPUT TYPE=checkbox NAME ="country"
    VALUE ="Mocambique">
    Timor Leste <INPUT TYPE=checkbox NAME ="country"
    VALUE ="Timor Leste"></P>

    <p>Seu interesse neste tema se relaciona a:
    <SELECT NAME ="interesse">
    <OPTION VALUE ="curiosidade"> curiosidade
    <OPTION VALUE ="pesquisa">pesquisa
    <OPTION VALUE ="programas">programas
    <OPTION VALUE ="trabalhos">trabalhos
    <OPTION VALUE ="imagens">imagens
    <OPTION VALUE ="aplicacao">aplicacao
    <OPTION VALUE ="outros">outros</SELECT ></p>

    <p>Gostaria de mandar uma mensagem?
    <TEXTAREA NAME ="message" ROWS=5 COLS=70>
    Por favor escreva aqui seus comentrios
    </TEXTAREA></p>

    <INPUT TYPE="RESET" VALUE="LIMPAR">
    <INPUT TYPE="SUBMIT" VALUE="ENVIAR">
    <INPUT TYPE ="HIDDEN" NAME="mail" VALUE
    ="aconci@ic.uff.br">

    </FORM>
    </BODY>
    </HTML>

    Figura 7.1 - Formulrio gerado pelo cdigo HTML anterior

    4
    2. A tag <INPUT>
    A tag <INPUT> bastante verstil e permite criar:
    campos para entrada de texto
    campos para entrada de senhas
    botes comuns
    botes estilo rdio
    botes de seleo mltipla

    A tabela 7.1 mostra os atributos e valores possveis de <INPUT>. O atributo
    type permite definir o tipo de entrada de dados e o aspecto do elemento de
    interao. Dependendo do valor atribudo type, aparecero janelas onde os
    dados sero digitados, campos para senhas ou botes dos diversos tipos. Para
    alguns atributos de type, os outros atributos de input podem nem fazer
    sentido.

    Tabela 7.1 Atributos de <INPUT>
    Atributo Valor Descrio
    TEXT Entrada para texto.
    PASSWORD Campo para senha.
    RADIO Botes de seleo exclusiva (radio).
    CHECKBOX Botes de seleo mltipla.
    BUTTON Boto comum.
    SUBMIT Boto que envia o formulrio.
    RESET Boto que limpa os campos do formulrio.
    TYPE
    HIDDEN Campo que no ser mostrado, til para
    atribuir valores a NAME.
    NAME String Nome da varivel associada ao campo.
    VALUE String Valor default do campo.
    SIZE Tamanho Tamanho do campo TEXT ou PASSWORD.
    MAXLENGTH Tamanho Nmero mximo de caracteres a ler.
    CHECKED Define um campo CHECKBOX como
    selecionado.


    2.1. Usando a Tag <INPUT> para Criao de um Campo para
    Entrada de uma Linha de Texto

    A definio do atributo TYPE=TEXT na tag <INPUT> permite a criao de
    um campo para entrada de uma linha de texto. A aparncia que isso ter no
    formulrio gerado a de uma rea retangular onde possvel escrever uma
    linha de texto. Repare, na figura 7.1, as reas retangulares que aparecem aps
    os textos: "Seu e-mail:" e "Qual o endereco do site?"

    As informaes digitadas por um usurio no formulrio so enviadas ao
    servidor no formato nome=valor. Por isso, cada elemento de interao
    contm um atributo NAME que deve obrigatoriamente ter um nome definido de
    modo que este elemento possa ser identificado pelo CGI. O exemplo abaixo faz
    com que o navegador exiba na pgina um campo de entrada de texto; caso o
    O valor
    String
    indica que o
    dado ser um
    texto.

    Tamanho
    corresponde a
    um valor
    numrico.

    5
    usurio digite joao e envie o formulrio, a informao ser recebida pelo
    programa na forma de conta=joao:
    Conta:<INPUT TYPE=TEXT NAME=conta>

    possvel preencher o campo com um valor padro que exibido aps o
    carregamento da pgina. Isso feito atravs do atributo VALUE, como
    mostrado na segunda janela de texto das linhas de HTML que geram a figura
    7.1.

    A omisso do atributo TYPE, na tag <INPUT>, faz com que o navegador
    assuma o tipo TEXT. Ou seja, esta a opo default.

    possvel definir o tamanho da rea para entrada de texto atravs do atributo
    SIZE. Este atributo no limita o nmero de caracteres que o usurio pode
    digitar, apenas o tamanho do campo.

    Para se indicar o nmero mximo de caracteres que pode ser digitado pelo
    usurio deve-se definir o atributo MAXLENGTH.

    No exemplo abaixo, a rea de entrada de texto tem o tamanho de 7 caracteres,
    mas o usurio pode digitar at 11 caracteres:
    Telefone:
    <INPUT TYPE=TEXT NAME=telef SIZE=7 MAXLENGTH=11>


    2.2. Usando a Tag <INPUT> para Criao de um Campo para
    Entrada de Senha

    A definio do atributo TYPE=PASSWORD na tag <INPUT> permite a criao
    de um campo para entrada de informaes sigilosas (como por exemplo,
    senhas). A aparncia deste campo no formulrio a mesma do campo de texto.
    No entanto, no campo PASSWORD, os caracteres digitados pelo usurio no
    so exibidos no monitor, sendo substitudos por asteriscos "* ".

    Para tirar proveito do sigilo, este tipo de campo deve ser enviado pelo
    mtodo POST.

    No exemplo abaixo, se o usurio digitar pcpw02 e enviar o formulrio, a
    informao recebida pelo programa ser senha=pcpw02:
    Senha:<INPUT TYPE=PASSWORD NAME=senha>

    possvel definir o tamanho da rea para entrada de texto atravs do atributo
    SIZE e o nmero mximo de caracteres que pode ser digitado pelo usurio
    atravs do atributo MAXLENGTH, exatamente como no caso dos campos de
    entrada de texto comuns.


    2.3. Usando a Tag <INPUT> para Criao de Botes de Seleo
    Exclusiva

    Um tipo de elemento de interao muito comum so os botes de seleo
    exclusiva (que so os chamados Radio Buttons). Estes botes so utilizados
    quando o usurio deve escolher uma nica resposta entre vrias. Quando um
    dos botes selecionado, automaticamente todos os outros so desmarcados.

    6
    S uma opo entre as vrias apresentadas pode estar marcada. A aparncia
    destes de um botozinho redondo, como pode ser visto na figura 7.1.

    Estes elementos so criados pela tag <INPUT> com o atributo TYPE=RADIO.
    Para indicar ao navegador quais botes so mutuamente exclusivos preciso
    que eles tenham o atributo NAME definido com o mesmo valor.

    O atributo VALUE deve ser definido de modo a diferenciar qual dos botes est
    selecionado (j que todos tm o mesmo NAME). Atravs do atributo CHECKED
    possvel indicar que uma das alternativas estar previamente selecionada. No
    exemplo abaixo, a opo Superior est previamente selecionada; se o
    usurio selecionar Analfabeto a informao enviada ao programa ser
    instruc=A.

    Nvel de Instruo:<br>
    <INPUT TYPE=RADIO NAME=instruc VALUE=A>Analfabeto<br>
    <INPUT TYPE=RADIO NAME=instruc VALUE=1>Primeiro grau
    <br>
    <INPUT TYPE=RADIO NAME=instruc VALUE=2>Segundo grau
    <br>
    <INPUT TYPE=RADIO NAME=instruc VALUE=S CHECKED>Nivel
    superior<br>


    2.4. Usando a Tag <INPUT> para Criao de Botes de Seleo
    Mltipla

    Quando desejvel escolher mais de uma resposta, utilizam-se botes de
    seleo mltipla (toggle buttons). A criao destes botes feita atravs da tag
    <INPUT> com o atributo TYPE=CHECKBOX.

    No formulrio, a aparncia destes botes de quadradinhos (como mostrado
    na figura 7.1). Diferente dos botes exclusivos, neste caso, vrios botes
    podem ser selecionados pelo usurio ou podem estar previamente selecionados
    pela definio do atributo CHECKED.

    Atravs do atributo CHECKED, no exemplo a seguir, foi possvel pr-
    selecionar as opes Netscape e Explorer; se o usurio enviar o formulrio
    sem fazer nenhuma modificao, o programa vai receber nav1=N e
    nav3=E:
    Navegador utilizado:<BR>
    <INPUT TYPE=CHECKBOX NAME=nav1 VALUE=N CHECKED>
    Netscape<br>
    <INPUT TYPE=CHECKBOX NAME=nav2 VALUE=M>Mosaic<br>
    <INPUT TYPE=CHECKBOX NAME=nav3 VALUE=E CHECKED>
    Explorer<br>
    <INPUT TYPE=CHECKBOX NAME=nav4 VALUE=H>HotJava<br>

    Os atributos NAME e VALUE devem ser definidos como nos botes de seleo
    exclusiva.

    7
    2.5. Usando a Tag <INPUT> para Criao de Botes de Ao

    A tag <INPUT> tambm serve para a criao de botes de ao. Estes botes,
    diferente dos elementos de interao que vimos at agora, no esto associados
    a informaes que sero enviadas ao servidor. A seleo de um destes botes
    pelo usurio faz com que uma ao seja realizada (pode ser uma ao padro
    do navegador como: enviar o formulrio ou apagar o contedo de seus campos
    ou ainda o resultado da execuo de um programa numa linguagem de script).

    Estes botes tm a aparncia de teclas, como voc pode observar na parte
    inferior da figura 7.1.

    Estes botes so gerados pela atribuio dos valores BUTTON, RESET ou
    SUBMIT a TYPE. Os dois ltimos valores tm aes especiais associadas. A
    definio do atributo TYPE=SUBMIT inclui um boto para fazer o envio do
    formulrio. A definio do atributo TYPE=RESET inclui um boto que limpa
    os campos do formulrio, permitindo que o usurio redefina suas escolhas.

    Nestes botes, o atributo VALUE define um texto para ser escrito no interior do
    boto. A omisso deste atributo faz com que o navegador exiba um texto
    default, em lngua inglesa.

    Normalmente, estes botes so colocados no fim do formulrio. O exemplo, a
    seguir, mostra a utilizao destes botes para criao de botes de ao com os
    ttulos definidos pelas strings atribudas VALUE:
    <FORM>
    ...
    <INPUT TYPE=SUBMIT NAME="Envia" VALUE="Envia dados
    agora">
    <INPUT TYPE=RESET NAME="Limpa" VALUE="Apagar
    tudo">
    ...
    </FORM>

    3. A Tag <textarea> : rea de Texto
    No exemplo inicial desta aula, a tag <TEXTAREA> foi usada para desenhar a
    caixa onde o usurio escrevia. Este seu uso mais comum, isto , quando se
    deseja enviar mais de uma linha de texto, deve-se utilizar a tag <TEXTAREA>
    ... </TEXTAREA>.

    O atributo NAME deve ser definido para indicar a varivel que ser associada ao
    texto inserido. O tamanho da rea de texto definido pelo nmero de linhas
    (atributo ROWS) e pelo nmero de colunas (atributo COLS).

    No interior da tag possvel colocar um texto a ser exibido aps o
    carregamento da pgina. O exemplo a seguir mostra essa utilizao, neste caso
    o texto: "Faa aqui seus comentrios:" aparecer inicialmente no
    interior da caixa e ser substitudo pelo texto que o usurio digitar.
    Comentrios:<BR>
    <TEXTAREA NAME=coment ROWS=3 COLS=40>
    Faa aqui seus comentrios:
    </TEXTAREA>


    8
    4. As Tags <SELECT> e <OPTION>: Listas de Seleo
    Quando h muitas opes a escolher, pode no ser muito prtico utilizar botes
    de seleo exclusiva ou botes de seleo mltipla para no ocupar muito
    espao na pgina. Uma alternativa a eles so as listas de seleo criadas atravs
    da tag <SELECT> ... </SELECT>.

    No exemplo do incio da aula, esta tag foi usada para apresentar ao usurio as
    opes que aparecem aps a linha: "Seu interesse neste tema se
    relaciona a:". Como voc pode ver na figura 7.1, no formulrio, ela
    criar um "menu suspenso" que aparece na forma de uma janela com lista de
    opes. Este tipo de menu chamado de pull down.

    No interior da tag <SELECT> deve ser colocada cada uma das opes da lista
    (no interior da tag <OPTION>). O atributo SELECTED pode ser utilizado para
    definir qual opo est previamente selecionada. O exemplo a seguir mostra a
    utilizao deste atributo:
    Sexo:
    <SELECT NAME=sexo>
    <OPTION SELECTED>Masculino
    <OPTION>Feminino
    </SELECT>

    O atributo MULTIPLE indica que mais de uma opo pode ser selecionada,
    consequentemente, se ele estiver definido, podemos utilizar o SELECTED em
    mais de uma opo.

    O atributo NAME deve ser utilizado para definir o nome da varivel que ser
    enviada ao programa. O atributo SIZE indica o nmero de opes mostradas
    de uma s vez pelo navegador, sendo que o valor default SIZE=1 (como
    pode ser visto nas linhas HTML do exemplo inicial). As demais opes podem
    ser acessadas atravs de uma barra de rolagem, que se abre ao ser clicado o
    cone direita da lista (com aparncia de um tringulo apontando para baixo).
    A figura 7.1 mostra o exato momento em que a lista de opes est sendo
    exibida. Numa lista de SIZE=1 , aps o carregamento da pgina, apenas o
    OPTION que estiver com o atributo selected definido mostrado.


    Exerccio:

    Utilize as novas tags para criar uma pgina de pesquisa de opinio sobre
    "preferncias esportivas". Desenhe no formulrio campos com botes
    exclusivos para identificar o sexo, o estado civil e a faixa etria da pessoa que
    responde pesquisa. Atribua a botes de seleo mltipla diversas
    modalidades esportivas, e permita que o usurio que selecionar "outras" inclua
    uma nova. Use campo de texto para identificar a cidade onde mora a pessoa.
    Atravs de <select> permita que ela aponte o estado onde mora. Permita
    que ela inclua comentrios atravs de um campo de textarea. Inclua os
    botes para envio ou redefinio das respostas do formulrio. Faa,
    finalmente, a pgina ter um alinhamento de pargrafo agradvel e inclua um
    ttulo.

    9
    Resumo:
    Nesta aula, voc aprendeu novas tags para definio dos elementos de
    interao dos formulrios na linguagem HTML. Viu como definir a forma
    como os elementos de interao apareceram em um documento e o contedo
    que o formulrio, quando preenchido, retornar ao programa que manipular os
    dados enviados pelo usurio. Fez ainda uso destes recursos, testando seus
    novos conhecimentos no projeto uma pgina de pesquisa de opinio (no
    exerccio sugerido).


    Auto-avaliao:
    Voc construiu a pgina de pesquisa com facilidade? Ento est pronto para
    criar pginas com esse recurso poderoso de interao com os visitantes. Se no
    est bem seguro, j sabe o que deve fazer. Ou precisamos lembrar? Por certo
    que no, afinal estamos no final de uma etapa, a prxima nossa ltima aula
    do primeiro mdulo do nosso curso.

    Potrebbero piacerti anche