Free CSS Button Css3Menu.com

Tutoriais » HTML » Formulários »
Formulário

Atributos Formulário
Na HTML é permitido que o usuário interaja com o servidor através de formulários ligados à scripts CGI. Uma boa parte dos servidores não oferecem este recurso, mas existem vários serviços gratuitos na web que transformam os dados de um formulário em mensagens de e-mail. Isso pode ser útil para estabelecer contatos com parceiros de trabalho sem a necessidade de se instalar servidores de bancos de dados. No entanto se o que se pretende é a implementação de sistmeas de informação, então, invariavelmente, teremos que instalar e configurar um Servidor de Banco de Dados no Servidor e fazer os dados passarem do Servidor HTTP para o Servidor de Dados através de uma camada de software (o CGI). O ambiente CGI pode ser implementado através de uma variedade de linguagens de computação. Atualmente (2005) se usa mais PHP. Se você quiser ter uma idéia da distribuição de Sistemas Operacionais e de Servidores de Páginas, etc visite o site http://www.webtrends.com lá você pode procurar saber de estatícas de uso da Net.

Antes de irmos para as TAGS propriamente ditas, temos que tecer alguns comentários.
O Serviço HTTP tem uma limitada capacidade no tratamento de valores digitados em formulários. Assim é necessário passar os valores dos dados digitados (e seus respectivos nomes de campos) para um outro programa o servidor, este programa 'roda' em um ambiente independente do HTTP, mas 'conectado' a este ambiente. A passagem de valores do HTTP para o ambiente CGI pode ser feita de dois modos, diremos métodos:
get
Diz ao CGI para olhar os valores digitados em uma variável de ambiente. A variável se chama QUERY_STRING e seu valor tem a seguinte estrutura:
NomeDoCampo1=Valor1&NomeDoCampo2=Valor2&...&NomeDoCampo3=Valor3
Esta técnica apresenta uma limitação: o tamanho do conteúdo da variável é limitado (4000bytes). Era um valor grande... mas hoje em dia já existem formulário que podem receber este volume de dados.
Cabe ao programa do ambiente CGI 'quebrar' a variaável QUERY_STRING em pares de atribuições.

O outro método de passagem é:
post
Envia os dados para o ambiente CGI usando um truque. Coloca o conteúdo sequencialmente na memória (RAM) do servidor e referencia o inicio do endereçamento e o comprimento em duas variáveis: CONTENT_TYPE e CONTENT_LENGTH. Isso permite que uma quantidade maior de dados possa ser 'passada' entre os serviços.

Esta passagem de valores ocorre 'dentro' do servidor. Entre o servidor e o cliente (que preencheu o formulário) existe a passagem destes valores 'dentro' de pacotes TCP/IP. Por isso qualquer programa de monitoramento de pacotes pode 'olhar' o conteúdo trafegado. Se uma aplicação precisar de sigilo no transito dos dados, então é necessário instalar um programa de criptografia no servidor e no cliente. Os dados digitados em um formulário serão tratados 'antes' de sairem do Cliente, trafegam criptografados e são descriptografados no Servidor. É claro que isso complica um pouco a vida do Cliente... mas pela segurança, se justifica!

Bem vamos às TAGs...

<form></form>
Determina o início e o fim de um formulário. O form possui dois atributos que determina o destino da informação do formulário.

Nesta TAG temos que informar mais dois valores (em atributos da TAG): O nome do programa do ambiente CGI que vai receber os dados e o método de transmissão.
Assim usamos:
action
Indica o nome do programa que vai receber os dados

method
Diz ao ambiente CGI como os dados estão sendo passados.

Hoje em dia, como as memórias RAM estão com preço bem mais acessíveis está se usando com maior frequencia o método POST.

Agora vamos começar a ver como podemos formatar as mais diversas formas de exibição dos campos para digitação de um formulário.
Input

