Survey Form - Build a Survey Form

Hello, so as you can see in the code below I have the test on freecodecamp.org but the problem is that I am not able to do these things :

  • even with the min and max, I can still write a number below or over it

  • I can’t put the text in the middle just like the preview ( ex : put name on one line then the answer on the other etc)

  • I can’t seem to figure out how to put the padding between every answer

    **Your code so far**
    
/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Surveyt Form</title>
  <link rel="stylesheet" href="styles.css"/>
</head>
<h1 id="title">freeCodeCamp Survey Form</h1>
<p id="description"><em>Thank you for taking the time to help us improve the platform</em></p>

<body>
<form id="survey-form" class="survey-form">
<fieldset>
  <label id="name-label">Name: <input required id="name" type="text" placeholder="Enter your name"></label>
  <label id="email-label">Email: <input required id="email" type="email" placeholder="Enter your email"></label>
  <label id="number-label">Age
(optional): <input required id="number" type="number" min="10" max="150" placeholder="Age"></label>
<label name="dropdown">Which option best describes your current role?
        <select id="dropdown" required>
          <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>
      </label>
</fieldset>
<fieldset>
<label id="radio" name="radio">Would you recommend freeCodeCamp to a friend?
<label><input value="definitely" name="radio" type="radio" id="radio"> Definitely</label>
<label><input value="maybe" name="radio" type="radio" id="radio"> Maybe</label>
<label><input value="not-sure" name="radio" type="radio" id="radio"> Not sure
</label>

<label  name="dropdown">What is your favorite feature of freeCodeCamp?

        <select id="dropdown" required>
          <option value="">(Select an option)</option>
          <option value="1">Challenges</option>
          <option value="2">Projects</option>
          <option value="3">Community</option>
          <option value="4">Open Source</option>
        </select>
      </label>
</fieldset>
<fieldset>

<label id="checkbox" name="checkbox">What would you like to see improved? <p> (Check all that apply)</p>
<label><input value="definitely" name="checkbox" type="checkbox" id="radio"> Front-end Projects</label>
<label><input value="maybe" name="checkbox" type="checkbox" id="radio"> Back-end Projects</label>
<label><input value="not-sure" name="checkbox" type="checkbox" id="radio"> Data Visualization </label>
</label>
<label><input value="definitely" name="checkbox" type="checkbox" id="radio"> Challenges</label>
<label><input value="maybe" name="checkbox" type="checkbox" id="radio"> Open Source Community</label>
<label><input value="not-sure" name="checkbox" type="checkbox" id="radio"> Gitter help rooms </label>
<label><input value="definitely" name="checkbox" type="checkbox" id="radio"> Videos</label>
<label><input value="maybe" name="checkbox" type="checkbox" id="radio"> City Meetups</label>
      </label>

<label>Any comments or suggestions?
  <textarea placeholder="Enter your comment here..." id="comment" rows="5" cols="60"></textarea>
  </label> 

<button type="submit" id="submit">Submit</button>
</fieldset>
</form>
</body>
</html>
/* file: styles.css */
h1,p {
text-align:center;
font-family:roboto;
}

body{
background-color : rgba(127,55,255,0.2);
display:block;
}

h1 {
  padding-top: 20px;
}

survey-form{
display: inline-block;
}



form {
width:70%
margin: 0 auto;
text-align:center;
display:inline-block;
background-color: rgba(127,55,255,0.4);
padding: 1 em;
border : 1px solid ;
}
  **Your browser information:**

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

  • Both min and max validation only is checked when the form submission happens or when using the step buttons. They do not limit the keyboard input. MDN: Constraint validation.

  • You are missing a semicolon after the width property in the form selector.

  • If you want each label/input on its own line you can make the label a block-level element (e.g. display: block)

  • If you want the input below the label text you can force it to a new line by giving it 100% width.

  • If you want vertical space between the elements you can given the label a bottom margin.

  • text-align: center is likely not how you want to center the form elements.


You may also want to revisit this project again after you have learned about flexbox and grid. As they both open up some new layout possibilities.

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