Survey form project help im confused

1

Hello, I’m currently trying to start the surveyform and im trying to do the exact same form as

https://codepen.io/freeCodeCamp/pen/VPaoNP

Im creating a div for the form. and then I want to put h1 OVER it. but it just vanishes then (so its basically behind it?) Also cant I use flexbox in codepen.io?

Why cant I position a div with display:flex; >justify-content: center; ? do I always have use that code (.center div) to make it center in the middle? I thought I could just juse display: flex; (to use the flexbox)
and the justify-content: center; but it doesnt work? why is that?

.center-div
{
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: #ccc;
  border-radius: 3px;
}
2

You’ll want to put the <h1> in a <div> of it’s own. Think of it like this, everything need to be in a box. Those boxes are the <div>

3

Well I already found the next problem… :expressionless: https://codepen.io/anon/pen/jgWdMW how am I supposed to put them below each other and not besides?

4

So there are lots of ways to do this. TBH you probably need to practice with empty <div>s check out what I did to get used to the flow.

https://codepen.io/placid7/pen/rqNQMe

5

I dont even know where to start TBH. Shouldnt it just work fine with flexbox? I understand most of the things, but Positioning is so complicated to me still. How would you do it? thats frustrating.

Does this happen because im not using a form?

6

No, let me look at your code. I will tell you that front end design is probably one of the most frustrating things to become proficient at.

7

https://codepen.io/anon/pen/jgWdMW

8

To begin with, on line 17, you don’t close the div tag.

Then, if you flex the survey, it is flexing its direct children - the paragraph, and the div.labels element.

I really REALLY suggest you click on that little drop-down arrow beside the HTML label - one of the options is ‘Analyze HTML’. That should point you to a number of HTML syntax issues to be corrected.

1 Like
9

make sure you close your tags and I put the header in a div stick the below code in your body and take a peek. I put line breaks after each input feild to get them below each other. What else did you want to do?

  <div>
    <h1> A Survey Form </h1>
  </div>
  
  <div class="surveyform">
    <p id="description"> Let us know how we can improve freeCodeCamp     </p>
    <div class="labels">
      <label id="name-label" for="name">* Name: </label>
      <input type="text" id="name" placeholder="Enter your name" required><br>

      <label id="email-label" for="email">* Email: </label>
      <input type="text" id="email" placeholder="enter your mail"><br>

      <label id="age-label" for="age">* Age: </label>
      <input type="text" id="email" placeholder="Enter your Age"><br>
    </div>
  </div>
10

I did not know that LOL

11

If you want a fun and easy way to learn about flex (and I know it’s gonna sound silly, but it helped me a LOT!)…

there are similar ‘gamification’ routes to learning CSS grid (and I’ve just found a GREAT one for javascript Web Workers!) Making it a game system makes it a little easier to retain, and a little less “work-y”.

1 Like
12

It’s a great feature. I use the tidy all the time, but the analyze is also a very very useful tool.

1 Like
13

I’ve tried it before and It made me understand flexbox a bit more. but my biggest problem here is how do I align the whole stuff properly.

Name: _______
Name1: _______
Name:2 _______

lets say it looks like this… how do I make the underlines center then? And and before I also had the case that everything was besides each other like this:

Name1: _______ Name2: _______ Name3: _______ Why was that? How do I change that with CSS?

Also. like right now the Inputfield for “Enter your Age” is not centered like all the other stuff. Im getting frustrated about this I understand the concept but I cant apply them properly :confused:

14

So the first thing I did, in trying to see this, was to try for something I could see a little better. In order to achieve that, I changed the width of the surveyForm element from a fixed pixel width, to a more responsive one. I used width: 60vw; just because I could.

Second, your labels/inputs are wrapped in a div.labels, so that’s where your flex would need to be attached. Here’s what I used, and it works pretty well:

.labels{
  display: flex;
  flex-wrap: wrap;
  
}
.labels label {
  width: 15vw;
  text-align: right;
}
.labels input {
  width: 40vw;
}

You can see that working here: https://codepen.io/snowmonkey/pen/BXjeqo?editors=0100

1 Like
15

Yea. but it stretches over the whole page.

https://codepen.io/anon/pen/jgWdMW > Why are the Input boxes not all on the same line? How do I accomplish this?
Also how can I accomplish that each field is under each other with using
2 times?

16

Do you want the fields inline or underneath each other? and what do you mean by “2 times”?

17

I’ve edited your post for readability. 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 easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

18

Hey, I want the fields to all start at the same spot so that they are all undereach other. I edited my code so right now all they are always 1 label and 1 input in 1

that makes it so that the text and the box are in one line. if i would do it for everything (each label 1
, each input 1
then the text would be over the Inputfield. Is that correct?

I want the boxes to all start at the same position, so that they are all parallel. so underneath each other yes.

about the 2 times I was talking about

to linebreak it so they are is 1 space between each inputfield.

I want it to look like this: https://cdn.jotfor.ms/form-templates/screenshots/legacy/20794585469470/competition-entry-form.png?v=1.1.17 How Do I accomplish this? is there a easy and fast way, or better question is there a way IT SHOULD be done?

19

Try something like this…https://stackoverflow.com/questions/9325426/css-how-to-create-a-label-width-of-the-longest-containing-text to get the labels and input fields lined up.

20

Here’s an example to start with…

<div class="labels">
    <fieldset>
      <div class = "row">
        <label for="name">* Name: </label>
        <input type="text" id="name" placeholder="Enter your name">       </div>

        <div class = "row">
          <label for="email">* Email: </label>
          <input type="text" id="email" placeholder="enter your mail">
        </div>

        <div class = "row">
          <label for="age">* Age: </label>
          <input type="text" id="age" placeholder="Enter your Age">
        </div>

        <div class = "row">
          <label for="Number">* Number: </label>
          <input type="text" id="Number" placeholder="Enter your Number">
        </div>
    </fieldset>
  </div>

.labels { display: table; }
.row   { display: table-row; }
label { display: table-cell;}

You really need to clean up your html. You have to make sure to close all your tags, otherwise you are going to have all kinds of unintended consequences.
Also break things into pieces. That’s the benefit of containers.