Survey Form - Build a Survey Form

Hi pls help,I’m currently working on the survey form and almost done but I’m having issue with placing that radio and label element on same line I’ve tried all possible ways but still won’t work

Please post your code or a link to your code pen for eg.

Pls how do I do that

Where did you write your code?
(Did you use codepen for eg or replit? Or is it on your local machine?)

I just created a new topic with the code

Where? On freecodecamp? Please provide the url you did that in so I can understand.

2 Likes

First problem: your link tag

The link tag should be nested inside the html tag, not outside. (And nested inside the head tag as well)
Example here HTML link tag

For the inputs, try making the width “auto;”
As it is possible 100% is the reason it takes a whole line).

I did that but after I edited the width to auto it affects other inputs elements

Reduces other inputs

Hello pls is there anyway I can solve this I’m really confused I’ve been on this Since yesterday :pleading_face::cry:

If you want to target a specific input element then use an id attribute or a class to do it. Then you can set the width as needed for different parts of the html.

Tell us what’s happening:
Describe your issue in detail here.

   **Your code so far**
/* file: index.html */
<link rel="stylesheet" href="styles.css">
<!DOCTYPE html>
<html>
 <body lang="en">
   <div class="container">
 <head>
<h1 id="title" class="center">freeCodeCamp Survey Form</h1>
 <p id="drescription" class="center">Thank you for taking the time to help us improve the plattorm</p>
 </head>
<fieldset>
<form id="survey form">
<div id="name-label">Name</div>
<input id="name" placeholder="Enter your name" required/>
<div id="email-label">Email</div>
<input id="email" placeholder="Enter your email" required/>
<div id="number-label" min="13" max="120">Age</div>
<input id="age"/ placeholder="Age" required>
<div id=" current-role">Which option best describes your current role?</div>
 </label><select id="dropdown"/><option disabled>select an option</option><option>student</option><option>Full Time Job</option><option>Full Time Learner</option><option>Prefer not to say</option><option>Others</option>
 </select>
<div>Would you recommend freeCodeCamp to a friend?</div>
  <label>Definitely</label>
  <input type="radio" name="recommend">
  <label>Maybe</label>
  <input type="radio" name="recommend">
  <label>Not sure</label>
  <input type="radio" name="recommend">
  <div>What is your favorite feature of freeCodeCamp?</div>
    <select id="dropdown" required><option disabled>select an option</option><option>Challenges</option><option>Projects</option><option>Community</option><option>Open Source</option></select>
<div>What would you like to see improved?</div>
<input type="checkbox"><label>front-end projects</label><input type="checkbox" ><label>Back-end projects</label><input type="checkbox"><label>Data Visualization</label><input type="checkbox"><label>Challenges</label><input type="checkbox"><label>Open Source Community</label><input type="checkbox"><label>Gitter help rooms</label><Input type="checkbox"><label>Videos</label><input type="checkbox"><label>city Meetups</label><input type="checkbox"><label>Wiki</label><input type="checkbox"><label>Forum</label><input type="checkbox"><label>Additional Courses</label></br>
    <div>Any comments or suggestions?<div>
      <textarea type="text" placeholder="Enter your comments here..."></textarea></h3>
<input type="submit"/>
       </form>
     </fieldset>
     </div>
 </body>
 </html>
/* file: styles.css */
body{ background-color: #342D7E;margin-top: 15px; margin-bottom: 500px; margin-right: 20px; margin-left: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 80px; height: 30%;}
h1{text-align: center; font-size: 17px; font-weight: 400; font-family: sans-serif; color: #f8f0ff;margin-bottom: 0; }
p{ font-size: 12px; font-family: sans-serif; font-style: oblique; font-weight: 200; color: #f8f0ff;text-align: center; margin-bottom: 10px; margin-top: auto;}
fieldset{ background-color: #050A30;   border: none; font-weight: 500; padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 20px; margin-bottom: 20px;}
form{ color: #f8f0E8; font-family: system-ui; margin-bottom: 1px;}
label{ padding-bottom: 3px; font-size: 11px; font-weight: 350;}
input{ width: 100%; margin-bottom: 15px; height: 20px; border-radius: 3px; color: #000000;}
textarea{ width: 100%; height: 55px; border-radius: 2px; margin-top: 2px;}
select{ width: 100%; ;color: black; height: 20px;border-radius: 3px; margin-bottom: 14px;}
div{ font-family: sans-serif; font-size: 12px; font-weight: 700; margin-top: 0; margin-bottom: 4px;}
input[type="radio"]{height: 1.2em; float: none; display: inline-block; vertical-align: middle;}
input[type="checkbox"]{ height: 1.2em;}
input[type="submit"]{ font-size: 10px; background-color: #2E8B57; border-radius: none; height: 25px; margin-top: 0.5vh; color: #ffffff; border-color: #2E8B57;}
   **Your browser information:**

User Agent is: Mozilla/5.0 (iPhone; CPU iPhone OS 15_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6.1 Mobile/15E148 Safari/604.1

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

put your input tag inside the label tag

What next after that?

Learning to describe the bugs or issues you’re facing is a great skill to have in a developer, it may seem hard at first, but you should at least provide a brief summary of what you are trying to accomplish and what’s the error that shows up when you try to run your code.

So can you tell us a bit more about the specific problem you’re facing?

I’m trying to place the label and radio input on the same line

Hey I think you need to run your code through an HTML validator which checks if your HTML code is valid.

It looks like you have a lot of minor issues in your code.

To put the label and input radio together, you need to group each label and radio into a div so the structure looks something like this.

<div>
    <lable>
    <input> type="radio" /
</div>

which will allow you to put them each label and input on the same line.

  1. The link element is supposed to be inside of the head but yours is above the html tag.
  1. You started your head tag after the body tag.

there are other minor issue too. You should slowly get rid of them before you go any further with the challenges.

please don’t create multiple topics for the same question, I have merged your two topics

Hi I updated the minor issues but till don’t know what to do about the label and readio input on same line

1 Like