tadarank afiliados

28 dezembro, 2011

Selects Multiple NÃO! Checkboxes SIM! Uma campanha pela abolição de selects multiples

Sabe, eu nunca tinha parado pra pensar sobre isso.

Selects multiples são muito chatos.
Chatos pro visitante - que tem que usar o shift pra escolher mais de um (que visitante sabe fazer isso?)
Chatos pro desenvolvedor - na hora do html e na hora de tratar os dados no server-side (php, asp, etc).
Chatos pra estilizar o visual - Alterar visual CSS de selects é quase impossível.

Quantas vezes já vimos formulários assim:



O povão gosta de mouse. O povão não gosta de teclado. O povão lá sabe o que é shift ou control?

Se quer uma página acessível não é melhor fazer assim?

Escolha as cidades de destino:






É mais bonito ou não é? É mais fácil pro visitante ou não é?

Olha só como o código é simples:

<style>
/* coloque este estilo em seu arquivo css */
.check-select-multiple { display: inline-block; height: 60px; padding: 0 5px; overflow-y: scroll; width: 300px; border: 2px inset #DDD; background: white;}
.check-select-multiple label { display: inline-block; width: 95%;}</style>
<div class="check-select-multiple">
<label><input name="cidades" type="checkbox" value="1" />Goiânia</label>
<label><input name="cidades" type="checkbox" value="2" />Palmas</label>
<label><input name="cidades" type="checkbox" value="3" />Fortaleza</label>
<label><input name="cidades" type="checkbox" value="4" />São Paulo</label>
<label><input name="cidades" type="checkbox" value="5" />Salvador</label>
</div>

Veja que não precisamos fazer malabarismos com javascripts nem plugins pra Jquery. É só usar a simplicidade do belo HTML+CSS.

Além da facilidade pro visitante, ainda é infinitamente mais fácil estilizar uma DIV do que estilizar um Select (principalmente nos IEs da vida).

Se você gostou da minha explanação, abrace esta campanha também. Diga adeus ao select-multiple.
Faça um link para esta campanha, compartilhe no twitter, facebook, google-plus, faça bandeiras, passeatas, greve de fome...

Amém. Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

5 comentários:

  1. Select múltiplo tem lá suas utilidades. Algumas vezes uso ele como um mapa chave e valor ocultando o elemento que fica acessível apenas via script.

    ResponderExcluir
  2. @asclows No entendo lo que dices amigo. Explique-nos melhor.

    (pessoal, parece que os comentários do blogger tavam bugados, mas agora voltaram ao normal - parece)

    ResponderExcluir
  3. Muito bom Cara!

    Uma dúvida: eu poderia colocar através do CSS um overflow para não mostrar a barra de rolagem?

    *já esta aqui nos meus favoritos... muitos posts bons!

    ResponderExcluir
  4. Cara, a página é sua, vc pode fazer o que quiser hehe. Tem gente que gostará de definir o height+barra de rolagem, tem gente que gostará de deixar o height livre pra não ter barra de rolagem :)

    ResponderExcluir

Resultado! Concursos