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.
Currently I am making a form that has multiple inputs and I am using flex box to make these inputs appear in a column, and text-align center to get the whole form into a centered row. I am attempting to get the text boxes all be in the center of the page and the text move over accordingly.
.mainForm {
text-align: center;
}
.left {
float: left;
}
.inputs {
display: flex;
flex-direction: column;
}
.radio {
display: flex;
justify-content: center;
}
textarea {
overflow-y: scroll;
resize: none;
}
.feedBack {
text-align: center;
}
<div class="information">
<p class="formInputs"> Policy Number:
<input id="polNum" name="polNum" type="text" onkeyup="javascript:displayPolicyNumber()" /></p>
<p class="print">Policy Number: <span class="display" id="display_policyNumber"></span></p>
<p class="formInputs">Control Number:
<input id="membNbr" name="membNbr" type="text" onkeyup="javascript:displayControlNumber()" /></p>
<p class="print">Control Number: <span class="display" id="display_controlNumber"></span></p>
<p class="formInputs">Last Name or Business Name:
<input id="lastName" name="lastName" type="text" onkeyup="javascript:displayLastName()" /></p>
<p class="print">Last Name or Business Name: <span class="display" id="display_lastName"></span></p>
<p class="formInputs">First Name :
<input id="firstName" name="firstName" type="text" onkeyup="javascript:displayFirstName()" /></p>
<p class="print">First Name: <span class="display" id="display_firstName"></span></p>
<p class="formInputs">Comments:
<textarea name="comment" id="comment" cols="30" rows="2" onkeyup="javascript:displayComments()"></textarea></p>
<p class="print">Comments: <span class="display" id="display_comment"></span></p>
</div>
If you want your input/textarea to be absolutely centered, you will have to wrap your text in the <label> element (or any other HTML element, but for usability reason you should always use <label>). That is because we want to position the text independently of the input. An example:
<p class="formInputs">
<label for="polNum">Policy Number:</label>
<input id="polNum" name="polNum" type="text" />
</p>
When that is done, you can use the following trick:
Set a fixed width for your input elements. Let's say we want them to be 200px wide. Instead of setting this on the input elements themselves, we set it on the containing parent, .formInputs, and then set input elements to take up this full width.
Position the <label> element absolutely within the .formInputs parent. Set it to right: 100% so that it will be offset to the left by the full width of the parent.
Use a right padding so that the right edge of the label text is not directly sticking to the left border of your input
See proof-of-concept below:
textarea {
overflow-y: scroll;
resize: none;
}
.formInputs {
position: relative;
width: 200px;
margin: 0 auto;
}
.formInputs label {
position: absolute;
right: 100%;
padding-right: 10px;
white-space: nowrap;
}
.formInputs input,
.formInputs textarea {
width: 100%;
}
<div class="information">
<p class="formInputs">
<label for="polNum">Policy Number:</label>
<input id="polNum" name="polNum" type="text" />
</p>
<p class="formInputs">
<label for="membNbr">Control Number:</label>
<input id="membNbr" name="membNbr" type="text" />
</p>
<p class="formInputs">
<label for="lastName">Last Name or Business Name:</label>
<input id="lastName" name="lastName" type="text" />
</p>
<p class="formInputs">
<label for="firstName">First Name:</label>
<input id="firstName" name="firstName" type="text" />
</p>
<p class="formInputs">
<label for="comment">Comments:</label>
<textarea name="comment" id="comment" cols="30" rows="2"></textarea>
</p>
</div>
Something like this?
.information{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
http://jsfiddle.net/Lcgfqjh9/
You can put the whole thing in a wrapper, apply flex with the below settings to it to center the form, and apply flex and justify-content: space-between to the single lines (i.e. the .formInputs elements) to align the text and input fields at the left and right border:
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.formInputs {
display: flex;
justify-content: space-between;
}
<div class="wrapper">
<div class="information">
<p class="formInputs"> Policy Number:
<input id="polNum" name="polNum" type="text" onkeyup="javascript:displayPolicyNumber()" /></p>
<p class="print">Policy Number: <span class="display" id="display_policyNumber"></span></p>
<p class="formInputs">Control Number:
<input id="membNbr" name="membNbr" type="text" onkeyup="javascript:displayControlNumber()" /></p>
<p class="print">Control Number: <span class="display" id="display_controlNumber"></span></p>
<p class="formInputs">Last Name or Business Name:
<input id="lastName" name="lastName" type="text" onkeyup="javascript:displayLastName()" /></p>
<p class="print">Last Name or Business Name: <span class="display" id="display_lastName"></span></p>
<p class="formInputs">First Name :
<input id="firstName" name="firstName" type="text" onkeyup="javascript:displayFirstName()" /></p>
<p class="print">First Name: <span class="display" id="display_firstName"></span></p>
<p class="formInputs">Comments:
<textarea name="comment" id="comment" cols="30" rows="2" onkeyup="javascript:displayComments()"></textarea></p>
<p class="print">Comments: <span class="display" id="display_comment"></span></p>
</div>
</div>
Wrap your form in a div.
Set the div's display to block and text-align to center (this will
center the contained form).
Set the form's display to inline-block (auto-sizes to content), left
and right margins to auto (centers it horizontally), and
text-align to left (or else its children will be center-aligned too).
HTML file
<div class="form">
<form method = "post", action="">
---------
</form>
</div>
in .css
use like this
div.form {
display: inline-block;
text-align: center;
}
hello i'm creating a login form .but my check box and term text related to it not positioning correctly .i have add <br> tag but no effect .i tried clearfix it's not work either.here is the fiddle preview.
this is my html code
<div class="mainlog">
<form>
<label class="la" for="xname">Name</label><input name="xname" class="in" value="" type="text"><br>
<label class="la" for="xemail">Email</label><input name="xemail" class="in" value="" type="text"><br>
<label class="la" for="xpass">password</label><input name="xpass" class="in" value="" type="text"><br>
<label class="la" for="xpasscon">confirm</label><input name="xpasscon" class="in" value="" type="text"><br>
<input type="checkbox" name="term"/><label class="lb" for="term" >I have read and agree to the Terms of Use and the Privacy Policy</label><br>
<input type="submit" value="Sign Up" />
</form>
</div>
Wrap the checkbox and text in a div and float it left. Avoid the usage of <center> it will not be supported in HTML5
.mainlog {
width: 450px;
height: 250px;
border: 5px solid #DBDBDB;
border-radius: 5px;
padding: 20px;
}
.in {
padding: 8px;
border: 1px solid #DFDFDF;
width: 250px;
float: left;
margin-bottom: 10px;
border-radius: 5px;
}
.la {
width: 120px;
float: left;
text-align: left;
text-transform: uppercase;
color: #6B6B6B;
clear: both;
}
.lb {} .checkbox {
float: left;
}
}
<center>
<div class="mainlog">
<form>
<label class="la" for="xname">Name</label>
<input name="xname" class="in" value="" type="text">
<br>
<label class="la" for="xemail">Email</label>
<input name="xemail" class="in" value="" type="text">
<br>
<label class="la" for="xpass">password</label>
<input name="xpass" class="in" value="" type="text">
<br>
<label class="la" for="xpasscon">confirm</label>
<input name="xpasscon" class="in" value="" type="text">
<br>
<div class="checkbox">
<input type="checkbox" name="term" />
<label class="lb" for="term">I have read and agree to the Terms of Use and the Privacy Policy</label>
<br />
</div>
<input type="submit" value="Sign Up" />
</form>
</div>
</center>
Quick fix: wrapp checkbox with it's label into div with class "width".
Then in CSS add ".width" with styles: width:100%; clear:both.
.width{
width:100%;
clear:both;
}
Demo
I did a minor change in your code and it looks good to me. I am not sure if this is what you were looking for.
Please check the fiddle here.
These were the changes I made.
HTML:
<div class="lb"> <!-- added class "lb" to <div> and removed it from <label> -->
<input type="checkbox" name="term" />
<label for="term">I have read and agree to the Terms of Use and the Privacy Policy</label>
</div>
CSS:
.lb {
float:left; /* Floats the element to left */
}
I hope this works for you. :)
P.S. I have removed all the <br> tags inside the <form>
This is the code I have for producing a div that is 100% the width of the content area, and has a thin grey border around it. Inside it has a bunch of inputs. If you notice, each input has a specified size. It works perfectly if your screen is exactly the same size as mine and your browser isn't even slightly minimized. When either of those things happen, the inputs will render below the labels, and the form gets confusing.
I can't figure out a way to make the width of those text-boxes dynamic, so that the text box fits the width remaining in the parent DIV after label.
<div class="text_container_border">
Foobar Label: <input name="foobar_1" size="60" type="text" class="hidden_textfield" value=""/>
<br />
Foobar Label 2: <input name="foobar_2" size="60" type="text" class="hidden_textfield" value=""/>
<br />
Foobar Label 3: <input name="foobar_3" size="60" type="text" class="hidden_textfield" value=""/>
<br />
Small Foobar: <input name="small_foobar" size="20" type="text" class="hidden_textfield" value=""/>
Smaller Foobar: <input maxlength="14" name="smaller_foobar" size="14" type="text" class="hidden_textfield" value=""/>
Smallest Foobar: <input maxlength="10" name="smallest_foobar" size="35" type="text" class="hidden_textfield" value=""/>
</div>
Take a look at this question on So.It displays the label along with the text area for the div even after resize.
Without the CSS for the class .text_container_border I am not sure how big the border is, but the size of the border must be taken into consideration when calculating width; if the width is 100%, that is 100% + border size (left + right) so it may overflow; that is, if you have a n all around border and it adds 1px to both the left and the right sides, that is 2px of extra width. The CSS width property would help here, as opposed to the size property.
Also, for valid HTML a label must be used with inputs. Give the label a for="" and match it to an id on the input:
<label for="1">Foobar Label: </label>
<input id="1" name="foobar_1" size="60" type="text" class="hidden_textfield" value=""/>
Here is a Fiddle: https://fiddle.jshell.net/4b4u2anb/
To prevent breaking labels, add the CSS:
label {
white-space: nowrap;
}
Fiddle
Here is the working example of exact your requirement.You can minimize the windows the text box will not goes to second line.
I modified your code and I added some css code. It's working fine.
.css1 {
display: table;
width: 100%;
}
span {
display: table-cell;
width: 100%;
padding: 0px 10px;
}
.text {
width: 100%;
}
<div class="text_container_border">
<div class="css1">
<font style=" white-space: nowrap;">Foobar Label: </font>
<span> <input class=".text" name="foobar_1" size="60" type="text" class="hidden_textfield" value=""/> </span>
</div>
</br>
<div class="css1">
<font style=" white-space: nowrap;">Foobar Label 2: </font>
<span> <input class=".text" name="foobar_2" size="60" type="text" class="hidden_textfield" value=""/> </span>
</div>
<br>
<div class="css1">
<font style=" white-space: nowrap;">Foobar Label 3: </font>
<span> <input class=".text" name="foobar_3" size="60" type="text" class="hidden_textfield" value=""/> </span>
</div>
<br>
<div class="css1">
<font style=" white-space: nowrap;">Small Foobar: </font>
<span> <input class=".text" name="small_foobar" size="20" type="text" class="hidden_textfield" value=""/> </span>
</div>
<br>
<div class="css1">
<font style=" white-space: nowrap;"> Smaller Foobar: </font>
<span> <input class=".text" maxlength="14" name="smaller_foobar" size="14" type="text" class="hidden_textfield" value=""/> </span>
</div>
<br>
<div class="css1">
<font style=" white-space: nowrap;"> Smallest Foobar: </font>
<span> <input class=".text" maxlength="10" name="smallest_foobar" size="35" type="text" class="hidden_textfield" value=""/> </span>
</div>
<br>
</div>
Below is my code, first of all:
How do I get rid of the big margin to the right that occurs between the labels and the input fields? I tried setting the margin-right to -150px which made it smaller but that just seems like an idiotic solution..
How can I remove the need to write <br /> to make them hop down a line automatically? I was told never to use <br />, it also seems messy.
HTML:
<div id="groupmepopup" class="popup">
<h4>Fill in your information so that you can be added.</h4>
<form action="" method="POST">
<label>In-game username:</label>
<input name="username" type="text"></input><br />
<label>Email:</label>
<input name="email" type="text"></input><br />
<label>Game:</label>
<input name="game" type="text"></input><br />
<input name="mySubmit" type="submit" value="Submit"></input>
</form>
</div>
CSS:
label {
display: block;
float: left;
width: 120px;
margin-right: 5px;
text-align: right;
}
You can try something like this
<div id="groupmepopup" class="popup">
<h4>Fill in your information so that you can be added.</h4>
<form action="" method="POST">
<p>
<label>In-game username:</label>
<input name="username" type="text"></input>
</p>
<p>
<label>Email:</label>
<input name="email" type="text"></input>
</p>
<p>
<label>Game:</label>
<input name="game" type="text"></input>
</p>
<p></p>
<input name="mySubmit" type="submit" value="Submit"></input>
</form>
</div>
and then the css
p label {
display: block;
float: left;
width: 120px;
margin-right: 5px;
}
p input{
float:right;
}
p{
clear:both;
}
form{
width:20em;
}
http://jsfiddle.net/V92PT/1/
But the fields part on table
like this
<div id="groupmepopup" class="popup">
<h4>Fill in your information so that you can be added.</h4>
<form action="" method="POST">
<table><tr><td><label>In-game username:</label></td>
<td> <input name="username" type="text"></input></td ></tr>
<tr><td> <label>Email:</label></td>
<td> <input name="email" type="text"></input></td></tr>
<tr><td> <label>Game:</label></td>
<td>
<input name="game" type="text"></input>
</td></tr>
</table>
<input name="mySubmit" type="submit" value="Submit"></input>
</form>
</div>
or add another <br/> after <label>In-game username:</label>
or use <p></P> for each row