Tell us what’s happening:
I’m trying to clean up this code a little so it looks nicer, but I’m forgetting how to set the radio inputs to the side of the choices. Any suggestions on how I can make this look nicer? Thank you!
**Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header>
<h1 id="title">Survey Form</h1>
<p id="description"> Help gather user information</p>
<fieldset
</header>
<!--Form start-->
<form id="survey-form">
<div class="form-group-name">
<label id="name-label">Name <input id="name" type="text" placeholder="Enter Full Name"required/></input></label>
</div>
<!--Start of email-->
<div class="form-group">
<label id="email-label">Email<input id="email" type="email" placeholder="Enter Email Address"required/></input>
</div>
<!--Start of age-->
<div class="form-group">
<label id="number-label">Age(optional)<input id="number" type="number" min="12" max="120" placeholder="Age"/></input>
</div>
<!--Start of option rolls-->
<div class="form-group">
<p> Which best describes your employment status?</p>
<select id="dropdown" name="status" class="form-control" required>
<option value="select status">Select Status</option>
<option value="student">Student</option>
<option value="full-time employee">Full-Time Employee</option>
<option value="part-time employee">Part-Time Employee</option>
<option value="unemployeed">Unemployeed</option>
<option value="prefer not to say">Prefer Not to Say</option>
</select>
</div>
<!--Start of radio-->
<div class="form-group">
<p>How well would you say our website is working?</p>
<label><input type="radio" value="amazing" name="user-recommend" class="input-radio" checked/>Amazing!</label>
<label><input type="radio" value="moderate" name="user-recommend" type="radio"class="input-radio"/>Moderate</label>
<label><input type="radio" value="poor" name="user-recommend" class="input-ratio"/>Poor</label>
</div>
<!--Start of favorite feature-->
<div class="form-group">
<p>What is your favorite website feature?</p>
<select name="dropdown" id="role">
<option disabled selected value>Select an option</option>
<option value="photos">Photos</option>
<option value="community">Community</option>
<option value="videos">Videos</option>
<option value="education">Education</option>
</select>
</div>
<!-- start of checkbox -->
<div class="form-group">
<p>What would you like to see improved on our website?</p>
<label> <input type="checkbox" name="user-chosen" value="bugs"
class="input-checkbox"/>Bugs</label>
<label> <input type="checkbox"
name="user-chosen"
value="glitches"
class="input-checkbox">Glitches</<label> <input type="checkbox"
name="user-chosen"
value="group-calls"
class="input-checkbox">Group Calls</label>
<label> <input type="checkbox"
name="user-chosen"
value="user-behavior"
class="input-checkbox">User Behavior</label>
<label> <input type="checkbox"
name="user-chosen"
value="chat-rooms"
class="input-checkbox">Chat Rooms</label>
<label><input type="checkbox"
name="user-chosen"
value="account-collaborations"
class="input-checkbox">Account Collaborations</label>
</div>
<!--Start of input textarea-->
<div class="form-group">
<p>Comments and Suggestions</p>
<textarea id="comments" class="input-textarea" name="comment" placeholder="Enter comments here..."></textarea>
</div>
<!--Start of submit button-->
<div class="form-group"><button type="submit" id="submit" class="submit-button">Submit</button>
</div>
</form>
</div>
</body>
</html>
/* file: styles.css */
Body{
width: 100%;
height: 100vh;
margin: 0;
font-family: Tahoma;
}
h1, p {
margin: 1em auto;
text-align: center;
}
label {
margin: 1em auto;
text-align: center;
}
input {
margin: 10px;
width: 100%;
min-height:2em
}
select {
margin: 0.5rem;
width: 100%;
min-height: 2em;
color: grey;
}
input[type="radio"]{
margin: 1em auto;
display: block;
}
html {
display: block;
}
.header {
display: block;
}
**Your browser information:**
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36
Challenge: Survey Form - Build a Survey Form
Link to the challenge: