Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening: My h1 element needs an ID with the attribute title but i have included the ID properly and it is still giving me an error. i don’t know what to do now so please help me

Your code so far

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title id="title">Survey Form</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div class="container">
    <h1 id="title">Survey Form</h1>
    <p id="description">Please fill out the survey form.
    <form id="survey-form">
      <fieldset>
        <label for="name" id="name-label">Enter Your Name:</label>
        <input id="name" name="name" type="text" placeholder="Please fill out your full name" required />
      </fieldset>
      <fieldset>
        <label for="email" id="email-label">Please fill out your email:</label>
        <input id="email" type="email" placeholder="Please fill out your email" required />
      </fieldset>
      <fieldset>
        <label for="number" id="number-label">Enter your age (optional):</label>
        <input id="number" type="number" min="14" max="120" placeholder="Please fill out your age (optional)" />
      </fieldset>
      <fieldset>
        <label for="dropdown">What is the best coding language for beginners?</label>
        <select id="dropdown" name="dropdown">
          <option value="">(Select one)</option>
          <option value="1">HTML</option>
          <option value="2">JavaScript</option>
          <option value="3">Python</option>
          <option value="4">Other</option>
        </select>
      </fieldset>
      <fieldset>
        <legend>Are you interested in coding?</legend>
        <label for="yes" class="inline">
          <input id="yes-button" type="radio" name="response" value="yes" checked/>Yes
        </label>
        <label for="no" class="inline">
          <input id="no-button" type="radio" name="response" value="no"/>No
        </label>
        <label for="maybe" class="inline">
          <input id="maybe-button" type="radio" name="response" value="maybe"/>Maybe
        </label>
      </fieldset>
      <fieldset>
        <label for="thoughts">Provide your thoughts on the survey:</label>
        <textarea id="thoughts" name="thoughts" rows="3" placeholder="I like coding on the beach..."></textarea>
      </fieldset>
      <fieldset>
        <input class="inline" id="ethical-values" type="checkbox" required name="ethical-values" value="agree" />
        <label for="ethical-values" class="inline">I agree to uphold all ethical coding practices</label>
      </fieldset>
      <fieldset>
        <input class="inline" id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" value="accept" />
        <label for="terms-and-conditions" class="inline">
          I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
        </label>
      </fieldset>
      <input type="submit" id="submit" value="Submit">
    </form>
  </div>
</body>
</html>

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

2

I can’t see your code so unfortunately I can’t help right this minute.

Be sure to wrap it in a code block. These three symbols above and below your code will help: ```

Happy learning. :slight_smile:

1 Like
3

Hi
I have edited your code to include your code.

1 Like
4

In title id attribute add value “survey form”

5

Hello. I see the problem now. You put the id attribute on an element in the head already and that’s why there is a bug. Since there were two elements with the same id, it decided to grab the first matching element with the id of “title” aka the one in the head.

Generally speaking, you never put an id attribute on any element in the head. If you get rid of that attribute, your code will work properly.

Happy learning. :slight_smile:

6

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