Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:
I have added require in attribute.I don’t know if I got it wrong.
问题1

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Survey Form</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h1 id="title">Survey Form</h1>
      <p id="description">Thank you for taking the time to help us improve the platform</p>
    </header>
    <form id="survey-form">
      <fieldset>
      <label id="name-label">
        Name
        <input id="name" type="text" placeholder="Enter your name" require>
      </label>
      <label id="email-label">
        email
        <input id="email" type="email"  placeholder="Enter your Email" require="true">
      </label>
      <label id="number-label">
        Age(optional)
        <input id="number" type="number" placeholder="Age" min="1" max="9">
      </label>
      <label>
        Which option best describes your current role?
        <select id="dropdown">
          <option>Select current role</option>
          <option>Student</option>
          <option>Full Time Job</option>
          <option>Full Time Learner</option>
          <option>Prefer not to say</option>
          <option>Other</option>
        </select>
      </label>
      </fieldset>

      <fieldset>
        Would you recommend freeCodeCamp to a friend?
        <label>
        <input type="radio" name="reco" value="Definitely"> Definitely
      </label>
      <label>
        <input type="radio" name="reco" value="Maybe"> Maybe
      </label>
      <label>
        <input type="radio" name="reco" value="Not sure"> Not sure
      </label>
      What would you like to see improved? (Check all that apply)
      <label><input type="checkbox" name="improve" value="Front-end"> Front-end Projects</label>
      <label><input type="checkbox" name="improve" value="Back-end"> Back-end Projects</label>
      <label><input type="checkbox" name="improve" value="Data"> Data Visualization</label>
      <label><input type="checkbox" name="improve" value="Challenges"> Challenges</label>
      <label><input type="checkbox" name="improve" value="Open"> Open Source Community</label>
      <label><input type="checkbox" name="improve" value="Open"> Gitter help rooms</label>
      <label><input type="checkbox" name="improve" value="Open"> Videos</label>
      <label><input type="checkbox" name="improve" value="Open"> City Meetups</label>
      <label><input type="checkbox" name="improve" value="Open"> Wiki</label>
      <label><input type="checkbox" name="improve" value="Open"> Forum</label>
      <label><input type="checkbox" name="improve" value="Open"> Additional Courses</label>
      </fieldset>
      <fieldset>
        Any comments or suggestions?
        <textarea placeholder="Enter your comment here..." rows="5"></textarea>
        
      </fieldset>

      <input id="submit" type="submit" value="Submit">
      
      
    </form>
    

  </body>
</html>

/* file: styles.css */
body {
  background-color:rgba(99, 98, 176,0.8);
  color:white;
}
#title {
  text-align:center;
  margin-bottom:0;
}
#description {
  margin-top:0;
  text-align:center;
  font-style:italic;
}

#survey-form {
  width:80%;
  margin:20px auto;
  padding:25px;
  background-color:rgba(0,0,0,0.6);
  border-radius: 5px;
}

fieldset {
  border:none;
  width:100%;
  padding:15px 0;
}

label,fieldset:first-child input,select,#submit {
  display:block;
  width:100%;
  border-radius: 5px;
}

textarea {
  margin-top:5px;
  display:block;
  width:100%;
}


fieldset:first-child input,select {
  margin:5px 0;
  padding:7px;
}

fieldset:first-child label {
  margin:12px 0;
}


fieldset:nth-child(2) label {
  margin:10px 0;
}

fieldset:nth-child(2) input {
  margin:0;
}

#submit {
  width:100%;
  background-color:rgb(55, 175, 101);
  margin:20px 0;
  border:none;
  height:30px;
  color:white;
}

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

1 Like
2

Hi!
I would start by reading this W3 article on the required attribute, your syntax isn’t quite right for it.

3

You are good!I’m missing a d.

1 Like
4

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