Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

how can i separate the different element, so the elements are not all over each other as now?

thanks in advance

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>Survey Form</title>

<h1 id="title">Survey Form</h1>
<p id="description">
Thank you for helping us improve the platform</p>

<form id="survey-form">
    <label id="name-label">Please provide your name: <input required id="name" type="text" placeholder="your name"></input></label>
    <label id="email-label">Please provide your email: <input required id="email" type="email" placeholder="your email"></input></label>
    <label id="number-label">Please provide your age: <input id="number" type="number" min="5" max="120" placeholder="age"></input></label>

<survey-form><label>What do you do in your life? <select id="dropdown">
    <option value="""">Select an option</option>
    <option value="1">Student</option>
    <option value="2">Worker</option>
    <option value="3">Retired</option>
</select></label>

<label>Would you recomend us?<input type="radio" value="Yes" name="recomendation">Yes</input></label>
<label><input type="radio" value="No" name="recomendation" checked>No</input></label>

<label>What would u like us to improve? <input type="checkbox" value="Open Source Community">Open Source Community</input></label>
<label><input type="checkbox" value="Gitter help rooms"
>Gitter help rooms</input></label>
<label><input type="checkbox" value="Videos"
>Videos</input></label>
<label><input type="checkbox" value="City Meetups"
>City Meetups</input></label>
<label><input type="checkbox" value="Wiki"
>Wiki</input></label>

</survey-form>Please provide us a comment: <textarea id="comments" name="comments" rows="3" col="30" placeholder="What I'd improve is..."></textarea>
<input type="submit" value"Submit" id="submit"></input>
</form>
</html>

/* file: styles.css */
body {width: 100%;
height: 100vh;
margin: 0;
background-color: blue;
color: #ffffff;
font-family: Tahoma;
font-size: 16px;
}

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

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

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



input, textarea {background-color: cyan;}

input[type="submit"] {display: block;
width: 60%;
margin: 1em auto;
height: 2em;
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/125.0.0.0 Safari/537.36

Challenge Information:

Survey Form - Build a Survey Form

2

HI @luca-151 !

Welcome to the forum!

Are you asking how to get each label and input on its own line like this?

Screenshot 2024-06-19 at 5.38.42 AM
Screenshot 2024-06-19 at 5.38.42 AM826×218 26.1 KB

If so, then you have to change the display property for the label elements.
Labels are inline by default.

So you will need to change it to block so it has its own line

hope that helps

3

As a sidenote, you have some errors in your HTML.
You should run your code in an HTML validator

A couple of errors include closing tags for inputs

inputs are self closing

there is no such thing as a survey form tag

hope that helps

4

thanks u very much for your suggestions. i have two more questions:
a) how can i make some space between one question and the other?
b) how can i move the squares/circles that u can tick on the same level of the respective questions?

the code is the same of before with the few little changes that have been proposed.

thanks in advance

5

if the labels are set to block, then you can add margin top and bottom

you can place each group of labels and radio buttons inside a container divs and then use flexbox

1 Like
6

ok thank u very much