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.
I want to apply some css styling on my labels for my web page but have no idea how to make it work. At first, I thought I could type
label{text-align: center} but it's not giving my any styling at all. What should I type to style my labels? This is my code:
<label for="fname"><b>First Name</b></label>
<input type="text" placeholder="Enter First Name" name="fname" id="fname" required>
Thanks in advance everyone!
Ok, text-align:center didn't work because basically the label elements are inline
inline elements are elements who their display is set to inline , explicitly or by default
these elements won't accept any width or height and only get ENOUGH width and height for their content
they even don't accept vertical margins...
so your label here is as small as it's content and there is no room to change your text's alignment...
you can change it's display to make it's text centered
Here You can see what I said, I've added another label and changed it's display and colored the labels so you can see diffrence
<style>
label{
background: khaki;
}
.lname{
display:block;
text-align:center;
}
.test{
display: block;
}
</style>
<label class="fname" for="fname">First Name</label>
<input type="text" placeholder="Enter First Name" name="fname" id="fname" >
<label class="lname" for="lname">Last Name</label>
<input type="text" placeholder="Enter Last Name" name="lname" id="lname" required>
<label class="test" for="test">Test</label>
<input type="text" placeholder="Enter Test" name="test" id="test" required>
I think what you want is the middle one
========%%%%=======%%%%=========
Ok Based On Your comment and image
it's not label who you want to center, it's your input
<style>
input{
display:block;
text-align:center;
width: 100%;
}
input::placeholder{
text-align: center;
}
</style>
<label class="fname" for="fname">First Name</label>
<input type="text" placeholder="Enter First Name" name="fname" id="fname" >
input {
width: 100%;
text-align: center;
}
I have two HTML forms. I want the second one to align to the right of the first one (not below it).
I fiddled (no pun intended) with "display: inline-block;"
The pertinent CSS:
.form {
display: inline-block;
}
The pertinent HTML:
<form>
<label class="firstblocklabel">Traveler's name:</label>
<input class="firstblockinput" type="text" id="travelername" title="Last Name, First Name, Middle Initial" />
</br>
. . .
</form>
<form>
<label>Trip Number:</label>
<input type="text" id="tripnumber" title="If Applicable" />
</br>
</form>
The whole shebang can be seen here.
Is the solution to place the two forms in a table, or is there a more elegant element solution?
Use float...
form {
float: left
}
Stick a float:right on the 2nd form to align it to the right side.
When you use inline-block a width must be defined as inline just say to browser that you don't want to jump to the next line.
a best practice is to have a container then for each element you want side-by-side you put a percent value corresponding to 100% divided by the number of columns. Example : 100% / 2 columns make columns of 50% each; 100% / 4 columns would make 25% each; etc.
make sure that you columns have padding/margin/border to 0 as it wouldn't work otherwise and if you need padding, place it in a child element inside the column element.
everythings is better with examples so here it is :
input{
width: 100%;
margin: 5px 0 0 -2px;
}
form{
/* we can add geometry to our form */
border: 4px solid #ddd;
margin: 6px;
padding: 10px;
}
.container{
padding: 0;
}
.col{
vertical-align: top;
display: inline-block;
padding: 0;
margin: 0;
border: none;
}
.col:hover{
/* just to see it */
box-shadow: 0 0 2px 0px red;
}
.col-half{
width: 50%;
}
.col-quater{
width: 25%;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>example 1</h1>
<div class="container">
<div class="col col-half">
<form class="" action="index.html" method="post">
<h3>Some form...</h3>
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
</form>
</div><div class="col col-half">
<form class="" action="index.html" method="post">
<h3>Another form...</h3>
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
</form>
</div>
</div>
<h1>example 2</h1>
<div class="container">
<div class="col col-half">
<form class="" action="index.html" method="post">
<h3>1/2 form...</h3>
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
</form>
</div><div class="col col-quater">
<form class="" action="index.html" method="post">
<h3>1/4 form...</h3>
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
</form>
</div><div class="col col-quater">
<form class="" action="index.html" method="post">
<h3>Another 1/4 form...</h3>
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
</form>
</div>
</div>
</body>
</html>
Bonus:
Usually, frameworks works on a grid system : If we take bootstrap as an example, they work on a 12 col grid. meaning that if you use the class col-6 6 being half of 12 you get 50% width, and there goes for all other sizes. 12 is very flexible, the more cols your grid have, the more possibility it have (and the more css you must write) in my example, I made a gird of 4. we could rename col-half for col-2 and col-quater for col-1 so that makes sense as a grid system
First of all, you accidently used a .form class instead of using form for your selector.
Second, adding vertical-align: top to your form selector will allow it to align to the right of your first form as long as there is space.
form {
display: inline-block;
vertical-align:top;
}
However, if your view is too narrow it will slide underneath anyways.
You added a . (.form) means class selection but your html tag doesn't contain a class
So remove the . should make your form work correctly.
form {
vertical-align:top;
display:inline-block;
}
Try this :
form {
display: inline-block;
vertical-align:top; // Added
}
What about using Bootstrap and their helper classes to accomplish this? Especially if you already have Bootstrap loaded? Could use their grid to accomplish a 2 column layout.
I am trying to get a better handle on CSS positioning by using only basic positioning properties. The goal is to get an HTML5 input and it's associated label to line up horizontally, one pair on each row, with the label on the left and input on the right. Essentially there will appear to be two columns, one for labels and the other for inputs.
I also want each column to be left-justified, which is where I'm currently stuck.
Using the CSS below I can get the two-column look I want, however none of the input elements are justified correctly.
If I set the position of the input elements to absolut, however (the thinking that adjusting the left property will align each element the same pixel length from the left containing edge), each element justifies properly, however all on the same row.
Any hints as to how to accomplish the two-column/left-justified layout w/o using tables or grid-column?
Fiddle: http://jsfiddle.net/fjwy3Lov/
CSS
/*Styles for basic form label and input elements*/
.basicForm{
margin: 10px 0 10px 10px;
}
.basicForm label{
float:left;
clear:left;
margin:inherit;
}
.basicForm input{
position:relative;
left:100px;
float:left;
margin: inherit;
}
HTML
<!DOCTYPE html>
<head>
<title>Form Validation Demo</title>
<link href="form.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>HTML 5 Input Types and Form Validation</h1>
<form class="basicForm">
<label for="UserName">User Name:</label>
<input type="text" id="UserName" required="required">
<label for="Password">Password:</label>
<input type="password" id="Password" required="required" />
<label for="UserEmail">Email:</label>
<input type="email" id="UserEmail">
<label for="PhoneNumber">Phone Number:</label>
<input type="tel" id="PhoneNumber">
<label for="Website">Homepage:</label>
<input type="url" id="Website">
<label for="Quantity">Quantity:</label>
<input type="number" id="Quantity" min="1" max="10" step="1" pattern="/\d/">
<label for="StartDate">Start Date:</label>
<input type="date" id="StartDate" min="2000-01-02" max="2016-01-01">
<label for="FavColor">Favorite Color:</label>
<input type="color" id="FavColor">
<label for="CurrentMonth">Current Month:</label>
<input type="month" id="CurrentMonth">
<label for="CurrentWeek">Current Week:</label>
<input type="week" id="CurrentWeek">
<label for="CurrentTime">Current Time:</label>
<input type="time" id="CurrentTime">
<input type="button" id="submit" value="submit">
</form>
</body>
</html>
This happens because as per your CSS all input elements are 150px to the left of the corresponding label but those are not the same width, so your inputs are not aligned.
You need to make all labels the same width:
.basicForm label{
float:left;
clear:left;
min-width:150px;
}
.basicForm input{
float:left;
}
Instead of min-width you could also use width, whichever you prefer.
If you insist on using absolute positioning, you could wrap each label/input pair in a div so you don't need to position each element individually, check this example:
.input-group {
position: relative;
height:2em;
}
.input-group label {
position: absolute;
top: 0;
left: 0;
}
.input-group input {
position: absolute;
top: 0;
left: 100px;
}
<div class="input-group">
<label>Label 1</label>
<input type="text">
</div>
<div class="input-group">
<label>longer Label</label>
<input type="text">
</div>
<div class="input-group">
<label>short</label>
<input type="text">
</div>
The following code should allow me to have the label and input field sitting one next to each other.
Any idea what the problem is?
.form{
width:500px;
float:left;
padding:20px 50px;
background-color:orange;
}
label.form{
float:left;
clear:left;
margin-bottom:8px;
}
input.input{
width:400px;
padding:5px 20px;
margin-bottom:8px;
background:#F7F7F7;
border-width:1px;
border-style:solid;
border-color:#333333;
}
<div class="form">
<form action="process.php" method="post">
<label class="form">Name</label><input type="text" name="name" class="input" />
<label class="form">Position</label><input type="text" name="position" class="input" />
<label class="form">Company</label><input type="text" name="company" class="input" />
<label class="form">Address</label><input type="text" name="address1" class="input" />
<label class="form">Town/ City</label><input type="text" name="town" class="input" />
<label class="form">Postcode</label><input type="text" name="postcode" class="input" />
<label class="form">Contact No.</label><input type="text" name="phone" class="input" />
<input type="submit" name ="getcatalogue" class="button" value="Request Catalogue"/>
</form>
</div>
For some reason, the label is sitting above each field?
Any help would be massively appreciated!
Thanks
It’s because the label elements, being in class form, have 50px padding on left and right, making the total width so large that the input element does not fit on its right size, within the width of 500px set for the form.
It’s easy to get confused if you use the same class name for essentially different elements, as here (form and label). The label elements hardly need a class, since they can be referred to using suitable contextual selectors, using their ancestor’s class.
A much better design would use a table with labels in one column, input fields in the other, first without any width settings, then perhaps tuned if needed.