Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:
The radio buttons and the check boxes are not on the same line with their text.
The button of the page joined some things that are expected to be separate and did not show the submit button.

Your code so far

<!-- file: index.html -->
<!DICTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>FreeCodeCamp Survey Form</title>
    <link rel="stylesheet" href="styles.css"/>
  </head>
  <body>
    <h1 id="title">FreeCodeCamp Survey Form</h1>
    <p id="description">Its our to have you fill out this form.</p>
    <form id="survey-form">
      <label id="name-label">Name <input id="name" type="text" required placeholder="Enter your name"/>
      </label>
      <label id="email-label">Email <input id="email" type="email" required placeholder="Enter your Email"/>
      </label>
      <label id="number-label">Age <input id="number" type="number" required min="14" max="130" placeholder="Enter the figure of your age"/>
      </label>
      <label for="role">Which of these options best describes your current role?
        <select id="dropdown" name="role">
          <option value="">(select a role) </option>
          <option value="1">Student </option>
          <option value="2"> Programmer</option>
          <option value="3">Trainer </option>
          <option value="4">Other </option>
        </select>
      </label>
      <label>Would you refer people to FreeCodeCamp?
        <input type="radio" name="likes" value="1"/>Surely</select>
        <input type="radio" name="likes" value="2"/>Likely
        <input type="radio" name="likes" value="3"/>indifferent
      </label>
      <label id="favorite">What is your favorite feature of FreeCodeCamp?
        <select id="dropdown" name="favorite">
          <option value="">Choose a favorite </option>
          <option value="1">Learning Coding</option>
          <option value="2">FreeCodeCamp Forum</option>
          <option value="3">FreeCodeCamp Newsletter</option>
          <option value="4">FreeCodeCamp Support
          </option>
        </select>
        <label id="opinion">What would you like to see improved? Tick the option(s) of yours choice.
        </label>
        <input id="opinion" type="checkbox" value="1" class="inline">Front-end Project </input>
        <input id="opinion" type="checkbox" value="2" class="inline">Back-end Project</input>
        <input id="opinion" type="checkbox" value="3" class="inline">Challenges</input>
        <input id="opinion" type="checkbox" value="4" class="inline">Gitter help rooms</input>
        <input id="opinion" type="checkbox" value="5" class="inline">Videos</input>
        <input id="opinion" type="checkbox" value="6" class="inline">City Meetups</input></label>
        <label for="comment"> Enter your comment or suggestion below.<textarea id="comment" name="comment" row="3" col="60" placeholder="Type your comment here"></label>
      <label id="submit">Submit<button id="submit" type="submit"></submit>
    </form>
  </body>
</html>

/* file: styles.css */
h1, p {text-align: center;}
input, select {
  display: block;
  padding: 2rem auto;
}
label[type="input"] {
  display: block
  }

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Mobile Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

The block attributes puts your elements on a separate line. Try setting the display attribute to inline.

3

I will work on that and get back…

4

I have set the display( in the css) for input[type=“radio”] as inline.
Meanwhile, after this all the radio and their respective text were merged on the same line instead having a single radio and it’s text on a single line the the next on another line.

I think there is light at the end of your suggestion. Please think of what I can do?

5

Hello!
I suggest using either an unordered element or ordered element with nested list elements for each radio button.
example:
< ol>
< li> < element> < /li>
< /ol>

And, if you do not wish the dot or the number in front of the choice, Use a li selector to set the property decoration to none.

css example:

p{
property: value;
}

Hope this helps you.
Happy coding! :slight_smile:

6

Tell us what’s happening:
I have some issues. Below is the result of the test I ran.
running tests
All your checkboxes inside #survey-form should have a value attribute and value.

You should have at least one textarea element that is a descendant of #survey-form.
// tests completed
How do I fix the instruction above despite what I have tried?

