Formulários HTML

Os formulários constituem-se numa matéria de extrema importância no HTML, uma vez que são responsáveis pela interação entre um usuário e o servidor, possibilitando a troca de dados ou informações.

Quem ainda não viu uma página com campos para entrada de texto, botões de múltiplas escolhas ou menu de opções em listbox ou combobox?

Um formulario é iniciado com <form> e fechado com </form>. Internamente a essas marcações especificamos o tipo de campo desejado para entrada de dados:

<input> : text (linha única para texto), password, checkbox, radio, submit (button) e reset (button);

<select> : listbox, combobox;

<textarea> : campo de texto de múltiplas linhas.

Cada um destes campos de entrada de dados possui um atributo name associado a um nome, de tal forma que o parâmetro action possa receber uma variável com o valor digitado pelo usuário.

Uma vez que a finalidade básica de um formulário é possibilitar a troca de dados entre o usuário e um servidor, o formulário precisa saber o método (method) em que os dados serão enviados do browser para o servidor. Há dois métodos:

post - voltado à transferência de grandes quantidades de dados, transferindo a informação assim que a URL estiver habilitada. Quando o servidor recebe uma ativação via post, ele continua aberto para receber informações.

get - Suporta somente 128 caracteres e os dados fazem parte da URL associado à consulta enviada para o servidor.

O formulário também precisa saber o endereço URL do script ao qual serão enviados seus dados. Especificamos esse endereço através do parâmetro action.

Vejamos alguns exemplos básicos com <input>:

1º. text:

<form method="post" action="teste.php">
Digite o nome de sua cidade:
<input type="text" name="Cidades" value=Araçatuba size="15" maxlenght="15">
</form>

O exemplo acima cria um text, que permite a entrada de um texto.

Parâmetros opcionais:

value - atribui um valor inicial para o campoo;

size - especifica o tamanho do campo;>

maxlenght - especifica o número máxximo de caracteres aceitos pelo campo.

2º. Agora um exemplo com password (campo para entrada de senhas):

<form method="post" action="teste.php">
Digite uma senha:
<input type="password" name="Senha" value="minhasenha" size="10" maxlenght="10">
</form>

A diferença entre text e password é que, sendo este último campo apropriado para entrada de senhas, os caracteres são apresentados como asteriscos (*). Os parâmetros value, size e maxlenght são opcionais.

3º. Um checkbox é um campo de múltipla escolha onde o usuário pode escolher mais de uma opção:

Que outro curso você quer ver aqui na faculdade:<p>
<input type="checkbox" name="preferencia" value="cbuilder" checked>C++Builder
<input type="checkbox" name="preferencia" value="php">PHP<p>
<input type="checkbox" name="preferencia" value="delphi">Delphi
<input type="checkbox" name="preferencia" value="vb">Visual Basic<p>
<input type="checkbox" name="preferencia" value="asm">Assembly
<input type="checkbox" name="preferencia" value="java">Java

O parâmetro checked, que é opcional, determina a marcação da opção inicialmente. Já value é obrigatório pois especifica o valor da opção a ser enviada ao servidor.

4º. Radio é mais um formulário de múltipla escolha, mas nesse caso o usuário poderá escolher apenas uma opção. Os parâmetros seguem o mesmo roteiro do checkbox:

Que outro curso você quer ver em nossa faculdade:<p>
<input type="radio" name="preferencia" value="cbuilder" checked>C++Builder
<input type="radio" name="preferencia" value="php">PHP<p>
<input type="radio" name="preferencia" value="delphi">Delphi
<input type="radio" name="preferencia" value="vb">Visual Basic<p>
<input type="radio" name="preferencia" value="asm">Assembly
<input type="radio" name="preferencia" value="java">Java

5º. Um botão reset pode ser usado para restaurar o valor padrão de todos os campos de um formulário:

<input type="reset">

Se colocado, o parâmetro value especifica o texto do botão.

6º. Por sua vez, submit enviará as opções ou informações digitadas ao servidor:

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

São opcionais os parâmetro value que especifica o texto a ser exibido no botão e o parâmetro name que determinará a transmissão do valor contido em value, permitindo a colocação de vários botões.

Agora vamos conhecer os campos que podem ser construídos com <select>:

1º. Listbox ;

2º. Combobox;

parâmetros:

Listbox e Combobox podem ser considerados campos irmãos. A diferença básica entre eles consiste na existência ou não do parâmetro size (que especifica o número de linha exibidas). Se inserirmos esse parâmetro, estaremos construindo um listibox; se não especificarmos, um combobox.

Um listbox:

Que outro curso você quer ver em nossa faculdade:<p>
<select name="cursos" size = "10" multiple>
<option value="bcb">C++Builder</option>
<option value="php">PHP</option>
<option value="delphi">Delphi</option>
<option value="vb">Visual Vasic</option>
<option value="asm">Assembly</option>
<option value="java">Java</option>
</select>

Um Combobox:

Que outro curso você quer ver em nossa faculdade:<p>
<select name="cursos"><> <option value="bcb">C++Builder</option>
<option value="php">PHP</option>
<option value="delphi">Delphi</option>
<option value="vb">Visual Vasic</option>
<option value="asm">Assembly</option>
<option value="java">Java</option>
</select>

O parâmetro opcional multiple permite a seleção de mais de uma linha;

Cada <option> acrescenta uma linha ao componente;

value especifica o valor a ser enviado ao servidor se tal item for selecionado;

Inserimos o texto que queremos expor entre <option> e </option>:

<option>Texto que aparecerá no item</option>

Agora vamos conhecer <textarea>:

<textarea name="opniao" rows="5" cols="40">
digite aqui alguma observação
</textarea>

Em <textarea> o texto default é opcional; já os parâmetros rows e cols devem ser especificados.