Tell us what’s happening:
hello good day. I keep getting the uploaded picture as feedback when I run my code but I’m yet to make my radio and checkbox elements to be on the same line. does that mean that the curriculum is 20% done or I’m 20% done with the assignment?
and please how do I resolve the radio and checkbox problem with css?
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basketball Survey Form</title>
<link rel=stylesheet href="styles.css">
</head>
<body>
<h1 id="title"> Basketball Survey Exercise </h1>
<p id="description"> Fill in the form below for a chance to be selected </p>
<form id="survey-form">
<label id="name-label"> Full Name: <input type="text" id="name" placeholder="what are your names" required /></label>
<label id="email-label"> Email: <input id="email" type="email" placeholder="enter a valid email" required/></label>
<label id="number-label"> Age: <input id="number" type="number" min="7" max="22" placeholder="how old are you" required/></label>
<label> Which option best describes your level of play:
<select id="dropdown">
<option value="">(select level)</option>
<option value="1">Novice</option>
<option value="2">Advanced Beginner</option>
<option value="2">Competent</option>
<option value="4">Proficient</option>
<option value="5">Expert</option>
</select>
</label>
<label> Style of play: </label>
<label>
<input type="radio" value="style-of-play" name="play-style" /> Right hand
</label>
<label>
<input type="radio" value="style-of-play" name="play-style"/> Left hand
</label>
<label>
<input type="radio" value="style-of-play" name="play-style"/> Both
</label>
<label>Favourite positions to play? (select all that apply)</label>
<input type="checkbox" value="position-of-play"/> Forward
<input type="checkbox" value="position-of-play"/> Point Guard
<input type="checkbox" value="position-of-play"/> Center
<input type="checkbox" value="position-of-play"/> Small Forward
<label> More info about you: <textarea></textarea>
</label>
<input type="submit" id="submit"/>
</form>
</body>
</html>
/* file: styles.css */
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32;
color: #ffffff;
}
h1, p {
margin: 1em auto;
text-align: center;
}
form {
max-width: 500px;
min-width: 300px;
width: 60vw;
margin: 0 auto;
padding-bottom: 2em;
}
label {
display: block;
margin: 10px;
}
fieldset {
border: 0;
padding: 2rem auto;
}
input, textarea, select {
width: 100%;
margin-top: 10px;
height: 25px;
}
textarea {
width: 250px;
height: 100px
}
input[type='submit'] {
width: 60%;
background-color: #1b1b32;
color: #ffffff;
display: block;
margin: 0 auto;
height: 35px;
font-size: 16px
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.1 Safari/605.1.15
Challenge: Survey Form - Build a Survey Form
Link to the challenge: