Untitled Document

Formulários

Permite ao usuário enviar informações por meio da página, em forma de pesquisa, mala direta, compra eletrônica e outros.

O formulário depende de outros programas no servidor, para receber e processar os dados que serão enviados.

Para criar um formulário é preciso definir seu objetivo, elaborar os dados a serem incluídos e como serão apresentados.

Todo formulário deverá iniciar e terminar com as tags <FORM> ... </FORM>.

<FORM> ... </FORM> - inicia e finaliza a definição de um formulário. Possui os seguintes parêmetros:
ACTION – informa o endereço do servidor em que está o programa CGI (Common Gateway Interface) que vai processar os dados do formulário.
METHOD – informa o método de transferência dos dados. Permite os seguintes valores:
GET – anexa os dados do formulário ao endereço especificado no parâmetro ACTION.
POST – envia todos os dados do formulário logo após a "URL" do parâmetro ACTION. Este é o método mais utilizado.

Exemplo: <FORM ACTION="URL" METHOD="GET">

Tags utilizadas dentro do formulário:

<INPUT> ... </INPUT> - utilizadas para criar um campo de entrada de dados. A tag de finalização é opcional. Permite os seguintes parâmetros:
NAME – dá nome à variável (campo) que receberá os dados de entrada.
TYPE – define o tipo de entrada de dados que a variável vai receber. Ele aceita os seguintes valores:
TEXT – caixa de texto

Exemplo: <INPUT TYPE=TEXT NAME="Nome" SIZE=40 MAXLENGTH=40>
PASSWORD – caixa de password

Exemplo: <INPUT TYPE=PASSWORD NAME="Senha" SIZE=8 MAXLENGTH=8>
RADIO – botão de rádio. Somente uma opção pode ser selecionada.

Exemplo: <INPUT TYPE=RADIO NAME="Alternativa" VALUE="M"> Manhã

<INPUT TYPE=RADIO NAME="Alternativa" VALUE="T"> Tarde

<INPUT TYPE=RADIO NAME="Alternativa" VALUE="N" CHECKED> Noite
CHECKBOX – botão de opções. Várias opções podem ser escolhidas.

Exemplo: <INPUT TYPE=CHECKBOX NAME="Informe" VALUE="I"> Imóvel

<INPUT TYPE=CHECKBOX NAME="Informe" VALUE="C" CHECKED> Carro

<INPUT TYPE=CHECKBOX NAME="Informe" VALUE="M"> Micro Computador
SUBMIT – botão para enviar os dados que foram digitados no formulário para o servidor por meio do endereço fornecido no elemento <FORM>

Exemplo: <INPUT TYPE=SUBMIT VALUE="Enviar">
RESET – botão para limpar os dados do formulário

Exemplo: <INPUT TYPE=RESET VALUE="Limpar">
HIDDEN – cria um campo invisível e seu conteúdo é enviado junto com os dados do formulário.

Exemplo: <INPUT TYPE=HIDDEN NAME="Oculto" VALUE="Informações">

SIZE – determina apenas o tamanho da caixa na tela. Geralmente é utilizado nos campos do tipo TEXT ou PASSWORD. O tamanho default é em torno de 20 caracteres, dependendo do tipo de fonte utilizada.
MAXLENGTH – define o tamanho máximo de caracteres a serem digitados no campo. Usado em campos do tipo TEXT ou PASSWORD. Quando omitido, o campo aceita um texto de qualquer tamanho, que se deslocará para a esquerda caso o texto for maior que a caixa.
VALUE – valor do conteúdo do campo, podendo ser um texto degitado, um texto predefinido ou um título do botão; dependerá do tipo que foi definido.
CHECKED – seleciona como padrão a opção. Usado em campos de botão de opções (RADIO e CHECKBOX), quando se quer deixar uma das opções pré-selecionada.

<SELECT> ... </SELECT> - permite criar uma lista de opções. Default: permitir somente uma seleção e exibe na tela uma caixa com uma linha. Para visualizar a lista, o botão lateral (drop-down) deve ser clicado. Possui os seguintes parâmetros:
NAME – contém o nome da variável que vai receber o conteúdo do campo.
SIZE – determina o número de linhas que será exibido na tela. Caso a lista seja maior, uma barra de rolagem surgirá automaticamente.
MULTIPLE – permite qu seja selecionado mais de um item da lista. Na ausência do parâmetro SIZE, o default para múltiplas escolhas será de quaro linha na tela. Seu uso é opcional.

<OPTION> - define cada item da lista. Aceita os valores:
SELECTED – a opção ficará pré-selecionada na lista.
VALUE – será o conteúdo da opção. É opcional, e quando omitido o valor do conteúdo será o texto após o parâmetro <OPTION>.

Exemplo: <SELECT NAME="bens" SIZE=2 MULTIPLE>

<OPTION VALUE="casa"> Casa Própria

<OPTION VALUE="carro"> Automóvel

<OPTION VALUE="computador"> Micro Computador

</SELECT>

<TEXTAREA> ... </TEXTAREA> - definem uma área de texto (campo) com várias linhas e colunas, para que o usuário possa digitar um determinado tipo de informação. Terá os valores:
NAME – nome da variável de entrada do campo.
ROWS – define a altura da caixa; determinada pelo número de linhas.
COLS – define a largura da caixa; definida pelo número de colunas.

Exemplo:

Fale um pouco do tipo de lazer que você gosta:

Relacione quais e por ordem de preferência.

</TEXTAREA>

Observações: os campos do formulário costumam ficar desalinhados. Para conseguir o alinhamento pode-se utilizar o elemento <PRE> seguido da tecla TAB para alinhar conforme desejado.

Exemplo:

<PRE>

Nome : <INPUT NAME="nome" TYPE=TEXT SIZE=40 MAXLENGTH=40> <BR>

Endereço : <INPUT NAME="endereço" TYPE=TEXT SIZE=30 MAXLENGTH=30>

</PRE>

Exemplo de Formulário