How to align form input in HTML

Question

I am struggling to align the input on this form. I've tried many things but none of them worked.

If anyone can help me fix this that will be great. Please find attached the code and the form

enter image description here enter image description here

[

<form action="" method="post" enctype="text/plain">
  <label>First Name</label>
  <input type="text" name="Your Name" value=""><br/>
  <labe>Last Name</label>
    <input type="text" name="Last Name" value=""><br/>
  <label>Contact Number</label>
  <input type="value" name="Contact Number" value=""><br/>
  <label>Email address</label>
  <input type="email" name="Email" value=""><br/>
  <label>Date of the application</label>
  <input type="date" name="Date"><br>
  <label> Add your message</label><br>
  <textarea name="Message" rows="10" cols="30"></textarea><br>
  <label>Have you read the terms and condition of the website?</label>
  <input type="checkbox" name="box"><br>
  <label>Submit application</label>
  <input type="submit" name="">
</form>

]3

@Always_askibg23 I have seen your form but snippets of the code would have been very helpful please kindly paste part of the html and CSS that you currently have to enable someone help you. #cheers — Monday A Victor, May 09 '20 at 10:46
My apologies. It is my first time using it. The snippets of the code is the first "enter image description here". Somehow the two snippets are next to each other and I don't know how to separate the snippets. I will add it again I have not added the CSS yet, just the HTML. I will add the snippet of the code. — Always_asking23, May 09 '20 at 11:10

score 1 · Answer 1 · answered May 09 '20 at 10:43

1

How to align input forms in HTML This question has been already answered before. If you could elaborate a little bit of what you have tried and what failed then it might be helpful.

answered May 09 '20 at 10:43

Vaibhav

771
6
9

My apologies. Still learning how to use this thing. Mine form is not align and I don't know how to align it using purely HTML. Now I have managed to insert my code. Hope that helps – Always_asking23 May 09 '20 at 11:19

score 0 · Answer 2 · edited Dec 18 '20 at 12:44

0

Your question is not understand clearly, but it seems you want to align label and input for all the places with equal space between the two items right?

I modified your code and I created the new code, look at this you will get some idea. This will give equal space between the label and input.

HTML code:

<div class="form-label">
    <label>Name</label>
    <input type="text" name="">
</div>

CSS code:

label {
    color: #000;
    width: 50%;
    float: left;
}

.form-label {
    width: 100%;
    display: inline-block;
}

input {
    width: 50%;
}

edited Dec 18 '20 at 12:44

Brhaka

1,622
3
11
31

answered May 09 '20 at 10:42

Sankar S

59
1
8

My apologies for my lack of clarity. That is the idea. Thanks – Always_asking23 May 09 '20 at 11:34
I've done the code but the input still not align , still having the same problem. – Always_asking23 May 09 '20 at 11:43

How to align form input in HTML

2 Answers2