Im finishing up the test and I have 2 items that I can’t get pass. I’ve doubled and triple checked them but can’t find what I’m doing wrong.
- Failed:You should have a
select field with an id of dropdown.
- You should have at least one
textarea element that is a descendant of #survey-form .
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Build a Survey Form</title>
<meta charset="utf8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="title">Build a Survey Form</h1>
<p id="description">This is the final project to complete in order to receive certification.</p>
<form id="survey-form">
<div class="form">
<fieldset>Name <input id="name" type="text" placeholder="Name" required/>
<label id="name-label" input="name" type="text" </label> Please enter your name.
</fieldset>
</div>
<div class="form">
<fieldset>Email <input id="email" name="email" type="email" placeholder="Email" required />
<label id="email-label" name="email-label" input="email" type="email">Please enter you email.</label>
</fieldset>
</div>
<div class="form">
<fieldset>Age <input id="number" name="age" type="number" min="1" max="2" placeholder="Age" />
<label id="number-label" input="number" type="number" min="1" max="2">Please enter you age. </label>
</div>
<div class="dropdown">
<label id="dropdown">Please select which shift you are available for.</label>
<select id="dropdown" name="dropdown">
<option value="">Select the best option.</option>
<option value="1">Open availability</option>
<option value="2">1st shift</option>
<option value="3">2nd shift</option>
<option value="4">3rd shift</option>
</select>
</div>
<div class="radio">
<input type="radio" value="radio" name="radio">Full time </input>
<input type="radio" value="radio" name="radio">Part time </input>
</div>
<div class="radio>"
<label id="radio">What is your ideal work environment?</label>
<input type="radio" value="radio" name="radio">Remote
</div>
<input type="radio" value="radio" name="radio">In office</input>
</div>
<div class="checkbox">
<label id="checkbox" name="checkbox">Are you a high school graduate?</label>
<input type="checkbox" name="checkbox type="checkbox" value="checkbox">Yes</input>
<input type="checkbox" name="checkbox" type="checkbox" value="checkbox">No </input>
</div>
<div class="textarea">
<label id="textarea" name="textarea">Please provide any additional information.</label>
<input id="textarea" name="textarea" type="textarea" placeholder="Additional information"></input>
</div>
<div class="button">
<input id="submit" name="submit" type="submit" />
</div>
</form>
</body>
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
1 Like
You have two elements with the same id.
The ids are supposed to be unique. So the test is getting confused.
For the other issue, try fixing any errors in the html that this validator finds:
This may solve the issue. If not, let us know.
1 Like
Thank you. I’ve made some changes but I am still getting a fail
- you should have at least one textarea element that is a descendent of #survey-form
<!DOCTYPE html>
<html lang="en">
<head>
<title>Build a Survey Form</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="title">Build a Survey Form</h1>
<p id="description">This is the final project to complete in order to receive certification.</p>
<form id="survey-form">
<div class="form">
<label id="name-label" >Please enter your name.
<fieldset for="name">Name <input id="name" name="name" type="text" placeholder="Name" required>
</fieldset>
</div>
<div class="form">
<label id="email-label" >Please enter you email.
<fieldset> Email <input id="email" name="email" type="email" placeholder="Email" required>
</fieldset>
</div>
<div class="form">
<label id="number-label" >Please enter you age.
<fieldset> Age <input id="number" name="age" type="number" min="50" max="100" placeholder="Age" >
</div>
<div class="dropdown">
<label id="dropdown-option" >Please select which shift you are available for.
<select id="dropdown" name="dropdown">
<option value="">Select the best option.</option>
<option value="1">Open availability</option>
<option value="2">1st shift</option>
<option value="3">2nd shift</option>
<option value="4">3rd shift</option>
</select>
</div>
<div class="radio">
<input type="radio" value="radio" name="radio">Full time
<input type="radio" value="radio" name="radio">Part time
</div>
<div class="radio>"
<label id="radio-option">What is your ideal work environment?
<input type="radio" value="radio" name="radio">Remote</input>
<input type="radio" value="radio" name="radio">In office</input>
</div>
<div class="checkbox">
<label id="checkbox-option" >Are you a high school graduate?
<input type="checkbox" name="checkbox" value="checkbox">Yes
<input type="checkbox" name="checkbox" value="checkbox">No
</div>
<div class="textarea">
<label id="textarea-field">Please provide any additional information.
<input id="textarea-option" name="textarea-option" type="text" placeholder="Additional information">
</div>
<div class="button">
<input id="submit" name="submit" type="submit">
</div>
</form>
</body>
Hi. You haven’t created a text area element using the correct opening and closing tags. You have added attributes with a value “textarea” which isn’t the same thing.
2 Likes
Great! That worked. I guess I was a bit confused and a little frustrated. It’s always the simplest things that can break a program. I appreciate you input. It helped and I passed. Thanks everyone!
3 Likes
