Building A Survery Form

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">

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; 
}

Hope that made sense. Thanks in advance.

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.

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>

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>

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?

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

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

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

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

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