6 – Formulários web

A forma mais comum de capturar dados em browsers é com formulários, capazes de capturar dados que serão posteriormente enviados a um servidor HTTP. Um formulário pode ser constituído por campos de vários tipos, nos quais o usuário pode introduzir dados. Um formulário tem, ainda, pelo menos um botão, que quando pressionado envia ao servidor os dados nele expressos.

São os formulários e os Scripts CGI que consistem nos mecanismos chaves para capturar solicitações de pesquisa e/ou entrada de dados e enviá-las a uma base de dados.

O elemento <FORM> delimita um formulário e contém uma seqüência de elementos de entrada e de formatação do documento.

<form action="url_de_script" method="método">
....
</form> 

Um form contem obrigatoriamente um atributo ACTION , que permite especificar o nome do programa ou script a ativar via CGI.

Pode ser indicado ainda, o atributo METHOD, que seleciona um método para acessar o URL de ação. Os métodos podem ser GET ou POST. Ambos transferem dados do browser para o servidor, com as seguintes diferenças básicas:

  • POST : Os dados submetidos fazem parte de um bloco de mensagem enviada para o servidor. É mais usado por transferir grandes quantidades de dados e ser capaz de ocultar os parâmetros passados para o usuário.

  • GET: É o método default. Neste caso os dados entrados fazem parte do URL associado à consulta enviada para o servidor. Suporta até 128 caracteres.

O primeiro passo para fazer formulários é aprender as etiquetas que desenham os campos de entrada de dados, para depois trabalhar com os scripts. Uma pesquisa Isis por exemplo, pode digitar-se em um elemento de entrada do tipo text, conforme o exemplo:

<html>
<head>
<title>Pesquisa</title>
</head>

<body>

<h1>Digite sua expressão de busca:</h1>

<form action="/cgi-bin/wxis.exe" method="POST">
    <input type="hidden" name="IsisScript" value="meuscript.xis">
    <input type="text" name="expressao" value="">
    <input type="submit" name="button" value="pesquisa">
</form>

</body>
</html>

Cada elemento de Entrada em um FORM tem três atributos básicos associados: o tipo de campo, o nome que identifica o elemento de entrada e o valor assinalado ao mesmo.

O primeiro elemento de entrada utilizado no exemplo anterior tem o atributo type igual a text, seguido pelo atributo name igual a expressao e e o atributo value igual a null. Isso significa que logo após ser digitado no campo de entrada do formulário, a expressão de pesquisa será armazenada no atributo value e enviada através da variável de nome expressao. O tipo do segundo elemento de entrada é um botão submit, que quando clicado envia todos os dados introduzidos no formulário ao servidor Web.

A seguir são detalhados alguns tipos de tag que podem ser utilizados para formulários de entrada de dados:

6.1 TEXTBOX

Usada para que o usuário possa digitar algum texto, por exemplo:



Em HTML:

<label>Termo de busca</label>
<input type="text" name="expressao">

6.2 TEXTAREA:

Usada para digitar textos em múltiplas linhas:

Em HTML:

resumo: <textarea rows="3" cols="30" name="resumo"></textarea>

6.3 OPTION LIST

Lista de seleção utilizada para que o usuário possa escolher entre termos pré-definidos:

Formato:


Em HTML

<select name="formato">
    <option value="1"> simples</option>
    <option value="2" selected> detalhado</option>
    <option value="3"> marc</option>
 </select>

Note que na passagem de parâmetros serão passados os valores 1, 2 ou 3 de acordo com a opção selecionada. Para tornar uma opção default, pode ser usado o atributo SELECTED

6.4 CHECK BOX

É uma caixa que na qual pode ser atribuído um “check” com um clique, marcando a opção como Sim/Não, Verdadeiro/Falso, On/Off, etc.

 Truncar termos 

Em HTML:

<input type="checkbox" name="truncar">Truncar termos

6.5 RADIO BUTTON

Opção utilizada para que o usuário possa selecionar uma opção entre um conjunto pré-definido. Como todas as opções ficam visíveis, é viável para pequenos conjuntos de possibilidades.
Exemplo:

and  or

Em HTML:

<input type="radio" name="operador" value="and">and
<input type="radio" name="operador" value="or"> or

Neste caso a variável “operador” passará os valores AND ou OR dependendo da opção selecionada. O atributo “CHECKED” pode ser utilizado para marcar uma opção como default.

6.6 Variáveis do tipo HIDDEN

O elemento INPUT pode ainda passar variáveis ocultas, que serão invisiveis para o usuário que estará consultando a página mas serão utilizados pelo programa, como por exemplo, para indicar qual script será chamado para comandar as ações que deverão ser executadas pelo Wxis. Por exemplo:

<input type="hidden" name="isisscript" value="meuscript.xis">

Variáveis do tipo hidden são também muito usadas para passar informações de uma página para outra sem precisar redigitá-las.

6.7 SUBMIT – Enviando as variáveis

Os formulários devem conter ainda um botão “Submit”, que enviará os dados do formulário para o servidor. Exemplo:

Em HTML:

<input type="submit" value="pesquisar">

Was this helpful?

0 / 0

Deixe uma resposta 0

Your email address will not be published. Required fields are marked *