Fare clic sul testo per selezionare il pulsante di opzione corrispondente

Question 1

Sto creando un'applicazione web di quiz utilizzando PHP. Ogni domanda è composta da una domanda separata <label>e ha 4 possibili scelte, da utilizzare radio buttonsper consentire all'utente di selezionare la propria risposta. L'HTML corrente per una singola domanda ha il seguente aspetto:

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

Vorrei che l'utente avesse la possibilità di fare clic sul testo associato al pulsante di opzione. In questo momento, l'utente può solo fare clic sul pulsante di opzione stesso, che trovo essere un compito piuttosto complicato.

Ho letto Impossibile selezionare una particolare scelta del pulsante di opzione facendo clic sul testo della scelta e il suggerimento punta a creare il fileforid attributi e dei tag. L'ho fatto e ancora non funziona.

La mia domanda è: mi piacerebbe poter fare clic sul testo di un <input type="radio">oggetto, invece di poter selezionare solo il pulsante di opzione stesso. So di aver letto questo argomento prima, ma non riesco a trovare alcuna soluzione al mio problema. Qualsiasi aiuto o suggerimento è molto apprezzato!

Question 2

Nel tuo codice, hai un'etichetta sul modulo stesso. Si desidera inserire etichette su ogni singolo gruppo radio, come mostrato di seguito.

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

Espandi lo snippet

Tieni presente che due elementi non dovrebbero mai avere lo stesso ID. L' nameattributo viene utilizzato in modo che i pulsanti di opzione funzionino come un gruppo e consentano solo una singola selezione alla volta.

Question 3

Sembra esserci un po 'di spazio non cliccabile tra il pulsante di opzione e l'etichetta se fatto secondo la risposta di Nathan . Ecco come farli aderire senza problemi (vedi questo articolo ):

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

Question 4

Il tag dell'etichetta dovrebbe essere attorno a ogni risposta, ad esempio intorno ad Abe, Andrew, ecc ... e deve essere univoco per ciascuna di esse.

Question 5

L'annidamento del tag di input all'interno del tag dell'etichetta garantisce che l'etichetta appaia proprio accanto al pulsante di opzione. Con gli approcci suggeriti in precedenza, è possibile inserire il tag dell'etichetta ovunque all'interno del file html e selezionerà il pulsante di opzione associato quando si fa clic. Controllalo:

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

Espandi lo snippet

Farlo in questo modo invece elimina questo difetto:

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

Espandi lo snippet

Question 6

Puoi farlo in questo modo

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

Quindi, se fai clic sul testo o sull'etichetta, seleziona il pulsante di opzione. Ma se lo fai ...

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

e aggiungi questo al codice che ho scritto poco prima, quindi se fai clic sulla seconda etichetta, selezionerà anche la radio.

Question 7

Lo faccio da anni, ma nessuno dei due funziona per me, utilizzando le variabili.

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

ed ecco la fonte:

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