Hi! I am currently doing Web Design Survey form Certification test and I need help with alining checkboxes, readio buttons and their labels. I was referring to lessons 43-47 from Learn HTML Forms by Building a Registration Form course but it didn’t work. I also tried adding display:inline to the css but that didn’t help. Please see my code below:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Survey Form</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<! -- HEADER -->
<header>
<h1 id="title">Exhibition designers'</h1>
<h1 id="title">Survey Form</h1>
<p id="description"><em>Thank you for taking your time to answer our questions</em><p>
</header>
<form>
<fieldset>
<div>
<! -- INFO -->
<label> Name <input id="name" type="text" required></label>
<label> Email <input id="email" type="email" required></label>
<label> Age <input id="number" type="number" min="13" max="120" required></label>
<! -- PROF -->
<label>Where did you get your knowledge from?
<select id="dropdown">
<option value="">Select one</option>
<option value="1">One or more short courses</option>
<option value="2">Bachelor's degree</option>
<option value="3">Master's degree</option>
<option value="4">Working for professionals</option>
<option value="5"> Other</option>
</select>
</label>
<label> How often do you upgrade your skills?
<label><input type="radio" name="skills" calss="inline"> Every month</label>
<label><input type="radio" name="skills" calss="inline"> Every half a year</label>
<label><input type="radio" name="skills" calss="inline"> Every year</label>
<label><input type="radio" name="skills" calss="inline"> As often as possible</label>
</label>
<label>How do you develop your design concept?
<input type="checkbox" id="sketches" name="concept" value="sketches" calss="inline"> Sketches
<input type="checkbox" id="collages" name="concept" value="collages" calss="inline"> Collages
<input type="checkbox" id="mapping" name="concept" value="mapping" calss="inline"> Mapping
<input type="checkbox" id="infographics" name="concept" value="infographics" calss="inline"> Infographics
<input type="checkbox" id="modelmaking" name="concept" value="modelmaking" calss="inline"> Modelmaking
</label>
<label> What do you like about being an exhibition designer?
<textarea name="reason" rows="5" cols="40" placeholder="Write your reasons here"></textarea>
</label>
</div>
</fieldset>
<input type="submit" value="Submit">
</form>
</body>
</html>
CSS
body {
width: 100%;
height: 100vh;
background-color: #F5EDDC;
font-family: "montserrat";
font-size: 14px
}
h1, p {
margin: 1em auto;
text-align: center;
}
header {
margin-top: 20px
}
h1 {
margin-bottom: 0;
margin-top: 0;
font-family: 'Courier New', monospace;
color: #A2B5BB
}
p{
font-weight: bold;
font-size: 14px;
color: #EB1D36;
font-family: "montserrat";
margin-bottom: 10px;
}
form {
width: 50vw;
max-width: 600px;
min-width: 400px;
margin: 0 auto;
padding-bottom: 2em;
}
fieldset {
border: none;
padding: 2rem 0;
}
label {
display: block;
margin-bottom: 20px;
}
input{
display: block;
background-color: #F5EDDC;
border: 0;
}
input[type="number"] {
margin-left: 12px
}
div {
background-color: #CFD2CF;
padding: 48px;
border-radius: 25px;
}
select {
background-color: #F5EDDC;
border: none;
}
input[type="checkbox"] {
display: block;
align-items: center
}
textarea {
border: none;
background-color: #F5EDDC;
}
input[type="submit"] {
display: block;
width: 40%;
margin: 1em auto;
height: 2em;
font-size: 1.1rem;
background-color: #e6495c;
color: white;
min-width: 200px;
box-shadow: 2px 3px 5px #a63846;
border-radius: 10px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #f07382;
}
.inline {
display: inline-block
}
input,
textarea{
margin: 10px 0 0 0;
width: 100%;
min-height: 1em;