Is it ok to use tables to make web forms or should I use div's? I know how to use tables, but how should I make form with div's or is it better to use tables?
<form method="post">
<table>
<tr>
<td>
<label for="username">Username:</label>
</td>
<td>
<input type="text" name="username" id="username"/>
</td>
</tr>
<tr>
<td>
<label for="password">Password:</label>
</td>
<td>
<input type="password" name="password" id="password"/>
</td>
</tr>
<tr>
<td>
<input type="submit" name="cancel" value="Cancel"/>
</td>
<td>
<input type="submit" name="send" value="Send"/>
</td>
</tr>
</table>
</form>
Possible Duplicate: Why-not-use-tables-for-layout-in-html
Don't use tables, that's a very brittle, non-semantic layout, use proper CSS layout. Below are some presentations that explain some good approaches to form layout, including usability considerations. The first link is more about the code, and the second more about design and usability considerations:
Learning To Love Forms (Web Directions South '07)
Best Practices for Form Design
A rule to live by: Only use tables to display tabular data.
That has always worked well for me....
The absolutely best format for forms in my opinion is to use unordered lists inside fieldsets spiced up with labels. That's the most semantically correct way, anyways:
<form method="post" action="foo.php">
<fieldset>
<legend>Some fields</legend>
<ul>
<li>
<label for="foo">Foobar</label>
<input type="text" name="foo" id="foo" />
</li>
</ul>
</fieldset>
</form>
The fieldsets aren't mandatory but can liven up an otherwise dull form. The basic CSS to get an ul look like a form might be something like this:
form ul {
list-style: none;
margin: 0;
}
form ul li {
margin-bottom: 10px;
}
form ul li label {
display: block;
float: left;
width: 150px;
line-height: 24px;
}
For best HTML/CSS practices in general, I recommend to have a look at A List Apart. With regard to forms, here's an article which suits your need: Prettier Accessible Forms. For other examples, just google with keywords "semantic html form".
There is no such hard and fast rule or better way of doing forms in HTML. If you want to use div's in an easy way, its better to choose a CSS framework to make things easy like blueprint
Tables are not for layout, tables are for data period, css is the way to go, that is best practice.
Related
I need to align the labels on the left hand side properly, so that the textbox and text area at the same place..I have added a class to set the width but that does not work properly.
FIDDLE
Code:
<div id="feedbackdialogbox">
<div>
<h3>Feedback</h3>
</div>
<ul>
<li>
<label for="feedback_nm" class="feedback-label-len">(Optional) tell us who you are</label>
<input type="text" id="feedback_name">
<br>
</li>
<li>
<label for="feedback_msg" class="feedback-label-len">How can we do better?</label>
<textarea rows="5" id="feedback_msg" placeholder="Go ahead, type your feedback her..."></textarea>
<br>
</li>
<li>
<div id="radio_button_list_title_wrapper">
<div id="radio_button_list_title" class="feedback-label-len">How likely are you to recommend Prices Paid to a colleague (1 means not likely, 5 means very likely)?</div>
</div>
<br>
</li>
</ul>
<button id="feedback_submit">Send</button>
</div>
css
.feedback-label-len {
width:600px;
}
I think if I were in your place, I'd just add two </br> below the labels.
They are:
On the left hand side
They are left-aligned as well.
This obviously shall give you the same effect as
label {display:block;}
Adding display: block to the labels would be a fine solution for a simple form. If you're set on putting them side by side...
label {display: block; float: left}
li {overflow: hidden
.feedback-label-len {
display: block;
}
JSFIDDLE
I would use a table.
JSFIDDLE
<form method="post" action="feedback.php">
<table id="feedbackTable">
<tr>
<th><label for="txtName">(Optional) tell us who you are</label></th>
<td><input type="text" id="txtName" style="color:#000000" title="Enter your name" name="txtName" placeholder="Enter Your Name" /></td>
</tr>
<tr>
<th class="message"><label for="">How can we do better?</label></th>
<td><textarea title="Enter your message" name="txtMessage" rows="5" id="txtMessage" placeholder="Go ahead, type your feedback her..."></textarea></td>
</tr>
<tr>
<th><label for="txtEmail">How likely are you to recommend Prices Paid to a colleague (1 means not likely, 5 means very likely)?</label></th>
<td><input type="text" id="txtEmail" title="Enter your email address" name="txtEmail" value=""/></td>
</tr>
<tr>
<th><label title="Send"></label></th>
<td><input type="submit" style="color:#000000" value="Send" /></td>
</tr>
</table>
</form>
One approach you can try using is using tables in order to format the data. Using the table, tr (table row), and td (table data) html tags we can format the data in so that they are spaced correctly without using CSS!!!
<DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="feedbackdialogbox">
<div>
<h3>Feedback</h3>
</div>
<table>
<ul>
<tr>
<td>
<li><label for="feedback_nm" class="feedback-label-len">(Optional) tell us who you are</label></li></td>
<td><input type="text" id="feedback_name"></td>
</tr>
<tr>
<td><li><label for="feedback_msg" class="feedback-label-len">How can we do better?</label></li></td>
<td><textarea rows="5" id="feedback_msg" placeholder="Go ahead, type your feedback her..."></textarea></td>
</li></tr>
<li>
<div id="radio_button_list_title_wrapper">
<div id="radio_button_list_title" class="feedback-label-len">How likely are you to recommend Prices Paid to a colleague (1 means not likely, 5 means very likely)?</div>
</div>
<br>
</li>
</ul>
</table>
<button id="feedback_submit">Send</button>
</div>
</body>
</html>
Just so you know this method may upset html purists. The tag was designed to actually display table data and using it for other purposes such as formatting is sometimes considered improper by old school web coders. However it I have not been able to find an actual problem caused by formatting data like this and doing so is the easiest way for you to make pages such as the one you are asking about.
I hope this answered your question, if you need me to expand on this just ask but when I ran the code above it gave me something much like you described.
I want to create a table where each td is a form field. What is the best way of approaching that? Should I create a regular table and apply css styles on the form fields to resemble the size of the td fields? Hmmm... what do you suggest?
You can place tags inside of a form easily, so I would recommend nesting a table in the form:
<form>
<table>
<tr>
<td>Name: <input type="text" name="name" /></td>
<td>Age: <input type="text" name="age" /></td>
</tr>
</table>
<input type="submit" value="Submit" />
</form>
Which would give you a one row, two column table with a labeled text box in each column. Be careful about nesting your HTML tags, this could get confusing fast if you made a large table/form.
One way is to use contenteditable
<html>
<table>
<tr>
<td>
<div contenteditable="true"></div>
</td>
</tr>
</table>
</html
People seem to be forgetting about display: table, display: table-row and display: table-cell!
Here's a demo jsFiddle.
I'm designing a form with a number of labels and input controls. They won't necessary fit within a tabular form because the columns do not line up in each row.
So, for example, it may look something like this:
Label1: Label2: Label3:
[Input1] [Input2 ] [Input3 ]
Label4: Label5:
[Input4 ] [Input5 ]
Label6: Label7: Label8:
[Input6 ] [Input7 ] [Input8 ]
The biggest issue is that I want the label to always be left-aligned with the input control. Can anyone make some suggestions as to the best way to style this? An existing example would be perfect!
Techniques I've considered include using a table, floating <div>s, and combinations of the two. I'm getting close but it's a lot of markup and I'm not confident that it's a good way to approach all browsers.
Thanks for any tips.
I would suggest that you should find the best structure for your form first before jumping into any design using CSS. The reason is that you'll be compromising users who doesn't have / disabled their CSS. See Progressive Enhancement.
Think of this way:
Am I making a tabular data? No? Then it's probably just a list of <label> and <input> pairs
Should they be listed by order? Then use <ol> No? Then use <ul>.
Are ALL these lists related to each other? No? then wrap them inside a <fieldset> not <div>s
Do they work and look ok even without any images or CSS? No? then Iterate from step 1.
Some things to consider:
<table> should only be used for tabular data, not for any layout. See Why tables for layout is stupid.
<input> and <label> are by default both an inline-level element, meaning, they will align on each other automatically. So using float:left or display: inline-block will not help, but rather create another problem you'll have to deal later on.
<div> (also <span>) should always be a last option. See Semantics.
Example:
In order for you to picture them out, here's the output:
Markup without CSS:
Markup with CSS:
The Semantic Markup:
<form action="" method="">
<fieldset>
<legend>Title of this set: </legend>
<ol>
<li>
<label for="input1">Label1: </label>
<input type="text" id="input1" size="31" />
</li>
<li>
<label for="input2">Label2: </label>
<input type="text" id="input2" size="31" />
</li>
<li>
<label for="input3">Label3: </label>
<input type="text" id="input3" size="31" />
</li>
</ol>
</fieldset>
<fieldset>
<legend>Title of this set: </legend>
<ol>
<li>
<label for="input4">Label4: </label>
<input type="text" id="input4" size="31" />
</li>
<li>
<label for="input5">Label5: </label>
<input type="text" id="input5" size="31" />
</li>
<li>
<label for="input6">Label6: </label>
<input type="text" id="input6" size="31" />
</li>
</ol>
</fieldset>
<fieldset>
<legend>Title of this set: </legend>
<ol>
<li>
<label for="input7">Label7: </label>
<input type="text" id="input7" size="31" />
</li>
<li>
<label for="input8">Label8: </label>
<input type="text" id="input8" size="31" />
</li>
<li>
<label for="input9">Label9: </label>
<input type="text" id="input9" size="31" />
</li>
</ol>
</fieldset>
</form>
The CSS Code:
ol {
margin-right: 1em;
padding-left: 0;
}
li {
display: inline-block;
}
fieldset {
border: 0;
}
input {
display: block;
}
legend {
display: none;
}
Further notes:
We included a size=31 because it will, at least accommodate more viewable space for users who input data in the field.
The <form> remains usable even when the CSS is not available or turned off.
The <legend> helps the user understand the relation of the fields on each other.
Make your labels inline-block elements, and give them a width that matches the associated inputs.
I think the best solution would be to wrap each row of inputs in its own div, then individually wrap each input and label in ITS own div, making it easy to left align the labels.
Here's an example: http://jsfiddle.net/5zNHj/24/
Here's something I quickly worked through using CSS and a little basic HTML knowledge. Might not be the prettiest way to do it, but it's definitely fast to code out. I've added comments in the code to explain myself (hopefully) relatively clearly. Feel free to ask any questions and I'll try to help you out, even though I'm still a beginner. Good luck! http://jsfiddle.net/Cwca22/Z2ySD/
I've gotten used to using <table>s for aligning my form fields perfectly. This is how I commonly write my forms:
<table border="0">
<tr>
<td><label for="f_name">First name:</label></td>
<td><input type='text' id='f_name' name='f_name' /></td>
<td class='error'><?=form_error('f_name');?></td>
</tr>
</table>
I know this is bad practice, and I want to use CSS, <label>s, <div>s, or a cleaner method. However, the fact is, <table>s work extremely well for the forms. Everything is aligned exactly right, the spacing is perfect, all errors exactly below each other, etc.
I recently tried using <dt> and <dd> tags for a form, but I ended up reverting back to tables just because they looked so much better.
How can I get this kind of aligned table layout without using <table>s?
This might not get a lot of support but here's my two cents:
In some situations tables are easier for layout; such as three columns or forms (albeit there are some great suggestions here for doing a pure css form layout so don't ignore those either.)
Processes and methodologies can make good servants but are poor masters.
- Mark Dowd, John McDonald & Justin Schuh
in "The Art of Software Security Assessment"
I believe that this quote very strongly applies to this situation. If your table layout is working for you, not causing accessibility issues and isn't broken - then don't fix it.
Phrases like: "you should", "must", "always" - make me scared, because one-size-doesn't-fit-all! Take zealots with a grain of salt.
Yes, use labels and CSS:
<label class='FBLabel' for="FName">First Name</label>
<input value="something" name="FName" type="text" class='FBInput'>
<br>
css:
.FBLabel, .FBInput {
display:block;
width:150px;
float:left;
margin-bottom:10px;
}
See: http://www.alistapart.com/articles/prettyaccessibleforms
If you don't use tables you need to know the width of your labels upfront. This can often be a problem for multi-language sites (i18n).
With tables, they stretch to fit labels of differing sizes. CSS alone can't do that yet in a well-supported way.
Why do you not want to use tables? It sounds like they are working perfectly for you now. Are you worried about accessibility issues? Just because it is a table doesn't mean that accessibility will suffer.
I want to caution you from creating a new solution to a solved problem for nothing other than purity's sake. Even if you are worried about semantics, what kind of semantics describe a form anyway?
Most of the non-table based answers here rely on pre-determined fixed widths, which can be a pain for internationalisation, or any other scenario where you can't be certain of the required width for labels.
But CSS has display: table for this very reason:
HTML
<div class="form-fields">
<div class="form-field">
<label class="form-field-label" for="firstNameInput">First Name</label>
<div class="form-field-control"><input type="text" id="firstNameInput"></div>
<div class="form-field-comment">Required</div>
</div>
<div class="form-field">
<label class="form-field-label" for="lastNameInput">Last Name</label>
<div class="form-field-control"><input type="text" id="lastNameInput"></div>
<div class="form-field-comment">Required</div>
</div>
</div>
CSS
.form-fields {
display: table;
}
.form-field {
display: table-row;
}
.form-field-label,
.form-field-control,
.form-field-comment {
display: table-cell;
padding: 3px 10px;
}
Simple.
I use the following method most of the time and it allows me to get all my alignment set up exactly how I like it. As you can see, it gives me a great number of hooks for CSS and JS.
<form id="login-form" action="#" method="post">
<fieldset>
<label id="for-email" for="email">
<span class="label-title">Email Address <em class="required">*</em></span>
<input id="email" name="email" type="text" class="text-input" />
</label>
<label id="for-password" for="password">
<span class="label-title">Password <em class="required">*</em></span>
<input id="password" name="password" type="password" class="text-input" />
</label>
</fieldset>
<ul class="form-buttons">
<li><input type="submit" value="Log In" /></li>
</ul>
</form><!-- /#login-form -->
Really depends on who you talk to. The purists say use CSS because the table element was not meant for layout. But for me, if it works, why change it? I do use CSS now for layout, but I still have plenty of legacy code I have not and will not change.
There are tons of ways out there to do it without tables. Once you get the basic format down it's as easy to work with as tables are, it's just the initial playing around that can be a pain. So, just look to others that have already done the work of figuring it all out for you:
http://www.alistapart.com/articles/prettyaccessibleforms
http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html
I also documented the method I've settled on last week (a snippet):
<form action="/signup" method="post">
<fieldset>
<legend>Basic Information</legend>
<ol>
<li><label for="name">Name <span class="error">*</span>
</label><input type="text" id="name" name="name" size="30" /></li>
<li><label for="dob">Date of Birth <span class="error">*</span></label>
<div class="inputWrapper">
<input type="text" id="dob" name="dob" size="10" />
<span class="note">YYYY-MM-DD</span></div></li>
<li><label for="gender">Gender <span class="error">*</span></label>
<select id="gender" name="gender">
<option value=""></option>
<option value="female">Female</option>
<option value="male">Male</option>
</select></li>
</ol>
</fieldset>
</form>
And the CSS:
fieldset {
margin: 0 0 20px 0; }
fieldset legend {
font-weight: bold;
font-size: 16px;
padding: 0 0 10px 0;
color: #214062; }
fieldset label {
width: 170px;
float: left;
margin-right:10px;
vertical-align: top; }
fieldset ol {
list-style:none;
margin: 0;
padding: 0;}
fieldset ol li {
float:left;
width:100%;
padding-bottom:7px;
padding-left: 0;
margin-left: 0; }
fieldset ol li input,
fieldset ol li select,
fieldset ol li textarea {
margin-bottom: 5px; }
form fieldset div.inputWrapper {
margin-left: 180px; }
.note {
font-size: 0.9em; color: #666; }
.error{
color: #d00; }
jsFiddle
There's no one-size-fits-all for this. The table example you used can be improved on, though:
<table>
<tbody>
<tr>
<th scope="row"><label for="f_name">First name:</label></th>
<td>
<input type='text' id='f_name' name='f_name' />
<?php form_error('f_name'); ?>
</td>
</tr>
<!-- ... -->
</tbody>
</table>
Not too sure about the error part; I think it makes more sense putting it next to the input than having a separate column for it.
I have used this in the past fairly effectively:
HTML:
<fieldset>
<p>
<label for="myTextBox">Name</label>
<span class="field"><input type="text" name="myTextBox" id="myTextBox" /></span>
<span class="error">This a message place</span>
</p>
</fieldset>
CSS:
<style type="text/css">
fieldset label, fieldset .field, fieldset .error { display: -moz-inline-box; display: inline-block; zoom: 1; vertical-align: top; }
fieldset p { margin: .5em 0; }
fieldset label { width: 10em; text-align: right; line-height: 1.1; }
fieldset .field { width: 20em; }
</style>
The only really gotcha is Firefox 2 which gracefully degrades. (see the -moz-inline-box which is a bit of hack, but not too bad)
I had this problem too, but with the cocidil that I had a menu in the left (also with float:left in it).
So. My solution was:
html
<div class="new">
<form>
<label class="newlabel">Name</label>
<input type="text" name="myTextBox" id="myTextBox" />
</form>
</div>
css
.new {
display:block;
}
.newlabel {
min-width: 200px;
float: left;
}
I think, it would work in the form class too, but in reality I had more forms in the 'new' class.
I'm still having a hard time not wanting to use Tables to do my Details View Layout in HTML. I want to run some samples by people and get some opinions.
What you would prefer to see in the html for a Details View? Which one has the least hurddles cross browser? Which is the most compliant? Which one looks better if a I have a static width label column that is right aligned?
By Details view i mean something similar to the following image.
Table
<table>
<tr>
<td><label /></td>
<td><input type="textbox" /></td>
</tr>
<tr>
<td><label /></td>
<td><input type="textbox" /></td>
</tr>
</table>
Fieldset
<fieldset>
<label /><input type="textbox" /><br />
<label /><input type="textbox" /><br />
</fieldset>
Divs
<div class="clearFix">
<div class="label"><label /></div>
<div class="control"><input type="textbox" /></div>
</div>
<div class="clearFix">
<div class="label"><label /></div>
<div class="control"><input type="textbox" /></div>
</div>
List
<ul>
<li><label /><input type="textbox" /></li>
<li><label /><input type="textbox" /></li>
</ul>
Those approaches aren't mutually exclusive, personally I'd mix them up a bit:
<fieldset>
<label for="name">XXX <input type="text" id="name"/></label>
<label for="email">XXX <input type="text" id="email"/></label>
</fieldset>
Although to get a right aligned label (something I'd personally avoid because it's harder to scan visually) you'll need to have an extra element around the text that isn't around the input, so I'd go for
<fieldset>
<div class="label_input"><label for="name">XXX</label><input type="text" id="name"/></div>
<div class="label_input"><label for="email">XXX</label><input type="text" id="email"/></div>
</fieldset>
Actually I take that back for simple textbox only inputs I find that the Fieldset option works well.
However, typically I will have multiple controls in a single "row", therefore I go with the div based layout, that way I can put inputs, validators and all into a single element.
I prefer the fieldset containing divs. The label divs are float:left; width:20em and the content divs just have a fixed left margin of 21em or 22em for example. But you have to remember to include a clear div for that to work:
<fieldset>
<div class="labels"><label for="name">Name</label></div>
<div class="data"><input ....</div>
<div style="clear:both"/>
// repeat for next fields
</fieldset>
CSS:
label{
float:left;
text-align:right;
width:115px;
margin-right:5px;
}
input{
margin-bottom:5px;
}
HTML:
<label for="username">UserName:</label><input type="text" id="username" /><br />
<label for="username">UserName:</label><input type="text" id="username" /><br />
Obviously you then can add a div or use the form around it to get a background-color for your whole form etc.
I find that forms are one of the hardest thing to deal with in css because if you're wanting tight control, there's often a lot of css to add that old school HTML would take care of for you. However, if you're willing to accept a uniform natural treatment, then the cleanest way to separate the content and presentation would be:
form { margin: 0; padding: 0; }
fieldset { whatever treatment you want }
#details div { margin: 5px 0; width: 100%; overflow: hidden; /* ensures that your floats are cleared */ }
#details label { float: left; width: 190px; text-align: right; }
#details input { margin-left: 200px; }
<form>
<fieldset id="details">
<div id="item1div">
<label for="item1">item1 label</label>
<input type="" id="item1" />
</div>
<div id="item1div">
<label for="item1">item1 label</label>
<input type="" id="item1" />
</div>
</fieldset>
</form>
You CAN use tables to format forms tabularly but use CSS to add styles to the forms. CSS purists will probably say that you shouldn't but the reality is that many browsers often render CSS forms differently and can cause accessibility issues. A table-based form is much more consistent across browsers and much more accessible as well.