Tell us what’s happening:
So here are a list of my errors when I “Run the Tests” for the Build the Survey Form portion. I’m still not sure how to debug the errors that are coming up but I know when I put this HTML into the online HTML checker, it passes and there are not errors but when I run it through the FreeCodeCamp’s “Run the Tests” button I do get a whole bunch of error messages. Here are the errors:
-
You should have an
inputelement with anidofname. -
Failed: Your
#nameshould have atypeoftext. -
Failed: Your
#nameshould require input. -
Failed: Your
#nameshould be a descendant of#survey-form. -
Failed: You should have an
inputelement with anidofemail. -
Failed: Your
#emailshould have atypeofemail. -
Failed: Your
#emailshould require input. -
Failed: Your
#emailshould be a descendant of#survey-form. -
Failed: You should have an
inputelement with anidofnumber. -
Failed: Your
#numbershould be a descendant of#survey-form. -
Failed: 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-label should be a descendant of #survey-form.
-
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 #number should have a placeholder attribute and value.
*** Thanks in advance to anyone that can shed some light on what I am overlooking.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Free Puppies</title>
</head>
<body>
<div class="menu">
<h1 id="title">FREE</h1>
<h2>puppies</h2>
<p id="description">Please fill out the below information to receive your <i style="color:brown;">labrador</i> puppies</p>
<form id="survey-form" method="post" action='https://register-demo.freecodecamp.org'>
<fieldset>
<label for="first-name">First Name<input id="first-name" name="name" type="text" placeholder="Name" required>
</label>
<label for="last-name">Last Name<input id="last-name" name="name" type="text" placeholder="Last Name" required>
</label>
<label for="email-label">Email<input id="email-label" name="email" type="email" placeholder="free@puppies.com" required>
</label>
<label for="phone-label">Phone<input id="phone-label" name="phone" type="tel" placeholder="(1 Ext) 123-456-6789"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" value="number" required>
</label>
</fieldset>
<fieldset>
<label for="dropdown">What color chubby lab would you prefer?
<select id="dropdown" name="colorlab">
<option value="">(select one)</option>
<option value="1">White</option>
<option value="2">Yellow</option>
<option value="3">Chocolate</option>
<option value="4">Black</option>
</select>
</label>
</fieldset>
<fieldset>
<legend>Location (required)</legend>
<label for="local"><input id="local" type="radio" name="place" class="inline" value="local" checked> Local</label>
<label for="furtherthan25k"><input id="furtherthan25k" type="radio" name="place" class="inline" value="furtherthan25k"> Further than 25km</label>
</fieldset>
<fieldset><legend>Puppie Accessories</legend>
<label for="harness">
<input class="inline" id="harness" type="checkbox" required name="harness" value="harness"> Harness
</label>
<label for="leash">
<input class="inline" id="leash" type="checkbox" required name="leash" value="leash"> Leash
</label>
<label for="doggles">
<input class="inline" id="doggles" type="checkbox" required name="doggles" value="doggles"> Doggles
</label>
</fieldset>
<fieldset>
<legend>Comments</legend>
<label for="comments">
<textarea id="comments" name="comments" rows="3" cols="30" placeholder="I like puppies on the beach..."></textarea>
</label>
</fieldset>
<input id="submit" type="submit" value="Submit" name="submit">
</form>
<p></p>
</div>
</body>
</html>
/* file: styles.css */
body{
background-image:url("https://www.thek9company.com.au/k9/wp-content/uploads/2015/07/puppy_training.jpg");
background-repeat:repeat;
background-size:100%;
font-family:"century gothic";
}
.menu{
border-radius: 25px;
margin: 0 auto;
width:80%;
height:auto;
background-color:#fffccc;
opacity:0.85;
}
h1,h2,p{
text-align:center;
}
h1{
padding-top:20px;
font-size:3em;
margin-bottom:-30;
}
h2{
font-size:1.5em;
}
p{
padding:10px;
}
form {
width: 60vw;
max-width: 500px;
min-width: 10px;
margin: 0 auto;
}
input, select{
border-radius: 5px;
display: block;
}
label {
display: block;
margin: 0.5rem 0;
}
select {
margin: 10px 0 0 0;
width: 80%;
}
input, textarea,select {
background-color: #ffffff;
border: 1px solid #0a0a23;
}
.inline{
display:inline;
}
input[type="submit"] {
display: block;
width: 80%;
margin: 1em auto;
height: 2em;
font-size: 1.1rem;
background-color:#73E600;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/119.0
Challenge Information:
Survey Form - Build a Survey Form