Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

I need some help with the checkboxes in the last label. I want to put the checkboxes in front of the words but can’t figure out how. Any suggestion?
I’d appreciate any other suggestions too as I am a very new to coding.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Travel Survey</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1 id="title">Explorenext</h1>
    <p id="description">Find your next adventure with our quick survey!</p>
    <form id="survey-form">
      <fieldset>  
        <label id="name-label" for="name">Name<input id="name" type="text" placeholder="John Smith..." required></input></label>
        <label id="email-label" for="email">Email<input id="email" type="email" placeholder="turnicola@hotmail.com..." required></
        input></lable>
        <label id="number-label" for="age">Age<input id="number" type="number" min="16" max="100" placeholder="54" required></input> 
        </label>
      </fieldset>
      <fieldset>
        <label>Who are you travelling with?
        <select id="dropdown">
          <option>Solo</option> 
          <option>Partner</option>  
          <option>Family(with kids)</option> 
          <option>Group of Friends</option>  
        </select>
    </label>
      </fieldset>
      <fieldset>
        <legend>How long do you plan to travel?</legend>
        <label for="leght">
          <input type="radio" value="test1" name="lenght" id="lenght"   class="inline">Weekend(3 days)</input>
          <input type="radio" value="test2" name="lenght" class="inline">Short trip(7 days)</input>
          <input type="radio" value="test3" name="lenght" class="inline">Extended trip(8+ days)</input>
        </label>
        </fieldset>
        <fieldset>
    <label>How far are you willing to travel?
      <input type="checkbox" value="test1">Domestic travel only</input>
      <input type="checkbox" value="test2">Nearby countries</input>
      <input type="checkbox" value="test3">Anywhere in the world</input>
    </label>
    <label>What activities are a must-haves fot your trip?
      <input type="checkbox" value="cultural">Cutural experiences(museums, art, history)</input>
      <input type="checkbox" value="shopping">Shopping(markets, malls)</input>
      <input type="checkbox" value="adventures">Adventures(hiking, ziplining, surfing)</input>
      <input type="checkbox" value="relaxation">Relaxation(spas,pool)</input>
      </label>
      </fieldset>
    <textarea></textarea>
    <h3>
    <button id="submit">Submit</button>
    </h3>
   </form> 
  </body>  
</html>



/* file: styles.css */
form {width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 2em;
  }

body {text-align: left;    
            background-color:lightblue;
    font-family: Georgia;
    font-size: 16px;
    width: 100%;
    height: 100vh;
    margin: 0;
}

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

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


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

label, input {display: block;
      margin: 0.5rem 0}

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



h2 {text-align: left;
    font-size: 16px;
    }

.inline {display: inline;
        width: unset;
        margin: 0 0.5em 0 0;
        vertical-align: middle;
        }

radio {display: block;}

label {
  display: block;
  margin: 0.5rem 0;}

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 OPR/114.0.0.0

Challenge Information:

Survey Form - Build a Survey Form

2

From the code snippet you shared, which line are you talking about?
Please explain what is the error/issue are you facing.

3 
![image|323x500](upload://jMLgCdGkdnYo7a1GfrdrZwuPz7J.png)

The checkboxes appear on the right and not in front of the text.

4

image_2024-11-24_112618569
image_2024-11-24_112618569652×1297 25 KB

5

Putting the text before the input tag might resolve.
No?

6

like this?

<input type="checkbox" value="cultural">Cutural experiences(museums, art, history)
1 Like
7

The input tag does not have a closing tag.
So you can just have

<input type="checkbox" value="cultural">Cutural experiences(museums, art, history)
1 Like
8
9

I tried that but the check boxes are still al over the place. I tried one with the input and one after but it doesn’t look like it makes a difference. Could it be a CSS issue?

<label>How far are you willing to travel?</label>
     Domestic travel only<input type="checkbox" value="test1">
     Nearby countries<input type="checkbox" value="test2">
     Anywhere in the world <input type="checkbox" value="test3">
    
    <label>What activities are a must-haves fot your trip?</label>
      <input type="checkbox" value="cultural">Cutural experiences(museums, art, history)
      <input type="checkbox" value="shopping">Shopping(markets, malls)
      <input type="checkbox" value="adventures">Adventures(hiking, ziplining, surfing)</input>
      <input type="checkbox" value="relaxation">Relaxation(spas,pool)
     
      </fieldset>

image_2024-11-24_113818415
image_2024-11-24_113818415660×665 10 KB

10

Welcome to the forum @hetauda

Try nesting each pair of input element and text in a label element.

Happy coding

11

Thank you so much! It was nesting the input in a label element and I added class=“inline”. It took me a while but I figure it out! Thank you both :slight_smile:

1 Like