html - titulo - title tag e title heading




Como criar uma caixa de seleção de HTML com um rótulo clicável (7)

Método 1: Etiqueta de etiqueta de quebra automática

Coloque a caixa de seleção dentro de uma label :

<label><input type="checkbox" name="checkbox" value="value">Text</label>

Método 2: usar o atributo for

Use o atributo for (corresponde ao id da caixa de seleção):

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">Text</label>

NOTA : O ID deve ser único na página!

Explicação

Como as outras respostas não mencionam, um rótulo pode incluir até 1 entrada e omitir o atributo for , e será assumido que é para a entrada dentro dele.

Trecho do w3.org (com minha ênfase):

[O atributo for] associa explicitamente o rótulo que está sendo definido com outro controle. Quando presente, o valor desse atributo deve ser o mesmo que o valor do atributo id de algum outro controle no mesmo documento. Quando ausente, o rótulo que está sendo definido está associado ao conteúdo do elemento.

Para associar um rótulo a outro controle implicitamente, o elemento de controle deve estar dentro do conteúdo do elemento LABEL . Neste caso, o LABEL pode conter apenas um elemento de controle. A etiqueta em si pode ser posicionada antes ou depois do controle associado.

Usando este método tem algumas vantagens for :

  • Não há necessidade de atribuir um id para cada caixa de seleção (ótimo!).

  • Não há necessidade de usar o atributo extra no <label> .

  • A área clicável da entrada também é a área clicável da etiqueta, portanto, não há dois locais separados para clicar que podem controlar a caixa de seleção - apenas um, independentemente da distância entre o texto da <input> e o texto da etiqueta real e independentemente do tipo de CSS você aplica a ele.

Demonstração com algum CSS:

label {
 border:1px solid #ccc;
 padding:10px;
 margin:0 0 10px;
 display:block; 
}

label:hover {
 background:#eee;
 cursor:pointer;
}
<label><input type="checkbox" />Option 1</label>
<label><input type="checkbox" />Option 2</label>
<label><input type="checkbox" />Option 3</label>

Como posso criar uma caixa de seleção HTML com um rótulo clicável (isso significa que clicar no rótulo liga / desliga a caixa de seleção)?


Apenas certifique-se de que o rótulo esteja associado à entrada.

<fieldset>
  <legend>What metasyntactic variables do you like?</legend>

  <input type="checkbox" name="foo" value="bar" id="foo_bar">
  <label for="foo_bar">Bar</label>

  <input type="checkbox" name="foo" value="baz" id="foo_baz">
  <label for="foo_baz">Baz</label>
</fieldset>

Isso também funciona:

<form>
    <label for="male"><input type="checkbox" name="male" id="male" />Male</label><br />
    <label for="female"><input type="checkbox" name="female" id="female" />Female</label>
</form>

Usa isto

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id" id="checkbox_lbl">Text</label>


$("#checkbox_lbl").click(function(){ 
    if($("#checkbox_id").is(':checked'))
        $("#checkbox_id").removAttr('checked');
    else
       $("#checkbox_id").attr('checked');
    });
});

Você também pode usar pseudo-elementos CSS para escolher e exibir seus rótulos de todos os atributos de valor da caixa de seleção (respectivamente).
Edit: Isso só funcionará com navegadores baseados em webkit e blink (Chrome (ium), Safari, Opera ....) e, portanto, a maioria dos navegadores móveis. Não há suporte para o Firefox ou IE aqui.
Isso pode ser útil somente ao incorporar o webkit / blink em seus aplicativos.

<input type="checkbox" value="My checkbox label value" />
<style>
[type=checkbox]:after {
    content: attr(value);
    margin: -3px 15px;
    vertical-align: top;
    white-space:nowrap;
    display: inline-block;
}
</style>

Todos os rótulos de pseudo elementos serão clicáveis.

Demonstração: http://codepen.io/mrmoje/pen/oteLl , + A essência do mesmo


<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />

<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />




label