Survey Form - Build a Survey Form - radio inputs inline

HTML-CSS
1

Tell us what’s happening:
why are my radio inputs not on the same line as their label? i tried to assign to inline and edit using css to no avail.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<header>
  <link rel="styelsheets" href="styles.css">
  <meta charset="UTF-8">
<h1 class="title" id="title">freeCodeCamp  Survey Form</h1>
<p class="description" id="description" min-height: 2em;">Thank you for taking the time to help us improve the platform</p>
</header>

<body>
  <form id="survey-form">
  <fieldset id="user-info">
    <label for="name" id="name-label">Name<input id="name" type="text" required placeholder="Enter your name"> </label>
    <label for="email" id="email-label">Email<input id="email" type="email" required placeholder="Enter your Email" </label>
    <label for="number" id="number-label">Phone Number(optional) <input id="number" type="number" min="10" max="100" placeholder="Number" </label>
  </fieldset>
  <fieldset id="user-feedback">
    <label>Which option best describes your current role?</label> <select id="dropdown">
      <option value="0">Select current role</option>
      <option value="1">Student</option>
      <option value="2">Full-time Job</option>
      <option value="3">Full-time Learner</option>
      <option value="4">Prefer not to say</option>
      <option value="5">Other</option>
      </select>
    <label for="recommended">Would you recomend freeCodeCamp to a friend?</label>
        <label><input value="1" checked id="definitely" type="radio" name="recommended" class="inline" />Definitely
      </label>
      <label for="recommended">
        <input value="2" id="maybe" 
type="radio" name="recommended" class="inline" />Maybe
      </label>
      <label for="recommended">
        <input value="3"
id="not-sure" type="radio" name="recommended" class="inline" />Not Sure
      </label>
      
      <label for="user-favorites">What is your favorite feature of freeCodeCamp?
        <select id="dropdown">
          <option>Select an option</option>
              <option>Challenges</option>
          <option>Projects</option>
          <option>Community</option>
          
<option>Open Source</option>
          </select>
</label>
<label for="improvements">What would you like to see improved? (check all that aplly) 
<label><input id="improvements" type="checkbox" name="front-end-projects" value="1">Front-End Projects</label>
<label><input id="improvements" type="checkbox" name="back-end-projects" value="2">Back-End Projects</label>
      <label>Any comments or suggestion?
        <textarea></textarea>
        </label>
  <fieldset>
    <button id="submit">Submit</button>
  </form>
</body>

/* file: styles.css */

.title, .description{text-align:center;}

.description{font-style:italic;}

label{
  display:block;
  font-size:18px;
  color: white;
  opacity:100%;
}
input{
  display:block;
}
body{background-color:lightblue;}

Fieldset{background-color:blue;

}

user-info{
  margin:0 auto;
}

textarea{
  display:block;
row: 3;
col: 30;
}

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

  input,
textarea,
select {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 2em;
}

input, textarea {
  background-color: white;
  border: 1px solid #0a0a23;
  color: black;
}

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

What display value did you assign to both the inputs and labels? What does that value do to the element?

3

i set the for/id = recommended
then set
.recommended{
width: unset;
margin: 0 0.5em 0 0;
vertical-align: middle;
}
but still got the same format

4

This doesn’t answer my question about the CSS display property in the input and label.

1 Like
5

class=“inline” is the display property correct? if so then it correlates css to html letting the computer know css wants to format the selection in html.

6

Look at the CSS you created. You have a ruleset for input and a ruleset for label. You have set the display property to block in each of those. Do you understand what that does? Do you think there might be a reason I keep asking you about this :slight_smile:

1 Like
7

ahhhh, i found that and set it to inline. Still have the same format.

8

Any time you make a change to the CSS and it isn’t working and you want us to take a look at it then you have to paste your updated CSS in here so we can see exactly what you did.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

1 Like
9

I figured it out. Thanks! Also I have been wondering how to add my code in that format! Appreciate you! :grinning:

printf("thank you\n");
10

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