Survey Form - Build a Survey Form

Tell us what’s happening:

Describe your issue in detail here.
Good morning, When I run my code I get errors that say I should have an input of number with and ID of number. (I have them)
Also the min max error but I have min of one and a max of three. To me this reads as the number of digits; Someone could be 7, or I had an aunt that lived to 102.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<!-- 16 Steps -->
<html lang="en">

<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
  <!-- 1.You should have a page title in an h1 element with an id of title-->
<h1 id="title">Free Code Camp Survey</h1>
<!-- 2. You should have a short explanation in a p element with an id of description -->
<p id="description">Thank you for taking the time to help us improve the platform</p>
</header>
<!--3. You should have a form element with an id of survey-form  -->
<form id="survey-form" Survey Form>
<!-- 4. Inside the form element, you are required to enter your name in an input field that has an id of name and a type of text -->
<label id="name-label" for="name">Name</label>
<input id="name" type="text" name="name" placeholder="Enter Your Name" required>
<br>
<!-- 5. Inside the form element, you are required to enter your email in an input field that has an id of email  -->
 <!-- 6. If you enter an email that is not formatted correctly, you will see an HTML5 validation error -->
<label id="email-label" for="email">Email:</label>
<input id="email" type="email" name="email" placeholder="Enter your Email" required>
<br>
<!-- 7. Inside the form, you can enter a number in an input field that has an id of number  -->
<label id="number" for="number">Age (Optional): </label>
<!-- 8. The number input should not accept non-numbers, either by preventing you from typing them or by showing an HTML5 validation error (depending on your browser).-->
<!-- 9. If you enter numbers outside the range of the number input, which are defined by the min and max attributes, you will see an HTML5 validation error -->
<input id="number" type="number" min length="1" max length="3" name="age" placeholder="Enter your Age"></input>
<br>
<!-- 10. For the name, email, and number input fields, you can see corresponding label elements in the form, that describe the purpose of each field with the following ids: id="name-label", id="email-label", and id="number-label"
11. For the name, email, and number input fields, you can see placeholder text that gives a description or instructions for each field -->
<!-- 12. Inside the form element, you should have a select dropdown element with an id of dropdown and at least two options to choose from-->
<p>Which option best describes your current role?</p>
<select name="role" id="role" >
  <option disabled selected value>Select current role</option>
  <option value="Student">Student</option>
  <option value="FullTimeJob">Full Time Job</option>
  <option value="FullTimeLearner">Full Time Learner</option>
  <option value="PreferNotToSay">Prefer not to say</option>
  <option value="Other">Other</option>
</select>
<!-- 13. Inside the form element, you can select an option from a group of at least two radio buttons that are grouped using the name attribute  -->
<p>Would you recommend freeCodeCamp to a friend?</p>
<label >
  <input name="recomend" type="radio" value="definitely" Checked>Definitely</input>
  <input name="recomend" type="radio" value="maybe">Maybe</input>
  <input name="recomend" type="radio" value="not-sure">Not Sure</input> 
</label>
<!-- 14. Inside the form element, you can select several fields from a series of checkboxes, each of which must have a value attribute -->
<p>What is your favorite feature of freeCodeCamp?</p>
<select id="most-like" name="most-like" required>
  <option disabled selected value>Select an opton</option>
  <option value="challenges">Challenges</option>
  <option value="projects">Projects</option>
  <option value="community">Community</option>
  <option value="opensource">Open Source</option>
  </select>
<p>What would you like to see improved? (Check all that apply)</p>
<!-- 15. Inside the form element, you are presented with a textarea for additional comments -->
<p>Any comments or suggestions?</p>
<!-- 16. Inside the form element, you are presented with a button with id of submit to submit all the inputs -->


</form>


</body>
</html>
/* file: styles.css */





Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.2.1 Safari/605.1.15

Challenge Information:

Survey Form - Build a Survey Form

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

I edited the template with" Good morning, When I run my code I get errors that say I should have an input of number with and ID of number. (I have them)
Also the min max error but I have min of one and a max of three. To me this reads as the number of digits; Someone could be 7, or I had an aunt that lived to 102."

1 Like

Hello @rforster6 !

With just a quick glance, I noticed that the number id has been listed in other the label and the input. This should only be entered into the input. The for attribute is the label equivalent of the input id.

Input elements are self closing meaning they do not need a second tag to close the element.

As well, id attributes need to be used only once. Every id should be different.

That is what I noticed on a quick glance. You may wish to fix that and see if it solves the issues for you.

Wishing you good progress.

1 Like

Thanks! Also fixed the min max issue. I was using length and it’s not needed.

1 Like

You are very welcome!

Wishing you more good progress!

1 Like