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: