Radio Buttons not aligned vertically

HTML-CSS
1

Tell us what’s happening:
The radio buttons are aligned horizontally instead of vertically and i assume the default is vertical. I’m checking the code below from w3school and just by copy pasting i get the radio buttons aligned vertically so i dont know what’s wrong with my code or why would it display the radio buttons horizontally.

"""
<!DOCTYPE html>
<html>
<body>

<h1>Display Radio Buttons</h1>

<form action="/action_page.php">
  <p>Please select your gender:</p>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>

  <br>  

  <p>Please select your age:</p>
  <input type="radio" id="age1" name="age" value="30">
  <label for="age1">0 - 30</label><br>
  <input type="radio" id="age2" name="age" value="60">
  <label for="age2">31 - 60</label><br>  
  <input type="radio" id="age3" name="age" value="100">
  <label for="age3">61 - 100</label><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

**Your code so far**

<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<style>


</style>
</head>

<body>

<div>
<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">

<div>
<label id="name-label" for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Enter your name" required>
</div>

<div>
<label id="email-label" for="email">Email</label>
<input type="email" name="email" id="email" placeholder="Enter your email" required>
</div>

<div>
<label id="number-label" for="number">Age</label>
<input type="number" name="number" id="number" min="10" max="99" placeholder="Age">
</div>

<div>
<label for="role">Role</label>
<select id="dropdown">
<option value="student">Student</option>
<option value="job">Full-Time Job</option>
<option value="other">Other</option>
</select>
</div>

<div>
<p>Would you recommend freeCodeCamp to a friend?</p>
<input type="radio" name="group" value="definitely" checked>
<label>Definitely</label>
<input type="radio" name="group" value="maybe">
<label>Maybe</label>
<input type="radio" name="group" value="not-sure">
<label>Not Sure</label>
</div>

</form>
</div>


<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js"></script>
<script src='https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js'></script>
<script id="rendered-js">
// coded by @lasjorg
// eslint-disable-next-line no-unused-vars
const projectName = 'survey-form';
//# sourceURL=pen.js
</script>
	
</body>
</html>        
"""

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:74.0) Gecko/20100101 Firefox/74.0.

Challenge: Build a Survey Form

Link to the challenge:

2

Also i cant seem to figure out how to share the code without it being interpreted by the forum.

3

@hyl3rid, I’ve edited your post for readability. 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.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor ( </> ) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

2 Likes
4

At the end of every single label, there’s a line break <br> and so making every new input ( in this case type Radio) goes to a new line.

<div>
<p>Would you recommend freeCodeCamp to a friend?</p>
<input type="radio" name="group" value="definitely" checked>
<label>Definitely</label><br>
<input type="radio" name="group" value="maybe">
<label>Maybe</label><br>
<input type="radio" name="group" value="not-sure">
<label>Not Sure</label><br>
</div>

image

2 Likes
5

@hyl3rid, I would tell you not to use the <br> element to force spacing or line breaks. Look it up and you’ll see it’s not an accessible choice and not proper use of the element. You could do something like the following.
(Note too how to properly nest the button w/in the label element)

<div>
  <fieldset>
    <legend>Would you recommend freeCodeCamp to a friend?</legend>
    <label for="def"><input id="def" type="radio" name="group" value="definitely" checked>
      Definitely</label>
    <label for="maybe"><input id="maybe" type="radio" name="group" value="maybe">
      Maybe</label>
    <label for="no"><input id="no" type="radio" name="group" value="not-sure">
      Not Sure</label>
  </fieldset>
</div>

and in CSS have;

fieldset {
  display: inline-grid;
  line-height: 1.5;
}

Googling with something like ‘make radio buttons align vertically’ would have given you a few hints and things to try.