How to group radio buttons

Writing forms is the most complicated thing you have to do when writing HTML. I have heard that there are some people who has trouble with putting radio buttons in a group. It is a bit tricky to guess how to do it. But pretty simple to remember.

Radio button vs checkbox

A checkbox can be either true or false. If you want to give the user more options then radio buttons is preferable. If you have three radio buttons: radio1, radio2 and radio3. If radio1 is checked and the user checks radio2. Then must radio1 be unchecked. You can write a little javascript to do this, but it is easier to put them i the same "group".

Create radio button groups

To create a group of radio button simply give them the same name. But do not give them the same ID. The ID must be unique for every element.

 
  <input type="radio" id="radio1a" name="radio1"> Choice 1
  <input type="radio" id="radio1b" name="radio1"> Choice 2
  <input type="radio" id="radio1c" name="radio1" checked="checked"> Choice 3
   Choice 1
   Choice 2
   Choice 3

  
  <input type="radio" id="radio2a" name="radio2a"> Choice 1
  <input type="radio" id="radio2b" name="radio2b" checked="checked"> Choice 2
  <input type="radio" id="radio2c" name="radio3b"> Choice 3
   Choice 1
   Choice 2
   Choice 3