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.
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.
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>
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>
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;
}
<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>
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.]
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).
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 |
I'm a big fan of using definition lists.
They're easy to style using CSS, and they avoid the stigma of using tables for layout.
<dl>
<dt>Username:</dt>
<dd><input type="text" name="username" /></dd>
<dt>Password:</dt>
<dd><input type="password" name="password" /></dd>
</dl>
It also can be done using CSS and without tables or floats or fixed lengths by changing the content direction to rtl and then back to ltr, but the labels must go after each input.
To avoid this markup reordering, just set the label's text in a data-* attribute and show it using an ::after pseudo-element. I think it becomes much clearer.
Here is an example setting the label's text in a custom attribute called data-text and showing them using the ::after pseudo-element, so we don't mess with markup while changing direction to rtl and ltr :
form
{
display: inline-block;
background-color: gold;
padding: 6px;
}
label{
display: block;
direction: rtl;
}
input{
direction: ltr;
}
label::after{
content: attr(data-text);
}
<form>
<label data-text="First Name">
<input type="text" />
</label>
<label data-text="Last Name">
<input type="text" />
</label>
<label data-text="E-mail">
<input type="text" />
</label>
</form>
Clément's answer is by far the best. Here's a somewhat improved answer, showing different possible alignments, including left-center-right aligned buttons:
label {
padding-right: 8px;
}
.FAligned,
.FAlignIn {
display: table;
}
.FAlignIn {
width: 100%;
}
.FRLeft,
.FRRight,
.FRCenter {
display: table-row;
white-space: nowrap;
}
.FCLeft,
.FCRight,
.FCCenter {
display: table-cell;
}
.FRLeft,
.FCLeft,
.FILeft {
text-align: left;
}
.FRRight,
.FCRight,
.FIRight {
text-align: right;
}
.FRCenter,
.FCCenter,
.FICenter {
text-align: center;
}
<form class="FAligned">
<div class="FRLeft">
<p class="FRLeft">
<label for="Input0" class="FCLeft">Left:</label>
<input id="Input0" type="text" size="30" placeholder="Left Left Left" class="FILeft" />
</p>
<p class="FRLeft">
<label for="Input1" class="FCRight">Left Right Left:</label>
<input id="Input1" type="text" size="30" placeholder="Left Right Left" class="FILeft" />
</p>
<p class="FRRight">
<label for="Input2" class="FCLeft">Right Left Left:</label>
<input id="Input2" type="text" size="30" placeholder="Right Left Left" class="FILeft" />
</p>
<p class="FRRight">
<label for="Input3" class="FCRight">Right Right Left:</label>
<input id="Input3" type="text" size="30" placeholder="Right Right Left" class="FILeft" />
</p>
<p class="FRLeft">
<label for="Input4" class="FCLeft">Left Left Right:</label>
<input id="Input4" type="text" size="30" placeholder="Left Left Right" class="FIRight" />
</p>
<p class="FRLeft">
<label for="Input5" class="FCRight">Left Right Right:</label>
<input id="Input5" type="text" size="30" placeholder="Left Right Right" class="FIRight" />
</p>
<p class="FRRight">
<label for="Input6" class="FCLeft">Right Left Right:</label>
<input id="Input6" type="text" size="30" placeholder="Right Left Right" class="FIRight" />
</p>
<p class="FRRight">
<label for="Input7" class="FCRight">Right:</label>
<input id="Input7" type="text" size="30" placeholder="Right Right Right" class="FIRight" />
</p>
<p class="FRCenter">
<label for="Input8" class="FCCenter">And centralised is also possible:</label>
<input id="Input8" type="text" size="60" placeholder="Center in the centre" class="FICenter" />
</p>
</div>
<div class="FAlignIn">
<div class="FRCenter">
<div class="FCLeft"><button type="button">Button on the Left</button></div>
<div class="FCCenter"><button type="button">Button on the Centre</button></div>
<div class="FCRight"><button type="button">Button on the Right</button></div>
</div>
</div>
</form>
I added some padding on the right of all labels (padding-right:8px) just to make the example slight less horrible looking, but that should be done more carefully in a real project (adding padding to all other elements would also be a good idea).
The traditional method is to use a 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.
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>
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 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;
}
<label><span>Name</span> <input /></label>
<label><span>E-Mail</span> <input /></label>
<label><span>Comment</span> <textarea></textarea></label>
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)
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.
.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 */
<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 elaborate article I wrote can be found answering the question of IE7 float problem: IE7 float right problems
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 !
The CSS I used to solve this problem, similar to Gjaa but styled better
It's very simple, and I'm just beginning, but it worked quite nicely
Here is my CSS and HTML, used specifically for a simple registration form with no php code
p {
text-align: center;
}
.styleform label {
float: left;
width: 40%;
text-align: right;
}
.styleform input {
float: left;
width: 30%;
}
<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>
</form>
<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. :)
Simply add
<form align="center ></from>
Just put align in opening tag.
EDIT: I have updated both the CSS and the html. I have figured out the centering, but am still having trouble with the alignment of labels and fields.
I need for the input fields and labels to be lined up to where there is a perfect line running down the center of them, essentially dividing them because the labels are stacked on top of one another and input fields are stacked on top of one another.
The code below already resembled how I want it to look, other than that the form is on the left edge and my labels and input fields aren't perfectly lined up.
This is my form so far:
<div style="text-align:center">
<form>
<div>
Name: <input type="text" name="Name" size="40"/>
<br/>
<br/>
</div>
<div>
Address: <input type="text" name="Address" size="50"/>
<br/>
<br/>
</div>
<div>
City: <input type="text" name="City" size="25"/>
<br/>
<br/>
</div>
<div>
State: <input type="text" name="State" size="25"/>
<br/>
<br/>
</div>
<div>
Zip: <input type="text" name="Zip" size="25"/>
<br/>
<br/>
</div>
<div>
Email: <input type="text" name="Email" size="40"/>
<br/>
<br/>
</div>
<div>
Subscribe to our mailing list?
<br/>
<input type="radio" name="AddToList" value="yes" checked="checked" />Yes
<input type="radio" name="AddToList" value="no" />No
<br/>
<br/>
</div>
<div>
Comments:<br/>
<textarea name="comments" cols="70" rows="10" placeholder="Expected value of input"></textarea>
<br/>
<br/>
<input type="submit" />
<input type="reset" />
</div>
</form>
</div>
So far, the only CSS I have for this form is:
form {
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left;
}
This is what I am trying to accomplish:
Any help or advice would be great and highly appreciated, I am really just dumbfounded by this one. I tried using some of the centering methods for tables, none of which worked.
check this i just positioned it with css
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<style>label{
position: relative;
bottom: 2px;
}
input{
position: relative;
margin-top: 10px;
}
.text{
display: flex;
justify-content: center;
}
.text{
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div style="text-align:center">
<form>
<div>
<label> Name:</label>
<input type="text" name="Name" size="40"/>
</div>
<div>
<label style="left:27px"> Address:</label>
<input type="text" name="Address" size="50" style="left:27px;"/>
</div>
<div>
<label style="right: 46px;">City: </label>
<input type="text" name="City" size="25" style="right:46px;"/>
</div>
<div>
<label style="right:48px">State:</label>
<input type="text" name="State" size="25"/ style="right: 49px;">
</div>
<div>
<label style="right: 43px;"> Zip:</label> <input type="text" name="Zip" size="25" style="right: 44px;"/>
</div>
<div>
<label style="bottom: 0px;" > Email:</label>
<input type="text" name="Email" size="40"/>
</div>
<div style="right: 180px; position: relative;" >
<label>Subscribe to our mailing list?</label>
<input type="radio" name="AddToList" value="yes" checked="checked" />Yes
<input type="radio" name="AddToList" value="no" />No
<br/>
<br/>
</div>
<div class="text">
<br>
<br>
<label style="top: 60px; left: 70px;"> Comments: </label>
<textarea name="comments" cols="70" rows="10" placeholder="Expected value of input" style="left: 84px; position: relative;"></textarea>
<br/>
<br/>
</div >
<div class="submit" style="right: 80px; position: relative;">
<input type="submit" width="" />
<input type="reset" />
</div >
</form>
</div>
<script src="test.js"></script>
</body>
</html>
For centering things, try:
margin: auto;
justify-content: center;
text-align: center
This should align all the contents in the page as well as the text also with margins being equal.
Second option:
margin: auto;
width: 80%
This will take only 80% of total width of parent element and will automatically be centered if that also doesn't work then remove margin: auto from second option.
To center align, give the elements you want to align a class of "center", and then select the class in CSS. An example is :
.center {
text-align: center;
}
<div>
Email: <input type="text" name="Email" size="40" class="center"/>
<br/>
</div>
EDIT : W3 Schools is where I found the answer.
Suppose I have a web page with a form:
<form>
<label for="FirstName">First:</label>
<input name="FirstName" type="text">
<label for="MiddleName">Middle:</label>
<input name="MiddleName" type="text">
<label for="LastName">Last:</label>
<input name="LastName" type="text">
</form>
If I size the browser window small enough, I get a line break between the label that says "Middle:" and the "MiddleName" input. It would be better to put a break between labels and input fields that are not related, e.g. break between "FirstName" input and label for "MiddleName", and/or between input "MiddleName" and label for "LastName". Obviously I can add <br/> tags, but is there a good way to keep the related items together, and still use only 1 line when the browser window is wide enough?
I realize this is a contrived example, but this is pattern I am having trouble with in several more complicated real world forms.
Put the inputs inside the labels, you don't even need the for attributes. Then style the labels with white-space: nowrap to prevent automatic line breaks.
label { white-space: nowrap; }
<form>
<label>First: <input name="FirstName" type="text"></label>
<label>Middle: <input name="MiddleName" type="text"></label>
<label>Last: <input name="LastName" type="text"></label>
</form>
Surround the related elements within an wrapper and then prevent line breaks inside the wrapper with CSS:
.wrapper {
white-space: nowrap;
}
<form>
<span class="wrapper">
<label for="FirstName">First:</label>
<input name="FirstName" type="text" />
</span>
<span class="wrapper">
<label for="MiddleName">Middle:</label>
<input name="MiddleName" type="text" />
</span>
<span class="wrapper">
<label for="LastName">Last:</label>
<input name="LastName" type="text" />
</span>
</form>
You can surround each set with a wrapper that is display: inline-block;
.wrap {
display: inline-block;
/* Only include this if
you don't want the text within the spans
to wrap when the window is small enough
*/
white-space: nowrap;
}
<form>
<span class="wrap">
<label for="FirstName">First:</label>
<input name="FirstName" type="text" />
</span>
<span class="wrap">
<label for="MiddleName">Middle:</label>
<input name="MiddleName" type="text" />
</span>
<span class="wrap">
<label for="LastName">Last:</label>
<input name="LastName" type="text" />
</span>
</form>
I use getuikit for form styling, they do it with something like this:
HTML
<label>My label</label>
<div class="controls"><input type=text/></div>
CSS
label {
float:left;
margin-top:5px; //to center the label vertically
width: 200px;
}
.controls {
margin-left:200px;
}
It doesn't break semantics. Putting input inside label is little strange :)
Help me please with sliding textarea. If i add icon of wrong field, my textarea goes left. Some screenshots:
And some code:
<div class="signup">
<center>
<h1>Форма регистрации</h1>
<p>Для получения информации и участия в акциях информация должна быть правдивой</p>
<form name="registerform">
<p>
<input type="text" placeholder="Ваше имя" id="user_login" class="input" size="20" /> <span id="user_login_result"></span>
</p>
<p>
<input type="email" placeholder="Ваш Email" id="user_email" class="input" size="20" /> <span id="user_email_result"></span>
</p>
</form>
</center>
</div>
css:
#user_login.input, #user_email.input {
border: 1px solid #ccc;
width: 50%;
border-radius: 0;
}
code when icon shows:
<p>
<input type="text" placeholder="Ваше имя" id="user_login" class="input" size="20" /> <span id="user_login_result"><img src="un-available.png" /></span>
</p>
<center> tags are obsolete - you should use margin-left and margin right instead
here is a jsfiddle
.signup {
width: 100%;
}
#user_login.input,
#user_email.input {
border: 1px solid #ccc;
width: 50%;
border-radius: 0;
}
h1,
.text {
text-align: center;
}
form {
margin-left: 24%;
margin-right: 24%, text-align: center;
}
<div class="signup">
<h1>Форма регистрации</h1>
<p class="text">Для получения информации и участия в акциях информация должна быть правдивой</p>
<form name="registerform">
<p>
<input type="text" placeholder="Ваше имя" id="user_login" class="input" size="20" /> <span id="user_login_result"><img src="http://www.iberia.com/ibcomv3/rbrand/img/content/ico-x.gif" width="10px" height="10px"></span>
</p>
<p>
<input type="email" placeholder="Ваш Email" id="user_email" class="input" size="20" /> <span id="user_email_result"></span>
</p>
</form>
</div>
Ofcourse your element will move to left because when you put your image, the new element needs some space for its own existence. Hence CSS pushes your input element to left to make some room.
A straight forward answer is that you need to pre-define where your elements will appear and have the space reserved for them. One way is to convert your form into a table and make your table fixed and assign width to each cell. Sample below.
Since you did not provide us with CSS, I made a sample JSFIDDLE that might not look exactly like yours but its close.
You will notice that:
When you click the input box, a new element with some text "icon" appears, but it does not move the element to the left. Instead it takes space from right.
So what have I done here:
HTML
<div class="signup">
<center>
<h1>Форма регистрации</h1>
<p>Для получения информации и участия в акциях информация должна быть правдивой</p>
<table>
<form name="registerform">
<p>
<tr><td>
<input type="text" placeholder="Ваше имя" id="user_login" class="input first" size="20" /> <span id="user_login_result"></span>
</td></tr>
</p>
<p>
<tr><td>
<input type="email" placeholder="Ваш Email" id="user_email" class="input first" size="20" /> <span id="user_email_result"></span>
</td></tr>
</p>
</form>
</table>
</center>
</div>
CSS
table {
table-layout: fixed;
width: 200px;
}
table .first {
width: 60%;
display: inline-block;
}
table .second {
width: 20%;
display: inline-block;
}
I have made your form into a table and have given it a width that it cannot exceed. I have also told the elements that they can only take 'x' amount of space and do not touch the other one.
Don't worry about the javascript. Its just there to dynamically put the "image" element as soon as you focus on the input element.
First: you must see the following picture.
As you see, the red rectangle, the two fields does not line up, there is a little space in the start of the top field, while the next field does not.
Note: this problem occurs in all browsers.
HTML
<body>
<br /><br /><br /><br /><br />
<div id="loginForm">
<form action="login.php" method="post">
<label> Username: <input type="text" name="username" id="username" /></label><br />
<label> Password: <input type="password" name="password" id="password" /></label><br /><br />
<input type="submit" name="sbmtLogin" value="login" />
</form>
</div>
</body>
CSS
body {margin:0; padding:0;}
div#loginForm {width:270px; max-width:270px; margin:0 auto; padding:10px; text-align:center; background-color:#8de3fd;}
div#loginForm input {margin:3px; padding:5px; color:#5b5b5b; width:150px; border:1px solid #9a9a9a;}
div#loginForm input[type=submit] {width:70px;}
How can I fix that problem ?
Why the input text and password fields are not line up?
Username and Password are different length words
How can I fix that problem ?
Use a monospace font
Wrap the words in an element that you set to display: inline-block; width: ??? where ??? is a fixed value.
That element could be the labels.
<label for="username"> Username:</label> <input type="text" name="username" id="username" /></label><br />
<label for="password"> Password:</label> <input type="password" name="password" id="password" /></label>
label {
display: inline-block;
width: 7em; /* adjust to taste */
}
Keep in mind that you will get different fonts on different systems, so give yourself some leeway with the width of the elements if you take the second approach.
"Username:" is slightly wider than "Password:"
That is why they are not aligned.
You want to do something like putting the fields in a table or defined width divs.
It's because the text of Username: is a few pixels longer than Password: ?
You need to close the label tags, so the text is actually in the label (setting the for attribute will also make the inputs selectable by clicking the label)
<body>
<br /><br /><br /><br /><br />
<div id="loginForm">
<form action="login.php" method="post">
<label for="username"> Username:</label> <input type="text" name="username" id="username" /></label><br />
<label for="password"> Password:</label> <input type="password" name="password" id="password" /></label> <br /><br />
<input type="submit" name="sbmtLogin" value="login" />
</form>
</div>
</body>
Then put a common width on the labels with css
div#loginForm form label {
display: inline-block;
width: 200px; // whatever looks best
}
Not all characters of the font has the same width for all fonts. In your case Username is slightly larger than the Password, therefore the alignment issue.
To fix the issue you need to put the labels in a fixed with box
HTML - wrapped each input element in a div
<body>
<br /><br /><br /><br /><br />
<div id="loginForm">
<form action="login.php" method="post">
<div><label>Username:</label><input type="text" name="username" id="username" /></div>
<div><label>Password:</label><input type="password" name="password" id="password" /></div>
<div><input type="submit" name="sbmtLogin" value="login" /></div>
</form>
</div>
</body>
CSS - set width of label and set display to inline-block
body {margin:0; padding:0;}
div#loginForm {width:270px; max-width:270px; margin:0 auto; padding:10px; text-align:center; background-color:#8de3fd;}
div#loginForm input {margin:3px; padding:5px; color:#5b5b5b; width:150px; border:1px solid #9a9a9a;}
div#loginForm input[type=submit] {width:70px;}
#loginForm label { width: 100px; display: inline-block; }