I'm reading through an HTML file right now and I noticed that the form elements inside one of its forms are placed inside a DIV.
For example.
<fieldset>
<legend>Your Contact Details</legend>
<div>
<label for="author">Name: <em class="required">(Required)</em></label>
<input name="author" id="author" type="text" />
</div>
<div>
<label for="email">Email Address:</label>
<input name="email" id="email" type="text" />
</div>
<div>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</div>
</fieldset>
I observed that it's perfectly fine to not place them inside the DIVs anyway.
What is the purpose of this?
PS: There was no styling involved in the CSS that target the DIVs, all the styles were specifically targeted for "labels", "inputs" and so on. But none that target the DIVs.
Honestly, the only effect it has on the layout is some tiny padding which can also be set by specifying a special class for the elements, that's all.
And if it's for styling, there's no associated styles set for it anyway, so why put it in the first place?
Can anybody crack the reasoning behind this?
Here's the entire document.
body {
font: 62.5%/1 "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
}
form {
font-size: 1.4em;
width: 30em;
}
/* fieldset styling */
fieldset {
margin: 1em 0; /* space out the fieldsets a little*/
padding: 1em;
border : 1px solid #ccc;
}
/* legend styling */
legend {
font-weight: bold;
}
form div {
padding: 0.4em 0;
}
/* style for labels */
label {
display: block;
}
/* style for required labels */
label .required {
font-size: 0.75em;
color:#760000;
}
input {
width: 20em;
}
textarea {
width: 100%;
height: 10em;
}
input.radio, input.submit {
width: auto;
}
#remember-me .radio {
margin-right: 1em;
}
/* style form elements on focus */
input[type="text"]:focus, textarea:focus {
background: #ffc;
}
-->
</style>
</head>
<body>
<form id="comments_form" action="#" method="post">
<fieldset>
<legend>Your Contact Details</legend>
<div>
<label for="author">Name: <em class="required">(Required)</em></label>
<input name="author" id="author" type="text" />
</div>
<div>
<label for="email">Email Address:</label>
<input name="email" id="email" type="text" />
</div>
<div>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</div>
</fieldset>
<fieldset>
<legend>Comments</legend>
<div>
<label for="text">Message: <em class="required">(Required)</em></label>
<textarea name="text" id="text" cols="20" rows="10"></textarea>
</div>
</fieldset>
<fieldset id="remember-me">
<legend>Remember Me</legend>
<div>
<label for="remember-yes"><input id="remember-yes" class="radio" name="remember" type="radio" value="yes" />Yes</label>
</div>
<div>
<label for="remember-no"><input id="remember-no" class="radio" name="remember" type="radio" value="no" checked="checked" />No</label>
</div>
</fieldset>
<div>
<input id="submit" class="submit" name="submit" type="submit"/>
</div>
</form>
</body>
</html>
In the given case, the div markup causes each label/input pair to appear on a line of its own, which is generally a good idea. There are many alternative ways to achieve that, but this is one of the simplest and also useful for styling that you might want to add later.
Moreover, in this case there is a style sheet rule that uses the markup: the selector form div matches these div element, and the rule for it sets 0.4em padding above and below the content of each div.
Besides styling, it also depends on doctype of the markup. For example, with XHTML 1.0 Strict, form elements like <label>, <input> must be wrapped in block-level elements, otherwise it can't pass the W3C Markup Validation Service. However, some other doctypes allow such markup.
Years ago it's a fashion to have a W3C validate banner on your site. Because of that fashion, many people overreact about validation. Like in this example, wrapping with fieldset is valid but people may still go with div or p, just like people avoid using table even if presenting tabular data. If you are reviewing some legacy codes, this might be a possible reason.
the purpose is usually for styling. For example, say you wanted the label to sit above the input like the below example. And you wanted a copy of the same thing just to the right:
Label Here Label Here
Input Here Input Here
it would be very difficult to accomplish this with the following
<label for="author">Name: <em class="required">(Required)</em></label>
<input name="author" id="author" type="text" />
<label for="author">Name: <em class="required">(Required)</em></label>
<input name="author" id="author" type="text" />
Now add in divs and you can float the divs instead (as well as add other CSS like margin to separate the two columns):
<div> <-----Add styles to parent
<label for="author">Name: <em class="required">(Required)</em></label>
<input name="author" id="author" type="text" />
</div>
<div> <-----Add styles to parent
<label for="author">Name: <em class="required">(Required)</em></label>
<input name="author" id="author" type="text" />
</div>
UPDATE
I saw your update, it could also be to clear each "row" since labels and inputs are inline by default. Check out the difference in the fiddle:
FIDDLE
It could be that the developer believes it to be more semantic with divs, it could be to set things up for later incase the layout changes and they want to add CSS like the above example, it could be he/she doesn't really know what they're doing. It could be a number of things
#Johnsy Omniscient : yes some times developers will add additional tags to update the site for future technology. when responsive design was new; we added extra divs, etc to help the transformation when going mobile etc
Related
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 have a simple form like this:
<form method="post" action="/registration">
<label for="alias">Alias:</label>
<input type="text" name="alias" id="alias">
<br>
<label for="email">E-mail:</label>
<input type="text" name="email" id="email">
<br>
<input type="button" value="registger">
</form>
It works fine, but the I have found out that <br> shouldn't be used for this purpose, as it is only intended to be used with text.
If I remove the <br>, then everything will be rendered on a single line, which I do not want.
What is the correct, most clean way to display name-input pairs in a form with CSS, like this:
Alias: [__field__]
E-mail: [__field__]
[SUBMIT BUTTON]
I'd use divs, which will put the labels and inputs into their own block.
<form method="post" action="/registration">
<div>
<label for="alias">Alias:</label>
<input type="text" name="alias" id="alias">
</div>
<div>
<label for="email">E-mail:</label>
<input type="text" name="email" id="email">
</div>
<input type="button" value="registger">
</form>
I typically would put the input inside of the label (so when you click the label, it focuses the input), and then tell the label to be display: block;.
So,
<form method="post" action="/registration">
<label for="alias">
Alias: <input type="text" name="alias" id="alias">
</label>
<label for="email">
E-mail: <input type="text" name="email" id="email">
</label>
<input type="button" value="registger">
</form>
Then do:
label[for], // just selects labels that have the "for" attribute.
input[type="button"] {
display: block;
// And a bottom margin for good measure :)
margin: 0 0 10px; // shorthand for margin-bottom
}
And that should get you what you want.
You could use divs with corresponding CSS:
.myFrm {
width: 250px;
}
input[type=text] {
float: right;
}
.form-group {
margin-bottom: 10px;
}
.form-group::after {
content: "";
clear: both;
display: table;
}
<form method="post" action="/registration">
<div class="myFrm">
<div class="form-group">
<label for="alias">Alias:</label>
<input type="text" name="alias" id="alias">
</div>
<div class="form-group">
<label for="email">E-mail:</label>
<input type="text" name="email" id="email">
</div>
</div>
<input type="button" value="registger">
</form>
I would just use a bit of css to do the trick. Give each of the labels a display:block;
label {
display: block;
}
You can use container divs around the label and input to group them or else make sure "display: block" is added to the label and input elements.
If you need the label to the left of the input then wrap both with a container div and to give you more control on the positioning you could float the label and input to the left or use flexbox.
You ask:
What is the correct, most clean way to display name-input pairs in a
form with CSS
I interpret your question to be related to matters of performance, code efficiency and maintainability. Since just changing the HTML structure does not address responsiveness in different view-ports, adding bits of CSS may have render blocking features but it does nevertheless makes your application ready for mobile responsiveness. This is how I see it:
form {
display: inline-block;
}
label {
margin: 10px;
font-weight: 600;
}
input{
position: absolute;
left: 15%;
}
input[type=button]{
top: 4%;
}
Note that for mobile viewports you may want to adjust the relative measures with media queries. So the question here is not about writing less code but the main requirements of the application.
Get a plunk for this here
What you have there is a list.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists
http://reisio.com/temp/form1.html
I am using some code from purecss.io to create some elegant looking forms. I am also using this code to have a simple rating system for my form.
However, when I combine the two together, the spacing on the rating looks very spaced out because of the CSS from purecss.io
How can I fix the spacing?
Here is the code:
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<form action="" method="post" class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="foo">Supercalifragilistic Label</label>
<input id="foo" type="text" placeholder="Enter something here...">
</div>
<div class="pure-control-group">
<label for="foo">Rating</label>
<div class="acidjs-rating-stars">
<input type="radio" name="group-1" id="group-1-0" value="5" /><label for="group-1-0"></label><!--
--><input type="radio" name="group-1" id="group-1-1" value="4" /><label for="group-1-1"></label><!--
--><input type="radio" name="group-1" id="group-1-2" value="3" /><label for="group-1-2"></label><!--
--><input type="radio" name="group-1" id="group-1-3" value="2" /><label for="group-1-3"></label><!--
--><input type="radio" name="group-1" id="group-1-4" value="1" /><label for="group-1-4"></label>
</div>
</div>
<div class="pure-controls">
<label for="cb" class="pure-checkbox">
<input id="cb" type="checkbox"> I've read the terms and conditions
</label>
<input name="SubmitButton" type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>
Here is what the page looks like for me:
I saw the other answers included suggestions for !important statements, so I decided to post mine. I threw the code you provided into a codepen.io and made a few quick changes to see if this is what you were looking for.
I added the class "raters" to your markup and styled it with that.
<div class="pure-control-group raters">
<label for="foo">Rating</label>
<div class="acidjs-rating-stars">
You can see why I've added these style rules in the comments supplied with them:
.raters label{
float:left; /* Corrective float for your modified code */
}
.raters input{
margin:0 0.25em; /* Spaces out the 'floated' radio inputs for presentation*/
}
.raters .acidjs-rating-stars label{ width:auto; } /* Actual Width Correction */
You can see it working live here: http://codepen.io/anon/pen/vKNGpv
(Note: I added the yahoo's external stylesheet to the CSS panel settings. You can access them with the gear in the top right-hand corner.)*
You can override margin for the inputs (which are you rating stars) of the purecss css in another css file with this very specific selector:
.pure-form.pure-form-aligned .acidjs-rating-stars input[name="group-1"] {
background: blue;
margin-right: -160px;
}
The base css is overwriting yours as you have suspected. You need to either define your padding/margin on your label elements using !important to make sure the css rules you define take precedence.
For instance if the margin for label elements is 0.5em top/bottom 0.2em on the left/right and you only want it say 0.1em on the left/right you would have to define in your css file like this
margin: {
0.5em 0.1em !important;
}
I have a very simple HTML layout I'm trying to implement. It is something like this:
A Label: [Input ]
Another Label: [Input ]
The Last Label: [Input ]
In the past, I'd just go ahead and use a table for this. Otherwise, it's a pain getting the input controls to line up correctly.
Can anyone suggest a simple and reliable way to implement this layout without using a table?
Thanks.
You can use display: inline-block
<style type="text/css">
label { display: inline-block; width: 200px; }
ul { list-style: none; }
</style>
<ul>
<li><label for="input1">A Label:</label> <input type="text" name="input1" id="input1"></li>
<li><label for="input2">Another Label:</label> <input type="text" name="input2" id="input2"></li>
<li><label for="input3">The Last Label:</label> <input type="text" name="input3" id="input3"></li>
</ul>
However, in order for this to line up vertically, you either have to wrap the label-input pairs in another tag (such as <li> or <div>) or put linebreaks after the inputs.
<style>
label { width: 200px; float:left; clear:left; }
input { float:left;}
</style>
<form>
<label for="fullname">Full Name:</label>
<input type="text" name="fullname" id="fullname">
<label for="email">Email Address:</label>
<input type="text" name="email" id="email">
</form>
With the added benefit that, if the horizontal space isn't sufficient, the inputs will wrap below the labels.
http://jsbin.com/anuziq (narrow down your browser window)
If you don't actually want them to wrap around, I suggest this approach:
<style>
label { white-space: nowrap; }
span { width: 200px; display: inline-block; }
</style>
<form>
<label>
<span>Full Name:</span>
<input type="text" name="fullname">
</label>
<label>
<span>Email Address:</span>
<input type="text" name="email">
</label>
</form>
From my experience, structuring the HTML like that usually allows for any layout you can possibly think of. Want the inputs always below the label? Use display:block on the span elements. Want the text to the right of the input? Just use float:right on the span.
Bonus here is that you don't need the for and id attributes to connect the label with the input. They're only really necessary, if you can't put the label right next to the input, like in 2 separate table cells.
I know it's bad to use HTML Tables for everything... and that tables should be used only to present tabular data and not to achieve some style goal.
My question is, how do you make HTML forms with CSS so they look nice and aligned like when using tables?
Nick Rigby wrote an excellent article for A List Apart titled Prettier Accessible Forms
Uses fieldset, legend, label. Highly semantic.
Take a look at the code used in wufoo forms, they use ul's to format the forms and they look really good.
http://wufoo.com/gallery/templates/
You can try and strip the form as far back as possible and make do with the <label> and various form input elements as needed with a lean on the clear:left; attribute in the CSS.
This would make sure each line starts anew without having to wrap each line of the form in an extra <div> or <p> or even making a list out of it.
.formlabel{
clear:left;
display:block;
float:left;
margin:0 0 1em 0;
padding:0 0.5em 0 0;
text-align:right;
width:8em;
}
.forminput{
float:left;
margin:0 0.5em 0.5em 0;
}
.formwarning{
clear:left;
float:left;
margin:0 0.5em 1em 0;
}
Here's a sample HTML form showing examples of various input types and an extra validation message that you can hide or style as needed:
<fieldset><legend>Details</legend>
<label for="name" class="formlabel">Name</label>
<input id="name" name="name" type="text" class="forminput" />
<div class="formwarning">Validation error message</div>
<label for="dob_year" class="formlabel">DOB</label>
<div class="forminput">
<input id="dob_year" name="dob_year" type="text" size="4" /> /
<input id="dob_month" name="dob_month" type="text" size="2" /> /
<input id="dob_day" name="dob_day" type="text" size="2" />
</div>
<label class="formlabel">Sex</label>
<label for="female" class="forminput">Female</label>
<input id="female" name="sex" type="radio" class="forminput" />
<label for="male" class="forminput">Male</label>
<input id="male" name="sex" type="radio" class="forminput" />
<label for="state" class="formlabel">State</label>
<select id="state" name="state" class="forminput">
<option>ACT</option>
<option>New South Wales</option>
<option>Northern Territory</option>
<option>Queensland</option>
<option>South Australia</option>
<option>Tasmania</option>
<option>Victoria</option>
<option>Western Australia</option>
</select>
<label for="deadseal" class="formlabel">Death certificate</label>
<input id="deadseal" name="deadseal" type="file" class="forminput" />
</fieldset>
In the above example, the DOB does have an extra <div> cluttering things up. You could get rid of it if you style up the date slashes as part of the :after pseudo-element where needed.
Turns out okay in Opera 11.60, Firefox 11, Google Chrome 18 and Internet Explorer 8.
I would lookup using the div tag to layout data on a page.
Tables are still very much useful for tabular data, but its frowned upon for laying out a page.
View source here on stackoverflow.com, there's probably some good examples.
Think about putting field names above the field, rather than beside. I find this works about the best.
HTML
<form>
<div id="personal_name">
<label>Name</label>
<input name="name" />
</div>
</form>
CSS
form
{display: table}
#personal_name
{display: table-row}
#personal_name input, #personal_name label
{display: table-cell}
I think this is enough.