Survey Form - Build a Survey Form -- I need assistance please

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>https://survey-form.freecodecamp.rocks/</title>
</head>
<body>
<h1 id="title">freeCodeCamp Survey Form</h1>
<p id="description">Thank you for taking the time to help us improve the platform </p>

<fieldset class="form-family">

<form id="survey-form">

<label id="name-label">Name<input type="text" id="name" name="name" placeholder="Enter your name" required></label>
<label id="email-label">Email<input type="email" id="email" name="email"placeholder="Enter your email" required></label>
<label id="number-label">Age (optional)<input type="number" id="number" name="email"placeholder="Age" min="10" max="99"></label>
</fieldset>

<fieldset>
<p> Which option best describe your current role?</p>

<select id="dropdown">
<option>select your 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>

</fieldset>

<fieldset>
<p>Would you recommend FreecodeCamp to a friend?</p>

<label><input type="radio" value="definitely" name="recommendation">Definitely </label>
<label><input type="radio" value="maybe" name="recommendation">Maybe </label>
<label><input type="radio" value="not sure" name="recommendation">Not sure </label>
</fieldset>

<fieldset>
<p>What is your favorite feature of freeCodeCamp?</p>
<select id="dropdown">
<option>select an option</option>
<option>Challenges</option>
<option>Projects</option>
<option>Community</option>
<option>Open source</option>
</select>
</fieldset>

<fieldset>
<p>What would you like to see improved? (Check all that apply)</p>

<label><input type="checkbox" id="value"  name="preference" value="front-end projects">Front-end Projects</label>

<label><input type="checkbox" name="preference" value="back-end projects">Back-end Projects</label>

<label><input type="checkbox" name="preference" value="data visualization">Data Visualization</label>

<label><input type="checkbox" name="preference" value="challenges">Challenges</label>

<label><input type="checkbox" name="preference" value="open source community">Open Source Community</label>

<label><input type="checkbox" name="preference" value="gitter help rooms">Gitter help rooms</label>

<label><input type="checkbox" name="preference" value="videos">Videos</label>

<label><input type="checkbox" name="preference" value="city meetups">City Meetups</label>

<label><input type="checkbox" name="preference" value="wiki">Wiki</label>

<label><input type="checkbox" name="preference" value="forum">Forum</label>

<label><input type="checkbox" name="preference" value="additional courses">Additional Courses</label>

</fieldset>

<fieldset>
  <p>Any comments or suggestions?</p>
  <textarea id="comments" rows="3" cols="30">Enter your comments here... </textarea>
</fieldset>

<label><button type="submit" id="submit"> Submit</button> </label>

</form>
</body>
</html>

/* file: styles.css */


  **Your browser information:**

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

Issues

  1. You should have at least two radio buttons that are descendants of #survey-form .

  2. You should have at least two input elements with a type of checkbox (checkboxes) that are descendants of #survey-form .

  3. All your checkboxes inside #survey-form should have a value attribute and value.

  4. You should have at least one textarea element that is a descendant of #survey-form .

  5. Your #submit should be a descendant of #survey-form .

  6. Your #dropdown should be a descendant of #survey-form.

3

Hi!

Required is not an allowed attribute on a form element. This may be causing some of the issues you’ve listed.

I’m seeing some syntax errors that need cleaning up. Such as the <head> element not having a closing tag, and the <body> element not having an opening tag.

I’d advise running your code though a html validator.

4

I fixed the syntax issues but still, nothing really changed. I removed “required” from the form element as well.

Still not paasing. Thanks anyway.

5

That mistake is on me, I missed this the first time I looked at your code.

This element <fieldset class="form-family"> is preventing the other elements from being decedents of #survey-form.

To make sure everything is a decedent of #survey-form, that element needs to wrap around the whole form, nothing inside the form should come before it.

1 Like
6

I moved the fieldset down into the form element and it worked. Thanks

1 Like
7

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