Jump to content


Photo

Form Layouts


  • Please log in to reply
3 replies to this topic

#1 lead2gold

lead2gold
  • Members
  • PipPipPip
  • Advanced Member
  • 164 posts
  • LocationOttawa, On

Posted 27 June 2006 - 02:30 PM

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:
<table>
  <tr><td>form id</td><td><input></input><td>Error/Info messages here </td></tr>
</table>

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


#2 AndyB

AndyB
  • Staff Alumni
  • Advanced Member
  • 5,465 posts
  • LocationToronto

Posted 27 June 2006 - 02:44 PM

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]
Legend has it that reading the manual never killed anyone.
My site

#3 lead2gold

lead2gold
  • Members
  • PipPipPip
  • Advanced Member
  • 164 posts
  • LocationOttawa, On

Posted 27 June 2006 - 03:04 PM

[!--quoteo(post=388521:date=Jun 27 2006, 10:44 AM:name=AndyB)--][div class=\'quotetop\']QUOTE(AndyB @ Jun 27 2006, 10:44 AM) View Post[/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

#4 Daniel0

Daniel0
  • Staff Alumni
  • Advanced Member
  • 11,956 posts

Posted 08 July 2006 - 05:22 PM

Use accesskey to make shortcuts. Like here were alt+s submits the post form.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users