[Zope3-dev] Re: Aesthetics of generated forms

[Tonico Strasser]

Peter Mayne wrote:
> I have an Interface that contains a List, and I've been staring at the 
> automatically generated edit form a bit.
> 
> The generated form uses HTML of the form:
> 
>   <div class="row">
>     <div class="label">FieldLabel</div>
>     <div class="field">FieldData</div>
>   </div>
> 
> The resulting output looks like:
> 
>     Label1    Data1
>     Label2
> Data2WhichIsABitLonger
> 
> This tends to look untidy, because short data appears next to the label, 
> while longer data wraps to the next line and is not indented. In 
> particular, when editing data in a list (eg the Poll demo), data can 
> come out as
> 
>     Label1    Data1    Label2
> Data2
> 
> Since wrapping depends on the current width, and widgets in lists have a 
> lot less width to work in, the problem is exacerbated.
> 
> This seems to be caused by the "div.row div {float: left;}" entry in the 
> rotterdam CSS. Removing that (even though it's presumably there for a 
> good reason) makes things a lot more regular. I've also replaced the 
> <div>s in widget_macros.pt with definitions (<dl><dt><dd>), which tend 
> to look a bit better (a personal point of view, admittedly).
> 
> I haven't experimented enough to see how error messages fit in, but 
> changing the field and errors <div>s to <span>s within the <dd> might do 
> the trick.
> 
> Does any of this seem reasonable?

I'm not sure a definition list ist good for forms markup. There was a 
related discussion about dls recently a www-html:

<http://lists.w3.org/Archives/Public/www-html/2004Nov/0029.html>

Links related to Web forms:

Accessible Forms
   <http://www.usability.com.au/resources/forms.cfm>

Accessible, stylish form layout
   <http://www.themaninblue.com/writing/perspective/2004/03/24/>

Accessible HTML/XHTML Forms
 
<http://www.webstandards.org/learn/tutorials/accessible-forms/01-accessible-forms.html>

Better Accessible Forms
   <http://www.accessify.com/tutorials/better-accessible-forms.asp>

Creating Accessible Forms
   <http://www.webaim.org/techniques/forms/>

How to use tables to structurize forms in HTML and about alternatives, 
like fieldset
   <http://www.cs.tut.fi/~jkorpela/forms/tables.html>

Accessible Forms
   <http://www.htmldog.com/guides/htmladvanced/forms.php>

SimpleQuiz › Part VI › Form(atting)
   <http://www.simplebits.com/bits/simplequiz/#entry579>

In Defence Of Tables For Form Layout
   <http://jon.hedley.net/in-defence-of-tables-for-form-layout>

Form layout
   <http://www.clagnut.com/blog/241/>

Forms
   <http://realworldstyle.com/forms.html>

CSS forms can work!
   <http://www.dutchcelt.nl/blogged/204_0_1_5_C/>

Forms
 
<http://www.d.umn.edu/itss/support/Training/Online/webdesign/accessibility.html#forms>

HTH
Tonico