Issues with inputs - Survey Form - Build a Survey Form

HTML-CSS
1

Technically I passed this project, but I’m having issues with aligning the radio buttons and checkboxes and I’m still trying to figure that out. I figured that it’s an issue with the “input” selector, but I’m not able to fix it. Changing the “input” selector to a more specific one (f.ex. I tried: “.email input” or “#email-label”) affects various other input elements with other id’s. The “select” selector is not affected by this. I’ve been trying various other things for the past few days, like putting the checkboxes and radio buttons into a container or changing other selectors, but I’m not able to find out what I messed up there…

Would appreciate help a lot.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0"/> 
    <title>Survey Form</title>
    <link rel="stylesheet" href="styles.css"/>
  </head>
  <body>
    <h1 id="title">Survey Form</h1>
    <p id="description">Please fill out the following form.
Thank you for taking the time to help me improve!</p>
    <form id="survey-form">
    <fieldset>
        <label for="name" id="name-label">Name <input type="text" id="name" placeholder="Enter your name" required/>
        </label>

        <label for="email" id="email-label">Email <input type="email" id="email" placeholder="Enter your Email" required/>
        </label>
        <label for="age" id="number-label">Age (optional) <input id="number" type="number" min="10" max="120" placeholder="Age"/>
        </label>
      
        <label for="dropdown">Which option describes your current situation best?
        <select id="dropdown" required>
          <option disabled value="">(Select one)</option>
          <option value="1">Student</option>
          <option value="2">Full Time Job</option>
          <option value="3">Part Time Job</option>
          <option value="4">Other</option>
          <option value="5">Prefer not to say</option>
          </select>
        </label>

        <label for="name">Would you recommend studying online to a friend?<br>
      <div class="container">
        <br><input type="radio" value="yes" name="option"/>Yes
        <input type="radio" value="no" name="option" class="input-radio"/>No
        <input type="radio" value="unsure" name="option"/>Not sure<br>
        </label>

        <br><label for="type">Why did you choose to study online?<br>
        <br><input type="checkbox" value="1" class="input-checkbox"/> I couldn't go to university/schooling system<br>
        <input type="checkbox" value="2" class="input-checkbox"/> I study better in self-practice/-studying<br>
        <input type="checkbox" value="3" class="input-checkbox"/> Because it is free<br>
        <input type="checkbox" value="4" class="input-checkbox"/> Other: <input type="textarea" placeholder="Enter other reasons to study online"/>
      </div>

        <label>What else I would like to say:
          <textarea type="textarea" id="comment" placeholder="Enter your comment here"  rows="7"></textarea>
        </label>

      <button id="submit" type="submit">Submit</button>
    </fieldset>
    </form>
  </body>
</html>

/* file: styles.css */
body {
  background-color: Azure;
  font-family: system-ui;
  text-align: center;
}

form {
  margin: 50px auto;
  border: none;
}

label {
  display: flex;
  flex-direction: column;
  margin: 10px;
  align-items: middle;
  font-size: 1.1rem;
  line-height: 1.5em;
}

/* label["name"] {
  text-align: right;
} */

h1 {
  font-family: cursive;
  margin-top: 40px;
}

p {
  font-family: cursive;
  margin-top: 30px;
  margin-bottom: auto;
}

fieldset {
  margin: auto 25em;
  border: none;
  background-color: #778899;
  min-width: 30em;
  max-width: 80em;
}

input, select {
  margin: 5px auto;
  display: flex;
  flex-direction: column;
  padding: 5px;
  width: 100%;
  max-width: 800px;
  height: auto;
  max-height: 300px;
  font-size: 17px;
  border: none;
}

/* class input checkbox/radio */

textarea {
  margin: 5px auto;
  display: flex;
  flex-direction: column;
  padding: 5px;
  width: 100%;
  max-width: 800px;
  height: auto;
  max-height: 300px;
  font-size: 17px;
  border: none;
}

.container {
  display: flex;
  flex-direction: column;
  text-align: right;
}

button {
  margin-top: 50px;
  margin-bottom: 50px;
  width: 100%;
  height: 40px;
  font-size: 18px;
  background-color: Grey;
  color: white;
  border: 2px solid; 
}

button:hover {
  background-color: Black;
}

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

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