Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

When I test it says that the form element doesn’t have an id of survey-form, even though it does.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <title id = "survey-form">Survey Form</title>
    <link rel = "stylesheet" href = "styles.css">
  </head>
  <body>
    <h1 id = "title" id ="">Survery Form</h1>
    <p id = "description">Election Intent Survery Form for the Borough of Hackney<p>
    <form method="post" action='https://register-demo.freecodecamp.org' id="survey-form">
      <fieldset>
        <legend>Personal Details*</legend>
        <label id = "name-label" for = "name">Name: <input type = "text" id = "name" placeholder = "eg. John Smith"required></label>
        <label for = "email" id = "email-label">Email:<input type = "email" id = "email" placeholder="eg. johnsmith@gmail.com"required></label>
        <label for = "number" id= "number-label">Age:<input type = "number" min = "18" max = "120" id = "number" placeholder = "eg. 32"></label>
      </fieldset>
      <fieldset>
        <legend>Voting Data</legend>
        <select id="dropdown">
          <option>Select the age range you apply to</option>
          <option value = "">18 - 25</option>
          <option value = "1">26 - 35</option>
          <option value = "2">36 - 45</option>
          <option value = "3">46 - 55</option>
          <option value = "4">56 - 65</option>
          <option value = "5">66+</option>
        </select>
        <p>Will you be voting?</p>
        <label for = "radio-yes"><input type = "radio" id= "radio-yes" value="1" name = "voting-status">Yes<label>
          <label for = "radio-no"><input type = "radio" id= "radio-no"value="2" name = "voting-status">No<label>
        <p>Which are the strongest options for you?</p>
        <label class = "check"><input type = "checkbox" value = "1">Conservative</label>
        <label class = "check"><input type = "checkbox" value = "2">Labour</label>
        <label class = "check"><input type = "checkbox" value = "3">Lib Dem</label>
        <label class = "check"><input type = "checkbox" value = "3">Reform</label>
        <p>Please provide a reason for your vote/lack of vote:</p>
        <textarea></textarea>
      </fieldset>
      <input id = "submit" type = "submit">
    </form>
    <p>*This information if for futher contact and will not be displayed to the public.</p>
    
  </body>
</html>

/* file: styles.css */
body{
  background-color:hsl(1,0%,10%);
  color:gray;
  font-family:helvetica;
}
input, select, textarea{
  background-color:hsl(2,0%,5%);
  border-color:hsl(2,0%,5%);
  color:white;
  width:100%;
}
img{
  width:100px;
}
h1, p{
  display:block;
  text-align:center;
}
input[type = "checkbox"]{
  width:unset;
}
.check{
  margin:100px;
}
input[type = "radio"]{
  width:unset;
  margin-left:100px;
}

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

2

you can’t reuse id, make sure you have only one element with a certain id value

3

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