Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

My checkboxes and text are aligned vertically but I´d like them to be in a 2 row horizontally for it to not take up to much space.
I marked out the code with three dots(…)
I tried to create a pseudo selector (look at bottom of styles.css file) and tried different things but I´m stuck.

Any help would be much appreciated (sorry if the code is super messy, I’ve just started my programming journey). Thanks!

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Watch Survey</title>
    <link rel="stylesheet" href="styles.css">
  </head>
      <body>
        <div class="survey">
        <h1 class="top" id="title">WATCH SURVEY</h1>
        <p class="top" id="description">Thank you for sharing your opinions with us</p>
        <form id="survey-form" action="URL" metod="post">

      <fieldset>
        <label id="name-label" for="name">Full Name: 
        <input placeholder="Ex. John Lennon" id="name" type="text" required/></label>
        <label id="email-label" for="email">Email: 
        <input placeholder="Ex. Hello@gmail.com" id="email" type="email" required/></label>
        <label id="number-label" for="number">Input Your Age (years):
        <input placeholder="--" id="number" type="number" min="12" max="120" required/></label>    
      </fieldset>

      <fieldset>
          <p>Do You Wear a Watch?</p>
          <select id="dropdown" name="dropdown">
          <option>Select One</option>
          <option>Yes</option>
          <option>No</option>
          <option>Sometimes</option>
          </select>
          <p>Do You Prefer Modern or Vintage Watches?</p>
          <label for="modern"><input class="inline" checked name="modern-vintage" id="modern" type="radio" value="modern"/> Modern</label>
          <label for="vintage"><input class="inline" name="modern-vintage" id="vintage" type="radio" value="vintage"/> Vintage</label>
       </fieldset>

      <fieldset>
          <p>What Is Your Favourite Watch Brands?</p>
          <label for="seiko"><input class="inline" name="favourite" id="seiko" type="checkbox" value="1"/> Seiko</label>
          <label for="longiness"><input class="inline" name="favourite" id="longines" type="checkbox" value="2"/> Longines</label>
          <label for="rolex"><input class="inline" name="favourite" id="rolex" type="checkbox" value="3"/> Rolex</label>
          <label for="iwc"><input class="inline" name="favourite" id="iwc" type="checkbox" value="4"/> IWC</label>
          <label for="breitling"><input class="inline" name="favourite" id="breitling" type="checkbox" value="5"/> Breitling</label>
          <label for="tissot"><input class="inline" name="favourite" id="tissot" type="checkbox" value="6"/> Tissot</label>
          <label for="patek"><input class="inline" name="favourite" id="patek" type="checkbox" value="7"/> Patek Philippe</label>
          <label for="omega"><input class="inline" name="favourite" id="omega" type="checkbox" value="8"/> Omega</label>
          <label for="tagheuer"><input class="inline" name="favourite" id="tagheuer" type="checkbox" value="9"/> Tag Heuer</label>
          <label for="other"><input class="inline" name="favourite" id="other" type="checkbox" value="10"/> Other</label>    
          
          <p>What Is Your Favourite Watch And Why?</p>
          <textarea rows="4" cols="40"></textarea>
      </fieldset> 


          <label for="terms"><input class="inline" id="terms" value="terms-and-conditions" type="checkbox" required/> I accept the <a href="URL"> terms and conditions</a></label>    
          <input id="submit" type="submit" value="Submit"/> 

    </form> 
   </div>    
  </body>
</html>    

body {
background-image: url(https://www.creativefabrica.com/wp-content/uploads/2022/11/13/Seamless-Background-Wallpaper-Steampunk-Watches-Gears-High-Quality-Simple-Design-46472305-1.png);
width: 100%;
height: 100vh; 
margin: 0;
background-color: #1b1b32;
color: #f5f6f7;
font-family: Tahoma;
font-size: 16px;
padding: 20px;
padding-top: 60px;
padding-bottom: 780px;
}
.survey {
  background-color: #1b1b32;
  opacity: 99%;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
}
.top {
  margin: 1em auto;
  text-align: center;
}
form {
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 2rem;
}
fieldset {
  border: none;
  padding: 2rem 0;
  border-bottom: 3px solid #3b3b4f;
}
fieldset:last-of-type {
  border: none;
}
label {
  display: block;
  margin: 0.5rem 0;
  color: 
}
input, textarea, select {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 2em;
}
input, textarea {
background-color: #0a0a23;
border: 3px solid #0a0a23;
color: white;
}
.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;
  color: white;
  background-color: #3b3b4f;
  border-color: white;
  min-width: 300px;
}
select[name="dropdown"] {
margin-top: -5px;  
}
input[id="terms"] {
  margin-left: 75px;
}
a {
  color: white;
}
a:visited {
  color: white;
}
a:hover {
  color: #3b3b4f;
}



input[name="favourite"] {
}

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

Skärmbild 2024-09-11 200232
Skärmbild 2024-09-11 2002321248×644 310 KB

2

Hi there!

You didn’t posted your code within your topic.

3

Hi, I´m not sure why it didn´t get posted. Last time it uploaded automatically. Any suggestion? Thanks

4

You need to use the Help button, that’s appear below the challenge editor when you try to submit the wrong code more than three times. That will make automated topic for the challenge.

1 Like
5

I´m sorry for not understanding. This is my code if it helps. Also uploaded a picture of the button I press when uploading my problem.

Skärmbild 2024-09-11 201403
Skärmbild 2024-09-11 2014032116×477 137 KB

Skärmbild 2024-09-11 201424
Skärmbild 2024-09-11 201757

6

Screenshots are not much helpful, you need to post your code here.

Copy your html and css code, and paste it here in the post, using three back ticks (```) on a separate line before and after your code.

1 Like
7

Edit your first post and copy/paste the code from the editor into the two code blocks.

Give each of the two elements you want to be grouped a container. Make it a flex container and make any other changes needed.

<div class="group">
  <label><input></label>
  <label><input></label>
</div>
1 Like
9

I guess you haven’t learned about Flexbox or Grid yet, which is a little unfortunate. You could still group the labels inside containers and change their display to a value that allows the elements to sit side by side (i.e. not block).

I might put all the labels in a container and use grid to create a two column layout for them. That requires the least amount of containers and CSS.

Just for the sake of showing an option using CSS grid here is an example:

<fieldset>
  <p>What Is Your Favourite Watch Brands?</p>
  <div class="label-elements">
    <label for="seiko"><input class="inline" name="favourite" id="seiko" type="checkbox" value="1" /> Seiko</label>
    <label for="longiness"><input class="inline" name="favourite" id="longines" type="checkbox" value="2" /> Longines</label>
    <!-- rest of the label/input -->
  </div>
  <!-- rest of fieldset content -->
</fieldset>

.label-elements {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
1 Like
11

Owh, it worked now! Amazing. Thank you a million!