7. Formulários

7.1 Criando Formulários

Formulários permitem ao usuário enviar informação ao servidor WWW, o qual por sua vez processa essas informações podendo ou não devolver uma resposta ao usuário. Um formulário é criado com o marcador:

<form action=URL enctype=string method=get|post target=string></form>

O atributo obrigatório action define o programa (script) do tipo CGI que vai tratar os dados do formulário. É possível usar o método mailto para enviar os dados do formulário para alguém que possua um e-mail, mas esta saída não é nada elegante. Além dos dados do formulários não serem tratados on-line, eles ainda serão enviados de forma codificada (conforme descrito no capítulo 8). É preferível tratar os dados do formulário usando um script CGI.

O atributo enctype serve para definir o tipo de codificação com que os dados serão enviados. Atualmente existe a codificação application/x-www-form-urlencoded (default) e a codificação multipart/form-data. A primeira é de uso geral, enquanto que a segunda é usada exclusivamente para o usuário enviar um arquivo do seu computador (ou rede) local para o servidor.

O atributo method especifica o método pelo qual os dados do formulário serão enviados. Existem dois métodos de envio: get (default na codificação application/x-www-form-urlencoded) e post (obrigatório na codificação multipart/form-data). Aqui cabe uma explicação mais detalhada. No método get os dados serão enviados como parte do URL especificado em action.

Por exemplo, suponha que nosso formulário tem dois campos denominados de nome e telefone, e que nós preenchemos estes campos com os valores Rui Barbosa e 2345678, respectivamente. Suponha ainda que nosso formulário tem action=/cgi-bin/query, enctype=application/x-www-form-urlencoded e method=get. Os dados do formulário, serão enviados como parte do URL, da seguinte forma: /cgi-bin/query?nome=Rui+Barbosa&telefone=2345678.

Usando o método post os dados são enviados a parte, ou seja, separados do header da requisição que o browser envia para o servidor. Este é o método preferido pela maior parte dos programadores CGI experientes, pois permite o uso de criptografia ao enviar os dados, se for usado o método https. No método get não adianta usar o método https pois os dados são enviados como parte do URL, portanto são visíveis.

O atributo target define a janela onde a página que possivelmente será devolvida pelo script especificado no atributo action será exibida, e tem como default o valor _self, significando a mesma janela que contém o formulário.

7.2 Definindo Campos em um Formulário

Existem diversos tipos de campos de formulário, que podem ser obtidos usando os marcadores:

<input type=text|password|hidden|checkbox|radio|reset|submit|image|file name=string value=string size=n maxlength=n align=left|right|top|middle|bottom checked src=url>

<textarea name=string rows=n cols=n wrap=off|physical|virtual></textarea>

<select name=string size=n multiple></select>

A utilização destes marcadores será explicada a seguir.

Entrada de uma linha de texto

Usa-se o marcador input definindo o valor text para o atributo type. Todos os campos do formulário devem ter seu nome definido através do atributo name, exceto os botões submit e reset (este nome será usado pelo script para diferenciar os diversos valores recebidos). Através do atributo value é possível definir um valor default que vai aparecer na tela quando o formulário for exibido, mas que poderá ser modificado.

O atributo size serve para definir o tamanho da caixa de edição que vai surgir na tela, e o atributo maxlength define o tamanho máximo da linha. O atributo size possue o valor 20 como default. Se maxlength for maior que size, o texto digitado rolará na tela (se deslocará para a esquerda) ao exceder o limite especificado pelo atributo size. Veja um exemplo:

<form method=post action=/cgi-bin/donothing>

Time que você torce:

<input type=text name=time value="Corínthians" size=15 maxlength=30>

</form>

Entrada de texto com caracteres escondidos (senhas)

É possível criar um campo cujo conteúdo ficará escondido, usando o marcador input com atributo type=password. Os caracteres digitados serão exibidos como asteriscos, o que é especialmente útil no caso de senhas. Os atributos name, value, size e maxlength funcionam de forma igual ao explicado anteriormente. Tenha cuidado ao especificar o atributo value, pois o usuário poderá ver o valor que você definiu simplesmente olhando o fonte do documento (opção comum na maioria dos browsers). Um exemplo:

