CriarWeb.com > Manuais > Manual de HTML

Efetivamente, os textos são uma maneira muito prática de fazer chegar a informação do navegante. Porém, em muitos casos, os texto são dificilmente adaptáveis a programas que possam processá-los devidamente ou também pode ser que seu conteúdo não se ajuste ao tipo de informação que requeremos. É por isso que, em determinados casos, pode ser mais efetivo propor uma escolha ao navegante a partir da exposição de uma série de opções.

Este é o caso de, por exemplo, oferecer uma lista de países, o tipo de cartão de crédito para um pagamento, etc.

Estes tipos de opções podem ser expressadas de diferentes formas. Vejamos a seguir quais são:

Listas de opções

As listas de opções são esse tipo de menus desdobráveis que nos permite escolher uma (ou várias) das múltiplas opções que nos propõem. Para construí-las utilizaremos uma etiqueta com seu respectivo fechamento: <select>

Como para os casos já vistos, dentro desta etiqueta definiremos seu nome por meio do atributo name. Cada opção será incluída em uma linha precedida da etiqueta <option>.

Podemos ver, a partir destas diretrizes, a forma mais típica e simples desta etiqueta:

<select name="estação">
<option>Primavera</option>
<option>Verão</option>
<option>Outono</option>
<option>Inverno</option>
</select>

O resultado é:

Primavera Verão Outono Inverno

Esta estrutura pode ser vista modificada principalmente a partir de outros dois atributos:

size
Indica o número de valores mostrados da lista. O resto pode ser visto por meio da barra lateral de deslocamento.

multiple
Permite a seleção de mais vários elementos da lista. A escolha de mais de um elemento se faz como com o explorador de Windows, a partir das teclas ctrl ou shift. Este atributo se expressa sem valor algum, ou seja, não se utiliza com o igual: simplesmente se coloca para conseguir o efeito, ou não se coloca se quisermos uma lista desdobrável comum.

Conselho: Se for possível, não utilize multiple Não recomendamos especialmente a prática desta opção já que o manejo das teclas ctrl ou shift para escolher várias opções pode ser desconhecido para o navegante. Evidentemente, sempre cabe a possibilidade de explicar como funciona a pesar de ser uma complicação a mais para o visitante.

Vejamos qual é o efeito produzido por estes dois atributos mudando a linha:
<select name="estação">

por:
<select name="estação" size="3" multiple>

A lista ficará desta forma:

Primavera Verão Outono Inverno

A etiqueta <option> ainda pode ser precisada por meio de outros atributos

selected
Da mesma forma que multiple, este atributo não toma nenhum valor senão que simplesmente indica que a opção que apresenta está escolhida por padrão.

Assim, se mudamos a linha do código anterior:
<option>Outono</option>

por:
<option selected>Outono</option>

O resultado será:

Primavera Verão Outono Inverno

value
Define o valor da opção que será enviada ao programa ou ao correio eletrônico se o usuário escolhe essa opção. Este atributo pode ser muito útil se o formulário for enviado a um programa visto que a cada opção se pode associar um número ou letra, o qual torna-se mais facilmente manipulável que uma palavra ou texto. Poderíamos assim escrever linhas do tipo:

<option value="1">Primavera</option>

Deste modo, se o usuário escolhe primavera, o que chegará ao programa (ou ao correio) é uma variável chamada estação que terá com valor 1. No correio eletrônico receberíamos:

estação=1

Botões de radio

Existe outra alternativa para expor uma escolha, neste caso, obrigamos ao internauta a escolher unicamente uma das opções que lhe propõem.

A etiqueta empregada neste caso é <input> na qual teremos a atributo type que temos de tomar o valor radio. Vejamos um exemplo:

<input type="radio" name="estação" value="1">Primavera
<br>
<input type="radio" name="estação" value="2">Verão
<br>
<input type="radio" name="estação" value="3">Outono
<br>
<input type="radio" name="estação" value="4">Inverno

Nota: Temos de observar que a etiqueta <input type="radio"> somente coloca o campo para clicar na página. Os textos que aparecem ao lado, assim como as quebras de linha, colocamos com o correspondente texto no código da página e com as etiquetas HTML que necessitarmos.

O resultado é o seguinte:

Primavera
Verão
Outono
Inverno

Como podemos ver, a cada uma das opções se atribui uma etiqueta input dentro da qual atribuimos o mesmo nome (name) para todas as opções e um valor (value) distinto. Se o usuário escolhe supostamente Outono, receberemos em nosso correio uma linha tal como esta:

estação=3

Cabe assinalar que é possível pré-selecionar por padrão uma das opções. Isto se pode conseguir por meio do atributo checked:

<input type="radio" name="estação" value="2" checked>Verão

Vejamos o efeito:

Primavera
Verão
Outono
Inverno

Caixas de validação

Estes tipos de elementos podem ser ativados ou desativados pelo visitante com um simples clique sobre a caixa em questão. A sintaxe utilizada é muita parecida com as vistas anteriormente:

<input type="checkbox" name="paella">Adoro uma feijoada

O efeito:

Adoro uma feijoada

A única diferença fundamental é o valor adotado pelo atributo type.

Da mesma forma que para os botões de radio, podemos ativar a caixa por meio do atributo checked.

O tipo de informação que chegará ao nosso correio (ou ao programa) será do tipo:

feijoada=on (ou off dependendo se tiver sido ativada ou não)