Build a Survey Form

HTML-CSS
1

I am in the process of building a survey form but would like help creating spaces in between options on my form. Here is what it currently looks like.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Survey-Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body> 
    <h1>freeCode Camp Survey Form</h1>
    <p id='description'>Thank you for taking the time to help us improve the platform</p>
    <form id='survey-form'>
      <fieldset>
        <label for='name'>name <input id='name' type='text' required /></label>
  <label for='email'>email <input id='email' type='email' required /></label>
         <label for='age'>Age (Optional) <input id='email' type='text' /></label>
         </fieldset>
         <label for="referrer">Which option best describes your current role?
          <select id="current role" name="current role">
                       <option value="">Select current role</option>
            <option value="1">Student</option>
            <option value="2">Full Time Job</option>
            <option value="3">Full Time Learner</option>
            <option value="4">Prefer not to say</option>
              <option value="4">Other</option>
          </select>
          
          <legend>Would you recommend freeCodeCamp to a friend?</legend>
            <label><input id="Definitely" type="radio" name="recommend to friend" value="Definitely" checked> Definitely</label>
            <label><input id="Maybe" type="radio" name="recommend to friend" value="Maybe"> Maybe</label>
             <label><input id="Not Sure" type="radio" name="recommend to friend" value="Not Sure"> Not Sure</label>
               <label for="referrer">What is your favorite feature of freeCodeCamp?
          <select id="Favourite Feature" name="Favourite Feature">
                       <option value="">Select an option</option>
            <option value="1">Challenges</option>
            <option value="2">Projects</option>
            <option value="3">Community</option>
            <option value="4">Open Source</option>
<label for="improvement">What would you like to see improved? (Check all that apply)
  <select id="improvement" name="improvement">
     <option value="">Select an option</option>
3

iā€™ve updated for=ā€˜current roleā€™

4

do you know how to create the spacing ?

5

Where do you want the space
To start in new line use


To add space between label and input area, add space after the label like this
Name:

6

so for example i want name and email to be on different lines

7

Use break element

image
image890Ɨ211 6.76 KB

8

Id shouldnā€™t have a space inside
id=ā€œcurrentRoleā€

9

My label i have created at the bottom here isnā€™t showing on my preview. this is my full code but itā€™s related to the last label

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Survey-Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body> 
    <h1>freeCode Camp Survey Form</h1>
    <p id='description'>Thank you for taking the time to help us improve the platform</p>
    <form id='survey-form'>
      <fieldset>
        <label for='name'>name <input id='name' type='text' required /></label><br>
      <label for='email'>email <input id='email' type='email' required /></label><br>
         <label for='age'>Age (Optional) <input id='email' type='text' /></label><br>
         </fieldset>
         <label for="current role">Which option best describes your current role?
          <select id="current role" name="current role">
                       <option value="">Select current role</option>
            <option value="1">Student</option>
            <option value="2">Full Time Job</option>
            <option value="3">Full Time Learner</option>
            <option value="4">Prefer not to say</option>
              <option value="4">Other</option>
          </select>
          
          <legend>Would you recommend freeCodeCamp to a friend?</legend>
            <label><input id="Definitely" type="radio" name="recommend to friend" value="Definitely" checked> Definitely</label><br>
            <label><input id="Maybe" type="radio" name="recommend to friend" value="Maybe"> Maybe</label><br>
             <label><input id="Not Sure" type="radio" name="recommend to friend" value="Not Sure"> Not Sure</label><br>
               <label for="referrer">What is your favorite feature of freeCodeCamp?
          <select id="Favourite Feature" name="Favourite Feature">
                       <option value="">Select an option</option>
            <option value="1">Challenges</option>
            <option value="2">Projects</option>
            <option value="3">Community</option>
            <option value="4">Open Source</option>
<label for="improvement">What would you like to see improved? (Check all that apply)
  <select id="improvement" name="improvement">
     <option value="">Select an option</option>
10

There is no closing tag for the body, form and last label.

12

thanks.
iā€™ve created radio buttons but i want the option for multiple buttons to be selected. do you know the best way to do this

13

Use a different (name=ā€œā€) attributes for each radio buttons.

14

How do i change the submit text to green

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;
  font-family: Tahoma;
  font-size: 16px;
}
h1, p {
  margin: 1em auto;
  text-align: center;
}
form {
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 2em;
}
fieldset {
  border: none;
  padding: 2rem 0;
  border-bottom: 3px solid #3b3b4f;
}
fieldset:last-of-type {
  border-bottom: none;
}
input, textarea {
  background-color: #0a0a23;
  border: 1px solid #0a0a23;
  color: #ffffff;
}
input[type="submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: #3b3b4f;
  border-color: white;
  min-width: 300px;
}```
15

My p attribution is also not working

 <p id='description' Thank you for taking the time to help us improve the platform</p>```
16

You forgot to add > at the end of your opening tag.

1 Like
18

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