Jump to content

Archived

This topic is now archived and is closed to further replies.

lead2gold

Form Layouts

Recommended Posts

Does anyone have good ideas, or references on how to lay out forms nicely.

Preferably forms that are using CSS Stylesheets?

Currently i lay out all my forms like this:
[code]
<table>
  <tr><td>form id</td><td><input></input><td>Error/Info messages here </td></tr>
</table>
[/code]

I apply CSS styles all over the table, but it still just doesn't look nice. Are there good references, or can anyone suggest to me a better approach. I was kinda looking to blow away as many tables as i can.

Thanks in advance!

Chris

Share this post


Link to post
Share on other sites
Learn the purpose for the html entities FIELDSET (logical arrangment of related fields) and LEGEND. Use the LABEL attribute for input fields.

Avoid tables for anything except tabular data (which 99% of forms are not).

Accessibility is a key consideration with forms.

An excellent article is [a href=\"http://www.alistapart.com/articles/prettyaccessibleforms\" target=\"_blank\"]http://www.alistapart.com/articles/prettyaccessibleforms[/a]

Share this post


Link to post
Share on other sites
[!--quoteo(post=388521:date=Jun 27 2006, 10:44 AM:name=AndyB)--][div class=\'quotetop\']QUOTE(AndyB @ Jun 27 2006, 10:44 AM) [snapback]388521[/snapback][/div][div class=\'quotemain\'][!--quotec--]
Learn the purpose for the html entities FIELDSET (logical arrangment of related fields) and LEGEND. Use the LABEL attribute for input fields.

Avoid tables for anything except tabular data (which 99% of forms are not).

Accessibility is a key consideration with forms.

An excellent article is [a href=\"http://www.alistapart.com/articles/prettyaccessibleforms\" target=\"_blank\"]http://www.alistapart.com/articles/prettyaccessibleforms[/a]
[/quote]

This is 100% exactly what i was looking for!
thank you!

Chris

Share this post


Link to post
Share on other sites
Use accesskey to make shortcuts. Like here were alt+s submits the post form.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.