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;
}