How to align input forms in HTML

问题

I'm new to HTML and I'm trying to learn how to use forms.

The biggest issue I am having so far is aligning the forms. Here is an example of my current HTML file:

<form>
 First Name:<input type="text" name="first"><br />
 Last Name:<input type="text" name="last"><br />
 Email:<input type="text" name="email"><br />
</form>

The problem with this is, the field box after 'Email' is drastically different in terms of spacing compared to first, and last name. What is the 'proper' way to make it so that they 'line-up' essentially?

I am trying to practice good form and syntax...a lot of people might do this with CSS I am not sure, I have only learned the very basics of HTML so far.

回答1:

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>

回答2:

The accepted answer (setting an explicit width in pixels) makes it hard to make changes, and breaks when your users use a different font size. Using CSS tables, on the other hand, works great:

form  { display: table;      }
p     { display: table-row;  }
label { display: table-cell; }
input { display: table-cell; }

<form>
  <p>
    <label for="a">Short label:</label>
    <input id="a" type="text">
  </p>
  <p>
    <label for="b">Very very very long label:</label>
    <input id="b" type="text">
  </p>
</form>

Here's a JSFiddle: http://jsfiddle.net/DaS39/1/

And if you need the labels right-aligned, just add text-align: right to the labels: http://jsfiddle.net/DaS39/

EDIT: One more quick note: CSS tables also let you play with columns: for example, if you want to make the input fields take as much space as possible, you can add the following in your form

<div style="display: table-column;"></div>
<div style="display: table-column; width:100%;"></div>

you may want to add white-space: nowrap to the labels in that case.

回答3:

A simple solution for you if you're new to HTML, is just to use a table to line everything up.

<form>
  <table>
    <tr>
      <td align="right">First Name:</td>
      <td align="left"><input type="text" name="first" /></td>
    </tr>
    <tr>
      <td align="right">Last Name:</td>
      <td align="left"><input type="text" name="last" /></td>
    </tr>
    <tr>
      <td align="right">Email:</td>
      <td align="left"><input type="text" name="email" /></td>
    </tr>
  </table>
</form>

回答4:

I find it far easier to change the display of the labels to inline-block and set a width

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

回答5:

You should use a table. As a matter of logical structure the data is tabular: this is why you want it to align, because you want to show that the labels are not related solely to their input boxes but also to each other, in a two-dimensional structure.

[consider what you would do if you had string or numeric values to display instead of input boxes.]

回答6:

For this, I prefer to keep a correct HTML semantic, and to use a CSS simple as possible.

Something like this would do the job :

label{
  display: block;
  float: left;
  width : 120px;    
}

One drawback however : you might have to pick the right label width for each form, and this is not easy if your labels can be dynamic (I18N labels for instance).

回答7:

using css

.containerdiv label {
  float:left;
  width:25%;
  text-align:right;
  margin-right:5px; /* optional */
}
.containerdiv input {
  float:left;
  width:65%;
}

this give you something like:

           label1 |input box             |
    another label |another input box     |

回答8:

Well for the very basics you can try aligning them in the table. However the use of table is bad for layout since table is meant for contents.

What you can use is CSS floating techniques.

CSS Code

.styleform label{float:left;}
.styleform input{margin-left:200px;} /* this gives space for the label on the left */
.styleform .clear{clear:both;} /* prevent elements from stacking weirdly */

HTML

<div class="styleform">
<form>
<label>First Name:</label><input type="text" name="first" /><div class="clear"></div>
<label>Last Name:</label><input type="text" name="first" /><div class="clear"></div>
<label>Email:</label><input type="text" name="first" /><div class="clear"></div>
</form>
</div>

An elaborated article I wrote can be found answering the question of IE7 float problem: IE7 float right problems

回答9:

I'm a big fan of using definition lists.

<dl>
<dt>Username:</dt>
<dd><input type="text" name="username" /></dd>
<dt>Password:</dt>
<dd><input type="password" name="password" /></dd>
</dl>

