Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
Hello guys, what does the statement “Every radio button group should have at least 2 radio buttons.” supposed to mean. I’m stuck here and unable to move forward. Anyone help please.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Survey Form</title>
    <link re="stylesheet" href="styles.css">
  </head>
  <body>
    <h1 id="title">Survey Form</h1>
    <p id="description">Thank you for taking time to help us improve our services</p>
    <form id="survey-form">
    <fieldset>
      <label id="name-label">Enter Your Name:</label> <input id="name" type="text" placeholder="name" required/>
      <label id="email-label">Enter Your Email:</label> <input id="email" type="email" format="name@example.com" placeholder="email" required/>
      <label id="number-label">Number:</label> <input id="number" type="number" min="5" max="10" placeholder="Number" required/>
        <label for ="dropdown">Which option best describes your current role?<select id="dropdown" name="dropdown">
          <option value="">(Select current role)</opton>
          <option value="1">Student</option>
          <option value="2">Full time job</option>
          <option value="3">Frefer not to say</option>
          <option value="4">Others</option>
          </select>
          </label>
    </fieldset>
    <fieldset>
      <label for="definately"><input id="definately" type="radio" name="definately" class="inline" value="Definately"/>Definately</label>
      <label for="maybe"><input id="maybe" type="radio" name="maybe" class="inline" value="Maybe" />Maybe</label>
      <label for="not sure"><input id="not sure" type="radio" name="not sure" class="inline" value="Not sure" />Not sure</label>
      <label for="sure"><input id="sure" type="radio" name="sure" class="inline" value="Sure" />Sure</label>
    </fieldset>
    <filedset>
      <body>
        <h1>What would you like to see improve</h1>
        <form action="/action_page.php">
        <label for="front-end projects">
          <input id="front-end projects" type="checkbox" required name="front-end projects" class="inline" value="Front-end Projects" />Front-end Projects</label>
          <label for="challenges"><input id="challenges" type="checkbox" required name="challenges" class="inline" / value="Challenge">Challenges</label>
          <label for="bio">Any comments or suggestions?
            <textarea id="bio" name="bio" rows="7" cols="40" placeholder="Place your comment here..."> </textarea>
            </label>
            <input id="submit" type="submit">
          </fieldset>
    </form>
    </body>
    </html>

/* file: styles.css */
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: f5f6f7;
}
 label {
   display: block;
   margin: 0.5rem o;
 }
 h1, p {
   margin: 1em;
   text-align: center;
 }
 form {
   width: 60vw;
   max-width: 500px;
   min-width: 300px;
   margin: 0auto;
   padding-bottom: 2em;
 }
 fieldset {
   border: none;
   padding: 2rem 0;
 }
 fieldset:last-of-type {
   border-bottom: none;
 }
 label {
   display: block;
   margin: 0.5rem 0
 }
 input, textarea, select {
   margin: 10px 0 0 0;
   width: 100%;
   min-height: 2em;
 }
 input, textarea {
   background-color: #fff8Dc;
   border: 1px solid #fff8Dc;
   color: ffffff
 }
 inline {
   width: unset;
   margin: 0 0.5em 0 0;
   vertical-align: middle; 
 }
 input[type="submit"] {
   display: block;
   width: 60;
   margin: 1em auto;
   height: 2em;
   font-size: 1.1rem;
   background-color: #2E8B57;
   border-color: seagreen;
   min-width: 300px;
 }
 input[type="file"] {
   padding: 1px 2px;
 }

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

To create a radio button group, all of the related radio input elements should have the same name attribute. This is how you ensure that only one radio button within a group can be selected at a time.

3

This mean that all your radio button should have the same name attribute.

4

What is that even supposed to mean…would you mind to give me an example, not necessarily a direct answer but something that will help me figure it out please.

5 
<input type="radio" name="radio 1"> Radio button  1
<input type="radio" name="radio 1"> Radio button  2
6

Thanks it worked like a charm.

7

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