Clicar no texto para selecionar o botão de opção correspondente

86

Estou criando um aplicativo da web de questionário usando PHP. Cada pergunta é composta por uma pergunta separada <label>e tem 4 opções possíveis, radio buttonsque permitem ao usuário selecionar sua resposta. O HTML atual para uma única pergunta se parece com:

<label for="349">What is my middle name?</label>
<br>
<input id="349" type="radio" value="1" name="349">Abe
<br>
<input id="349" type="radio" value="2" name="349">Andrew
<br>
<input id="349" type="radio" value="3" name="349">Andre
<br>
<input id="349" type="radio" value="4" name="349">Anderson
<br>

Gostaria que o usuário tivesse a opção de clicar no texto associado ao botão de rádio. No momento, o usuário só pode clicar no próprio botão de rádio - o que considero uma tarefa bastante complicada.

Eu li Incapaz de selecionar uma opção de botão de rádio particular clicando no texto da escolha e os pontos de sugestão para fazer com que os atributos fore iddas tags correspondam. Eu fiz isso e ainda não funciona.

Minha pergunta é: eu gostaria de poder clicar no texto de um <input type="radio">objeto, ao invés de apenas poder selecionar o próprio botão de rádio. Sei que li sobre isso antes, mas não consigo encontrar nenhuma solução para o meu problema. Qualquer ajuda ou sugestão são muito apreciadas!

html css forms input radio-button Abundnce10
fonte

Respostas:

173

Em seu código, você tem um rótulo no próprio formulário. Você deseja colocar etiquetas em cada grupo de rádio individual, conforme mostrado abaixo.

<form>
  <p>What is my middle name?</p>
  <br>
  <input id="349" type="radio" value="1" name="question1">
  <label for="349">Abe</label>
  <br>
  <input id="350" type="radio" value="2" name="question1">
  <label for="350">Andrew</label>
  <br>
  <input id="351" type="radio" value="3" name="question1">
  <label for="351">Andre</label>
  <br>
  <input id="352" type="radio" value="4" name="question1">
  <label for="352">Anderson</label>
  <br>
</form>
Expandir trecho

Você deve ter em mente que dois elementos nunca devem ter o mesmo ID. O nameatributo é usado para que os botões de opção funcionem como um grupo e permitam apenas uma única seleção por vez.

Nathan
fonte
7
Excelentemente simples.
Adore
37

Parece haver um pequeno espaço que não pode ser clicado entre o botão de rádio e o rótulo se feito de acordo com a resposta de Nathan . Veja como fazer com que eles se unam perfeitamente (consulte este artigo ):

<form>
    <p>What is my middle name?</p>
    <br>
    <label><input id="349" type="radio" value="1" name="question1">Abe</label>
    <br>
    <label><input id="350" type="radio" value="2" name="question1">Andrew</label>
    <br>
    <label><input id="351" type="radio" value="3" name="question1">Andre</label>
    <br>
    <label><input id="352" type="radio" value="4" name="question1">Anderson</label>
    <br>
</form>
user21820
fonte
2
Eu prefiro essa resposta. Mas você tem certeza de que ainda precisa dos atributos "para" com essa abordagem?
Piddu de
@Piddu: Acho que você está certo, então atualizei minha resposta. Obrigado!
user21820
Outra opção para evitar o espaço extra entre o botão de opção e o rótulo é simplesmente não colocá-lo lá <input id="349" type="radio" value="1" name="question1"><label for="349"> Abe</label>(sem espaços ou novas linhas entre as tags)
Arye Eidelman
1
Acabei de testar o meu caminho no Chrome e Firefox e descobri que reduz o espaço não clicável de 7 para 3 pixels, removendo o caractere de espaço. veja porque-existe-uma-lacuna-inexplicável-entre-estes-blocos-div-elementos inline . os três pixels restantes são a margem direita padrão no botão de opção margin: 3px 3px 0 5px;(é mais perceptível no firefox, pois há um efeito de foco por padrão) que pode ser corrigido com CSS removendo a margem e substituindo-a por preenchimento.
Arye Eidelman
1
@AryeDovEidelman: Entendo, obrigado por investigar! Mas, para simplificar, vou me limitar a encerrar tudo no rótulo. =)
user21820
1

A etiqueta do rótulo deve estar em torno de cada resposta, por exemplo, em torno de Abe, Andrew, etc ... e deve ser exclusiva para cada um deles.

endyourif
fonte
1

O aninhamento da tag de entrada na tag do rótulo garante que o rótulo apareça ao lado do botão de opção. Com as abordagens anteriores sugeridas, você pode colocar a etiqueta do rótulo em qualquer lugar dentro do arquivo html e ele selecionará o botão de opção associado quando clicado. Veja isso:

<html>
<body>

<form>
  <p>What is my middle name?</p>
  <br>
  <input id="349" type="radio" value="1" name="question1">

  <br>
  <input id="350" type="radio" value="2" name="question1">
  <label for="350">Andrew</label>
  <br>
  <input id="351" type="radio" value="3" name="question1">

  <br>
  <input id="352" type="radio" value="4" name="question1">
  <label for="352">Anderson</label>
  <br>
</form><br/>
<p>This is a paragraph</p>
  <label for="349">Abe</label><br/>
  <label for="351">Andre</label>
  
</body>
</html>
Expandir trecho

Em vez disso, fazer dessa forma elimina esta falha:

<form>
  <p>What is my middle name?</p>
  <br>
  
  <label>
    <input id="349" type="radio" value="1" name="question1"/>Abe
  </label>
  <br>
  
  <label>
    <input id="350" type="radio" value="2" name="question1"/>Andrew
  </label>
  <br>
  
  <label>
    <input id="351" type="radio" value="3" name="question1"/>Andre
  </label>
  <br>
  
  <label>
    <input id="352" type="radio" value="4" name="question1"/>Anderson
  </label>
  <br>
</form>
Expandir trecho

Neo
fonte
0

Você pode fazer assim

 <label for="1">hi</label>
 <input type="radio" id="1" />

Portanto, se você clicar no texto ou rótulo, ele seleciona o botão de rádio. Mas se você fizer isso ...

<label for="1">//</label>

e você adiciona isso ao código que escrevi antes disso, então, se você clicar no segundo rótulo, ele também selecionará o rádio.

JuicY_Burrito
fonte
0

Venho fazendo isso há anos, mas nenhum desses funciona para mim, usando variáveis.

    echo "<input type='radio' name='student' id='$studentID' value='$studentID'>
        <label for='$studentID'>$fname</label> $lname<br />\n";
    echo "<input type='radio' name='student' id='$studentID' value='$studentID'>
        <label for='$studentID'>$fname $lname</label><br />\n";

e aqui está a fonte:

        <input type='radio' name='student' id='986875' value='986875'>
        <label for='986875'>John</label> Brown<br />
Gymus
fonte