SURVEY FORM (If I enter an email that is not formatted correctly, I will see an HTML5 validation error. AND If I enter numbers outside the range of the number input, I will see an HTML5 validation error.')

1

Problem:

  1. User Story #6: If I enter an email that is not formatted correctly, I will see an HTML5 validation error.
  2. 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.

Code So Far:

HTML

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<h1 id="title">Survey Form</h1>
<p id="description">Thank You For Participating In This Survey</p>
<form id="survey-form">
  <div class="form-group">
    <label id="name-label" foe="name">Name</label>
  <input id="name"
         name="name"
         type="text"
         placeholder="enter your name here"
         required>
  </div>
  <form id="survey-form">
  <div class="form-group">
    <label id="email-label" for="email">Email</label>
  <input id="email"
         name="email"
         type="text"
         min="10"
         max="99"
         placeholder="enter your email here"
         required>
  </div>
  <div class="form-group">
    <label id="number-label" for="age">Age</label>
  <input id="number"
         name="age"
         type="number"
         placeholder="enter your age here"
         >
  </div>
  <label for="food">Choose an option:</label>
  <select id="dropdown" name="food">
    <option value="macnchesse">MacnCheese</option>
    <option value="pizza">pizza</option>
    <option value="french-fries">french fries</option>
    <option value="bacon">Bacon</option>
  </select>
<label for="mayonnaise"> 
  <input id="mayonnaise" value="mayonnaise" type="radio" name="Sauce">mayonnaise 
</label>
    <label for="ketchup"> 
  <input id="ketchup" value="ketchup" type="radio" name="Sauce">ketchup 
</label>
    <label for="Pepperoni"> 
  <input id="Pepperoni" value="Pepperoni" type="checkbox" name="Toppings">Pepperoni 
</label>
    <label for="Bacon"> 
  <input id="Bacon" value="Bacon" type="checkbox" name="Toppings">Bacon 
</label>
    <label for="Extra-cheese"> 
  <input id="Extra-cheese" value="Extra-cheese" type="checkbox" name="Toppings">Extra cheese 
</label>
    <br>
    <textarea id="t" name="t" placeholder="your comments"></textarea>
    <input id="submit" type="submit">

CSS

#title{
color: blue;
  font: Arial;
  font-size: 55px;
  background-color: orange;
  text-align:center;
}
body{
  align-items: center;
  background-color: yellow;
  text-align:center;
}
#description{
  background-color: yellow;
  font-size: 20px;
  text-align:center;
}

Please Help!

6 Likes
2

Hi there @aprameya0505,

Good job so far! You´re almost there, just some small details left.

User Story #6: Here you´ve specified the <input> to be type=“text”. Try type=“email” instead. This ensures email addresses that are not formatted correctly will be rejected. Also, you´ve specified min and max values here. My guess is that you meant to insert this in the age input.

User Story #9: Insert the min and max attributes from the email input field here instead. Now everything should work fine :wink:

Just in case, here you can check out my version of your code.

3 Likes
3

thank you so much! :grin:

1 Like