Survey Form - Build a Survey Form

HTML-CSS
1

so, this looks 5x better then my first run, but I am clueless as to how to address the layout of my radios, dropdown, and checkboxes. i created a class like we did for the registration form lesson which helped some but its still a mess.
Your code so far

<!-- file: index.html -->
<!DOCtype html>
<html lang="eng"></html>
  <head>
    <meta charset="UTF-8">
    <title>Survey Form</title>
    <link rel="stylesheet" href="styles.css" />
  <head/>
  <body>
    <h1 id="title">Survey Form</h1>
    <p id="description"> Please provide your information</p>
  <form id="survey-form">
  <fieldset>
    <label for="suffix">Mr./Mrs./Miss.: <input id="name" type="text" placeholder="enter suffix" required></label>
    <label for="name" id="name-label">Enter Name <input id="name" type="text" placeholder="enter your full name" required></label> 
    <label for="email" id="email-label">email:<input          id="email" type="email" placeholder="enter valid email" required></label>
    <label for="number" id="number-label">Age:<input id="number" type="number" min="18" max="100" placeholder="age" required></label>
    </fieldset>
    <fieldset>
      <label for="dropdown">level of coding experience:
          <select name="dropdown" id="dropdown"class="inline">
          <option value="noobie">Noob</option>
          <option value="novis">Novice</option>
          <option value="Pro"  >Pro </option>
          <option value="Pro"  > Pinball Wizard </option></select>
      <label for="Male"><input id="Male" type="radio" value="male" name="gender" class="inline"/>Male</label>
      <label for="Female"><input id="Female" type="radio" value="female" name="gender" class="inline"/>Female</label>
      <label for="checkboxes">Do you like coding?:
<input id="idk" type="checkbox" name="choose" value="yes" class="inline">Yes</label>
<input id="idk" type="checkbox" name="choose" value="no" class="inline">No</label>
    </fieldset>
    <fieldset>
<label for="comments"> please enter comments:
<textarea id="comments" name="comments" placeholder="tell us your thoughts">
</textarea>
    </fieldset>
<input type="submit" id="submit" class="Submit">
</form>
</body>
</html>






/* file: styles.css */
body {
  width: 100%;
  height:100vh;
  background-color:rebeccapurple;
  color: white;
  font-family: cursive;
  font-size: 14px;
}

h1, p {
  margin: 1em auto;
  text-align: center;
}

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

fieldset{
  border: none;
  padding: 2rem 0;
  border-bottom: 3px solid #3b3b4f
}

fieldset:last-of-type{
  border-bottom: none;
}
label{
 display: block
  margin: 0.5rem 0; 
}
input,
textarea,
select {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 1em;
  background-color: #0a0a23;
  border: 1px solid #0a0a23;
  color: #ffffff;
}
.inline{
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}
input[type="submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: #3b3b4f;
  border-color: white;
  min-width: 300px;
}

input[type="file"] {
  padding: 1px 2px;
}

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

If you take a look at your CSS code, the style block for label, you’re missing a ; on the display property. This messes up the layout you seems to be after. Fix this and perhaps you can now progress to style the other elements the way you want.

1 Like
3

that did solve the dropdown, but how to set up the radio and checkboxes…either inline or on top of the checkboxes or radios, here “choose a gender” and “do you like coding” have one checkbox/radio inline and the other drops to the next line.

4

Ok, so I added a legend to have a description of my radios and the radios are below it which looks fine, but what if i want them on the same line as the legend?
i placed the dropdown, radios and checkboxes into “div” which had no effect.

why when i use the < > around an element im talking about here its omitted ifrom the post?

5

Can you provide updated codes (HTML/CSS) you have so far?

6

The label elements are set to be block-level elements so they will never sit next to each other. You can target the specific label elements you want to change that for.

The “choose a gender” and “do you like coding” are not really label text. They are more like headings. The label text is meant for the text directly associated with the input element.

What I might do is use flexbox but you haven’t been taught that yet. With flexbox we can just wrap the elements in a flex container and they will be placed on the same line by default without you having to do anything to the label elements display property.

For example, if you wanted the two radio buttons to be on the same line.

<div class="flex">
  <label for="Male">
    <input id="Male" type="radio" value="male" name="gender" class="inline"/>Male
  </label>
  <label for="Female">
    <input id="Female" type="radio" value="female" name="gender" class="inline"/>Female
  </label>
</div>

.flex {
  display: flex;
  gap: 1rem;
}
7

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