Survey Form - Build a Survey Form - help

Tell us what’s happening:

I got all checked out besides 3 points:

  1. Your #name should require input.
  2. Your #email should require input.
  3. Every radio button group should have at least 2 radio buttons.

I don’t understand for the first 2 points, because I did put input element in it, also put placeholder and value with my name and email.
for the third point, I also put 3 radio buttons in one fieldset. What radio button group means? is it fieldset group? or label?
Thanks in advance.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <title>Customer Survey</title>      
    </head>
     
    <body class="survey-form">
      <h1 id="title">Spice Voice</h1>
      <p id="description" >Your feedback spice us</p>
      <form action="" method="post" id="survey-form">    <fieldset>
        <label for="name" id="name-label">Name: <input id="name" type="text" placeholder= "name" value="Putri Novianti" name="name-label"></label>
        <label for="email" id="email-label">Email: <input id="email" type="email" placeholder="email" value="poettreen86@gmail.com" name="email-label"></label>
        <label for="number" id="number-label">
Age: <input  type="number" id="number" name="number-label" min="13" max="120" placeholder="age" value="36"></label>
        <label for="likeness">
What do you like about our food: <input id="likeness" type="text" maxlength="300" name="likeness"> 
        </label>
      </fieldset>
      <fieldset>
        Will you recommend us to others?    <label for="dropdown"><select id="dropdown" name="dropdown"><option value="i">Yes
        </option> <option value="ii">Maybe</option>
                <option value="iii">No</option></select></label>
      </fieldset>
        <fieldset>
          How do you know about us? 
         <label for="ff"> <input type="radio" id="ff" value="a" name="ff"> Family/Friends
        </label>
        <label for="ads"> <input type="radio" id="ads" value="b" name="ads"> Ads
        </label>
        <label for="so"> <input type="radio" id="so" value="c" name="so"> Search online
        </label>
      </fieldset>
      <fieldset>
        What menu do you like most?<label for="spicy-samyang"><input type="checkbox" value="1" id="spicy-samyang" name="spicy"/> Spicy Samyang</label>
        <label for="double-spicy-samyang"><input type="checkbox" value="2" id="double-spicy-samyang" name="double-spicy" /> Double Spicy Samyang</label>
        <label for="mie-goreng"><input type="checkbox" value="3" id="mie-goreng" name="goreng" /> Mie Goreng</label>
        <label for="mie-soto"><input type="checkbox" value="4" id="mie-soto" name="soto" /> Mie Soto</label>
        <label for="mie-rasa-ayam-bawang"><input type="checkbox" value="5" id="mie-rasa-ayam-bawang" name="ayam" /> Mie Rasa Ayam Bawang</label>
        <label for="mie-rasa-rendang"><input type="checkbox" value="6" id="mie-rasa-rendang" name="rendang"/> Mie Rasa Rendang</label>
        <label for="others"><input type="checkbox" value="7" id="others" name="others" /> Others <input/></label>
      </fieldset>
      <fieldset><label for="comments">Any comments or suggestions for us: 
      <textarea max="300" rows="3" cols="30" id="comments" placeholder="comments and suggestions" name="comments"></textarea></label>
      </fieldset>

<label for="terms-and-conditions"><input type="checkbox" id="terms-and-conditions" name="terms" value="terms-and-conditions" required><b class="rtac"> I accept <a href="">terms and conditions</a></label>
<label for="submit">
<input type="submit" value="Submit" id="submit" class="submit">
</label>

</form>
      </body>
  </html>
/* file: styles.css */
@media only screen and (max-width: 768px) {

body {
  weight: 100%;
  height: 100vh;
  margin: 0;
background-color: #4b0072;
}
form {
background-color: #8034eb;
  margin: 0 auto;
  max-width: 500px;
  min-width: 300px;
  width: 60px;
}
h1 {
  color: red;
}
h1, p {
  margin: 1em auto;
  text-align: center;
  font-family: 'Kanit', sans-serif;
}
label {
  display: block;
  margin: 0.5rem 0;
}
input {
  margin-top: 5px;
}
.rtac{
  font-family: 'Kanit', sans-serif;
  font-size: 15px;
  color: #010101;
}
a {
color: #010101;
text-decoration: none;
  }
  a:hover{
    color: white;
  }
  textarea{
    margin-top: 10px;
  }
  .submit {
    margin: 10px 40%; 
  }

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

Hello @himenovs!

For the first two problems, we need to type only the text required within the input element for both the name and email input elements. No other action is necessary. I suggest placing them near the end of the input element to avoid interfering with other attributes. This is a stand alone attribute and does not require a value, just the text.
Example:

<input type="text" required>

To make the radio buttons remain in the same group, we need to change the name so they all have the same name. Only the name within the input radio button should have the same name.
Example:

<input type="radio" name="how"> Knit </label>
<input type="radio" name="how"> Crochet </label>

The three radio buttons are all in the same group because they have the same name in the radio input.

Keep up the good progress!

Thank you very much!

1 Like

You are very welcome!

Happy coding!