Best IT Recipes

How to align input forms in HTML

I am new to HTML and I am trying to learn how to use forms.

The biggest problem I have so far is the alignment of 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 that the field field after "Email" is very different in terms of interval compared to the first and last. What is the “right” way of doing this so that they "line up" essentially?

I am trying to practice good form and syntax ... many people can do this with CSS. I'm not sure, I just learned the very basics of HTML so far.

+105
html alignment forms
Nov 30 '10 at 2:14
source share
16 answers

In another example, this uses CSS, I just put the form in a div with the container class. And they indicated that the incoming elements contained inside should be 100% of the width of the container and not have any elements on both sides.

 .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>
+55
Nov 30 '10 at 2:26
source share

The accepted answer (setting the explicit width in pixels) makes changes difficult and is interrupted 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 JSFiddle: http://jsfiddle.net/DaS39/1/

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



EDIT: Another short note: CSS tables also allow you to play with columns: for example, if you want input fields to take up as much space as possible, you can add the following to your form:

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

you might want to add white-space: nowrap to labels in this case.

+119
May 19 '14 at 15:00
source share

A simple solution for you if you are new to HTML is to simply use a table to align everything.

 <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>
+27
Nov 30 '10 at 2:25
source share

It’s much easier for me to change the display of labels to an inline block and set the width

 label { display: inline-block; width:100px; text-align: right; }
+16
Aug 08
source share

You must use the table. In the logical structure, the data is tabular: that is why you want it to be aligned, because you want to show that labels are not exclusively associated with input fields, but also with each other, in a two-dimensional structure.

[think about what you would do if string or numeric values ​​were displayed instead of input strings.]

+6
Apr 12 '13 at 7:56
source share

For this, I prefer to keep the correct semantics of HTML and make the most of CSS.

Something like this will do the job:

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

However, one drawback: you may need to select the correct label width for each shape, and this is not easy if your labels can be dynamic (e.g., I18N labels).

+3
Nov 21
source share

using css

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

this will give you something like:

  label1 |input box | another label |another input box |
+2
May 18 '13 at
source share

Good for the very basics, you can try to align them in a table. However, using a table is bad for layout because the table is for content.

What you can use are CSS floating methods.

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>

The developed article that I wrote can be found by answering a question about a problem with IE7 float: IE7 float problems on the right

+1
Nov 30 '10 at 2:20
source share

I am 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 are easy to style with CSS, and they avoid the stigma of using tables for layout.

+1
Nov 30 2018-10-10T00:
source share

I know that this has already been answered, but I found a new way to align them correctly - with the added benefit of - see http://www.gargan.org/en/Web_Development/Form_Layout_with_CSS/

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

 <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 just 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 don’t need a messy forehead lying around for line breaks - this means you can quickly execute a multi-column layout dynamically
  • the entire line is clickable. Especially for flags this is a huge help.
  • Dynamically showing / hiding lines of lines is easy (you just look for the input and hide its parent → label)
  • You can assign classes to the entire shortcut, which will greatly simplify error input (not only around the input field).
+1
Oct 17 '13 at 9:38 on
source share

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 argue that tables restrict and prefer CSS. The advantage of using CSS is that you can use various elements. From a div, an ordered and unordered list, you can execute the same layout.

In the end, you will want to use what you like best.

Hint: Tables are easy to start with.

0
Nov 30 '10 at 2:28
source share

css I used this problem similar to Gjaa but better stylish

 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 without 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 getting started, but it worked pretty well

0
Apr 16 '14 at 23:32
source share

Paste input tags in an unordered list. Create a style type none. Here is an example.

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

Worked for me!

0
Dec 17 '16 at 4:20
source share
 <form> <div> <label for='username'>UserName</label> <input type='text' name='username' id='username' value=''> </div> </form>

In CSS, you must declare both a label and input as a display: an inline block and specify a width to suit your requirements. Hope this helps you. :)

-one
07 Feb '14 at 9:04
source share

I think it would be easier if you used a table to structure your form. It can be tedious, but nothing “copy and paste” with a little editing can not be fixed.

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

You can add some additions or place the contents of a cell to make it more spacious.

-2
Nov 05 '14 at 11:14
source share

Just add

 <form align="center ></from>

Just put the alignment in the opening tag.

-3
07 Oct '17 at 18:50
source share


More articles:


All Articles