<form method=post action=/cgi-bin/donothing>

Digite sua senha:

<input type=password name=senha value="xpto" size=8 maxlength=8>

</form>

Enviando informação não digitada

Para enviar uma informação fixa, necessária ao script que vai tratar o formulário, sem que o usuário precise digitá-la, usa-se o marcador input com type=hidden. Neste caso o atributo value é obrigatório e não é necessário especificar os atributos size e maxlength. Por exemplo:

<form method=post action=/cgi-bin/donothing>

<input type=hidden value="verbose">

</form>

Entrada de várias linhas de texto

Usando o marcador textarea podemos criar uma caixa de edição onde podemos digitar um texto de tamanho qualquer. Certamente um formulário que utilize este tipo de campo deve usar o método post para envio das informações. Com os atributos rows e cols podemos especificar o número de linhas e de colunas, respectivamente, da caixa de edição. O texto delimitado pelo marcador textarea aparecerá como valor default na caixa de diálogo.

O atributo wrap, pode conter os valores off ou physical, indicando que as quebras de linhas devem ser obtidas digitando enter, ou ainda virtual, indicando que as quebras de linhas serão inseridas automaticamente quando o tamanho da linha exceder a largura da caixa de edição. Aqui temos um exemplo:

<form method=post action=/cgi-bin/donothing>

Por favor, escreva aqui suas sugestões, dúvidas e críticas:<br>

<textarea name=sugestoes rows=3 cols=40 wrap=virtual>

Gostaria de obter mais informações sobre

este servidor. Grato.

</textarea>

</form>

Menu de escolha única

Para criar um menu onde apenas uma opção pode ser selecionada, usa-se o marcador select. O atributo size servirá para definir quantas opções serão exibidas na tela (o default é 1). O atributo multiple não pode ser especificado. Para definir as opções do menu é preciso usar o marcador:

<option value=string selected>[</option>]

O texto delimitado pelo marcador option irá aparecer no menu que será exibido na tela, e deverá ser enviado como valor do campo especificado pelo atributo name do marcador select, a não ser que o atributo value esteja especificado. Em um menu de opção única, normalmente a primeira opção é a default. Se quisermos que uma opção do menu, diferente da primeira, seja a opção default, devemos usar o atributo selected. Veja um exemplo:

    <form method=post action=/cgi-bin/donothing>
    Onde você pretende passar suas férias:
    <select name=ferias>
        <option value="Norte">Belém ou Manaus
        <option selected>Fortaleza
        <option>Rio de Janeiro
        <option>São Paulo
    </select>
    </form>

Menu de múltipla escolha

O marcador select também serve para criar um menu de múltipla escolha. Neste caso o atributo multiple deve ser especificado. O atributo size servirá para definir quantas opções serão exibidas na tela. As opções do menu são criadas com o marcador option da forma que vimos anteriormente, só que agora podemos usar o atributo selected em várias opções. Para cada opção selecionada será enviado o nome do campo seguido do valor da opção. Um exemplo:

    <form method=post action=/cgi-bin/donothing>
    Opcionais que você deseja:<br>
    <center>
    <select name=opc size=5 multiple>
        <option selected>Ar condicionado
        <option selected>Cama de Casal
        <option value="eletronicos">Computador, fax e acessórios
        <option selected>Frigobar
        <option>Sauna
        <option>Televisão
    </select>
    </center>
    </form>

Botões

