Survey Form - Build a Survey Form

HTML-CSS
1

Hello,

i started with the survey the first project for the certification. But i get error messages. It is about the the inputs needs to be in the form wich they are.

Here are the error messages. I tried to put form elemnts above every input or lets say block but it not working.

  • Failed: You should have at least two radio buttons that are descendants of #survey-form.

You should have at least two input elements with a type of checkbox (checkboxes) that are descendants of #survey-form.

  • Failed: All your checkboxes inside #survey-form should have a value attribute and value.

You should have at least one textarea element that is a descendant of #survey-form.

Tell us what’s happening:*
Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
 <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>

<body>
<h1 id="title">Survey</h1>
<h3>
<p id="description"> In this survey we find out what is the best way to learn Frontend-Devolpment </p>
</h3>

<body>
<fieldset>

<form id="survey-form">
  <p>
<label id="name-label">enter your name:
<input id="name" type="text" required placeholder="David" />       
</label>


<br>

<label id="email-label">email:
<input id="email" type="email" placeholder="david@email.com" required/>
</label> 
<br>
<label id="number-label">Number
<input id="number" type="number" min="2" max="6" placeholder="2">
<br>

<label for="dropdown">Where did you learn to code:</label>

<select id="dropdown">
  <option value="internet">internet</option>
  <option value="freecodecamp">freecodecamp</option>
  <option value="bootcamp">bootcamp</option>
  <option value="school">school</option>
</select>
<br> 
</fieldset>


<fieldset>
<p> favourite language: </p>
 <input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label> 


</fieldset>
<fieldset> <p>level of coding</p>

  <label> newbie
    <input id="checkbox" type="checkbox" value="newbie"/>
    <label> intermediate
    <input id="checkbox" type="checkbox" value="intermediate"/>
  </label>
  <label> pro
    <input id="checkbox" type="checkbox" value="pro"/>
  </label>

  </fieldset>

  <fieldset>
    <label></label> 
    <button id="submit" type="submit">Submit</button>
     <button>Delete</button>
    </fieldset>
    <fieldset>
write down your thaughts
      <textarea></textarea>
      </body>

</form>
</body>

</html> 




/* file: styles.css */
h1{
  text-align: center;
 
  
 input{
   margin: 2px;
 }

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:105.0) Gecko/20100101 Firefox/105.0

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

1 Like
2

Hello @davidino

First, you are doing great!! No worries. Take a break and back fresh to your project. It always helps.

Second you cannot have 2 elements in a HTML document with the same id attribute, this is case with your checkboxes.

Third, don’t use <br> to style your HTML, use CSS for that. br elements are not used much actually.

Another thing… I think you have an extra open tag <fieldset> at the end of your code and it is always better wrap text whitin p, label or legend elements.

I hope this helps. Let us know if it is working.
Happy coding!!

1 Like
3

Hi!
I’d try running your html though this validator. just copy and paste your html code into the text box and press ‘check’. I’m seeing some syntax errors such as unclosed elements and elements nested inside each other which should not be.

In your css here you are missing a bracket between the two css selectors which will stop the css applying to your html correctly.

h1{
  text-align: center;
 
  
 input{
   margin: 2px;
 }
2 Likes
4

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