Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

I have completed my code. There is 1 error code that I don’t know how to fix. ‘You should have an h1 element with an id of title.’ My code is

Survey Form

What am I doing wrong?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'>
    <title id='title'>Survey Form</title>
      <link rel='stylesheet' href='styles.css'>
    </head>
    <body>
      <h1 id='title'> Survey Form </h1>
      <p id='description'>Please fill out the survey form below.</p>
        <form id='survey-form'>
          <label for='name' id='name-label'>Name
            </label>
            <input id='name' type='text' placeholder='Enter Your Name' required>
            <label for='email' id='email-label'>Email
              </label>
              <input id='email' type='email' placeholder='Enter Your Email' required>
              <label for='number' id='number-label'>Age
                </label>
                <input id='number' type='number' min='13' max='100' placeholder='Enter Your Age'>
                <label for='dropdown'>Favorite Color:
                  </label>
                  <select id='dropdown'>
                    <option value='select'>Select</option>
                    <option value='pink'>Pink</option>
                    <option value='blue'>Blue</option>
                    <option value='purple'>Purple</option>
                    <option value='green'>Green</option>
                    <option value='other'>Other</option>
                    </select>
                    <p>Gender:
                      </p>
                      <label>Male
                        <input type='radio' name='gender' value='male'>
                        </label>
                        <label>Female
                          <input type='radio' name='gender' value='female'>
                          </label>
                          <p>Preferred Pets:</p>
                            <label>Cats
                              <input type='checkbox' name='preferred-pets' value='cats'>
                              </label>
                              <label>Dogs
                                <input type='checkbox' name='preferred-pets' value='dogs'>
                                </label>
                                <label>Birds
                                  <input type='checkbox' name='preferred-pets' value='birds'>
                                  </label>
                                  <label>Reptiles
                                    <input type='checkbox' name='preferred-pets' value='reptiles'>
                                    </label>
                            <label for='comments'>
                              Additional Comments:
                              </label>
<textarea id='comments' name='comments' placeholder='Enter your comments here...'>
</textarea>
<button type='submit' id='submit'>
  Submit
  </button>
          </form>
      </body>
</html>

/* file: styles.css */
body{font-family: Arial, sans-serif;
margin: 20px;
background-color: #ffC0CB}
h1{color:#333}
#survey-form{background-color:#fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}
label{display:block;
margin-top:10px;}
input, select, textarea, button{width: 100%; 
padding: 10px;
margin-top:5px;
border-radius: 3px;
border: 1px solid #ccc;}
button{ background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;}
button:hover{background-color:#45a049;}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36 Edg/126.0.0.0

Challenge Information:

Survey Form - Build a Survey Form

1 Like
2

Welcome to the community!

You already have an ID attribute of that value in your title element. Change the value of the ID attribute in the title element (not the h1 element) to another unique value and see if that passes.

2 Likes