Caixa de seleção (combo box)

Artigo a respeito do controle combobox. select (formulário web) - HTML e CSS

A caixa de seleção, vulgo combobox é um controle parecido com um "menu de opções", veja a imagem abaixo.

Ilustração de um campo combobox

A tag para este controle é a select.

<select>
...
</select>

Os opções (que vão dentro da tag select) utilizam a tag option:

<option>Usa</option>

Dessa forma, "options" mais "select", temos o controle combobox:

<select id=cbPais>
    <option>Select Country</option>
    <option>Usa</option>
    <option>Canada</option>
    <option>Mexico</option>
</select>

Como funcionam as comboboxes ?

Se, por exemplo, o usuário clicar na opção "Canada" será enviado para o servidor o par/valor cbPais=Canada. Quando não definimos a propriedade value o valor passa a ser o texto contido entre as tags options.

<select id=cbPais>
    <option>Select Country</option>
    <option>Usa</option>
    <option>Canada</option>
    <option>Mexico</option>
</select>

De forma mais comum, utilizamos a propriedade value em cada tag option, veja:

<select id=cbPais>
    <option value="" >Select Country</option>
    <option value="usa" >Usa</option>
    <option value="ca" >Canada</option>
    <option value="me" >Mexico</option>
</select>

Dessa forma, quando o usuário clicar novamente na opção "Canada" será enviado o par/valor cboPais=ca.

Repare que em nosso exemplo a primeira opção era "Select Country", isso ajuda a experiência do usuário, pois ele verá um instrução na combo e saberá que deve selecionar alguma coisa, veja a combo abaixo:

Ainda pensando na experiência do usuário, também poderíamos colocar o primeiro valor "em branco", exemplo:

<select id=cbPais>
    <option value="" ></option>
    <option value="usa" >Usa</option>
    <option value="ca" >Canada</option>
    <option value="me" >Mexico</option>
</select>

O usuário vendo que o controle está em branco (não selecionado) intuirá que precisa selecionar alguma coisa.

Para selecionarmos uma opção utilizamos a propriedade selected="selected" na tag option que desejamos que seja selecionada.

<select id=cbPais>
    <option value="" ></option>
    <option value="usa" >Usa</option>
    <option value="ca" selected="selected" >Canada</option>
    <option value="me" >Mexico</option>
</select>

Estilizando

O exemplo abaixo mostra dois elementos select, o primeiro recebeu altura e largura. O Segundo, além de altura e borda, alteramos a cor de fundo e retiramos as bordas.

No Firefox, as setas duplas foram substituídas por um única seta após a inclusão da propriedade border: 0;. No Google Chrome, não há setas duplas. Essas pequenas discrepâncias podem ser somadas ao que chamamos de Cross Browser.

See the Pen Simple select - css by Flávio Micheletti (@flaviomicheletti) on CodePen.

O legal desse exemplo é que utilizamos duas classes CSS e, dessa forma, poderemos fazer a combinação que quizermos.

select.basic {
    ...
}
select.simple {
    ...
}

O elemento select poderá sofrer estilização de uma das classes: <select class="basic"> ou <select class="simple">. Ou ainda utilizar as classes em combinação:

<select class="simple basic">

Ao estilizar esse tipo de controle, você logo perceberá que faltam propriedades mais flexíveis e poderosas além dos problemas inerentes ao CrossBrowser. Por essa razão, existem tantos plugins/blibliotecas especializados nesse controle.

Navegue nesta série!

Comentários

comments powered by Disqus