Elementos de controle

Os elementos de controle de formulários são os elementos que possibilitam a entrada de dados, tais como botões, caixas de texto, check boxes, dentre outros. Vamos começar a explicação pelas caixas de texto.

Caixa de texto (text input)

Caixas de texto são usadas para que o usuário possa fornecer texto. Elas podem ser definidas com o elemento <input>, criando uma única linha de texto, ou com o elemento <textarea>, criando múltiplas linhas de entrada de texto. Veja alguns exemplos a seguir.

1) Texto curto – na tag <input> podem ser especificados dois atributos, type e name. O atributo name serve para identificá-lo em nosso programa de processamento ou no e-mail recebido, enquanto o atributo type é importante para indicar o tipo de entrada, pois, como foi visto, a tag <input> é usada para criar outros tipos de elemento no formulário. O exemplo a seguir cria uma caixa de entrada de texto com uma única linha e dá aido identificador "nome". Veja na Figura 11 a aparência dessa caixa de entrada de texto.

Além desses dois atributos, essenciais para o correto funcionamento de nossa etiqueta, existe outra série de atributos que podem ser de utilidade, mas que não são imprescindíveis, tais como:

• size – define o tamanho da caixa que aparecerá na tela, em número de caracteres.
• maxlength – especifica o tamanho máximo do texto que pode ser inserido em uma caixa de texto. É importante não confundi-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.
• value – define um valor para o campo em questão. Isso pode ajudar o usuário a preencher mais rapidamente o formulário ou a dar alguma ideia sobre a natureza de dados que é solicitada. Esse valor inicial do campo pode ser expresso mediante o atributo value. Veja o resultado com um exemplo simples (Figura 11).

2) Texto oculto – quando se deseja esconder o texto escrito por meio de asteriscos de forma a fornecer uma certa confiabilidade, o atributo type da tag <input> deve ter valor “password”. Esses campos são ideais para a introdução de dados confidenciais, principalmente senhas. Veja o exemplo a seguir e o efeito na Figura 11.

3) Texto longo – quando se deseja que o usuário escreva várias linhas de texto, deve-se usar a tag <textarea>...</textarea>. Esses 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, mensagem, opinião etc. Na tag <textarea> deve-se 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 processamento e, além disso, pode-se definir as dimensões do campo a partir dos atributos rows e cols. E para escrever um valor inicial para esse campo, deve-se escrevê-lo entre as tags de início e fim de textarea, como no exemplo a seguir.

Veja os exemplos:

• rows – define o número de linhas do campo de texto;
• cols – define o número de colunas do campo de texto.

A tag<label> define um rótulo para os elementos de entrada de dados. Esse rótulo não causa um grande efeito para os usuários, mas melhora a usabilidade porque, se o usuário clicar nesse rótulo, o browser coloca o cursor imediatamente na caixa de controle.

Assim, é aconselhável utilizar essa tag para os elementos de entrada de dados. O atributo “for” da tag <label> deve ter o mesmo valor que o atributo “name” do elemento relacionado, como nos exemplos mostrados na Figura 11.