O HTML nos propõem uma grande diversidade de alternativas na hora de criar nossos formulários. Estas vão desde a clássica caixa de texto até a lista de opções passando pelas caixas de validação.

Veremos em que consiste cada una destas modalidades e como podemos implementá-las em nosso formulário.

Texto curto

As caixas de texto são colocadas por meio da etiqueta <input>. Dentro desta etiqueta temos de especificar o valor de dois atributos: type e name.

A etiqueta é da seguinte forma:

<input type="text" name="nome">

Deste modo expressamos nosso desejo de criar uma caixa de texto cujo conteúdo será chamado nome (por exemplo). O aspecto deste tipo de caixas é conhecido, como pode ser visto aqui:

O nome do elemento do formulário é de grande importância para poder identificá-lo em nosso programa de processamento ou no e-mail recebido. Por outro lado, é importante indicar o atributo type, já que, como veremos, existem outras modalidades de formulário que usam esta mesma etiqueta.

O emprego destas caixas está fundamentalmente destinado à tomada de dados breves: palavras ou conjuntos de palavras de longitude relativamente curta. Veremos mais adiante que existe outra forma de tomar textos mais longos a partir de outra etiqueta.

Além destes dois atributos, essenciais para o correto funcionamento de nossa etiqueta, existem outra série de atributos que podem ser de utilidade, mas que não são imprescindíveis.

size
Define o tamanho da caixa em número de caracteres. Se ao escrever o usuário chega ao final da caixa, o texto irá desfilando à medida que se escreve fazendo desaparecer a parte de texto que fica à esquerda.

maxlength
Indica o tamanho máximo do texto que pode ser tomado pelo formulário. É importante não confundí-lo com o atributo size. Enquanto o primeiro define o tamanho aparente da caixa de texto, maxlength indica o tamanho máximo real do texto que pode ser escrito. Podemos ter uma caixa de texto com um tamanho aparente (size) que é menor do que o tamanho máximo (maxlength). O que ocorrerá neste caso é que, ao escrever, o texto irá desfilando dentro da caixa até que cheguemos ao seu tamanho máximo definido por maxlength, momento no qual será impossível continuar escrevendo.

value
Em alguns casos pode ser interessante atribuir um valor definido ao campo em questão. Isto pode ajudar ao usuário a preencher mais rapidamente o formulário ou a dar alguma idéia sobre a natureza de dados que se requerem. Este valor inicial do campo pode ser expresso mediante o atributo value. Vejamos seu efeito com um exemplo simples:

<input type="text" name="nome" value="Perico Palotes">

Gera um campo deste tipo:

Nota: estamos obrigados a utilizar a etiqueta <form> Para que fique mais claro este conteúdo, ressaltamos: Quando queremos utilizar em qualquer situação elementos de formulário devemos escrevê-los sempre entre as etiquetas <form> y </form>. Caso contrário, os elementos serão vistos perfeitamente no Explorer, mas não no Netscape. Com outras palavras, no Netscape não se visualizam os elementos de formulário a não ser que estejam colocados entre as correspondentes etiquetas de início e fim de formulário. É por isso que para mostrar um campo de texto não adianta colocar a etiqueta <input>, e sim, coloca-la dentro de um formulário. Assim: <form> <input type="text" name="nome" value="Josefa Palotes"> </form>

Veremos posteriormente que este atributo pode ser relevante em determinadas situações.

Texto oculto

Podemos esconder o texto escrito por meio de asteriscos de forma a fornecer uma certa confiabilidade. Este tipos de campos são análogos aos de texto com somente uma diferença: deslocando o atributo type="text" por type="password":

<input type="password" name="nome">

Neste caso, pode ser comprovado que ao escrever dentro do campo no lugar de texto serão vistos asteriscos.

Estes campos são ideais para a introdução de dados confidenciais, principalmente códigos de acesso. Isto pode ser visto em funcionamento a seguir:

Texto longo

Se desejarmos colocar à disposição do usuário um campo de texto onde possa escrever comodamente sobre um espaço composto de várias linhas, temos de convocar uma nova etiqueta: <textarea> e seu fechamento correspondente.

Estes tipos de campos são práticos quando o conteúdo a enviar não é um nome, telefone ou qualquer outro dado breve, e sim, um comentário, opinião, etc.

Dentro da etiqueta textarea deveremos indicar, como para o caso visto anteriormente, o atributo name para associar o conteúdo a um nome que será semelhante a uma variável nos programas de processo. Além disso, podemos definir as dimensões do campo a partir dos seguintes atributos:

rows
Define o número de linhas do campo de texto.

cols
Define o número de colunas do campo de texto.

A etiqueta fica portanto, desta forma:

<textarea name="comentário" rows="10" cols="40"></textarea>

O resultado é o seguinte:

Mesmo assim, é possível definir o conteúdo do campo. Para isso, não usaremos o atributo value e sim, que escreveremos dentro da etiqueta o conteúdo que lhe desejamos atribuir. Vejamos:

<textarea name="comentário" rows="10" cols="40">Escreva seu comentário....</textarea>

Terá como resultado:

Escreva seu comentário....