Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:
My form is passing all tests except for:

You should have at least one textarea element that is a descendant of #survey-form .

and

Your #submit should be a descendant of #survey-form .

I can’t figure-out what I’m leaving out or need to change…

   **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Survey Form</title>
 <link rel="stylesheet" href="styles.css" />
 <div id="outside">
 </head>
<body>
<h1 id="title">Such a Time as This Agent Interest Form</h1>
<hr class="hr1">
<p class="tagline" id="description">Tell Us a Little about Yourself</p>
<form class="survey-form" id="survey-form">
 <div>
<input type="text" id="name" placeholder="Name" required>
<label id="name-label">Name</label>
</div>  
 <div>
<input id="email" 
type="email" name="email" placeholder="E-Mail Address" required>
<label id="email-label">E-Mail Address</label>
</div>
<div>
   <input id="number" type="number" name="age" required min=15 max=120 placeholder="Age">
<label id="number-label">Age</label>
 </div>
 <br>
<div>
 <label>For what position are you applying? (Check all that apply.)</label></div>
 <br>
 <div>
 <input type="checkbox"  name="occupation" value="Sales"><label>Sales</label></div>
 <div>
 <input type="checkbox" name="occupation" value="Customer Service"><label>Customer Service</label></div>
<div>
<input type="checkbox" name="occupation" value="Accounting"><label>Accounting</label>
</div>
<div>
 <input type="checkbox" name="occupation" value="Manager"><label>Manager</label>
 </div>
 <br>
 <div>
   <label>What is your current employment status?</label>
</div>
<br>
<div>   
   <input type="radio" name="employment" value="Full-Time"><label>Full-Time</label>
   </div>
<div>
 <input type="radio" name="employment" value="Part-Time"><label>Part-Time</label>
 </div>
<div>
 <input type="radio" name="employment" value="Unemployed"><label>Unemployed</label>
 </div>
<br>
<div>
 <label>Select all destinations that you've visited within the past five years</label>
 </div>
 <br>
<select id="dropdown">
 <option value="">Select One</option>
 <option value="1">Walt Disney World</option>
 <option value="2">Disneyland</option>
 <option value="3">Universal Studios Hollywood</option>
 <option value="4">Universal Studios Orlando</option>
 <option value="5">Sandals</option>
 <option value="6">Beaches</option>
 <option value="7" textarea id="Describe" name="Other Location" placeholder="List destination">Other</option>
 </select>
 </div>
 <div>
  <br>
  <label for="other destinations">Please tell us of any other destinations that you've visited.</label>
  </div>
  <br>
   <div>
   <textarea id="comments" name="textarea-name" rows=3 columns=50 maxlength=250 placeholder="Insert comments here"></textarea>
</div>
<br>
   <input type="submit" id="submit" value="Submit"/>
</form>
 </body>  

/* file: styles.css */
h1 {
 font-family: sans-serif;
 padding-top: 20px;
 padding-bottom: 20px;
 text-align: center;
}
body {
 background-color: gray;
}
.tagline {
 font-size: 20px;
 padding-top: 20px;
 padding-bottom: 20px;
 text-align: center;
 width: 70%
 display: inline-block;
}
.hr1 {
 margin-top: 10px;
 margin-bottom: 10px;
}
.survey-form {
 margin: 0 auto;
 padding-bottom: 5px;
}

   **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

Try indenting the code. If you do it you may see some tag that you left out.
(Make sure to line up the starting and closing tags neatly from the left).

3

Okay. I think I’ve indented the code correctly, but I’m still being told that I “textarea” and “submit” aren’t descendants of #survey-form.

Any advice? I’m really stuck here…

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Survey Form</title>
  <link rel="stylesheet" href="styles.css" />
  <div id="outside">
  </head>
<body>
  <h1 id="title">Such a Time as This Agent Interest Form</h1>
  <hr class="hr1">
  <p class="tagline" id="description">Tell Us a Little about Yourself</p>
  <form class="survey-form" id="survey-form">
  <div>
  <input type="text" id="name" placeholder="Name" required>
  <label id="name-label">Name</label>
  </div>  
  <div>
  <input id="email" 
type="email" name="email" placeholder="E-Mail Address" required>
  <label id="email-label">E-Mail Address</label>
  </div>
  <div>
  <input id="number" type="number" name="age" required min=15 max=120 placeholder="Age">
  <label id="number-label">Age</label>
  </div>
  <br>
  <div>
  <label>For what position are you applying? (Check all that apply.)</label></div>
  <br>
  <div>
  <input type="checkbox"  name="occupation" value="Sales"><label>Sales</label></div>
  <div>
  <input type="checkbox" name="occupation" value="Customer Service"><label>Customer Service</label></div>
  <div>
  <input type="checkbox" name="occupation" value="Accounting"><label>Accounting</label>
  </div>
  <div>
  <input type="checkbox" name="occupation" value="Manager"><label>Manager</label>
  </div>
  <br>
  <div>
  <label>What is your current employment status? </label>
  </div>
  <br>
  <div>   
  <input type="radio" name="employment" value="Full-Time"><label>Full-Time</label>
  </div>
  <div>
  <input type="radio" name="employment" value="Part-Time"><label>Part-Time</label>
  </div>
  <div>
  <input type="radio" name="employment" value="Unemployed"><label>Unemployed</label>
  </div>
  <br>
  <div>
  <label>Select all destinations that you've visited within the past five years</label>
  </div>
  <br>
  <select id="dropdown">
  <option value="">Select One</option>
  <option value="1">Walt Disney World</option>
  <option value="2">Disneyland</option>
  <option value="3">Universal Studios Hollywood</option>
  <option value="4">Universal Studios Orlando</option>
  <option value="5">Sandals</option>
  <option value="6">Beaches</option>
  <option value="7" textarea id="Describe" name="Other Location" placeholder="List destination">Other</option>
  </select>
  </div>
  <div>
  <br>
  <label for="other destinations">Please tell us of any other destinations that you've visited.</label>
  </div>
  <br>
  <div>
  <textarea id="comments" name="textarea-name" rows=3 columns=50 maxlength=250 placeholder="Insert comments here"></textarea>
  </div>
  <br>
    <input type="submit" id="submit" value="Submit"/>
  </form>
  </body>
4

thanks for trying my suggestion.

Right away we can see that:

  • you have defined a div called outside inside the head area. That doesn’t belong there as the head area is only for ‘meta’ or ‘link’ type elements.

Now try to indent all the elements inside your form. What i mean is, right now you have lines that look like this:

  <form class="survey-form" id="survey-form">
  <div>
  <input type="text" id="name" placeholder="Name" required>
  <label id="name-label">Name</label>

But to indent it correctly you should push the inner elements by 2 spaces in like this:

  <form class="survey-form" id="survey-form">
    <div>
      <input type="text" id="name" placeholder="Name" required>
      <label id="name-label">Name</label>

So the div for eg is indented to be underneath the form
the input is indented to be underneath the div
the label is like a ‘sibling’ so it is at the same starting point of the input

etc.
As you do this you will eventually reach some closing tags.
The closing tag should line up exactly with the opening tag.
IF you find a closing tag for form for eg, but not for div, this will appear as a kind of skipped area in your indentation and will help you find mistakes.

5

Excellent! I’ll do this right now.

But what do you mean by “closing tag for form eg”?

6

And I think that fixed it! It took me to the next challenge…

This is all beginning to click next… :slight_smile:

1 Like
7

That is good to hear. I wish you luck…

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.