Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:
Where I have the p and the input for “what will your project be?” it has the text but when I do not put the input element the text goes away. I do not understand and need help! I just want it as a small text with no input. But the only way to text shows if the input is there.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
   <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css" />
  <title>McGee Woodworking</title>
  <body>
    <h1 id="title">McGee Woodworking</h1>
    <p id="description">Woodworker looking for projects!</p>
    <form id="survey-form">
     <fieldset><label class="project-title">Enter your information and explain your project for a free quote!</label> <label id="name-label">Name<input placeholder="John" id="name" type="text" required>
      <label id="email-label">Email<input placeholder="free@codecamp.com" id="email" type="email" required></label>
      <label id="number-label">Age<input placeholder="18" id="number" type="number" min="18" max="110"></label>
     <Label>Where will your project be?<select id="dropdown"></label>
        <option>-Select-</option>
        <option>Kitchen</option>
        <option>Bedroom</option>
        <option>Living Room</option>
        <option>Bathroom</option>
        <option>Outside</option>
        <option>Other</option>
    <p><input>What will your project be?</p>
       <label><input type="radio" name="1" value="Table">Table</label>
       <label><input type="radio" name="1" value="Chair">Chair</label>
       <label><input type="radio" name="1" value="Desk">Desk</label>
       <label><input type="radio" name="1" value="TV">TV center</label>
       <label><input type="radio" name="1" value="Cabinet">Cabinet</label>
       
       <label>Other<input placeholder="Enter type"></label>
      <label>Wood<input type="checkbox" value="1"></label>
      <label>Metal<input type="checkbox" value="2"></label>
      <label>Project details</label>
      <label id="project-details"><textarea placeholder="Tell me about your project" rows="5" cols="50"></textarea></label>
      <input id="submit" type="submit">
      </fieldset>
    </form>
    </body>
  </html>

/* file: styles.css */
body{
  background-image: url(https://images.unsplash.com/photo-1555505019-8c3f1c4aba5f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80);
  width: 80%;
  Text-align: center;
  padding-left: 50;
  padding-right: 50;
}
h1, p{
  text-align: center;
  color: white;
}
form {
  text-align: left;
  color: white;
  background-color: rgb(100, 0, 0);
}
label, select{
  display: block;
  margin: 0.5rem 0;
}
.project-title {
  font-family: Sans-Serif;
  font-size: 23px;
  text-align: center;
}
input {
  padding-left: 10px
}
.project-details {
  width: 100px;
}

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

Could you give some more information?

what you are trying to do
what you have already tried

if the problem is due to stories not passing please state which ones they are

3

Hello, you have a few issues with your html code. The issue is right here, you have your select inside your label. Your select should be outside of your label, and the opening select needs to go before your first option, and a closing select tag needs to go after your last option.

<label>Where will your project be?<select id="dropdown"></label>
        <option>-Select-</option>
        <option>Kitchen</option>
        <option>Bedroom</option>
        <option>Living Room</option>
        <option>Bathroom</option>
        <option>Outside</option>
        <option>Other</option>

Here is an article where you can see the select and label being used. Once you fix the label and select issue then the normal text will show, and you will just have to style it to match with your other text

4

Thank you, I knew it was a closing tag I was missing somewhere but I could not see which one I kept looking thank you! I know understand the select tag more!

1 Like
5

Cody helped me thank you tho

1 Like
6
  • you don’t have a head element
  • the <label id="name-label">Name<input placeholder="John" id="name" type="text" required> doesn’t have the closing tag
  • ‘select’ element has both, the opening and the closing tag <select></select>
    you have the opening tag in between the label tags and the closing doesn’t exist.
  • what is the purpose of the ‘input’ element in <p><input>What will your project be?</p>?
7

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