it-swarm.com.de

Klicken Sie auf den Text, um das entsprechende Optionsfeld auszuwählen

Ich erstelle eine Quiz-Webanwendung mit PHP. Jede Frage besteht aus einem separaten <label> und hat 4 mögliche Auswahlmöglichkeiten. Verwenden Sie radio buttons, damit der Benutzer seine/ihre Antwort auswählen kann. Der aktuelle HTML-Code für eine einzelne Frage sieht folgendermaßen aus: 

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

Ich möchte, dass der Benutzer die Option hat, auf den mit dem Optionsfeld verknüpften Text zu klicken. Derzeit kann der Benutzer nur auf das Optionsfeld selbst klicken - was für mich eine recht umständliche Aufgabe ist. 

Ich lese Durch Klicken auf den Auswahltext kann keine bestimmte Optionsschaltfläche ausgewählt werden. Und der Vorschlag weist darauf hin, dass die Attribute for und id der Tags übereinstimmen. Ich habe das getan und es funktioniert immer noch nicht. 

Meine Frage ist: Ich möchte in der Lage sein, auf den Text eines <input type="radio">-Objekts zu klicken, anstatt nur das Optionsfeld selbst auswählen zu können. Ich weiß, dass ich darüber schon gelesen habe, aber scheinbar keine Lösung für mein Problem zu finden scheint. Jede Hilfe oder Anregung wird sehr geschätzt!

75
Abundnce10

In Ihrem Code haben Sie ein Etikett auf dem Formular selbst. Sie möchten jeder einzelnen Funkgruppe Beschriftungen hinzufügen, wie unten gezeigt.

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

Beachten Sie, dass zwei Elemente niemals dieselbe ID haben sollten. Das name-Attribut wird verwendet, damit die Optionsfelder als Gruppe fungieren und jeweils nur eine einzelne Auswahl zulassen.

154
Nathan

Es scheint ein wenig unklickbarer Abstand zwischen dem Optionsfeld und dem Label zu sein, wenn dies gemäß der Antwort von Nathan erfolgt. So können Sie sie nahtlos zusammenfügen (siehe diesen Artikel ):

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

Durch das Verschachteln des Eingabe-Tags innerhalb des Label-Tags wird sichergestellt, dass das Label direkt neben dem Optionsfeld angezeigt wird. Mit den zuvor vorgeschlagenen Methoden können Sie das Label-Tag an einer beliebigen Stelle in der HTML-Datei platzieren. Wenn Sie darauf klicken, wird das entsprechende Optionsfeld ausgewählt. Überprüfen Sie dies heraus:

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

Wenn Sie dies auf diese Weise tun, wird der folgende Fehler behoben:

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

1
Neo

Das Etikett sollte sich um jede Antwort befinden, z. um Abe, Andrew, etc ... und es muss für jeden von ihnen eindeutig sein.

1
endyourif

Ich mache das schon seit Jahren, aber keiner von ihnen arbeitet mit Variablen.

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

und hier ist die Quelle:

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

Sie können es so machen

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

Wenn Sie also auf den Text oder das Etikett klicken, wird das Optionsfeld .. ausgewählt. Wenn Sie dies tun, ...

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

und Sie fügen dies dem Code hinzu, den ich kurz davor geschrieben habe. Wenn Sie auf das zweite Etikett klicken, wird auch das Radio ausgewählt.

0
Samuel Chen