They're easy to style using CSS, and they avoid the stigma of using tables for layout.

回答10:

I know this has already been answered, but I found a new way to align them nicely - with an extra benefit - see http://www.gargan.org/en/Web_Development/Form_Layout_with_CSS/

basically you use the label element around the input and align using that:

<label><span>Name</span> <input /></label>
<label><span>E-Mail</span> <input /></label>
<label><span>Comment</span> <textarea></textarea></label>

and then with css you simply align:

label {
    display:block;
    position:relative;
}

label span {
    font-weight:bold;
    position:absolute;
    left: 3px;
}

label input, label textarea, label select {
    margin-left: 120px;    
}

you do not need any messy br lying around for linebreaks - meaning you can quickly accomplish a multi-column layout dynamically
the whole line is click-able. Especially for checkboxes this is a huge help.
Dynamically showing/hiding form lines is easy (you just search for the input and hide its parent -> the label)
you can assign classes to the whole label making it show error input much clearer (not only around the input field)

回答11:

The traditional method is to use a table.

Example:

<table>
  <tbody>
     <tr>
        <td>
           First Name:
        </td>
        <td>
           <input type="text" name="first">
        </td>
     </tr>
     <tr>
        <td>
           Last Name:
        </td>
        <td>
           <input type="text" name="last">
        </td>
     </tr>
  </tbody>
</table>

However, many would argue that tables are restricting and prefer CSS. The benefit of using CSS is that you could use various elements. From divs, ordered and un-ordered list, you could accomplish the same layout.

In the end, you'll want to use what you're most comfortable with.

Hint: Tables are easy to get started with.

回答12:

css I used to solve this problem, similar to Gjaa but styled better

p
{
    text-align:center;
        }
.styleform label
{
    float:left;
    width: 40%;
    text-align:right;
    }
.styleform input
{
    float:left;
    width: 30%;
    }

Here is my HTML, used specifically for a simple registration form with no php code

<form id="registration">
    <h1>Register</h1>
    <div class="styleform">
    <fieldset id="inputs">
        <p><label>Name:</label> 
          <input id="name" type="text" placeholder="Name" autofocus required>
        </p>
        <p><label>Email:</label>   
          <input id="email" type="text" placeholder="Email Address" required>
        </p>
        <p><label>Username:</label>
          <input id="username" type="text" placeholder="Username" autofocus required>
        </p>
        <p>   
          <label>Password:</label>
          <input id="password" type="password" placeholder="Password" required>
        </p>
    </fieldset>
    <fieldset id="actions">

    </fieldset>
    </div>
    <p>
          <input type="submit" id="submit" value="Register">
          </p>

It's very simple, and I'm just beginning, but it worked quite nicely

回答13:

Insert input tags inside an unordered lists.Make the style-type none. Here's an example.

<ul>
Input1     
<li> <input type="text" />
Input2
<li> <input type="text" />
<ul/>

Worked for me !

回答14:

<form>
    <div>
        <label for='username'>UserName</label>
        <input type='text' name='username' id='username' value=''>  
    </div>
</form>

In the CSS you have to declare both label and input as display: inline-block and give width according to your requirements. Hope this will help you. :)

回答15:

I think it would be easier if you used a table to structure your form. Might be exhausting but nothing 'copy and paste' with a little editing can't fix.

<form>
<table>
<tr>
<td> <label>First Name:</label> </td> <td> <input type="text" name="first"> </td> </tr>
<tr> <td> <label>Last Name:</label> </td> <td> <input type="text" name="last"> </td></tr>
<tr> <td> <label> Email: </label> </td> <td> <input type="text" name="email"> </td></tr>
</table>
</form>

Your can add some padding or float the cell contents to make it look more spacious.

回答16:

Simply add

<form align="center ></from>

Just put align in opening tag.

来源：https://stackoverflow.com/questions/4309950/how-to-align-input-forms-in-html

标签

html

forms

alignment