Introdução ao HTML – Elementos de formulários HTML

Veja neste artigo como utilizar os controles (elementos) de formulários HTML, identificando os vários tipos e funcionalidades existentes, até o HTML 5 e as novidades inseridas nessa versão.

por Diego Cesar Ribeiro

Neste artigo serão explicados os elementos básicos de um formulário HTML. Será tratado dos input types do HTML 4/XHTML e do HTML5; e também dos elementos fora dos inputs types, mas que são muito usados dentro de formulários.

Listagem 1: Exemplo básico de input

<input type=”text” />

Como foi visto no exemplo acima, ao invés de abrir e fechar uma tag separadamente, eu abri e fechei a tag dentro dela mesma. Ou seja, no lugar de <input type=”text”></input>, utilizei, <input type=”text” />, isso começou a ser usado em XHTML. O type do HTML 4/XHTML tem os seguintes valores:

Valor:	Descrição:
text	Cria um campo de inserção textual de uma linha única;
reset	Cria um botão formatador de texto;
submit	Cria um botão de confirmação;
checkbox	Cria um campo de seleção recíproca;
radio	Cria um campo de seleção única;
password	Cria um campo textual, cujos caracteres são inibidos por asteriscos;
File	Exibe um campo onde os arquivos podem ser inseridos para envio;
hidden	Um campo não exibido que contêm os dados que o autor da página web deseja incluir nos dados do formulário como um todo.

text

Vamos começar com o text. É o ideal para se escrever seu nome, endereço e etc. O código é esse:

Listagem 2: Exemplo de text

<input type="text" value="Seu nome: " maxlength="15" size=”50” accesskey=”a” />

Atributo dentro do text:	Descrição:
maxlength	Serve para definir o maior número de caracteres que podem ser digitados;
value	É usado para definir a mensagem que aparecerá no campo textual logo após a inicialização da página;
size	É usado para definir o tamanho do campo de texto;
accesskey	Serve para definir um atalho para o campo de texto.

O atributo accesskey serve para criar um atalho através da combinação “alt+...”; no exemplo que dei, o atalho é alt+a. É importante ressaltar que os visitantes não têm como saber desse atalho se não for explicitamente informado.

password

O password funciona quase identicamente com o text, mas com a diferença de seus caracteres serem criptografados em asteriscos, como se segue no exemplo abaixo:

Listagem 3: Uso de password

<input type="password"  maxlength="15" />

reset

O próximo atributo é o reset, ele só funciona quando conectado ao precisa resetar. Então vamos pô-lo dentro da tag form, assim, conectando-o ao seu objetivo de ação, como se segue no exemplo abaixo:

Listagem 4: Exemplo do uso de reset

<form>
<input type="text"  maxlength="15" size="50" accesskey="a" />
<input type="reset" value= "Formatar texto" />
</form>

submit

O código para se criar um botão de submit é esse:

Listagem 5: Exemplo de submit

<form>
<input type="submit"   />
</form>

file

Listagem 6: Exemplo de file

<input type="file" />

Esse atributo carrega um arquivo para ser enviado.

radio

Listagem 7: Exemplo de radio

<p>Hoje é:</p>
<p>Dia 1º<input type="radio" name="dia" value="dia 1"/></p>
<p>Dia 2º<input type="radio" name="dia" value="dia 2"/></p>
<p>Dia 3º<input type="radio" name="dia" value="dia 3"/></p>

Eu usei a tag <p>...</p> para deixar a formatação mais organizada. Como se viu, usei os atributos name e value. O name serve para conectar os diferentes radios, e o value, para dar um valor individual a cada um. Sem esses atributos o radio não funcionará adequadamente.

checkbox

Listagem 8: Exemplo de checkbox.

<p>Eu gosto de:</p>
<p>Café<input type="checkbox" name="bebidas" value="café"/></p>
<p>Suco<input type="checkbox" name="bebidas" value="suco"/></p>
<p>Refrigerante<input type="checkbox" name="bebidas" value="refrigerante"/></p>

Novamente, vamos usar o name e o value.

Agora, as novidades do input type do HTML 5:

Valor	Descrição
color	Seleciona uma cor dentro de um seletor de cores;
date	Define um controle de data;
datetime	Define uma data e uma hora de controle (com fuso horário)
datetime-local	*
email	Campo para receber um endereço de email;
month	Define mês e ano;
number	Define um capo numérico;
range	Define um campo de seleção numérico cujo valor exato não é importante;
search	Define um campo de pesquisa;
tel	Define um campo para inserção de números telefônicos;
time	Define um controle para por um tempo.
url	Campo para inseção de URL’s, cujo valor é quando o form é enviado.
week	Permite a seleção de uma semana do ano.

As inserções desses novos códigos são da mesma forma que os outros. É importante notar que a maioria desses códigos ainda não funcionam em todos os navegadores, já como o HTML 5 ainda é um recurso relativamente novo.

Agora vou falar dos elementos de formulário que podem opcionalmente ou não serem empregados dentro do input type:

Valor:	Descrição:
select	Cria um campo de seleção única;
select multiple	Cria um campo de seleção múltipla escolha;
textarea	Cria um campo de inserção de textos longos;
button	Cria um botão configurável.

select

Listagem 9: Exemplo de select.

Sua religião:
<select name=religião>
<option value="catolico">Católico</option>
<option>Protestante</option>
<option>Budista</option>
</select>

select multiple

Listagem 10: Exemplo de select multiple

<form>
<select multiple>
<option selected>Opção A</option>
<option selected>Opção B</option>
<option value="Opção C">Opção C</option>
<option selected>Opção D</option>
<option>Opção E</option>
<option>Opção F</option>
</select>
</form>

textarea

Listagem 11: Usando textarea

<textarea rows="2" cols="20">
Este é um grande campo de texto.
</textarea>

button

Listagem 5: Usando o button

<input type="button" value="Clique aqui” ><img src=”i.jpg”></input>

O button tem uma vantagem que é poder adicionar uma imagem no corpo de botão:

Listagem 6: Usando imagens dentro de um button

<button> <img src="imagem.jpg" /> </button>

Caso o button seja usado como botão de reset ou submit, o type altera-se conforme o caso. Dentro do button nós também podemos usar os atributos height e width, configurando assim sua largura e sua altura.

Esse artigo teve como objetivo citar os principais elementos de uma tabela, não se aprofundando muito como usá-los para envio, por exemplo, por que nesse caso seria necessário fugir do script HTML, o que vai muito além desse artigo, que já é grande.