Building A Survery Form

HTML-CSS
1

Hi there, Something simple which I’m probably just being stupid with but I’ve only been doing this HTMLCSS for a couple days. I’ve currently got this for

     <label id="name-label"> Name: 
<br/>
     <form><input required id="name"> 
<br/>
     <label id="email-label"> Email:
<br/> 
     <form><input required id="email">

image
image1904×215 5.91 KB

I tried centering the Name form by doing this in styles.css but it hasn’t worked. How would i go about centering the two forms and additionally placing the Name and Email text on the top left of each form like the following image below.

.name {
  text-align: center; 
}

image
image1900×387 62.1 KB

Hope that made sense. Thanks in advance.

2

So, I think you have some other stuff to fix before worrying about the styling to be honest

  • Your label’s have no closing label tag
  • your labels should really be inside your form not on the outside
  • your forms have no closing tag
  • You really should have only one form there shouldnt be a new form for for each input.
  • your css is using a style for a class of “name” but you dont have a name class in your html, or at least in the code you have shown

Using br is not the best thing to be doing here, but I think you need to clean up and fix your html first. Or, go back through the challenges and refresh yourself.

3

Does this look better. How would you place them onto different lines instead of using <br /> yourself? Would now being doing display: block; in CSS the best way?

<form>
      <label for="first-name"> Name: <input id="name" required > </label> 
      <label for="email-label"> Email: <input id="email" required > </label> 
</form>
4

Looks a lot better, and yes using display block is what you want to do. You could do something like this. Gives both of them a class, and then uses the class to have their display be block. This also gives some space between them as well

<style>
  .form-label {
    display: block;
  }
#name{
   margin-bottom: 10px;
}
</style>

<form>
  <label class="form-label" for="name">Name:</label>
  <input id="name" required>

  <label class="form-label" for="email">Email:</label>
  <input id="email" required>
</form>
5

I’ve took that on board and added the classes allowing me to do the blocks. Thank You for the replies.

Now that my code is tidied up and i have it position correctly how does one place the text over to the top left of the box like shown above?

6

I was going to ask earlier, but I am not exactly sure what you are referring to. If you could just point what text you mean. When I read

I think of the name and email text being above the boxes, but I am sure thats not what you are referring to

7

Yes the name and email above the boxes is what I’m referring to.

8

They are already there. Those are your labels above your input, if you fixed the errors I mentioned your code should be looking like this right now
image

EDIT: Now, that I look again, it looks like you have your input inside your label but you want your label first then your input like this

 <label class="form-label" for="name">Name:</label>
  <input id="name" required>
2 Likes
9

You sir are a genius. Thank you so much for the help and the criticism. That has worked awesome with a few style tweak which were using label. Thank You haha

1 Like
10

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