How to Align Input Forms in HTML

How to align input forms in HTML

Another example, this uses CSS, I simply put the form in a div with the container class. And specified that input elements contained within are to be 100% of the container width and not have any elements on either side.

.container {  width: 500px;  clear: both;}
.container input {  width: 100%;  clear: both;}

<html>
<head>  <title>Example form</title></head>
<body>  <div class="container">    <form>      <label>First Name</label>      <input type="text" name="first"><br />      <label>Last Name</label>      <input type="text" name="last"><br />      <label>Email</label>      <input type="text" name="email"><br />    </form>  </div></body>
</html>

How to align input boxes in a form

the structure of your table is somewhat wrong..

<table>
<tr>
    <td>FirstName:</td>
    <td><input type="text" /></td>
</tr>
<tr>
    <td>LastName:</td>
    <td><input type="text" /></td>
</tr>
<tr>
    <td>UserName:</td>
    <td><input type="text" /></td>
</tr>
<tr>
    <td>Email:</td>
    <td><input type="email" /></td>
</tr>
</table>

Here's an example. http://jsfiddle.net/aqm7kjbg/1/

Just do the rest yourself... =) cheerio!

Align HTML input fields by :

Working JS Fiddle

HTML:

  <div>
      <label>Name:</label><input type="text">
      <label>Email Address:</label><input type = "text">
      <label>Description of the input value:</label><input type="text">
  </div>

CSS:

label{
    display: inline-block;
    float: left;
    clear: left;
    width: 250px;
    text-align: right;
}
input {
  display: inline-block;
  float: left;
}

Align labels in form next to input

WARNING: OUTDATED ANSWER
Nowadays you should definitely avoid using fixed widths. You could use flexbox or CSS grid to come up with a responsive solution. See the other answers.

One possible solution:

Give the labels display: inline-block;
Give them a fixed width
Align text to the right

That is:

label {
  display: inline-block;
  width: 140px;
  text-align: right;
}

<div class="block">
    <label>Simple label</label>
    <input type="text" />
</div>
<div class="block">
    <label>Label with more text</label>
    <input type="text" />
</div>
<div class="block">
    <label>Short</label>
    <input type="text" />
</div>

How to right-align form input boxes?

You can use floating to the right and clear them.

form {  overflow: hidden;}input {  float: right;  clear: both;}

<form>  <input name="declared_first" value="above" />  <input name="declared_second" value="below" /></form>