Tell us what’s happening:
I am unable to pass the test asking for a label element with the id of “email-label”.
Your code so far
Please copy/paste all the editor code showing in the challenge from where you just linked.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="utf-8">
<title>The Penguin Survey</title>
</head>
<body>
<div class="container">
<header class="header">
<h1 id="title">The Penguin Survey</h1>
<p id="description">I am trying to learn coding, so I have to build a survey from scratch. This is it! I hope it works!</p>
</header>
<form id="survey-form">
<div class="form-questions">
<label id="name-label" for="name">Name</label>
<input
type="text"
name="name"
id="name"
class="form-style"
placeholder="Enter your name"
required
/>
</div>
<div class="form-questions"
<label id="email-label" for="email">Email</label>
<input
type="email"
name="email"
id="email"
class="form-style"
placeholder="Enter your email"
required
/>
</div>
<div class="form-questions">
<label id="number-label" for="number">Age <span class="hint">(Not Required)</span></label>
<input
type="number"
name="age"
id="number"
class="form-style"
placeholder="Age"
min="5"
max="110"
/>
</div>
<div class="form-questions">
<p>Do you think this survey looks professional?</p>
<select id="dropdown" name="professionality" class="form-questions" required>
<option disabled selected value>Select an option</option>
<option value="yesitdoes">Yes, it does!</option>
<option value="noitdoesnot">No, it does not.</option>
<option value="prefernottoanswer">Prefer not to answer...</option>
</select>
</div>
<div class="form-questions">
<p>Would you like to see more coding content?</p>
<label>
<input
name="seemore"
value="yespls"
type="radio"
class="input-radio"
checked
/>Yes Please!!</label>
<label>
<input
name="seemore"
value="maybe"
type="radio"
class="input-radio"
/>Maybeeeeeee.....</label>
<label>
<input
name="seemore"
value="hangitup"
type="radio"
class="input-radio"
/>Nah bro, hang it up.</label>
</div>
<div class="form-questions">
<p>What types of penguins do you like?
<span class="hint">(Click multiple! It's okay!)</span></p>
<img class="penguinimage" src="https://www.animalspot.net/wp-content/uploads/2019/08/Types-of-Penguins.jpg">
<label>
<input
name="favorites"
value="emperor"
type="checkbox"
class="input-checkbox"
/>Emperor Penguins</label>
<label>
<input
name="favorites"
value="macaroni"
type="checkbox"
class="input-checkbox"
/>Macaroni Penguins</label>
<label>
<input
name="favorites"
value="african"
type="checkbox"
class="input-checkbox"
/>African Penguins</label>
<label>
<input
name="favorites"
value="chinstrap"
type="checkbox"
class="input-checkbox"
/>Chinstrap Penguins</label>
<label>
<input
name="favorites"
value="rockhopper"
type="checkbox"
class="input-checkbox"
/>Rockhopper Penguins</label>
<label>
<input
name="favorites"
value="other"
type="checkbox"
class="input-checkbox"
/>Other</label>
</div>
<div class="form-questions">
<p>What is your favorite thing about penguins?</p>
<textarea
id="whatilike"
class="input-textarea"
name="myfavthing"
placeholder="My favorite thing about penguins is that they are very cute.">
</textarea>
</div>
<div class="form-questions">
<button type="submit" id="submit" class="submit-button">
Submit
</button>
</div>
</form>
</div>
</body>
</html>
Console output:
// running tests You should have a
label
element with an
id
of
email-label
. // tests completed
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36
Challenge: Survey Form - Build a Survey Form
Link to the challenge: