Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:
I cant understand how to do
Your #name should be a descendant of #survey-form .
Your #email should be a descendant of #survey-form.
You should have an input element with an id of number.
Your #number should be a descendant of #survey-form.
Your #number should have a type of number.
Your #number should have a min attribute with a numeric value.
Your #number should have a max attribute with a numeric value.
can anyone help me out

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <header>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css" />
    <title>freeCodeCamp Survey Form</title>
    </header>
    <body>
      <h1 id="title">freeCodeCamp Survey Form</h1>
      <p id="description">Thank you for taking the time to help us improve the platform</p>
      <form id="survey-form" class="survey-form"></form>
      <fieldset>
         <label id="name-label">Name<input id="name" type="text" placeholder="Enter your Name" required /></label>
         <label id="email-label">Email<input id="email" type="email" placeholder="Enter your Email" required /></label>
        <label id="number-label">Age <small>(optional)</small> <input id="age" type="number" min="10" max="99" placeholder="Age" /  ></label>
           <label for="referrer">Which option best describes your current role?<select id="referrer" name="referrer"></label>
             <option value="">Select current role</option>
             <option value="1">Student</option>
             <option value="2">Full Time Job</option>
             <option value="3">Full Time Learner</option>
             <option value="4">Prefer not to say</option>
             <option value="5">Other</option></select>
           </fieldset>
           <fieldset>
             <label>Would you recommend freeCodeCamp to a friend?</label>
                    <label for="definetly"><input id="definetly" type="radio" name="attribute" class="inline" />Definetly</label>
                                      <label for=maybe"><input id="maybe" type="radio" name="attribute" class="inline" />Maybe</label>
                                                        <label for="not sure"><input id="not sure" type="radio" name="attribute" class="inline" />Not sure</label>
             </fieldset>
         <fieldset>
           <label for="option">What is your favorite feature of freeCodeCamp?<select id="option" name="option"></label>
            <option value="">Select an option</option>
             <option value="1">Challenges</option>
              <option value="2">Projects</option>
               <option value="3">Community</option>
                        <option value="3">Open Source</option>
            </fieldset>
                <fieldset>          <label>What would you like to see improved? (Check all that apply)
</label></fieldset>
              

      


/* file: styles.css */
body{
  background-image: url(https://d.newsweek.com/en/full/2136411/easter-island-statue.jpg?w=1600&h=1200&q=88&f=cb7c30b827cfbfb25e9ab51a5f40dd0c);    background-repeat: no-repeat;
  background-size: 100% 100%; background-attachment: fixed;
  width: 100%;
  height: 100%;
  margin: 0;
  color: #1b1b32;
  font-family: sarif;
  font-size: 18px;
}
h1,p{
    margin: 1em auto;
    text-align: center;
  }
  h1{
    color: #F0FFF0	;
    font-family: Georgia;
  }
  p{
      color: #F0FFF0	;
      font-family: Georgia;
    }
  form{
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 1em;
  
 }
fieldset {
  border: none;
  padding: 0rem 2;
  background-color: #ADD8E6;
}
label{
  display: block;
  margin: 8 auto;
}
input,
select,
textarea {
  width: 100%;
  margin: 0.1em 0 1em 0;
  min-height: 1em;
  font-size: 0.67em;
}
.inline {
  width: unset;
  margin: -5 0.5em 0 0;
  vertical-align: middle;
  min-height: 3em;
}

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

Hello.

  • Your #name should be a descendant of #survey-form .
  • Your #email should be a descendant of #survey-form .
  • Your #number should be a descendant of #survey-form .

You close the form in the first line. You must close it at the end.

  • You should have an input element with an id of number .

Do it. You need an input whit this id.

  • Your #number should have a min attribute with a numeric value.
  • Your #number should have a max attribute with a numeric value.

In your input id=number, you must use the attributes min and max
Example: (input with min=10 and max=20)
<input min="10" max="20">write something

Check your code.

Have a nice day. Grets.

1 Like
3

i did everything but still no luck(((.

4

Hello.

And how is your code now?

Grets.

5

If you see my code above, i had already written everything according to ur first cooment.
But its still causing same problems abput survey-form

6

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