[Zope3-dev] Re: zope.app.form generates invalid HTML

[Tres Seaver]

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

Martin Aspeli wrote:
> Hi guys,
> 
> I'm pretty sure you're not allowed dots in ids of HTML elements.

The attached HTML and XHTML pages both pass the W3C validator (one HTMl
4.01 strict, the other XHTML 1.0 strict).  Both use dotted IDs for form
elements.  Neither renders "properly" in Firefox 1.5 (the selectors
based on the dotted ID, as well as those based on attribute, don't get
applied the form elements).

> At 
> least not when they are prefixed by 'form'. A zope.schema.TextLine in a 
> formlib form, for example, generates HTML like this:
> 
>    <input id="form.title" class="textType" type="text" value="Changed 
> title" size="20" name="form.title"/>
> 
> In particular, we want to style the fields to look a bit more like 
> Plone, and we have special cases for "title" and "description" that we 
> want to style by ID, not class.
> 
> However, CSS like this has no effect in Firefox or Safari:
> 
> #form.title {
>      font-size: 160%;
>      font-family: <dtml-var headingFontFamily>;
>      font-weight: normal;
>      width: 99%;
> }
> #form.description {
>      font: 100% <dtml-var fontFamily>;
>      font-weight: bold;
>      height: 6em;
>      width: 99%;
> }
> 
> Not all that surprising - it could look like I'm styling a form with 
> class="description".

Not according to the CSS specs.  Note that we might be better off making
it easy to place a custom CSS class on the widget, rather than fighting
browser failures on various other selectors.

> I then hacked zope.app.form.widget's renderElement() function to look 
> like this:
> 
> def renderTag(tag, **kw):
>      """Render the tag. Well, not all of it, as we may want to / it."""
> 
>       if 'id' in kw:
>          kw['id'] = kw['id'].replace('.', '-')
> 
>       ...
> 
> The tests in zope.app.form still pass.
> 
> Hacky, but the alternatives are to (a) override all the widgets or (b) 
> at least provide custom ones only for the purpose of getting stylable 
> ids on various fields. renderTag() is called from a lot of places with 
> id=self.name. We could fix all those, too, of course.
> 
> I would be happy to submit a patch for either the explicit check in 
> renderTag() or for changing all calls to this in zope.app.form.
> 
> However, if someone has depended on the ids being with dots (possibly 
> not quite as likely as it may seem, since these forms are typically 
> auto-generated) then we may not have a decent way of deprecating that.

The most likely breakage is going to be in Javascript using
'getElementById'.

- -1 on changing the default behavior;  to paraphrase, "broken browsers
you will have always with you."

+1 on changing 'renderTag' to use some kind of "local" policy (e.g.,
look up an 'ITagElementCleaner' utility) to spply such transforms.
E.g.::

    def renderTag(tag, **kw):
        cleaner = querytUtility(IWidgetTagCleaner)
        if cleaner is None:
            kw = cleaner(kw)
        ...



Tres.
- --
===================================================================
Tres Seaver          +1 540-429-0999          tseaver at palladion.com
Palladion Software   "Excellence by Design"    http://palladion.com
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.2.2 (GNU/Linux)
Comment: Using GnuPG with Mozilla - http://enigmail.mozdev.org

iD4DBQFF3tJ9+gerLs4ltQ4RAlwdAJ4hSxBGsrHAYvrxqFTCXXLfeAdSMgCWLUxR
mKehOrvyy9SF+z91PS6hHw==
=Cr9R
-----END PGP SIGNATURE-----