Hi, I’m in the part where we have to build a form, and although the code allows me to pass, it looks horrible. I forgot how to make each element have its own line. I tried using:
name-label {
display:block;
}
in CSS but it does nothing, I’m not sure thats the correct way. Thanks in advance for any help.
<!DOCTYPE html>
<html lang="en">
</head>
<meta charset="UTF-8">
<title>freeCodeCamp Survey Form</title>
<link rel="stylesheet" href="styles.css" />
</head>
<h1 id="title">freeCodeCamp Survey Form</h1>
<p id="description">Thank you for taking the time to help us improve the platform<p>
<body>
<form id="survey-form">
<fieldset>
<label for="name-label" id="name-label" class="styles">Name</label>
<input id="name" name="name" type="text" placeholder="Enter your name" required/>
<label for="email-label" id="email-label">Email</label>
<input id="email" name="email" type="email" placeholder="Enter your mail" required/>
<label for="number-label" id="number-label">Age(optional)</label>
<input id="number" name="number" type="number" placeholder="Age" min="13" max="99" required/>
<label>Which option best describes your current job?</label>
<select id="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>
<p>Would you recommend freeCodeCamp to a friend?</p>
<input name="recommend" type="radio" value="definitely">Definitely
<input name="recommend" type="radio" value="maybe">Maybe
<input name="recommend" type="radio" value="sure">Sure
<label>What is your favorite feature of freeCodeCamp</label>
<select >
<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>What would you like to see improved? (Check all that apply)
<input type="checkbox" value="a"/>Front-end projects</li>
<input type="checkbox" value="b"/>Back-end projects
<input type="checkbox" value="c"/>Data Visualization
<input type="checkbox" value="d"/>Challenges
<input type="checkbox" value="e"/>Open Source Community
<input type="checkbox" value="f"/>Gitter help rooms
<input type="checkbox" value="g"/>Videos
<input type="checkbox" value="h"/>City Meetups
<input type="checkbox" value="i"/>Wiki
<input type="checkbox" value="j"/>Forum
<input type="checkbox" value="k"/>Additional Courses
</label>
<label>Any comments or suggestions?
<textarea placeholder="Enter your comment here">
</textarea>
</label>
<label>
<input id="submit" type="submit"/>
</label>
</fieldset>
</form>
</body>
</html>
I’ve edited your code for readability. Please read the instructions below to learn how to type code into the forum for next time.
Also please post a link to the challenge you are on.
When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
Thank you for the tip, I managed to give it a little more order, but still stumped as I cant make the text stay in front of the inputs. Here is my code:
<!DOCTYPE html>
<html lang="en">
</head>
<meta charset="UTF-8">
<title>freeCodeCamp Survey Form</title>
<link rel="stylesheet" href="styles.css" />
</head>
<h1 id="title">freeCodeCamp Survey Form</h1>
<p id="description">Thank you for taking the time to help us improve the platform<p>
<body>
<form id="survey-form">
<fieldset>
<label for="name-label" id="name-label" class="styles">Name</label>
<input id="name" name="name" type="text" placeholder="Enter your name" required/>
<label for="email-label" id="email-label">Email</label>
<input id="email" name="email" type="email" placeholder="Enter your mail" required/>
<label for="number-label" id="number-label">Age(optional)</label>
<input id="number" name="number" type="number" placeholder="Age" min="13" max="99" required/>
<label>Which option best describes your current job?</label>
<select id="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>
<label for="recommend"><p>Would you recommend freeCodeCamp to a friend?</p>
<input name="recommend" type="radio" value="definitely">Definitely
<input name="recommend" type="radio" value="maybe">Maybe
<input name="recommend" type="radio" value="sure">Sure
</label>
<label>What is your favorite feature of freeCodeCamp</label>
<select>
<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>What would you like to see improved? (Check all that apply)
<input type="checkbox" value="a"/>Front-end projects
<input type="checkbox" value="b"/>Back-end projects
<input type="checkbox" value="c"/>Data Visualization
<input type="checkbox" value="d"/>Challenges
<input type="checkbox" value="e"/>Open Source Community
<input type="checkbox" value="f" />Gitter help rooms
<input type="checkbox" value="g"/>Videos
<input type="checkbox" value="h"/>City Meetups
<input type="checkbox" value="i"/>Wiki
<input type="checkbox" value="j"/>Forum
<input type="checkbox" value="k"/>Additional Courses
</label>
<label>Any comments or suggestions?
<textarea placeholder="Enter your comment here">
</textarea>
</label>
<label>
<input id="submit" type="submit"/>
</label>
</fieldset>
</form>
</body>
</html>
if you can put your code on codepen and share the pen link then this would be helpful for people who want to help you with the layout issue.
Generally, layout can be controlled using something like a flex or a grid layout.
Or you can center everything down the middle of the page if that is what you like or group things together (maybe by nesting an input inside a label for eg) to make them stay together on a line (using display inline-block I believe).
You can use padding or margins to space things out, etc.
