Survey Form - Build a Survey Form

HTML-CSS
1

Hi, i’m stuck with the following. Can someone please help me?

a) how can i put the button to tick and its text on the same line (e.g. the “yes” and its button), cause now the button is above its text. I tried with adding a class=“inline” in the input (html) and then .inline {width: unset;] (css) but it didn’t work

b: how can i put the buttons and the comment section in the middle, and not on the right side?

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>

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

<form id="survey-form">
    <div type="green"><label id="name-label">Please provide your name: <input required id="name" type="text" placeholder="your name"></label></div>

    <div><label id="email-label">Please provide your email: <input required id="email" type="email" placeholder="your email"></label></div>

    <div type="green"><label id="number-label">Please provide your age: <input id="number" type="number" min="5" max="120" placeholder="age"></label></div>

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

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

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

<div type="green"><label>Please provide us a comment: <textarea type="comment" id="comments" name="comments" rows="3" cols="30" placeholder="What I'd improve is..."></textarea></label></div>

<input type="submit" value="Submit" id="submit">
</form>
</body>
</html>

/* file: styles.css */
body {width: 100%;
height: 100vh;
margin: auto;
background-color: rgb(0, 106, 255);
color: #ffffff;
font-family: Tahoma;
font-size: 16px;
}

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

form { width:100%;
padding-bottom: 2em;
border-left: 100px; }

div { border: none;
padding: 10px;
padding-left: 10px;
}

div[type="green"] {background-color: rgba(68, 224, 63, 0.875);}

input, textarea, select[type="life-occupation"] {background-color: yellow;
display: block; border-top: 50%;}

input[type="submit"] {display: block;
width: 60%;
margin: 1em auto;
height: 2em;
padding: 1px 2px;
}

textarea[type="comment"] {display: block;}

.inline { 
width: unset; }

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

2

you wrote the input elements to be block elements, I suggest you don’t do that for radio and checkboxes, and they will not be on a line of their own

input, textarea, select[type="life-occupation"] {background-color: yellow;

display: block; border-top: 50%;}

You use the type attribute a lot, it’s not valid on most elements.
I suggest you validate your html with a tool like Ready to check - Nu Html Checker

3

Screenshot 2024-06-23 195857
Screenshot 2024-06-23 195857727×139 13 KB

ok thanks, but if i don’t use the imput element there’s no space between the question and the options as in the image i upload.

isn’t there a way to have the question on a separate line than the answers but the options on the same line of thei relative button?

4

the question should not be in a label, that’s more for something like a legend element, or just a p considering you are not using semantic elements

1 Like
5

thank u very much :grinning: :grinning:

1 Like
6

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