Radio buttons and checkboxes do not come to extreme left while performing survey form task

HTML-CSS
1

image
image750×769 11.2 KB 

@import url('https://fonts.googleapis.com/css2?family=BhuTuka+Expanded+One&family=Libre+Baskerville&family=Nanum+Pen+Script&family=Roboto:wght@100&display=swap');
body{
      font-family: 'BhuTuka Expanded One', cursive;

    font-family: 'Libre Baskerville', serif;

    font-family: 'Nanum Pen Script', cursive;

    font-family: 'Roboto', sans-serif;
margin:auto;
padding:20px;
line-height:1.5;
color:#FFFFff;
background-color:#116778
}
div{
  background-color:#1b1b32;
  font-family:tahoma;
  color:#ffffff;
}
input{
  display:inline;
  width:100%;
}
select{
  width:100%;
  font-size:20px;
}
input[type="radio"]{
  margin-right:-200px;
}
input[type="checkbox"]{
  margin-right:-200px;
  margin-left:-80px;
  text-align:left;
}
input[type="submit"]{
  background-color:#11dd44;
  height:3rem;
````<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width",initial-scale="1.0">
<link rel="stylesheet" href="styles.css">
<title>freeCodeCamp Survey Form</title>
</head>
<body>
<h1>freeCodeCamp Survey Form</h1>
<h2>Thank you for taking the time to help us improve the platform </h2>
<div>
  <fieldset>
  <form>
   <label>Name<input type="text" name="naam" required placeholder="Enter your name"></label>
   <label>Email<input type="email" name="mail-id" required placeholder="Enter your Email"></label>
   <label>Age(optional)<input type="number" name="age" max="120" min="13" placeholder="age"></label>
  </form>
<fieldset>
  <p>Which option best describes your current role?</p>
  <select placeholder="Select current role">
    <option name="">Select current role</option>
    <option name="1">Student</option>
    <option name="2">Full Time Job</option>
    <option name="3">Full Time Learner</option>
    <option name="4">Prefer not to say</option>
    <option name="5">other</option>
  </select>
  <p>Would you recommend freeCodeCamp to a friend?</p>
  <label><input type="radio" name="recommend" value="Definitely"/>Definitely</label>
  <label><input type="radio" name="recommend"/>Maybe</label>
  <label><input type="radio" name="recommend"/>Not sure</label>
  <p>What is your favorite feature of freeCodeCamp?</p>
  <select>
    <option name="">Select an option</option>
    <option name="1">Challenges</option>
    <option name="2">Projects</option>
    <option name="3">Community</option>
    <option name="4">Open Source</option>
  </select>
  <p>What would you like to see improved? (Check all that apply)</p>
  <label> <input type="checkbox" name="1">Front-end Projects</label>
  <label><input type="checkbox" name="2">Back-end Projects</label>
  <label><input type="checkbox" name="3">Data Visualization</label>
  <label><input type="checkbox" name="4">Challenges</label>
  <label><input type="checkbox" name="5> Open Source Community</label>
  <label><input type="checkbox" name="6"/>Gitter help rooms</label>
  <label><input type="checkbox" name="7">Videos</label>
  <label><input type="checkbox" name="8">City Meetups</label>
  <label><input type="checkbox" name="9">Wiki</label>
  <label><input type="checkbox" name="10">Forum</label>
  <label><input type="checkbox" name="11">Additional Courses</label>
</fieldset>
<fieldset>
 <label>Any comments or suggestions?</label>
 <br>
 <textarea name="comments" rows="4" cols="65" placeholder="Enter your comment here..."></textarea>
</fieldset>
<fieldset>
  <input type="submit" name="Submit" value="Submit"/>
</fieldset>
</div>
</body>
</html>`
2

do you have a link to your codepen? The code above looks messy in places and I’m not sure if that’s because of a mistake in copy/paste into the form or an actual issue with the code.

3

Here is a link to my code…

Also suggest any other improvements that I can make
Thanks

4

Capture1
Capture11296×771 92.7 KB

I believe this is what you were hoping to achieve?

I took out some of the css and rewrote the html inputs to be as shown (with an id attribute for each one and a label to the right followed by a br tag)

I also removed all the code above and below the the body tag in the html (codepen’s require that) and I added missing closing tags in your html. (you need to close all the tags like div and body)

5

Thanks a lot for the help

1 Like
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.