Build a Survey Form: HTML5 validation errors, and other things I'm getting wrong!

1

Hi there,
I am currently doing the survey form for web development project. I’m not sure how to do the HTML5 Validation error. when i run tests on the codepen it says I need to do it but i dont know how! It also says i need placeholder text which i have done! it says my radio buttons dont have values but they do, and im also unsure of how to make checkboxes - i cant remember.

I’ll paste my HTML code below. Please help!!!

HTML CODE:

<h1 id="title"> Homer</h1>

<p id="description">Thank you for participating in this short survey about Homer</p>

<form id="survey-form">
  <label id="name-label" for="name">
  <p> Name:</p>
  </label>

   <input id="name" type="text" placeholder ="Enter your name" required>
  
 <label id="email-label" for="email">
  <p> Email:</p>
  </label>
  
   <input id="email" type="text" placeholder ="Enter your email" required>
  
 <label id="number-label" for="number">
  <p> Age :</p>
  </label>
  
   <input id="Age" type="number" placeholder ="Enter your age" min="12" max="50" required>

  <p>Which of Homer's two epic poems is your favourite?</p>
  
  <select id="dropdown">
    
    <option value="default"> Neither</option>
    <option value="Iliad"> The Iliad</option>
    <option value="Odyssey"> The Odyssey</option>
    
  </select>
  
  <p> Which of the characters do you like the most?</p>
  
  <input type="radio" name="odysseus" value="option-one"> Odysseus</input>

  <input type="radio" name="achilles" value="option-two"> Achilles</input>

  <input type="radio" name="patroclus" value="option-three"> Patroclus</input>

  <input type="radio" name="Zeus" value="option-four"> Zeus</input>

  <input type="radio" name="Thetis" value="option-five"> Thetis</input>

  <input type="radio" name="other " value="option-six"> Other</input>

<p>If you chose 'Other', please tell us your option below:</p>

<textarea id="comments" rows="4"> Tell us here</textarea>
  <br>
<input id="submit" type="submit" value="submit"></submit>
  

</form>

CSS CODE:

body{
  text-align: center;
}
2

I’m not sure how to paste my HTML code it keeps coming up like above - any help would be greatly appreciated I’m so lost! :blush:

3

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

Please use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks are not single quotes.

markdown_Forums

1 Like
4

you need to use the email and number input types

<input id="email" type="email" placeholder ="Enter your email" required>

for the checkboxes read this again https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes

1 Like
5

Thank you so much! I’ll do this next time

6

This makes much more sense, thank you!

1 Like