Início / coding / Perguntas / 79277173
Accepted
sh1
Asked: 2024-12-13 11:45:33 +0800 CST

Um rótulo pode (deve) abranger a entrada que ele rotula?

  • 772

Vejo esse padrão na documentação :

<input type="checkbox" id="foo" /><label for="foo">Foo!</label>

Mas o problema é que ele deixa uma zona morta entre a caixa de seleção e seu rótulo, onde você pode clicar no rótulo e pode clicar na caixa, mas há um pequeno espaço entre os dois onde os cliques não fazem nada e isso é meio irritante.

Obviamente, isso piora se houver algum espaço em branco entre as tags de entrada e de rótulo.

Para resolver o problema, tentei isto:

<label for="foo"><input type="checkbox" id="foo" />Foo!</label>

Isso "funciona para mim" no sentido de que elimina aquele ponto morto entre caixa e texto e é muito mais fácil de interagir. Mas é HTML legal e idiomático?

html

3 respostas

  1. Best Answer

    De acordo com o padrão HTML , a resposta é sim e sim .

    ... A legenda pode ser associada a um controle de formulário específico, conhecido como controle rotulado do elemento de rótulo, usando o foratributo ou colocando o controle de formulário dentro do próprio elemento de rótulo .

    Além disso, talvez você não precise fornecer o foratributo do labelse o elemento rotulado (the input) for filho desse labelelemento.

    Se o foratributo não for especificado , mas o elemento de rótulo tiver um descendente de elemento rotulável, o primeiro descendente na ordem de árvore será o controle rotulado do elemento de rótulo .

    O link que forneci apresenta muito mais exemplos e informações que podem lhe interessar: https://html.spec.whatwg.org/multipage/forms.html#the-label-element

    • 2

  2. Sim, isso é válido.

    e também dessa forma você não precisa usar um idatributo.

    <label><input type="checkbox" name="foo" />Foo!</label>

    Para informação:
    você não precisa usar idos elementos do formulário.
    Eles são elementos filhos do formulário

    exemplo:

    const myForm = document.forms['my-form'];

myForm.inDate.valueAsDate = new Date();  // intialize the date element

myForm.addEventListener('submit', e =>
  {
  e.preventDefault(); // disable submit for this sample code
  
  console.clear();
  console.log( 'foo =', myForm.foo.checked );
  console.log( 'inDate =', myForm.inDate.valueAsDate );
  });
    label { 
  display : block;
  margin  : .5em;
  }
    <form name="my-form" >
  <label><input type="checkbox" name="foo" />Foo!</label>
  <label>Date : <input type="date" name="inDate" /></label>
  <button type="submit"> send info </button>
</form>

    • 1

  3. Na verdade, já vi meus colegas de equipe fazerem isso muitas vezes antes, e funciona bem. Mas, na minha opinião, você pode remover a lacuna estilizando a entrada e o rótulo usando CSS. Tente envolver a entrada e o rótulo com um div form-group, exiba-o como um flexbox, defina a lacuna como 0 e adicione espaçamento entre a entrada e o rótulo usando padding em vez de margin

    (Aqui o código que copiei do link da documentação acima, adicionei um nome de classe form-group)

    .form-group {
    display: flex;
    gap: 0;
    padding: 5px 10px;
}
.form-group input {
    margin: 0;
}
.form-group label {
    padding-left: 10px;
}
    <fieldset>
    <legend>Choose your monster's features:</legend>
  
    <div class="form-group">
      <input type="checkbox" id="scales" name="scales" checked />
      <label for="scales">Scales</label>
    </div>
  
    <div class="form-group">
      <input type="checkbox" id="horns" name="horns" />
      <label for="horns">Horns</label>
    </div>
  </fieldset>

    • 0

relate perguntas