Criando um formulário real

Um formulário real será criado e conterá diversos campos de entrada. Será necessário alterar um pouco o código-fonte do script para desfazer o mapeamento de caracteres e otimizar as linhas de código individuais. Vamos começar o processo observando os controles de entrada padrão em um formulário. Eles incluem:
  • entrada de texto de linhas simples;
  • entrada de texto de linhas múltiplas;
  • listas de seleção;
  • caixas de seleção;
  • botões de rádio;
  • botões especializados - para enviar e limpar o formulário, por exemplo.
Você pode combinar estes controles com qualquer texto ou imagem estática, da mesma forma que você faria em uma página de internet comum.

Aqui estão alguns exemplos que demonstram o uso de diferentes comandos de controle:

Edição de linha simples
A palavra "input" identifica uma área de edição de linha simples. O campo "name" é um identificador de controle do script CGI. Cada campo do formulário tem um controle único. O campo "size" indica a largura, em caracteres, da área de entrada de texto no formulário. "Maxlength" indica o número máximo de caracteres na área de entrada de texto. "Value" define um valor inicial. 

  Digite o seu nome: <input name="Name" size=30 maxlength=50
value="Sample">

Geralmente, a área de entrada de texto é precedida por um texto estático que identifica o propósito do campo de entrada de texto. Aqui é mostrado o texto estático "Digite o seu nome:".

Você pode adicionar o parâmetro "type=int" para restringir a entrada a valores inteiros. Por padrão, o parâmetro é "text" que aceita qualquer caractere.

Edição de linhas múltiplas
Uma área de edição de linhas múltiplas é semelhante à área de entrada de texto. Você pode definir o nome do controle e o tamanho do formulário em linhas e colunas. Qualquer coisa que você colocar antes do comando </textarea> vai ser exibido no controle como um valor padrão. 


<textarea name="Company Address" cols=30  rows=4>
</textarea>
Caixas de seleção
Uma caixa de seleção é um formulário especializado de uma área de entrada com o parâmetro definido em "checkbox". 
<input type=checkbox name="Include" value=1>
O valor será retornado se a caixa de seleção for selecionada.

Botões de rádio
Botões de rádio são parecidos com as caixas de seleção, mas são agrupados visualmente. 

  Selecione a área de busca:<br>
  <input type=radio CHECKED name=universe value=BR-STOCK>
  Ações
  <input type=radio name=universe value=PT-STOCK>
  Ações Portuguêsas
  <input type=radio name=universe value=MMF>
  Mercado de investimentos
  <input type=radio name=universe value=MUTUAL>
  Fundos mútuos

Note que o botão de rádio padrão pode ser marcado com a palavra CHECKED. Perceba também que todos os botões de rádio do mesmo grupo têm o mesmo nome.

Listas de seleção
Uma lista de seleção oferece ao usuário a possibilidade de escolher dentre inúmeras opções. O comando para uma lista de seleção permite que você especifique o número de linhas visíveis no campo "size", assim como os valores para todas as opções. 

  Selecione uma opção
Select an Option<br>
  <SELECT size=2 NAME="Option">
      <OPTION> Opção 1
      <OPTION> Opção 2
      <OPTION> Opção 3
      <OPTION> Opção 4
  </SELECT>

A palavra MULTIPLE cria a possibilidade de selecionar múltiplas opções.

Botões especializados
Os comandos a seguir criam dois botões especializados. Um para enviar o formulário para o servidor e outro para limpar o formulário. 

<INPUT TYPE=submit value="Enviar">
<INPUT TYPE=reset value="Limpar">