Despite a group of radio buttons were nested into the form, the 11th story of my task is still showing it is incorrect with this message: “Every radio button group should have at least 2 radio buttons.,” message.
My code is down below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 id="title">Toghraq Learning Survey Forum</h1>
<p id="description">Thanks for your time to help us improve</p>
<form id="survey-form">
<label id="name-label">Name
<input id="name" type="text" placeholder="Enter your name please" required /></label><br>
<label id="email-label">E-mail
<input id="email" type="email" placeholder="Your E-mail address" required />
</label><br>
<label id="number-label">Number
<input id="number" type="number" min="1" max="100" placeholder="1" required />
</label><br>
<select id="dropdown">
<option></option>
<option></option>
<option></option>
</select>
<fieldset>
<legend>Which one do you pick?</legend>
<label>Option 1 </label><input type="radio" name="option-1" value="option1"/><br>
<label>Option 2 </label><input type="radio" name="option-2" value="option2"/><br>
<label>Option 3 </label><input type="radio" name="option-3" value="option3"/>
</fieldset>
<fieldset>
<label>Checkbox 1
<input type="checkbox" value="box-1" />
</label>
<label>Checkbox 2
<input type="checkbox" value="box-2" />
</label>
<label>Checkbox 3
<input type="checkbox" value="box-3" />
</label>
<label>Checkbox 4
<input type="checkbox" value="box-4" />
</label>
<label>Checkbox 5
<input type="checkbox" value="box-5" />
</label>
<label>Checkbox 6
<input type="checkbox" value="box-6" />
</label>
<label>Checkbox 7
<input type="checkbox" value="box-7" />
</label>
</fieldset>
<label for="user-comment">
<textarea id="user-comment" name="user-comment" rows="5" cols="30"></textarea>
</label>
<input id="submit" type="submit" value="Submit" />
</form>
</body>
</html>