Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.
I’ve managed to fulfil all the criteria except for “Every radio button group should have at least 2 radio buttons.” What is it telling me to do? Could you help me?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <link rel="stylesheet" href="styles.css">
  <main><h1 id="title">Survey Form</h1>
  <p id="description">Thank you for taking your time to help us improve our magazine!</p>
  <form id="survey-form">
    <fieldset><label id="name-label">Name: <input placeholder="Enter your name here" id="name" type="text" required></input></label>
  <label id="email-label">Email: <input placeholder="Enter your email address here" id="email" required type="email"></input></label>
  <label id="number-label">Age: <input placeholder="Age" type="number" max="120" min="10"id="number"></input></label>
  What is your occupation during the main hours of your day? <select id="dropdown">
<option>(select one)</option>
<option>School</option>
<option>Work</option>
<option>Other</option>
  </select></fieldset>
  <fieldset><legend>How likely is it that you would recommend our magazine to a friend?</legend>
  <input type="radio" value="1" name="definitely" checked class="inline">Definitely</input>
  <input type="radio"value="2" name="not-very-likely" class="inline">Not very likely</input>
  <input type="radio"value="3" name="never" class="inline">Never</input></fieldset>
<fieldset>What's your favourite part of our magazine?
<input type="checkbox" value="comics" class="favourite">Comics</input>
<input type="checkbox" value="short-stories" class="favourite">Short stories</input>
<input type="checkbox" value="serial-stories" class="favourite">Serial stories</input>
<input type="checkbox" value="riddles-and-contests" class="favourite">Riddles and contests</input>
<input type="checkbox" value="gallery" class="favourite">Gallery</input></fieldset>
<fieldset>Any additional comments: <textarea></textarea></fieldset>
<button id="submit" type="submit" value="submit">Submit</button>
</form><main>

/* file: styles.css */
h1, p {text-align: center}
p {font-size: 1.5rem}
main {padding:10px;}
label {display: block;}
input {width: 100%;
height: 25px}
select {width: 100%;
height: 25px}
form {font-size: 1.1rem;
width: 70vw;
margin: 0 auto;
max-width: 500px;
min-width: 300px;}
html {background-color: #f8b1d5;
color: #3b3b4f}
textarea {height: 150px;
width: 100%}
.inline {display: inline}
fieldset {border: none;
padding: 2rem 0;
border-bottom: 3px solid #f1f1f1;}
fieldset:last-of-type {
 border-bottom: none}
 button[type="submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 3em;
  font-size: 1.1rem;
  color: white;
  background-color: #3b3b4f;
  border-color: white;
  min-width: 300px;}
  .inline {
  width: 50%;
  margin: 0 0.5em 0 0;
  vertical-align: top;}
  .inline{
  display: inline; }
  .favourite { width: 50%;
  margin: 0 0.5em 0 0;
  vertical-align: top;}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Challenge Information:

Survey Form - Build a Survey Form

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

3

Welcome to the forum @BHLR

Each radio input button needs to have the same value for the name attribute.
This way only one radio button can be selected at a time.

Happy coding

1 Like
4

Thank you so much! It went through!

1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.