I got all of this wrong: What did I do 
-
You should have an
inputelement with anidofname. -
Failed:Your
#nameshould have atypeoftext. -
Failed:Your
#nameshould require input. -
You should have an
inputelement with anidofemail. -
Failed:Your
#emailshould have atypeofemail. -
Failed:Your
#emailshould require input. -
Failed:You should have an
inputelement with anidofnumber. -
Your
#numbershould have atypeofnumber. -
Failed:Your
#numbershould have aminattribute with a numeric value. -
Failed:Your
#numbershould have amaxattribute with a numeric value. -
Failed:You should have a
labelelement with anidofname-label. -
Failed:You should have a
labelelement with anidofemail-label. -
Failed:You should have a
labelelement with anidofnumber-label. -
Failed:Your
#name-labelshould contain text that describes the input. -
Failed:Your
#email-labelshould contain text that describes the input. -
Failed:Your
#number-labelshould contain text that describes the input. -
Failed:Your
#name-labelshould be a descendant of#survey-form. -
Failed:Your
#email-labelshould be a descendant of#survey-form. -
Failed:Your
#number-labelshould be a descendant of#survey-form. -
Failed:Your
#nameshould have aplaceholderattribute and value. -
Failed:Your
#emailshould have aplaceholderattribute and value. -
Failed:Your
#numbershould have aplaceholderattribute and value. -
Failed:All your checkboxes inside
#survey-formshould have avalueattribute and value.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width" initial-scale="1.0"/>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>Optional Survey Form</title>
<body>
<header>
<section class="title-text">
<h1 id="title">Optional Survey Form</h1>
<p id="description">Thank you for taking the time to help us improve the platform</p>
</section>
</header>
<form id="survey-form">
<fieldset>
<label id="name">Name<input id="name" type="text" placeholder="full name" required></input></label>
<label for="email" id="email"> Email<input id="email" type="email" placeholder="email" required></input></label>
<label for="number" id="number">Age(optional)</label><input id="number" min="13" max="120" type="number"placeholder="13"></input>
<select id="dropdown">
<option value="">What is your occupation?</option>
<option value="1">Full-time student</option>
<option value="2">Employed(full-time)</option>
<option value="3">Employed(part-time)</option>
<option value="4">Self-employed</option>
<option value="5">Unemployed</option>
<option value="6">Disabled</option>
<option value="7">Stay-at-home parent/spouse</option>
<option value="8">Rather not say</option>
</select>
</fieldset>
<fieldset>
<label for="Recomendation"> Would you recommend this site to a friend or family member?</label>
<label><input type="radio" class="inline" name="attribute" value="1">Yes</input></label>
<label><input type="radio" class="inline" name="attribute" value="2">No</input></label>
<label><input type="radio" class="inline" name="attribute" value="3">Maybe</input></label>
</fieldset>
<fieldset>
<label for="favorite-coding-challenge">What is your favorite coding challenge?
<select id="dropdown">
<option value="1">Cat Pics</option>
<option value="2">Menu</option>
<option value="3">Survey</option>
<option value="4">Crayons</option>
</select></label>
</fieldset>
<fieldset>
<label for="improvements">What would you like to see improved?<small>Check all that apply</small></label>
<label for="challenges"><input type="checkbox" class="inline" value="challenges">Challenges</input></label>
<label="help-forums"><input type="checkbox" class="inline" value="help forums">Help Forums</input></label>
<label="videos"><input type="checkbox" class="inline" value=>Videos</input></label>
<label for="social-media"><input type="checkbox" class="inline" value=>Social Media (FB, TikTok, etc)</input></label>
<label for="additional-courses"><input type="checkbox" class="inline" value="additional-courses">Additional Courses</input></label>
<label for="data"><input type="checkbox" class="inline" value="data">Data</input></label>
<label for="tech issues"><input type="checkbox" class="inline" value="tech-issues">Tech issues</input></label>
</fieldset>
<fieldset>
<label>Any comments or suggestions?
<textarea rows="5" cols="50" placeholder="Enter your comment here"></textarea>
</label>
</fieldset>
<fieldset><input type="submit" value="submit" id="submit"></input></fieldset>
</form>
</body>
</head>
</html>
/* file: styles.css */
body{
background-image:url(https://www.intelligenthq.com/wp-content/uploads/2020/09/How-Tech-is-Changing-the-Way-we-Work.jpg);
background-attachment: fixed;
color: rgb(245, 255, 250);
font-size:18px;
font-family:sans-serif;
font-weight:30px;
}
h1,p{
text-align:center;
}
h1 {
margin-top: 2rem;
margin-bottom: 0;
}
p {
margin-top: 0;
margin-bottom: 2rem;
}
.established{
font-style:italic;
}
form {
background-color: rgba(45, 0, 100, 0.9);
color: rgb(245, 255, 250);
border-radius: 5px;
box-shadow: 0 0 10px pink;
width: 60vw;
max-width: 700px;
min-width: 350px;
margin: 0 auto;
padding: 15px 15px 25px 15px;
}
label{
display:block;
}
fieldset{
border:none;
}
input,
select,
textarea {
width: auto;
min-height: auto;
font-size: auto;
}
input,
select {
border-radius: 5px;
}
textarea {
min-height: 6.33em;
resize: vertical;
}
input[type="submit"]:hover {
outline: none !important;
border: 2px solid rgb(0, 255, 255);
box-shadow: 0 0 10px rgb(0, 127, 127);
cursor: pointer;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
select:focus {
outline: none !important;
box-shadow: 0 0 7px rgb(0, 255, 255);
}
.inline {
width: unset;
margin: 0 0.5em 0 0;
min-height: unset;
vertical-align: middle;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36
Challenge: Survey Form - Build a Survey Form
Link to the challenge:
