Survey Form - Build a Survey Form

Tell us what’s happening: I cannot seem to get the radio buttons and labels, as well as the checkboxes and labels to align on the same line. The other issue I am having is the size of the radio buttons and check boxes look larger than they should be and were in the example project.

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Afterlife Gaming Creator Form</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1 id="title">Afterlife Gaming Creator Form</h1>
    <p id="description"><strong>New content creators please register here</strong></p>
    <form id="survey-form">
      <fieldset>
        <label id="name-label" for="name">Please enter your name: <input id="name" type="text" placeholder="Please enter your name"required></label>
        <label id="email-label" for="email">Please enter your email address: <input id="email" type="email" placeholder="Please enter your email" required></label>
        <label id="number-label" for="number">Age <input id="number" type="number" min="16" max="120" placeholder="Please enter your age"></label>
      </fieldset>
      <fieldset>
        <label for="streamer"> <input id="streamer" class="inline" type="radio" name="stream-support" value="streamer" checked requried> Streamer</label>
        <label for="support"> <input id="support" class="inline" type="radio" name="stream-support" Value="suport" requried> Supporter</label>
      </fieldset>
      <fieldset id="">
        <label for="affliation"> <input id="affliate" class="inline" type="radio" name="affliate-partner" value="affliation" checked requried> Affliation</label>
        <label for="partnership"> <input id="partner" class="inline" type="radio" name="affliate-partner" value="partnership" requried> Partnership</label>
      </fieldset>
      <fieldset>
        <label>How did you hear about us?
          <select id="dropdown" name="dropdown">
            <option value="">(select one)</option>
            <option value="1">YouTube</option>
            <option value="2">Twitter(X)</option>
            <option value="3">Discord</option>
            <option value="4">TikTok</option>
            <option value="5">Other</option> /*only appear when other is selected*/ <input id="explanation" type="text" placeholder="Please Explain" required>
          </select>
        </label>
      </fieldset>
      <fieldset>
         <input class="platforms" type="checkbox" value="instagram"> <label for="platforms">Instagram</label>
        <input class="platforms" type="checkbox" value="kick"> <label for="platforms">Kick</label>
        <input class="platforms" type="checkbox" value="snapchat"> <label for="platforms">SnapChat</label>      
        <input class="platforms" type="checkbox" value="tiktok"> <label for="platforms">TikTok</label>
        <input class="platforms" type="checkbox" value="twitch"> <label for="platforms">Twitch</label>
        <input class="platforms" type="checkbox" value="twitter"> <label for="platforms">Twitter(X)</label>
        <input class="platforms" type="checkbox" value="youtube"> <label for="platforms">YouTube</label>
      </fieldset>
      <textarea id="bio" placeholder="Please provide a brief summary of yourself..." rows="13" cols="50"></textarea> 
      <textarea id="content" placeholder="Tell us a little bit about the content you create..." rows="13" cols="50"></textarea> 
      <textarea id="reason" placeholder="Why do you want to become a member of the Afterlife Team?" rows="13" cols="50"></textarea>
      <input id="submit" type="submit" value="Join the Afterlife"></input>
    </form>
  </body>
  <footer>
    <strong>
    <p>Afterlife Gaming</p>
    <p>Est. 2024</p>
    </strong>
  </footer>
</html>

CSS
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: black;
  /*add welcome to the afterlife graphic background-img:*/
  font-size: 18px;
  color: #ffffff;
}

#title {
  text-align: center;
  color: red;

}

.inline {
  display: inline;
}


fieldset {
  border: none;
  border-bottom: 3px solid #00ff00;
}

fieldset:last-of-type {
  border-bottom: none;
}

form {
  width: 70vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 2em;
}

h1, p {
  margin: 1em auto;
}

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

label {
  display: block;
  margin: .5rem 0;

}

p {
  text-align: center;
  color:#00ff00;
  font-size: 20px;
}

placeholder {
  color: white;
}

footer p {
  font-size: 12px;
}

textarea {
  background-color: #2a2a3b;
  border: 1px solid #00ff00;
}

input[type="submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  color: white;
  background-color: #ff0000;
  border-color: #00ff00;
  min-width: 300px;
}  

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 Edg/119.0.0.0

Challenge Information:

Survey Form - Build a Survey Form

To put it in one line I nested each label of the radio button and checkbox in a section element.


That is my input and output
Dunno if that will help :slight_smile:

Your screen shot is not clear, copy and paste your code here. Before pasting your code type three ``` back ticks and paste your code in a separate line and after code three more back ticks in another separate line. That’s Way we will see your code.
@magdosj

I actually didn’t screenshot anything. I copied and pasted the code as the instructions stated I thought. Thank you for letting me know.

I tried placing them in a but it didn’t seem to change anything. If anything it brought the radio & boxes slightly closer together but not on the same line. Thank you for trying to help. I will keep plugging away at this one until I get it.

        <label for="support"> <input id="support" type="radio" name="stream-support" Value="suport" requried> Supporter</label></section>
      </fieldset>
      <fieldset>
        <section><label for="affliation"> <input id="affliate" class="inline" type="radio" name="affliate-partner" value="affliation" checked requried> Affliation</label>
        <label for="partnership"> <input id="partner" class="inline" type="radio" name="affliate-partner" value="partnership" requried> Partnership</label></section>
      </fieldset>````
1 Like

Your label for value and input id value should be same. And if you want styleing for checkbox and there label’s, you need to work on CSS.