Tell us what’s happening:
Describe your issue in detail here. I’m stuck. I don’t understand how my checkboxes fail the don’t have a value attribute and value test and how I failed the descendant tests.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Get to Know You Survey Form</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<body>
<h1 id="title">Get to Know You Survey Form</h1>
<p id="description">This is a form for you to fill out to get to you better. It asks for your input.</p>
<form id="survey-form">
<div class="form-group">
<label id="name-label" for="name">Name:</label>
<input id="name" type="text" name="name" placeholder="Write your name." required>
</div>
<div class="form-group">
<label id="email-label" for="email">Email:</label>
<input id="email" type="email" name="email" placeholder="Write your email." required>
</div>
<div class="form-group">
<label id="number-label" for="number">Age:</label>
<input id="number" type="number" min="10" max="99" placeholder="Age." required>
</div>
</form>
<label for="FaveMusic">What is your favorite type of music?</label>
<select id="dropdown" name="FaveMusic">
<option value="A">Alternative</option>
<option value="CR">Classic Rock</option>
<option value="ED">Euro Dance</option>
<option value="R">Rap</option>
<option value="HH">Hip Hop</option>
<option value="RB">R&B</option>
<option value="PR">Punk Rock</option>
<option value="HM">Heavy Metal</option>
</select>
<p>What is your favorite color?</p>
<ol>
<label for="White">
<li><input id="White" type="radio" name="color" value="White"> White</li>
<label for="Yellow">
<li><input id="Yellow" type="radio" name="color" value="Yellow"> Yellow</li>
<label for="Orange">
<li><input id="Orange" type="radio" name="color" value="Orange"> Orange</li>
<label for="Red">
<li><input id="Red" type="radio" name="color" value="Red"> Red</li>
<label for="Green">
<li><input id="Green" type="radio" name="color" value="Green"> Green</li>
<label for="Blue">
<li><input id="Blue" type="radio" name="color" value="Blue"> Blue</li>
<label for="Brown">
<li><input id="Brown" type="radio" name="color" value="Brown"> Brown</li>
<label for="Black">
<li><input id="Black" type="radio" name="color" value="Black"> Black</li>
</ol>
<p>Where do you like to spend your free time?</p>
<ul>
<label for="Park">
<li><input id="Park" value="Park" type="checkbox" name="free-time"> In a park</li>
<label for="Library">
<li><input id="Library" value="Library"type="checkbox" name="free-time"> In a Library</li>
<label for="Museum">
<li><input id="Museum" value="Museum" type="checkbox" name="free-time" > In a Museum</li>
<label for="Gym">
<li><input id="Gym" value="Gym" type="checkbox" name="free-time" >
In a Gym</li>
<label for="Home">
<li><input id="Home" value="Home" type="checkbox" name="free-time" >
At Home</li>
<label for="Stroll">
<li><input id="Stroll" value="Stroll" type="checkbox" name="free-time" >
Going for a stroll</li>
</ul>
<p>Additional Comments<br><textarea id="instructions" name="instructions" rows="4" cols="60"
maxlength="800" placeholder="No more than 800
characters long"></textarea></p>
<input id="submit" type="submit">
</form>
</body>
</html>
/* file: styles.css */
#title {
color: #0000FF
;
font: Arial;
font-size: 55px;
background-color: #7FFFD4;
text-align:center;
}
body{
align-items: left;
background-color: #d0ff00;
text-align:left;
}
#description {
background-color: #61ca12;
font-size: 20px;
text-align:center;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 Edg/107.0.1418.35
Challenge: Survey Form - Build a Survey Form
Link to the challenge: