Tell us what’s happening:
Describe your issue in detail here.
I have a HTML form and I’m getting several errors. Can you help me fix them? Here are the errors:
-
The
#dropdown
element should be a descendant of the#survey-form
element. -
I should have at least two radio buttons that are descendants of the
#survey-form
element. -
I should have at least two
input
elements with atype
ofcheckbox
that are descendants of the#survey-form
element. -
All of my
checkbox
inputs inside the#survey-form
element should have avalue
attribute and value. -
I should have at least one
textarea
element that is a descendant of the#survey-form
element. -
The
#submit
element should be a descendant of the#survey-form
element.
Can you please help me fix these errors?
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Survey Form</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="title">Survey Form</h1>
<p id="description">Thank you for taking the time to fill out the form</p>
<fieldset>
<form method="post" id="survey-form">
<label id="name-label">Name
<input type="text" id="name" required placeholder="Enter your name
"></input>
</label>
<label id="email-label" >Email
<input type="email" id="email" required placeholder="Enter your Email
"></input>
</label id="number-label">
<label id="number-label">Age
<input type="number" id="number" min="12" max="99" placeholder="Age"></input>
</label>
</fieldset>
<fieldset>
<lable for="reason">Which option best describes your current role?
<select id="reason" name="reason">
<option value="">Select current role</option>
<option value="1">Student</option>
<option value="2">Full Time Job</option>
<option value="3">Part Time Job</option>
</select>
</label>
</fieldset>
<fieldset>
<p> What is your favorite feature of freeCodeCamp?</p>
<label for="one">
<input type="radio" name="one" class="inline" value="Definitely">Definitely</input>
</label>
<label for="one">
<input type="radio" name="one" class="inline" value="Definitely">Maybe</input>
</label>
<label for="one">
<input type="radio" name="one" class="inline" value="Definitely">Not sure</input>
<label>
</fieldset>
<fieldset>What is your favorite feature of freeCodeCamp?
<label for="dropdown">
<select id="dropdown" >
<option value="">Select an option</option>
<option value="1">Project</option>
<option value="2">Community</option>
<option value="3">Open Source</option>
</select>
</label>
</fieldset>
<fieldset>
<input value="projects" type="checkbox">Front-end Projects</input>
<input value="projects" type="checkbox">Back-end Projects
</input>
<input value="projects" type="checkbox">Data Visualization</input>
<input value="projects" type="checkbox">Challenges</input>
<input value="projects" type="checkbox">Open Source Community</input>
<input value="projects" type="checkbox">Videos</input>
</fieldset>
<fieldset>
<legend>Comments and Suggestions:</legend>
<label>
Any comments or suggestions?
<textarea id="comments" name="comments" rows="4" cols="50"></textarea>
</label>
</fieldset>
<label>
<input id="submit" type="submit" value="Submit"></input>
</label>
</form>
</body>
</html>
/* file: styles.css */
body {
margin:0 auto; background-color:#524AA8;
color:white;
}
fieldset {
border: none;
padding: 2rem 0;
border-bottom: 3px solid #3b3b4f;
}
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: Responsive Web Design Projects - Build a Survey Form
Link to the challenge: