Hiya guys, clearly doing something wrong here but I don’t understand what… I’m wanting my radio buttons to be side by side, not one under the other. Can someone help me understand what it is that I’ve done wrong, or what it is I’ve not done? Thank you!!
okay, so as a temporary fix I put Divs between each label. But I tried to add a class etc and put ‘display: block;’ but it still didn’t work. I don’t understand why it wouldn’t work…
Just as an aside, your input selector isn’t working either, because you have a syntax error on the selector before it. You didn’t close the h1, p selector list.
h1, p {
margin: 1em auto;
text-align: center;
form {
width: 60vw;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
}
Personally, I would use the label elements as the container for the input elements. That way, all you have to do is move your radio buttons inside the labels. If you also make the label elements flexbox containers, you can get some easy alignment options (e.g. align-items: center)
I took it out but I’ve just tried again and think I may have done something wrong before because it works now… this is the updated version with ‘divs’ removed and using a class as an alternative.
HTML
<!DOCTYPE html>
<html lang="en"></html>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<title>Survey Form For Free Code Campers</title>
<h1 id="title">Survey Form For Free Code Campers</h1>
<p id="description">Your opinions matter to help our ever developing site!</p>
<form id="survey-form">
<fieldset class="first">
<label id="name-label" class="first">Your Name
</label>
<input placeholder="Your name" id="name" type="text" required class="first"></input>
<label class="first"id="email-label">Your Email
</label>
<input placeholder="Your email" id="email" type="email" class="first" required></input>
<label class="first" id="number-label">Your Age
</label>
<input placeholder="Your age" id="number" type="number" required min="15" max="120" class="first"></input>
</div>
</fieldset>
<fieldset>
<label for="dropdown">Employment Status:</label>
<select id="dropdown">
<option value="">--Please choose an option--</option>
<option value="Full-time">Full-time</option>
<option value="Part-time">Part-time</option>
<option value="Self-employed">Self-employed</option>
<option value="Other">Other</option>
</select>
</fieldset>
<fieldset>
<legend>Would you recomend our FreeCodeCamp site?</legend>
<legend></legend>
<input type="radio" name="opt" value="D" id="opt1" checked class="radio"><label for="opt1">Definitely</label>
<input type="radio" name="opt" value="M" id="opt2" class="radio"><label for="opt2">Maybe</label>
<input type="radio" name="opt" value="N" id="opt3" class="radio"><label for="opt3">No</label>
</fieldset>
</input>
<fieldset>
<div>
<legend><label>What areas could we improve?</label></legend>
<input type="checkbox" name="improve" id="Training" value="Training">
<div><label for="Training">Training</label></div>
<input type="checkbox" name="improve" id="Video Tutorials" value="Video Tutorials"><div><label for="Video Tutorials">Video Tutorials</label></div>
<input type="checkbox" name="improve" id="Guidance Tools" value="Guidance Tools"><div><label for="Guidance Tools">Guidance Tools</label></div>
<input type="checkbox" name="improve" id="Question Support" value="Question Support"><div><label for="Question Support">Question Support</label></div>
</div>
</fieldset>
<fieldset>
<label for="comments">Comment your thoughts on how we can improve:</label>
<div>
<textarea id="comments" name="comments" rows="5" cols="33">Tell us your thoughts...</textarea>
</div>
</fieldset>
<input id="submit" type="submit" value="Submit"/>
</form>
Thank you! I realised after I posted the CSS and updated it. Can you explain what you mean by ’ use the label elements as the container for the input elements’ or give an example. I’m super new to this.
At the minute I’m over the moon I’ve actually made a code that passes haha, thought I was never going to get there. I know it’s super basic, but happy nonetheless.
