Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:
Hello,

I’m trying to get the radiobuttons like in the survey example. They are naturally next to each other, but they should be among each other (Sorry, not an an English native speaker, I hope you know what I mean).

Now, my idea was to turn the id I gave my radiobuttons into an block-element with display. This actually worked out but there is a problem. Since the label and the input-elements have to have the same id it will also turn the label elements into block-elements I think. So the radiobuttons are among each other now, BUT the labels don’t stay to the right, they will also go into the next row. So obviously I have a thinking mistake and I don’t know how to solve it. Is there maybe a possibility to design the input-id and the label-id independent from each other even though it’s the same id?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>https://survey-form.freecodecamp.rocks</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1 id="title">freeCodeCamp Survey Form</h1>
    <p id="description">Thank your for taking the time to help us improve the platform</p>
<form id="survey-form">
    <fieldset>
      <label for="name">Name<input id="name" type="text" placeholder="Enter your name" required/></label>
      <label for="email">Email<input id="email" type="email" placeholder="Enter your Email" required/></label>
      <label for="number">Age(optional)<input id="number" type="number" min="10" max="99" placeholder="Age"/></label>
      <h2>Which option describes best your current role?</h2>
      <select id="dropdown">
        <option value=""></option>
        <option value="1">Select current role</option>
        <option value="2">Student</option>
        <option value="3"> Full Time Job</option>
        <option value="4"> Full Time Learner</option>
        <option value="5">Prefer not to say</option>
        <option value="6">Other</option>
      </select>
      </fieldset>


      <fieldset>
        <h3>Would you recommend freeCodeCamp to a friend?</h3>
        <label for="Yes"><input id="Yes" type="radio" name="attribute"/>Yes</label>
        <label for="Maybe"><input id="Maybe" type="radio" name="attribute"/>Maybe</label> <label for="Not Sure"><input id="Not Sure" type="radio" name="attribute"/>Not Sure</label>
      </fieldset>
      </form>
  </body>
</html>

/* file: styles.css */
h1{text-align: center;}

h2, h3{text-align: center;
color:white;
font-size: 20px;}

p{text-align: center;}

fieldset{background-color:darkblue;}

#name, #email, #number{display:block;
margin-top: 10px;
margin-bottom: 10px;
width: 100%;
border-radius: 8px;
border-color: blue;
}

label{color: white;}

#dropdown{
  width: 100%;
  border-radius: 8px;
  border-color: blue;}
  
#Yes, #Maybe, #Not Sure{display: block;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

you don’t have to nest the the input inside the label. an example of this is the step 56 of the cat photo app.

3

Ok, so now I deleted the label-elements and did it like in example 56, but in example 56 the radiobuttons are also next to each other, so the example doesn’t really help me with my problem. I have the same problem like before. If I don’t label the input then I’m not even able to make an id/class for the label which I need to align the text to the right of the buttons and to make the font white…???

4

Not Sure is not a single value you should use not-sure, I’d also suggest you keep your attribute values all lowercase.

You can set the wrapping label element to be a flex container. I’d suggest you give the labels or their fieldset container a class so you can target them without affecting the rest of the labels.

You should also remove the default margin on the checkbox elements to get a better alignment.

Example

<fieldset class="checkbox-group">
  <label for="yes"><input id="yes" type="radio" name="recommend"/>Yes</label>
  <label for="maybe"><input id="maybe" type="radio" name="recommend"/>Maybe</label>
</fieldset>

.checkbox-group label {
  display: flex;
  align-items: center;
  column-gap: 5px;
}

.checkbox-group input {
  margin: 0;
}
5

Thank you for this solution, it solved my problem efficiently, but this is probably to intermediate for me because I haven’t had a chapter which explains the “flex”-function yet. So I can’t really follow the different orders (align-items, margin 0) etc. All I found out with google is that flex just makes content and elements in the same line. Since the survey-task comes before the flex-chapter there must be an alternate way to solve my problem which I’d like to know. I mean it’s cool that it seems to be much easier with flex but I think I should know to do it without flex since older browsers or websites don’t know the function?

6

You don’t have to use flexbox.

You can also just set the label elements to display: block you just do not get the alignment helpers and gap. You can use a margin for the spacing but the vertical alignment of the label text and input may depend on the font-family and line-height used.

.checkbox-group label {
  display: block;
  margin-top: 4px;
}

.checkbox-group input {
  margin: 0 4px 0 0;
}

I wouldn’t take the order in which the curriculum teaches things as a limitation you have to follow. Learn about whatever you like and apply it as needed.

The flexbox part of the curriculum is a good primer but it isn’t all-encompassing and you should learn about flexbox from elsewhere as well.

7

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