htmlcheckbox

How can I force the user to select a single checkbox with HTML?

I am creating a quiz in HTML. The questionnaire can be answered by selecting a checkbox. So far try this:

<h3>This is question 1?</h3>

<input type="radio" name="answer1" id="c01" value="0"/> answer A
<input type="radio" name="answer2" id="c02" value="0" /> answer B

<h3>This is question 2?</h3>

<input type="radio" name="answer3" id="c03" value="0"/> answer 1
<input type="radio" name="answer4" id="c04" value="0" /> answer 2
<input type="radio" name="answer5" id="c05" value="0"/> answer 3

However, the previous statement doesn’t work, because I only want to be possible to select one and only one answer (selecting more than one checkbox per answer is not allowed). How can I force the user to only select a single checkbox for each different question by only using HTML tags?

Solution

  • With fieldset:

    <fieldset id="question1">
<legend>Question 1:</legend>
    <input type="radio" value="value1" name="question1">Answer 1</input>
    <input type="radio" value="value2" name="question1">Answer 2</input>
</fieldset>
<fieldset id="question2">
<legend>Question 2:</legend>
    <input type="radio" value="value1" name="question2">Answer 1</input>
    <input type="radio" value="value2" name="question2">Answer 2</input>
</fieldset>

    Without fieldset:

    <h3>This is question 1?</h3>
<input type="radio" value="value1" name="question1">Answer 1</input>
<input type="radio" value="value2" name="question1">Answer 2</input>

<h3>This is question 2?</h3>
<input type="radio" value="value1" name="question2">Answer 1</input>
<input type="radio" value="value2" name="question2">Answer 2</input>