Survey Form - Build a Survey Form Min and Max Value Wont Pass

I cant get my min and max values to pass, I’ve been looking everywhere idk what wrong with it.

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
  <title>Eagles Fan Application</title> 
    <h1 id="title"> Eagles Fan Application</h1> 
    <form method="post" action="https://register-demo.freecodecamp.org" id="survey-form">
    </head>
    <body>
  <p id="description"> This is an application to sign up for the Eagles Fan Community</p>
  <fieldset>
  <label id="name-label" for="first-name">First Name:</label><input id="name" name="first-name" required type="text" placeholder="Enter First Name...">
  <label for="last-name">Last Name:</label><input type="insert" id="last-name" name="last-name" required type="text" placeholder="Enter Last Name..." >
  <label id="email-label" for="email"> Email: </label><input type="email" id="email" name="email" required placeholder="Enter Email...">
  <label id="number-label" for="phone-number"> Phone Number:</label><input type="number" name="number" id="number" placeholder="Enter Phone Number...">
  <label id="number-label" for="number"> Age: </label><input type="number" id="number" min="13" max="120" placeholder="Enter An Age...">
  </fieldset>
    <h2 id="title"> Select favorite QB </h2>
    <select type="dropdown" id="dropdown" name="quarterback" requuired>
      <option value="">select one</option>
      <option value="1"> Jalen Hurts</option>
      <option value="2"> Michael Vick</option>
      <option value="3"> Donovan McNabb</option>
      <option value="4"> Jason Kelce(Correct)</option>
      </select>

      <fieldset>
        <label for="profile-picture" id="profile-picture"> Upload a profile picture: <input type="file" id="profile-picture" name="file"></label>
      
      <label for="completion-one"><input id="completion-one" type="radio" name="completion" class="inline" value="radio" /> Completion one</label>
        <label for="completion-two"><input id="completion-two" type="radio" name="completion" class="inline" value="radio" /> Completion two</label>
        </fieldset>

        <label for="bio"> Brief Description
        <textarea id="bio" name="bio" rows="3" cols="30" placeholder="Tell us about your terrible eagles experience"></textarea></label>
        <label for="checkbox">Did you enjoy the survey</label><input type="checkbox" id="checkbox" value="yes" name="checkbox" >Yes</label>
        <input type="checkbox" id="checkbox" value="no" name="checkbox" >No</label>

  <input id="submit" type="submit" value="submit" / >
  </body>
</html>
/* file: styles.css */
body {
  background-color: rgb(5, 90, 5);
  width: 100%;
  height: 100vh;
  margin: 0;
  color: rgb(230,230,230);
  font-family: Tahoma;
  font-size: 16px;

}
p , h1, h2 {
  margin: auto;
  text-align: center;
}
label {
  display: block;
  margin: 0.5em;
}

input,
textarea,
select {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 2em;
}
form {
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 2em;
}

input[type="submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: white;
  border-color: grey;
  min-width: 300px;
}
.QuarterBaack {
   margin: 10px 0 0 0;
  width: 270px;
  min-height: 2em;

}
.inline {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle; 
}
input[type="checkbox"] {
  margin: 1em;
  width: 40%;
  padding: auto;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

The issue is that you have two separate elements which both have id="number".
Your id attributes should always be unique within a single HTML document, so you will have to change the id which you have assigned to your phone number input element.
You will also then have to change the min and max attribute values (in your age input element) to numeric values, as they are currently strings.

2 Likes

Thanks bro ur a genius just fixed it.

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