Tell us what’s happening:
Why are my checkboxes above my inputs?
I have tried to declare a class inside inputs as “inline2” and place certain properties (equal to the class “inline1”) as well as aligned the radio type with their respective labels, however I can’t get it.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>freeCodeCampSurveyForm</title>
<link rel="stylesheet" href="css\styles.css" />
</head>
<body>
<h1 id="title">freeCodeCampSurveyForm</h1>
<p id="description">Thank you for taking the time to help us improve the platform</p>
<form id="survey-form">
<fieldset>
<label for="name" id="name-label">Name <input id="name" name="first-name" type="text" placeholder="Enter your name" required /></label>
<label for="email" id="email-label">Email <input id="email" name="email" type="email" placeholder="Enter your Email" required /></label>
<label for="number" id="number-label">Age (optional) <input id="number" name="number" type="number" min="13" max="120" placeholder="Age" required /></label>
</fieldset>
<fieldset>
<label for="current-role">Which option best describes your current role?
<select id="dropdown" name="dropdown">
<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 for="recommendation">Would you recommend freeCodeCamp to a friend?
<label for="recommend-decision"><input id="personal-account" value="definitely" type="radio" name="decision" class="inline" checked /> Definitely</label>
<label for="recommend-decision"><input id="business-account" value="maybe" type="radio" name="decision" class="inline" /> Maybe</label>
<label for="recommend-decision"><input id="business-account" value="not-sure" type="radio" name="decision" class="inline" /> Not sure</label>
</label>
</fieldset>
<fieldset>
<label for="favorite-feature">What is your favorite feature of freeCodeCamp?
<select id="dropdown-2" name="dropdown-2">
<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 for="improvements">What would you like to see improved? (Check all that apply)</label>
<input id="front-end-projects" type="checkbox" name="improvements" value="front-end-projects" class="inline2" checked> <label for="front-end-projects">Front-end Projects</label>
<input id="back-end-projects" type="checkbox" name="improvements" value="back-end-projects" class="inline2"> <label for="back-end-projects">Back-end Projects</label>
<input id="data-visualization" type="checkbox" name="improvements" value="data-visualization" class="inline2"> <label for="data-visualization">Data Visualization</label>
<input id="open-source" type="checkbox" name="improvements" value="open-source" class="inline2"> <label for="open-source">Open Source Community</label>
<input id="gitter" type="checkbox" name="improvements" value="gitter" class="inline2"> <label for="gitter">Gitter help rooms</label>
<input id="videos" type="checkbox" name="improvements" value="videos" class="inline2"> <label for="videos">Videos</label>
<input id="city" type="checkbox" name="improvements" value="city" class="inline2"> <label for="city">City Meetups</label>
<input id="wiki" type="checkbox" name="improvements" value="wiki" class="inline2"> <label for="wiki">Wiki</label>
<input id="forum" type="checkbox" name="improvements" value="forum" class="inline2"> <label for="forum">Forum</label>
<input id="additional" type="checkbox" name="improvements" value="additional" class="inline2"> <label for="additional">Additional Courses</label>
</fieldset>
<label for="comments">Any comments or suggestions?
<textarea id="suggestions" name="suggestions" rows="5" cols="30" placeholder="Enter your comment here..."></textarea>
</label>
<input id="submit" type="submit" value="Submit" />
</form>
</body>
</html>
/* file: styles.css */
body {
width: 100%;
height: 100vh;
margin: auto;
background-color: #3d66b8;
color: #f5f6f7;
font-family: Tahoma;
font-size: 20px;
text
}
h1, p {
margin: 1em auto;
text-align: center;
}
form {
width: 60vh;
max-width: 1000px;
min-width: 20em;
margin: auto;
padding-bottom: 1em;
background-color: #021f3f;
}
.inline {
width: unset;
margin-top: 0;
margin-right: 0.5em;
margin-bottom: 0;
margin-left: 0;
vertical-align: middle
}
.inline2 {
width: unset;
margin-top: auto;
margin-right: 0.5em;
margin-bottom: 0;
margin-left: 0;
vertical-align: middle;
}
label {
display: block;
margin: 0.5rem 0;
text-align: c;
}
fieldset {
border: none;
padding: 2rem 0;
border-bottom: 3px none;
}
fieldset:last-of-type {
border-bottom: none;
}
input, textarea, select {
margin: 10px 0 0 0;
width: 98%;
min-height: 2.5em;
}
input[type="submit"] {
display: block;
width: 60%;
margin: 1em auto;
height: 2em;
font-size: 1.1rem;
background-color: #1bc260;
border-color: white;
min-width: 300px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
Challenge Information:
Survey Form - Build a Survey Form
