Tell us what’s happening:
Greetings! I was just curious as to why I needed to assign an id =“value” to my label element…? Isn’t an id attribute just for the input element in the code? (Placed the part in a comment) I was able to solve why it wasnt passing, and because I got it finally working thru tinkering, I wanted a more logical answer so to speak… I’m new to coding and have just begun my journey two weeks ago. Thank you so much!
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>freeCodeCamp Survey Form</title>
<link rel="stylesheet" href="styles.css" />
</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>
<form id="survey-form">
<fieldset>
<--! this part i'm curious as to why?
<label for="name">Name <input type="text" id="name" name="name" placeholder="Enter your name" required/></label>
-->
<label for="email" id="email-label">Email <input type="email" id="email" name="email" placeholder="Enter your email"required/></label>
<label for="number" id="number-label">Age (optional) <input type="number" id="number" name="number" min="10" max="99" placeholder="Age"/></label>
<label for="dropdown">Which option best describes your current role?
<select id="dropdown" name="dropdown">
<option value="">Select current role</option>
<option value="1">Student</option>
<option value="2">Fulltime Job</option>
<option value="3">Fulltime Learner</option>
<option value="4">Prefer not to say</option>
<option value="5">Other</option>
</select>
</label>
<label><input type="radio" id="definitely" name="def-maybe-not" value="definitely" checked/> Definitely</label>
<label><input type="radio" id="maybe" name="def-maybe-not" value="maybe"/> Maybe</label>
<label><input type="radio" id="not-sure" name="def-maybe-not" value="not-sure"/> Not Sure</label>
<label for="dropdown">What is your favorite feature of freeCodeCamp?
<select id="dropdown" name="dropdown">
<option value="">Select an option</option>
<option value="1">Challenges</option>
<option value="2">Projects</option>
<option value="3">Community</option>
<option value="4">Open Source</option>
</select>
</label>
<label><input id="front-end" name="improve" value="front-end" type="checkbox"/> Front-end Projects</label>
<label><input id="back-end" name="improve" value="back-end" type="checkbox"/> Back-end Projects</label>
<label><input id="datavisual" name="improve" value="datavisual" type="checkbox"/> Data Visualization</label>
<label><input id="challenges" name="improve" value="challenges" type="checkbox"/> Challenges</label>
<label><input id="opensource" name="improve" value="opensource" type="checkbox"/> Open Source Community</label>
<label><input id="gitter" name="improve" value="gitter" type="checkbox"/> Gitter help rooms</label>
<label><input id="videos" name="improve" value="videos" type="checkbox"/> Videos</label>
<label><input id="meetup" name="improve" value="meetup" type="checkbox"/> City Meetups</label>
<label><input id="wiki" name="improve" value="wiki" type="checkbox"/> Wiki</label>
<label><input id="forum" name="improve" value="forum" type="checkbox"/> Forum</label>
<label><input id="addcourses" name="improve" value="addcourses" type="checkbox"/> Additional Courses</label>
<label for="comments-suggestions">Any comments or suggestions? <textarea id="comments-suggestions" name="comments-suggestions" rows="3" cols="30" placeholder="Enter your comments here..."></textarea></label>
<input type="submit" id="submit"/>
</fieldset>
</form>
</body>
</html>
/* file: styles.css */
label {
display: block;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) 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: