Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

I’ve been trying to make the radio buttons and checkboxes at the bottom display as ‘block’ instead of inline and the added a margin-left of 30% to make them align with the rest of the document, but they are still displaying above the text, instead of the same line.

I’ve been trying out different things, but this is the closest I could get them to look how I want to. I’ve tried looking for solutions all over, but I don’t even know what to search for and I don’t wanna f up the rest of the code, since everything else is looking good (except for the <br/>'s I want to eventually get rid of).

Does anyone have an idea of what the issue could be?

I don’t know if it’s helpful or not, but a made a lil preview image and tried to explain with markers what I was trying to do here.

Your code so far

index.html

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Th0rne's Survey</title>
    <link rel="stylesheet" href="styles.css">

    <!--Google Fonts for 'Roboto'-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  </head>


 <!--BODY START-->
  <body>
    <section name="header" id="header">
        <h1 id="title" class="title">Thorne's Survey</h1>
        <p id="description" class="description">Thank you for participating.</p>
    </section>

<!-- FORM START-->
    <form id="survey-form">
<!--personal info-->
      <section name="personal-info" id="personal-info">
        <label id="name-label" for="name">
          <p>Name:</p>
          <input required type="text" id="name" placeholder="Enter your name here..." class="text"/>
        </label>

        <label id="email-label" for="email">
          <p>Email:</p>
          <input required type="email" id="email" placeholder="Enter your email here..." class="text"/>
        <label id="age-label" for="age">
          <p>Age:</p>
          <input type="number" min="15" max="100" id="age" placeholder="Enter your age here..."/ class="number">
        </label>
      </section>

<!--questions-->
      <section>

        <!--dropdown-->
        <label id="dropdown-label" for="dropdown">
          <p>Dropdown:</p>
          <select id="dropdown">
            <option value="">(select an option)</option>
            <option value="opt1">1</option>
            <option value="opt2">2</option>
          </select>
        </label>

        <br/>
        <br/>

        <!--radio buttons-->
        <label id="radio-label" for="radio">
          <p>Radio Buttons:</p>
          <input checked id="radio-1" name="radio" type="radio" class="radio"/>
          <p>Option 1</p>
          <input id="radio-2" name="radio" type="radio" class="radio"/>
          <p>Option 2</p>
          <input id="radio-3" name="radio" type="radio" class="radio"/>
          <p>Option 3</p>
        </label>

        <br/>

        <!--checkboxes-->
        <label id="checkbox-label" for="checkbox">
          <p>Checkboxes:</p>
          <input id="checkbox-1" name="checkbox" type="checkbox" value="check1" class="checkbox"/>
          Check 1
          <input id="checkbox-2" name="checkbox" type="checkbox" value="check2"/ class="checkbox">
          Check 2
          <input id="checkbox-3" name="checkbox" type="checkbox" value="check3" class="checkbox"/>
          Check 3
          <input id="checkbox-4" name="checkbox" type="checkbox" value="check4" class="checkbox"/>
          Check 4
        </label>
      </section>
    </form>
  </body>
</html>

styles.css

body {
    font-family: 'Roboto', Helvetica;
    background-color: #38404E;
    color: #E7E7E7;
    text-align: center;
    width: 30rem;
    margin: auto;
  }

#header {
    padding: 0.1rem;
    margin-top: -0.5rem;
    margin-bottom: 1rem;
    text-shadow: 0px 0px 20px black;
}

.title {
    color: #F6D5A9;
    margin-bottom: 0.75rem;
}

.description {
    color: #E7E7E7;
    margin-bottom: 0.8rem;
}

#survey-form {
    border-top-style: solid;
    border-bottom-style: solid;
    box-shadow: 0px 0px 30px 1px black;
    padding-bottom: 1.5rem;
    padding-top: 1rem;
    border-radius: 5px;
}

p {
    margin: 0.3rem;
}

input.text, input.number, select {
    border-color: #38404E;
    background-color: #E7E7E7;
    color: black;
    font-family: 'Roboto', Helvetica;
    border-radius: 5px;
    height: 2rem;
    width: 12rem;
}

input.radio, input.checkbox {
    width: 2rem;
    display: block;
    margin-left: 30%;
    accent-color: #F47059;
}

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

2

A couple of things:

input.radio, input.checkbox {
  width: 2rem;
  display: block;
  margin-left: 30%;
  accent-color: #F47059;
}

Do you understand what display: block is doing here? The input element is inline by default. You are changing that. Why are you doing this?

       <label id="radio-label" for="radio">
          <p>Radio Buttons:</p>
          <input checked id="radio-1" name="radio" type="radio" class="radio"/>
          <p>Option 1</p>
          <input id="radio-2" name="radio" type="radio" class="radio"/>
          <p>Option 2</p>
          <input id="radio-3" name="radio" type="radio" class="radio"/>
          <p>Option 3</p>
        </label>

You do need label elements for your inputs, but you need a separate label for each input. You can’t put all of the inputs in one label. Also, p elements are block level elements by default, so that is going to cause the same issues you have above with display: block. Besides, there is no reason to wrap the text inside of a label in a p element. So I would just forget about those p elements completely.

3

To be honest, I was mixing them up and was very confused on what exactly they do.

After correcting some things, I understand what I was confused about:
I wanted the <input>'s to display in an individual line each (so block), but the text of the <p> (which I have now removed and replaced with label tags wrapped around each input, like you pointed out) to display on the same line as their corresponding buttons and checkboxes.

After some googling and inspecting the source code of the example survey site to figure out how they were doing it, I think I was looking for ‘display: flex’.
It now looks what I wanted it to look like.

I couldn’t have made sense of any of this without your help, so thank you so much!

1 Like
4

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