A TAG <input> especifica vários campos dentro de um formulário. Ele pode receber diversos atributos que definem o tipo de campo (botão, caixa de texto, etc). O atributo mais importante do input é o name, ele cria a variável que recebe o valor digitado pelo usuário.
Quando o ambiente CGI recebe os dados digitados a forma é: name='Valor Digitado'.
A TAG <INPUT> tem um atributo TYPE, ao qual atribuímos cinco valores diferentes para gerar seis tipos diferentes de entrada de dados.

  1. Campo de dados texto
    Quando INPUT não apresenta atributos, é assumido que TYPE=TEXT (default); a formatação:
    Nome: <INPUT TYPE=TEXT NAME='Nome'>

    ou apenas:
    Nome: <INPUT NAME='Nome'>


    produz o resultado:

    Nome:
  2. Campo de dados senha
    Entrada de texto na qual os caracteres são escondidos por asteriscos, como se pode ver no exemplo.
    Login: <INPUT TYPE=TEXT NAME=login><br>
    Password: <INPUT TYPE=PASSWORD NAME='senha'>

    Login:
    Password:

  3. Múltipla escolha
    CHECKBOX insere um botão para escolha de opções. A cada alternativa corresponde um valor a ser manipulado pelo script que processa os dados. Note que o nome do campo (NAME) é o mesmo para toda a lista de valores. Pode ser escolhida mais de uma alternativa.

    <INPUT TYPE=CHECKBOX NAME='esporte' VALUE='basquete'>Basquete <br>
    <INPUT TYPE=CHECKBOX NAME=esporte VALUE=bocha>Bocha


    Uma diretiva CHECKED marca uma escolha inicial, isto é, se o usuário não escolher nenhuma opção, o formulário irá considerar a alternativa 'pré-escolhida':
    <INPUT TYPE=CHECKBOX NAME='esporte' VALUE='volei' CHECKED>Vôlei <br>
    <INPUT TYPE=CHECKBOX NAME='esporte' VALUE='futebol'>Futebol

    Esportes que você pratica:
    Futebol
    Vôlei
    Natação
    Basquete
    Tênis
    Bocha
  4. Escolha única
    RADIO insere um botão de escolha de valores para uma opção, isto é, somente uma alternativa pode ser escolhida. Note que o nome do campo (NAME) é o mesmo para toda a lista de valores.

    <INPUT TYPE=RADIO NAME='time' VALUE='palm'>Palmeiras <br>
    <INPUT TYPE=RADIO NAME='time' VALUE='inte'>Internacional


    Uma diretiva CHECKED marca uma escolha inicial - se o usuário não escolher nenhuma opção, o formulário irá considerar a alternativa 'pré-escolhida':

    <INPUT TYPE=RADIO NAME='time' VALUE='aea' CHECKED>AEA <br>
    <INPUT TYPE=RADIO NAME='time' VALUE='naut'>Náutico

    Seu time do coração:
    Palmeiras; Náutico; Flamengo; Grêmio; Santos; Atlético; Corinthians; Fluminense; Internacional; Cruzeiro; Botafogo; Santa Cruz; São Paulo; AEA.
  5. Botões de ação
    São usados para 'disparar' a ação no servidor HTTP. Podem ser de dois tipos:
    • SUBMIT apresenta o botão que causa o envio dos dados de entrada para o servidor:
      <INPUT TYPE=SUBMIT>


      É possível modificar o rótulo desse botão através do atributo VALUE
      <INPUT TYPE=SUBMIT VALUE='Envia mensagem'>

    • RESET restaura os valores iniciais das entradas de dados.
      <INPUT TYPE=RESET>


      É possível modificar o rótulo desse botão através do atributo VALUE


      <INPUT TYPE=RESET VALUE='Apaga tudo!'>


Area de Texto
Caixa de texto em tamanho maior.
<textarea width=largura height=Altura name='caixa'>Texto</textarea>
Veja como ficou: colocando width=20 e height=7

Select
Menu com várias opções para o usuário escolher.
<select>
<option select>menu</option>
<option>opção</option>
<option>opção2 </option>
</select>

Veja como ficou:

Atributos de TAGs
Existem atributos que podem ser colocados nas tags para alterar a forma de funcionamento, dentre eles indicacmos:
  • VALUE
    Pode ser usado para dar um valor inicial a um campo de tipo texto ou senha. Desse modo, se o usuário não preencher este campo, será adotado este valor padrão. Se o usuário quiser entrar dados, ele simplesmente apaga o que já estiver escrito e escreve suas informações.
    Nome: <INPUT TYPE=TEXT NAME='nome' VALUE='Seu nome'>
    Nome:

  • SIZE
    Especifica o tamanho do espaço no display para o campo do formulário. Só é válido para campos TEXT e PASSWORD. O valor default (padrão) é 20.
    Endereço: <INPUT TYPE=TEXT SIZE=35>

    Endereço:

  • MAXLENGHT
    É o número de caracteres aceitos em um campo de dados; este atributo só é válido para campos de entrada TEXT e PASSWORD.
    Dia do mês: <INPUT TYPE=TEXT NAME='ex' MAXLENGHT=2>


    produz o resultado:

    Dia do mês:

    Apenas 2 caracteres serão lidos pelo formulário, não importa o quanto se escreva neste campo.


Exemplo
O elemento Form possui um certo grau de complexidade, para facilitar dê uma olhada no exemplo completo que utiliza o serviço gratuito AnyForm. Você precisa alterar os dados e-mail e endereço da página.




HTML | Introdução | Básico | Texto | Links | Imagem/Linha | Tabela | Formulário | Frame | Refresh
© João Maurício Hypólito - Ourinhos/SP