Quando temos um pequeno número de opções (umas 4 ou 5), uma alternativa à utilização de menus é usar botões. Para isso usamos o marcador input com o atributo type=checkbox. Os atributos size e maxlength não devem ser especificados. Se o atributo value não for especificado ele assumirá o valor on, que será enviado se o botão estiver pressionado quando do envio do formulário. O atributo checked serve para especificar se o botão deve estar pressionado por default. Para cada botão selecionado será enviado o nome do campo seguido do valor do botão. O exemplo a seguir produz o mesmo efeito que o menu de múltipla escolha que vimos anteriormente:

 <form method=post action=/cgi-bin/donothing>
 Opcionais que você deseja:<br>
 <input type=checkbox name=opc value="Ar condicionado" checked> Ar condicionado<br>
 <input type=checkbox name=opc value="Cama de casal" checked> Cama de Casal<br>
 <input type=checkbox name=opc value="eletronicos"> Computador, fax e acessórios<br>
 <input type=checkbox name=opc value="Frigobar" checked> Frigobar<br>
 <input type=checkbox name=opc value="Sauna"> Sauna<br>
 <input type=checkbox name=opc value="Televisão"> Televisão<br>
 </form>

Se os botões Ar condicionado, Cama de Casal e Frigobar forem selecionados, serão enviados os seguintes dados: opc=Ar+condicionado&opc=Cama+de+Casal&opc=Frigobar

Botões de escolha única

Uma forma de simular um menu de escolha única é usar o marcador input com type=radio para criar botões de escolha única. No entanto existe uma sutil diferença entre menus de escolha única e botões de escolha única: no caso do menu, pelo menos uma opção precisa ser selecionada. Já no caso dos botões, é possível que nenhum seja presionado. Cada botão do grupo deve ter o mesmo atributo name mas diferentes atributos value. O exemplo abaixo produz resultado similar ao menu de escolha única anteriormente mostrado:

    <form method=post action=/cgi-bin/donothing>
    Onde você pretende passar suas férias:<br>
    <input type=radio name=ferias value="Norte"> Belém ou Manaus
    <input type=radio name=ferias value="Fortaleza" checked> Fortaleza
    <input type=radio name=ferias value="Rio de Janeiro"> Rio de Janeiro
    <input type=radio name=ferias value="São Paulo"> São Paulo
    </form>

Botão Reset

É possível definir um botão especial que serve para limpar todo o formulário em caso de preenchimento incorreto. Este botão é chamado de reset e faz com que todos os campos retornem aos seus valores default, como se nenhuma informação houvesse sido digitada. Para criar este botão deve-se usar o marcador input com o atributo type=reset. O atributo value define um texto que aparecerá dentro do botão, e seu valor default é Reset. Veja um exemplo:

<form method=post action=/cgi-bin/donothing>

<input type=reset value="Limpa Campos">

</form>

Botão Submit

Para enviar o formulário é preciso definir o botão submit, usando o marcador input com type=submit. O atributo value define um texto que aparecerá dentro do botão, e seu valor default é Submit Query. O botão submit faz com que toda a informação digitada no formulário seja transferida para o URL especificado no atributo action do marcador form. Definindo um valor para o atributo name, o valor do atributo value será enviado junto com o formulário. Eis um exemplo:

<form method=post action=/cgi-bin/donothing>

<input type=submit value="Enviar Formulário">

</form>

É possível definir uma imagem que funcione como botão submit usando o atributo type=image. Somente neste caso deve-se usar os atributos src e align para definir o URL da imagem e o alinhamento da imagem. Por exemplo:

<form method=post action=/cgi-bin/donothing>

<input type=image src=envia.gif align=bottom"> Ao clicar nesta imagem o formulário será enviado

</form>

Enviando arquivos usando formulários

Para enviar um arquivo junto com um formulário deve-se usar o marcador input com o valor file no atributo type. Neste caso aparecerá uma caixa de edição na qual o usuário poderá digitar o nome do arquivo a ser enviado e um botão que permite ao usuário procurar o arquivo no sistema local. Os atributos name, size e maxlength podem ser declarados. Note que para enviar um arquivo é preciso usar a codificação multipart/form-data. Veja um exemplo:

<form method=post action=/cgi-bin/donothing enctype=multipart/form-data>

<input type=file name=arquivo size=20 maxlength=50">

</form>

Caso o formulário possua apenas um campo e este campo seja do tipo text ou password, então não há necessidade de botão submit. Ao teclar <enter> o formulário será enviado.