Behaviour <input> type="radio"

HTML-CSS
#1

Hello,
I passed the “survey form”, but I encounter a problem difficlte to fix the inputs radio.
Could you explain to me why whith this code bellow, the radio butons and labels are perfectly aligned with one above the other:

<!DOCTYPE html>
<html>
  <head>
    <title>Cours JavaScript</title>
    <meta charset="utf-8" />
    <style>
      .form1 {
        /* display: flex; */
        /* align-items: center; */
      }
      .bouton {
        /* display: inline-block; */
      }
    </style>
  </head>
  <body>
    <div class="form1">
      <input
        id="recommend"
        class="bouton"
        type="radio"
        name="recommend"
      />Definite<br />
      <input
        id="recommend"
        class="bouton"
        type="radio"
        name="recommend"
      />Definite
    </div>
  </body>
</html>

The result is;
image

And now, with the code bellow which corresponding at the moment when I encountered this problem:

<!DOCTYPE html>
<html>
  <head>
    <title>Cours JavaScript</title>
    <meta charset="utf-8" />
    <style>
      body {
        /* position: fixed; */
        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);
        width: 100%;
        height: 100%;
        z-index: -1;
        background-size: cover;
        /* background-position: center;
        background-repeat: no-repeat; */
        font-family: 'Poppins', sans-serif;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.4;
        color: white;
        background-color: darkblue;
        /* margin: 0; */
      }
      #container {
        width: 720px;
        background-color: rgb(241, 210, 157);
        margin:auto;
        padding: 0px;
       
      }
      input {
        width: 100%;
      }
      #survey-form {
        width: 720px;
        background-color: blue;
      }
    </style>
  </head>

  <body>
    <div id="container">
      <header>
        <h1 id="title">sfsfsff</h1>
        <p id="description"></p>
      </header>
      <form id="survey-form">
        <div class="div-input">
          <label class="label-input" for="name">Name:</label>
          <input
            id="name"
            type="text"
            name="name"
            placeholder="Enter your name"
          />
        </div>
        <form id="survey-form">
        <div class="div-input">
          <label class="label-input" for="name">Name:</label>
          <input
            id="name"
            type="text"
            name="name"
            placeholder="Enter your name"
          />
        </div>
        <form id="survey-form">
        <div class="div-input">
          <label class="label-input" for="name">Name:</label>
          <input
            id="name"
            type="text"
            name="name"
            placeholder="Enter your name"
          />
        </div>
        <form id="survey-form">
        <div class="div-input">
          <label class="label-input" for="name">Name:</label>
          <input
            id="name"
            type="text"
            name="name"
            placeholder="Enter your name"
          />
        </div>
        <div>
           <p class="option">Would you recommend freeCodeCamp to a friend?</p>
            <label for="recommend">
            <input id="recommend" class="bouton" value="Definitely" type="radio" name="recommend">Definitely<br>
            </label>
            <label for="recommend">
              <input id="recommend" class="bouton" value="Maybe" type="radio" name="recommend">Maybe<br>
            </label>
            <label for="recommend">
              <input id="recommend" class="bouton" value="Not sure" type="radio" name="recommend">Not sure<br>
            </label>
          </div>
      </form>
    </div>
  </body>
</html>

the result is :
image

Why this difference ?

#2

hi again! I just answered your other question and i think the similar problem is happening on this one! You have input set to 100%, which takes up the entire width and pushes the text down to the next line.
You might want to differentiate the different types of inputs in the CSS instead of having them all be the same width (i.e. have your text input as one class, and radio button as a different class, which you already do have as bouton).

Also some other notes: id attributes should be unique. if you want to use the same designation for more than one item, you can use classes.

Let me know if this helps! good luck :slight_smile:

#3

You want to say:
One class for the “label” which is the text.
And one class for “input” which is the radio buton.

Correct ?

#4

You might find the Build a Registration Form Tutorial to be helpful:

It should help explain some of the nuances of form building.

1 Like