Question 257428 in Html Question posted in
Some basic documentation can be found here.

Html – is there a way to put my radiobox and label in the same line because it's not working for me?

Here are the problems:

  1. the "definitely" radiobox and label are not on the same line i tried everything and it still didn’t work

  2. the check box overlaps with the label as you can see on the screenshot when minimized

  3. the background picture is zoomed, the left output on the screenshot is perfect i want that output
    where did i go wrong?

body {
  box-sizing: border-box;
  background-image: linear-gradient( 115deg, rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7)), url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-white);
  margin: 0;
}

input {
  display: block;
  margin: 2em;
  width: 90%;
}

.labelr {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}

select {
  margin: 2em;
  display: block;
  width: 90%;
}

.radio {
  border: none;
  padding: 2em;
}

form {
  width: 70vw;
  margin: auto auto;
  background-color: rgba(27, 27, 50, 0.8);
  max-width: 800px;
  min-width: 300px;
  padding-top: 2em;
  border-radius: 0.3rem;
  padding-bottom: 2em;
}

label {
  font-family: 'Poppins', sans-serif;
  color: white;
  margin: 2em;
  font-size: 1.2rem;
  font-weight: 400;
}

h1 {
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}

p {
  font-size: 1.125rem;
}

input,
button,
select,
textarea {
  margin: ;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.check-option {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  /* Reduce the spacing between options */
}

label {
  margin-right: -200px;
  padding-right: 5px;
}

input[type="checkbox"] {
  margin-left: 0;
}

.bio {
  display: block;
}

textarea {
  margin: 2.5em;
  margin-top: -20px;
}

.submit-button {
  display: block;
  width: 90%;
  padding: 1.5rem;
  background: #37af65;
  color: white: border-radius: 2px;
  cursor: pointer;
  margin-bottom: em;
}
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">

</head>

<body>
  <h1 id="title">freeCodeCamp Survey Form</h1>
  <p id="description">Thank you for taking the time to help us improve the platform</p>
  <form id="survey-form">
    <label id="name-label" for="name"> Name</label>
    <input required id="name" type="text" placeholder="enter your name" />
    <label id="email-label" for="email">Email</label>
    <input required id="email" type="email" placeholder="enter your email" />
    <label id="number-label">Age(optional)</label>
    <input required id="number" type="number" min="18" max="120" placeholder="age" />
    <label>Which option best describes your current role?</label>
    <select id="dropdown">
      <option>
        student
      </option>
      <option>
        Fulltime Job
      </option>
      <option>
        Full Time Learner
      </option>
      <option>
        Prefer not to say
      </option>
      <option>
      </option>
    </select>
    <fieldset class="radio">
      <div></div>
      <label>
  Would you recommend freeCodeCamp to a friend?
</label>
      <br></br>
      <div class="radio-option">
        <input type="radio" name="radio" value="definitely" class="labelr" /><label>definitely</label>
      </div>

      <div class="radio-option">
        <input type="radio" name="radio" value="maybe" class="labelr" /><label>maybe</label>
      </div>
      <div class="radio-option">
        <input type="radio" name="radio" value="not-sure" class="labelr" /><label>not sure</label>
      </div>

    </fieldset>
    <div class="check-option">
      <label for="frontend">Frontend</label>
      <input type="checkbox" id="frontend" value="frontend" />
    </div>

    <div class="check-option">
      <label for="backend">Backend</label>
      <input type="checkbox" id="backend" value="backend" />

    </div>
    <label for="bio" class="bio">Any comments or suggestions</label>
    <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
    <input type="submit" value="submit" class="submit-button" id="submit" />
  </form>
</body>

</html>

Desired output vs the current output

target look vs my results

Tags:

3

Answers


  1. 0

    For 1:
    Remove display: block; from your radio input element, the one with class="labelr".

    By default, block elements can not be placed next to each other. If you remove display: block; the display will change to the default display: inline-block, which can be placed next to another inline-block or inline element.

    For 2:
    Place your <input> above your <label> like so:

    <div class="check-option">
  <input type="checkbox" id="frontend" value="frontend">
  <label for="frontend">Frontend</label>   
</div>

    You’ll probably want to remove the width:90% from the <input> as well as that is making things more difficult.

    For 3: On the <body> element, you could add:

    background-size: cover;
background-attachment: fixed;

    I’m not sure if that is the desired effect though.

    In general:
    Try not to use negative margin or padding even though it might seem like a good idea. It will makes things messy later on. I never use it.

    Be careful with putting styles on element selectors. You put width:90% on ALL input elements though you probably don’t want that for all elements.

    Making a form with all these elements is quite difficult. Don’t give up!

    Login or Signup to reply.
  2. 0

    please avoid to direct use of CSS on label, textarea, and inputs this will messy . for better practice and clean code use classes and id for css

    css

    body {
  box-sizing: border-box;
  background-image: linear-gradient( 115deg, rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7)), url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-white);
  margin: 0;
}

input {
  /* display: block; */
  /* margin: 2em; */
  /* width: 90%; */
}

.labelr {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}

select {
  margin: 2em;
  display: block;
  width: 90%;
}

.radio {
  border: none;
  padding: 2em;
}

form {
  width: 70vw;
  margin: auto auto;
  background-color: rgba(27, 27, 50, 0.8);
  max-width: 800px;
  min-width: 300px;
  padding-top: 2em;
  border-radius: 0.3rem;
  padding-bottom: 2em;
}

label {
  font-family: 'Poppins', sans-serif;
  color: white;
  /* margin: 2em; */
  font-size: 1.2rem;
  font-weight: 400;
}

h1 {
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}

p {
  font-size: 1.125rem;
}

input,
button,
select,
textarea {
  margin: ;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.check-option {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  /* Reduce the spacing between options */
}

label {
  margin-right: -200px;
  padding-right: 5px;
}

input[type="checkbox"] {
  margin-left: 0;
}

.bio {
  display: block;
}

textarea {
  margin: 2.5em;
  margin-top: -20px;
}

.submit-button {
  display: block;
  width: 90%;
  padding: 1.5rem;
  background: #37af65;
  color: white; 
  border-radius: 2px;
  cursor: pointer;
  margin-bottom: em;
}

    by this you’ll see your labels radio labels arrangement look better , just use css by classes.

    Login or Signup to reply.
  3. 0

    label tag taking margin from top, write label{margin-top:0;}.
    Don’t use <label> tag everywhere. Instead use <p> tag.
    <br> is self closing tag, don’t write </br>

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search