Caixa de checagem (input type=checkbox)
Artigo a respeito do controle checkbox (formulário web) - HTML e CSS
As checkboxe's são como uma escolha booleana: true ou false, sim ou não.
<input type="checkbox" name="company" />
Normalmente vem em grupo, como a imagem abaixo.
Ou sozinha como no exemplo seguinte.
Como as checkboxes funcionam?
Para dizer qual a checkbox foi ticada (selecionada), usamos a propriedade checked
.
<input type="checkbox" name="company" checked/>
Mas a especificação diz que é para ser usado dessa forma:
<input type="checkbox" name="company" checked="checked"/>
De qualquer forma, o navegador entenderá que a checkbox deve ser assinalada. Uma coisa importante de se dizer é que
a propriedade value
é inútil. Explico, se o controle for clicado, o valor que é enviado para o servidor é value=on
e se NÂO clicado, o valor é value=off
, certo??? Errado, e isso é muito triste! Quando o controle não é clicado ele
não envia nada, nada mesmo. Quando é clicado, ele envia o valor que você especificar na propriedade value
.
Isso faz sentido para você? Pra mim não, mas tudo bem.
Estilizando
O que mais incomoda em relação aos checkboxes são a falta de alinhamento com o elemento label e, obviamente, a inconsistência entre os navegadores.
Uma forma simples de deixar a label alinhado com a checkbox é configurar a propriedade "alinhamento vertical"
no meio e ajustar a altura com a propriedade top
. Para top
funcionar, o elemento precisa estar posicionado
relativamente.
input {
margin:0 12px 0 0;
vertical-align: middle;
position: relative;
top: -1px;
}
See the Pen Aligning Checkbox with label by Flávio Micheletti (@flaviomicheletti) on CodePen.