CODEWITHSUNDEEP
html
user4546791
user4546791

Reputation:

clicking text should click the radio button in HTML

I have this radio button, 

 <form class="w3-container w3-card-4">
  <h2>Radio Buttons</h2>
  <p>
  <input class="w3-radio" type="radio" name="gender"  value="male" checked>
  <label >Male</label></p>
  <p>
  <input class="w3-radio" type="radio" name="gender"  value="female">
  <label >Female</label></p>
  <p>
  <input class="w3-radio" type="radio" name="gender" value="" disabled>
   <label>Don't know (Disabled)</label></p>
 </form>

The problem is when I click on the label text the radio button is not selected. is there a way to fix this?

Upvotes: 3

Views: 2270

Answers (3)

Ramin Ahmadi
Ramin Ahmadi

Reputation: 629

you need to include input inside label tag. 

 <form class="w3-container w3-card-4">
  <h2>Radio Buttons</h2>
  <p>
  <label > <input class="w3-radio" type="radio" name="gender"  value="male" checked>
  Male</label></p>
  <p>
   <label ><input class="w3-radio" type="radio" name="gender"  value="female">
 Female</label></p>
  <p>
 <label> <input class="w3-radio" type="radio" name="gender" value="" >
   Don't know (Disabled)</label></p>
 </form>

Upvotes: 1

user4542866
user4542866

Reputation:

Just add id for the radio buttons and for keyword near label boxes.

  <form class="w3-container w3-card-4">
   <h2>Radio Buttons</h2>
   <p>
   <input class="w3-radio" type="radio" name="gender" id="m1" value="male" checked>
   <label for="m1">Male</label></p>
   <p>
   <input class="w3-radio" type="radio" name="gender" id="m2" value="female">
   <label for="m2">Female</label></p>
   <p>
   <input class="w3-radio" type="radio" name="gender" value="" disabled>
   <label>Don't know (Disabled)</label></p>
 </form>

Now you click the text label the radio button gets selected.

Upvotes: 3

Dezza
Dezza

Reputation: 1094

Your form inputs need an ID and your labels need to reference that.

So for example:

<input class="w3-radio" type="radio" name="gender"  value="male" checked id="gender-male">
<label for="gender-male">Male</label></p>

From the spec

The for attribute may be specified to indicate a form control with which the caption is to be associated. If the attribute is specified, the attribute's value must be the ID of a labelable element in the same Document as the label element. If the attribute is specified and there is an element in the Document whose ID is equal to the value of the for attribute, and the first such element is a labelable element, then that element is the label element's labeled control.

Upvotes: 1

Related Questions