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

86

Ich erstelle eine Quiz-Webanwendung mit PHP. Jede Frage besteht aus einer separaten Frage <label>und bietet 4 Auswahlmöglichkeiten, mit denen radio buttonsder Benutzer seine 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 Möglichkeit hat, auf den mit dem Optionsfeld verknüpften Text zu klicken. Im Moment kann der Benutzer nur auf das Optionsfeld selbst klicken - was ich als ziemlich umständliche Aufgabe empfinde.

Ich habe gelesen , dass eine bestimmte Optionsfeldauswahl nicht ausgewählt werden kann, indem ich auf den Auswahltext klicke und der Vorschlag darauf hinweist, dass die forund idAttribute 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 bereits darüber gelesen habe, kann aber anscheinend keine Lösung für mein Problem finden. Jede Hilfe oder Anregungen werden sehr geschätzt!

html css forms input radio-button Fülle10
quelle

Antworten:

173

In Ihrem Code befindet sich eine Beschriftung auf dem Formular. 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>
Erweitern Sie das Snippet

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

Nathan
quelle
7
Hervorragend einfach.
Ich
37

Es scheint einen kleinen unklickbaren Abstand zwischen dem Optionsfeld und dem Etikett zu geben, wenn dies gemäß Nathans Antwort erfolgt. So fügen Sie sie nahtlos hinzu (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>
user21820
quelle
2
Ich bevorzuge diese Antwort. Aber sind Sie sicher, dass Sie bei diesem Ansatz überhaupt die "for" -Attribute benötigen?
Piddu
@ Piddu: Ich denke du hast recht, also habe ich meine Antwort aktualisiert. Vielen Dank!
user21820
Eine andere Möglichkeit, den zusätzlichen Abstand zwischen dem Optionsfeld und der Beschriftung zu vermeiden, besteht darin, ihn einfach nicht dort <input id="349" type="radio" value="1" name="question1"><label for="349"> Abe</label>abzulegen (keine Leerzeichen oder Zeilenumbrüche zwischen den Tags)
Arye Eidelman
1
Ich habe mich gerade in Chrome und Firefox getestet und festgestellt, dass der nicht anklickbare Speicherplatz durch Entfernen des Leerzeichens von 7 auf 3 Pixel reduziert wird. Sehen Sie, warum es eine unerklärliche Lücke zwischen diesen Inline-Block-Div-Elementen gibt . Die drei verbleibenden Pixel sind der standardmäßige rechte Rand des Optionsfelds margin: 3px 3px 0 5px;(dies ist in Firefox auffälliger, da standardmäßig ein Hover-Effekt auftritt), der mit CSS behoben werden kann, indem der Rand entfernt und durch Auffüllen ersetzt wird.
Arye Eidelman
1
@AryeDovEidelman: Ich verstehe, danke für die Untersuchung! Der Einfachheit halber werde ich mich jedoch daran halten, das Ganze in das Etikett einzuschließen. =)
user21820
1

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

endyourif
quelle
1

Durch das Verschachteln des Eingabe-Tags in das Label-Tag wird sichergestellt, dass das Label direkt neben dem Optionsfeld angezeigt wird. Mit den zuvor vorgeschlagenen Ansätzen können Sie das Label-Tag an einer beliebigen Stelle in der HTML-Datei einfügen und beim Klicken das zugehörige Optionsfeld auswählen. Ü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>
Erweitern Sie das Snippet

Wenn Sie dies stattdessen tun, wird dieser 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>
Erweitern Sie das Snippet

Neo
quelle
0

Sie können es so machen

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

Wenn Sie also auf den Text oder die Beschriftung klicken, wird das Optionsfeld aktiviert. Aber wenn Sie das tun ...

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

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

JuicY_Burrito
quelle
0

Ich mache das schon seit Jahren, aber keines davon funktioniert für mich 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 />
Gymus
quelle