Responsive Web Design Projects - Build a Survey Form

HTML-CSS
1

I am working on the code for the survey form and adding radio buttons and checkboxes. Needing help on spacing them so they are all under on there own line like bullet points or in the objective example they show at top of page. It looks like they are all on one line and i would like it easier to read thanks.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<link rel="stylesheet" href="style.css"/>

<h1 id="title">Survey Form</title>


<p id="description">Thanks for your help to improve the form </p>

 <form id="survey-form">
<label id="name-label" for="name">Name<input type="text" id="name" name="name" placeholder="Enter Your Name"required></label>

<label id="email-label" for="email">Email <input type="email" id="email" name="email" placeholder="Enter Your Email"required></label>

<label id="number-label" for="age">Age (optional) <input type="number" id="number" name="number" min="18" max="55" required placeholder="Enter Your Age"></label>

<label>Which position currently applies to you now?
<select id="dropdown">
<option value="1">Full Time</option>
<option value="2">Part Time</option> 
<option value="3">Student</option> 
<option value="4">Other</option> 
</select>
</label>

<label>Would this site be usefull to others?</label>

<label for="definitely"><input 
value="Definitely" name="radio-group" type="radio" class="inline"/> Definitely</lable>
<label for="Maybe">
<input value="Maybe" type="radio" name="radio-group" class="inline"/>Maybe</lable>
<label for="Not-sure"><input  value="Not-sure" type="radio" name="radio-group" class="inline"/> Not sure</lable>

<label>What would you like improved on the site? (Check all that apply)</label>
        <label><input value="links"  name="links"  type="checkbox" class="inline"/>Links</label>
        <label><input value="help section" type="checkbox" name="help section" class="inline"/>Help section</label>
        <label><input  value="page setup" type="checkbox" name="page setup" class="inline"/>Page setup</label>
        <label><input value="all the above"  name="all the above"  type="checkbox" class="inline"/>All the above</label>

    <label>Any suggestions put here<textarea type="text"id="suggestions"name="comments"rows="3"cols="30"placeholder="Add your suggestions"></textarea> </label>        





























































  </html>

/* file: styles.css */

Your browser information:

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

Challenge: Responsive Web Design Projects - Build a Survey Form

Link to the challenge:

2

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