Build a Survey Form

1

Hi,

I’m extremely new to the world of coding and suffice to say, it’s clicking but also not. I have no experience whatsoever except this FreeCodeCamp modules.

I’ve completed the first few modules and now I’ve got to the actual coding part of building a survey form.

I’m a bit miffed as to why this element isn’t working, as what I’m trying to do is change the body as ‘display block’, but clearly I’m doing something wrong, I just don’t understand what.

I’m also referring to the previous modules but I can’t seem to work it out. This FreeCodeCamp is really great, but maybe there’s some information I’m missing/rules or a text book that might help to refer to. If there is can anyone also help with any suggestions.

Screenshot 2024-06-11 141551
Screenshot 2024-06-11 1415511497×505 104 KB

2

what do you mean

the body is a block element by default

3

So before I amended the fieldset tag, it was displaying like this:

image
image1153×568 58.8 KB

But when I took that first image, I’d already put in the fieldset tag. I was under the assumption to correct this image in this post you’d do the;
label {display:block etc etc

but do you just add a field set instead?

4

Please post your actual code instead of screenshots. Thanks

5

How do i do that without it just converting into the doc?

6

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
7 
<!DOCTYPE html>
<html lang="en"></html>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<title></title>
<h1 id="title">Survey Form For Free Code Campers</h1>
<p>Your opinions matter to help our ever developing site!</p>
<form id="survey-form">
 <fieldset>
   <label id="name-label">Your Name
    </label>
    <input  placeholder="Your name" id="name" type="text" required></input>
     <label id="email-label">Your Email
    </label>
    <input placeholder="Your email" id="email" type="text" required></input>
    <label id="number-label">Your Age
    </label>
    <input placeholder="Your age" id="number" type="text" required min="15" max="120"></input>
   </fieldset>
   </form>

Made this:
image

8

But taking out ‘’ - made it look like this
image

My query is that I didn’t realise the fix was the fieldset tag, i thought it was the code;

label { display: block; } etc

1 Like
9

It’s all good… after looking over different forum posts and using Google, I’ve realised I’m putting the element on the HTML rather than the CSS which is why of course it would work. Also realise as above mentioned by someone else, the field set auto has display as block.

Maybe some point in the next 7 years I’ll finally understand the rest, haha!

1 Like
10

Hello @Mara2024! Welcome to the fascinating world of coding!
Not sure exactly what your issue was but from your screenshot it looks like you are putting your css in the wrong place. See below:

Build a Survey Form - General - The freeCodeCamp Forum
Build a Survey Form - General - The freeCodeCamp Forum838×434 220 KB

See where you put that label { display… and so on? That’s not where it goes - you’re supposed to put all the styles in the styles.css folder accessed by the button above your coding window.
Oh, glad to see you’ve figured it out on your own. That’s always great when you solve something with your own research and thinking. You will do that many more times, I’m sure.

Don’t worry - I thought so too but it all came together much faster than I expected. Just don’t ever give up! :slight_smile:
Have a good time,
Nicolas, 17

1 Like
11

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