***Meanwhile, my checkboxes are clustered together in one line (when given inline display and when given block display the checkboxes and their respective text are not on the same line.

**How do I make the size of the text-area bigger and each component of the form

Thank you all for your anticipated solutions.

Your code so far

<!-- file: index.html -->
<!DICTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>FreeCodeCamp Survey Form</title>
    <link rel="stylesheet" href="styles.css"/>
  </head>
  <body>
    <h1 id="title">FreeCodeCamp Survey Form</h1>
    <p id="description">Its our to have you fill out this form.</p>
    <form id="survey-form">
      <label id="name-label">Name <input id="name" type="text" required placeholder="Enter your name"/>
      </label>
      <label id="email-label">Email <input id="email" type="email" required placeholder="Enter your Email"/>
      </label>
      <label id="number-label">Age <input id="number" type="number" required min="14" max="130" placeholder="Enter the figure of your age"/>
      </label>
      <label for="role">Which of these options best describes your current role?
        <select id="dropdown" name="role">
          <option value="">(select one) </option>
          <option value="1">Student </option>
          <option value="2"> Programmer</option>
          <option value="3">Trainer </option>
          <option value="4">Other </option>
        </select>
      </label>
      <label>Would you refer people to FreeCodeCamp?
      </label>
      <label for="like"><input id="like" type="radio" name="like" class="inline" value="1"> Surely</label>
      <label for="like"><input id="like" type="radio" name="like" value="2"> Likely
      </label>
      <label for="like"><input id="like" type="radio" name="like" class="inline" value="3"> Indifferent
        </label>
      <label>What is your favorite choice on FreeCodeCamp? (Tick all that applies)</label>
      <label for="favorite">
         <input id="favorite" type="checkbox" name="favorite" value="1" class="inline"> Front-end Project
         </input>
         <input id="favorite" type="checkbox" name="favorite" value="2" class="inline"> Back-end Project
         </input>
         <input id="favorite" type="checkbox" name="favorite" valie="3" class="inline"> Digital Visualization</input>
         <input id="favorite" type="checkbox" name="favorite" value="4" class="inline">Open Source Community 
         <input id="favorite" type="checkbox" name="favorite" value="5" class="inline">Challenges 
         <input id="favorite" type="checkbox" name="favorite" value="6" class="inline">Forum
         <input id="favorite" type="checkbox" name="favorite" value="7" class="inline">Videos
         <input id="favorite" type="checkbox" name="favorite" value="8" class="inline">Wiki
         <input id="favorite" type="checkbox" name="favorite" value="9" class="inline">Newsletters
         <input id="favorite" type="checkbox" name="favorite" value="10" class="inline">Affiliates
        </label>
        <label for="comment">Additional comment or suggestion<input id="comment" type="textarea" placeholder="Enter your comment or suggestion here">
        </label>
        <input id="submit" type="submit" value="SUBMIT">
    </form>
  </body>
</html>

/* file: styles.css */
h1, p {text-align: center;}
input, select, label {
  display: block;
  padding: 2rem auto;
}
label[type="input"] {
  display: inline;
  }
input[type="radio"] {
  display: inline;
  }
input[type="checkbox"] {
  display: inline;
  }

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Mobile Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

7

you basically didnt do step number 15.

8

What do I need to correct in the way I did it?

9

well, you need to have element called textarea
where user can write his text, just like we do when we open this reply on forum.
we type in a large box and that box is textarea box

1 Like
10

Tell us what’s happening:
Describe your issue in detail here. I have not gotten solution yet
I have some issues. Below is the result of the test I ran.
running tests
All your checkboxes inside #survey-form should have a value attribute and value.

You should have at least one textarea element that is a descendant of #survey-form.
// tests completed
How do I fix the instruction above despite what I have tried?

***Meanwhile, my checkboxes are clustered together in one line (when given inline display and when given block display the checkboxes and their respective text are not on the same line.

**How do I make the size of the text-area bigger and each component of the form

Thank you all for your anticipated solutions.

Your code so far

<!-- file: index.html -->
<!DICTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>FreeCodeCamp Survey Form</title>
    <link rel="stylesheet" href="styles.css"/>
  </head>
  <body>
    <h1 id="title">FreeCodeCamp Survey Form</h1>
    <p id="description">Its our to have you fill out this form.</p>
    <form id="survey-form">
      <p id="name-label">Name <input id="name" type="text" required placeholder="Enter your name"/>
      </p>
      <label id="email-label">Email <input id="email" type="email" required placeholder="Enter your Email"/>
      </label>
      <p id="number-label">Age <input id="number" type="number" required min="14" max="130" placeholder="Enter the figure of your age"/>
      </p>
      <label for="role">Which of these options best describes your current role?
        <select id="dropdown" name="role">
          <option value="">(select one) </option>
          <option value="1">Student </option>
          <option value="2"> Programmer</option>
          <option value="3">Trainer </option>
          <option value="4">Other </option>
        </select>
      </label>
      <p>Would you refer people to FreeCodeCamp?
      </p>
      <label for="like"><input id="like" type="radio" name="like" class="inline" value="1"> Surely</label>
      <label for="like"><input id="like" type="radio" name="like" value="2"> Likely
      </label>
      <label for="like"><input id="like" type="radio" name="like" class="inline" value="3"> Indifferent
        </label>
      <label>What is your favorite choice on FreeCodeCamp? (Tick all that applies)</label>
      <label>
         <input id="favorite" type="checkbox" name="favorite" value="1" class="inline"> Front-end Project
         </input>
         <input id="favorite" type="checkbox" name="favorite" value="2" class="inline"> Back-end Project
         <input id="favorite" type="checkbox" name="favorite" valie="3" class="inline"> Digital Visualization
         <input id="favorite" type="checkbox" name="favorite" value="4" class="inline">Open Source Community 
         <input id="favorite" type="checkbox" name="favorite" value="5" class="inline">Challenges 
         <input id="favorite" type="checkbox" name="favorite" value="6" class="inline">Forum
         <input id="favorite" type="checkbox" name="favorite" value="7" class="inline">Videos
         <input id="favorite" type="checkbox" name="favorite" value="8" class="inline">Wiki
         <input id="favorite" type="checkbox" name="favorite" value="9" class="inline">Newsletters
         <input id="favorite" type="checkbox" name="favorite" value="10" class="inline">Affiliates
        </label>
        <p for="comment">Additional comment or suggestion<input id="comment" type="textarea" placeholder="Enter your comment or suggestion here">
        </p>
        <input id="submit" type="submit" value="SUBMIT">
    </form>
  </body>
</html>

/* file: styles.css */
h1 {text-align: center;}
input, select, label {
  display: block;
  padding: 2rem auto;
}
label[type="input"] {
  display: inline;
  }
input[type="radio"] {
  display: inline;
  }
p[type="checkbox"] {
  }

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Mobile Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

1 Like
11

I see after the input of ‘Front-end Project’ you close it with /input tag. Try removing it. I hope that works. Sometimes one error can really through you off.

Awesome job!

2 Likes
12

Textarea is an actual element, but you are trying to use it as a type to another element

you also have several issues in your html

  1. <!DICTYPE html> should be <!DOCTYPE html>
  2. Multiple elements have the same id value. An id should be unique to a single element. Meaning multiple elements can not have the same id
  3. In one of the checkboxes, you’ve mistyped the value attribute as valie.
2 Likes
13

Than you all.
I effected all the suggestions and suddenly accept the work as okay.

2 Likes
14

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