Mengklik teks untuk memilih tombol radio yang sesuai

Question 1

Saya membuat aplikasi web kuis menggunakan PHP. Setiap pertanyaan terdiri dari pertanyaan yang terpisah <label>dan memiliki 4 kemungkinan pilihan, yang digunakan radio buttonsuntuk memungkinkan pengguna memilih jawabannya. HTML saat ini untuk satu pertanyaan terlihat seperti:

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

Saya ingin pengguna memiliki opsi untuk mengklik teks yang terkait dengan tombol radio. Saat ini, pengguna hanya dapat mengklik tombol radio itu sendiri - yang menurut saya merupakan tugas yang cukup rumit.

Saya membaca Tidak dapat memilih pilihan tombol radio tertentu dengan mengklik teks pilihan dan poin saran untuk membuat atribut fordan idtag cocok. Saya telah melakukan ini dan masih tidak berhasil.

Pertanyaan saya adalah: Saya ingin dapat mengklik teks suatu <input type="radio">objek, bukan hanya dapat memilih tombol radio itu sendiri. Saya tahu saya telah membaca tentang ini sebelumnya tetapi sepertinya tidak dapat menemukan solusi apa pun untuk masalah saya. Setiap bantuan atau saran sangat dihargai!

Question 2

Di kode Anda, Anda memiliki label di formulir itu sendiri. Anda ingin memberi label pada setiap grup radio, seperti yang ditunjukkan di bawah ini.

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

Luaskan cuplikan

Anda harus ingat bahwa dua elemen tidak boleh memiliki ID yang sama. The nameatribut digunakan sehingga tombol radio berfungsi sebagai sebuah kelompok dan hanya memungkinkan pilihan pada satu waktu.

Question 3

Tampaknya ada sedikit spasi yang tidak bisa diklik antara tombol radio dan label jika dilakukan sesuai dengan jawaban Nathan . Berikut adalah cara membuat mereka bergabung dengan mulus (lihat artikel ini ):

<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

Tag label harus berada di sekitar setiap jawaban, misalnya di sekitar Abe, Andrew, dll ... dan harus unik untuk masing-masing jawaban.

Question 5

Menumpuk tag masukan di dalam tag label memastikan label muncul tepat di sebelah tombol radio. Dengan pendekatan sebelumnya yang disarankan, Anda dapat meletakkan tag label di mana saja dalam file html dan itu akan memilih tombol radio terkait saat diklik. Lihat ini:

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

Luaskan cuplikan

Melakukannya dengan cara ini malah menghilangkan kekurangan ini:

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

Luaskan cuplikan

Question 6

Anda bisa melakukannya seperti ini

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

Jadi jika Anda mengklik teks atau label itu memilih tombol radio. Tetapi jika Anda melakukan ini ...

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

dan Anda menambahkan ini ke kode apa yang saya tulis sebelum ini maka jika Anda mengklik label ke-2 maka itu juga akan memilih radio.

Question 7

Saya telah melakukan ini selama bertahun-tahun, tetapi tidak satu pun dari ini berhasil untuk saya, menggunakan variabel.

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

dan inilah sumbernya:

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