Help/Advice 'Build a Survey Form"

[jborms210]

Tell us what’s happening:
Describe your issue in detail here.
I struggling to find solutions on the following user story’s:

User Story #9: If I enter numbers outside the range of the number input, which are defined by the min and max attributes, I will see an HTML5 validation error.

User Story #12: Inside the form element, I can select an option from a dropdown that has a corresponding id="dropdown" .

Any help is appreciated!

Your code so far

<style>
 
 
  
</style>

<main>
  <h1 id="title"> Ice Cream Form </h1>
  <p id="description"> What type of ice cream is the best? </p>
  <div>
  <form id="survey-form">
    <p> <label id="name-label">Name</label></p>
      <input id="name" type="text" placeholder="enter your name" required>
    <p> <label id="email-label">Email</label></p>
      <input id="email" type="email" placeholder="enter your email" required> 
   <p> <label id="number-label">Age (optional)</label></p>
     <input id="number" type="number" placeholder="age">
    </div> 
    <p> How do you prefer your ice cream served?<br>
      <label for="bowl">
  <input id="bowl" value="bowl" type="radio" name="bowl-cone">Bowl
</label>
<label for="cone">
  <input id="cone" value="cone" type="radio" name="bowl-cone">Cone
</label>
    </p>
    <p>What are your favorite toppings?<br>
      <label for="spirnkles">
  <input id="spirnkles" value="sprinkles" type="checkbox" name="toppings">Sprinkles
</label>
<label for="chocalte-swirl">
  <input id="chocalte-swirl" value="chocalte-swirl" type="checkbox" name="toppings">Chocalate Swirl
</label>
      <label for="caramel">
  <input id="caramel" value="caramel" type="checkbox" name="toppings">Caramel
</label>
       <label for="nuts">
  <input id="nuts" value="nuts" type="checkbox" name="toppings">Nuts
         </label>
          <label for="cookies">
  <input id="cookies" value="cookies" type="checkbox" name="toppings">Cookies
</label>
      <br>
      <br>
    <p> Any additional Ice Cream Comments?</p>
    <input type="textarea">
    <br>
    <br>
  <button id="submit" type="submit">Submit</button>
  
    
    </form>
  
  
  
  
  
</main>

Your browser information:

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

Challenge: Build a Survey Form

Link to the challenge:

freeCodeCamp.org

[staranbeer]

Hi! Welcome to the freecodecamp’s community forums!
Instead of posting the code here, can you add a link to your codepen here so its easier for others to help you. Thanks!

[jborms210]

@staranbeer Thanks!

Survey Form

[j519]

Hi @jborms210 ,

I would advise to look at the example for the survey form.

For your question about the min and max attributes, you should have a look at the MDN website, which is a fantastic resource for all things HTML, CSS and JavaScript (HTML attribute: min - HTML: HyperText Markup Language | MDN).

For the dropdown question, try to identify the dropdown in the codepen example provided in the challenge and look for it in MDn again. There you will find example code for teh HTML and CSS.

Hope that helps!

[michaelp91]

For user story #9 you need something like this for your age input:

<input 
  id="number"
  name="age"
  type="number" 
  min="18" 
  max="99" 
  step="1"
  placeholder="Enter Age (optional)"
    />

You need to have the min and max attribute in there.
For user story #12 you need to have a dropdown menu which would look something like this:

<select id="dropdown" placeholder="Select an option" required>
   <option value="option1">Option 1</option>
   <option value="option2">Option 2</option>
   <option value="option3">Option 3</option>
</select>

Hope that helps!

[jborms210]

I’m still getting an error on Story 12, as well as Story’s 13-16. I can’t see what I am missing.

Survey Form

[ricardomg92]

you are putting your form element inside a div and then closing it outside the div.
Correct it and it should solve a lot of the failed tests.

[ILM]

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.

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

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