Web Builder Zone - Comments for "reForm: CSS Form Design Template for Any Layout (Part 2)"

easykill wrote:If you want

ext237 — Thu, 20 Mar 2008 11:51:01 -0400

easykill wrote:

If you want to group a selection of form inputs with a single wrapper, the absolute most correct choice, semantically speaking, is to use a fieldset element.

Ha! Good point made. You are so right. Although I haven't tried it yet, using the fieldset rather than a div for the container should still work fine with formReForm. I'll take a look, if it doesn't work, I'll write code so that it does.

LI tags are for lists; form

easykill — Thu, 20 Mar 2008 08:06:05 -0400

LI tags are for lists; form elements semantically do not fit that criteria. Its interesting to see developers turn their nose up at a table-based layout saying that tables aren't appropriate for design, but then use list markup (LI) or dictionary markup (DT, DD) to create forms and navigation.
Creating a single DIV container with only LABEL and INPUT tags is far cleaner than groups of LI, DT or TR/TDs. It is more semantically correct, usable and accessible, and much easier to maintain.

This is nice stuff, but I have to comment on the above statement. While a..."collection"...of form elements and their associated labels is not tabular data, and thus not something that should be presented in a table, it's definitely a list of things, as is a list of navigation choices, so embedding either in list markup is certainly appropriate if/when needed. The purpose of markup is to provide structure and hierarchy to content. Strictly from that standpoint, embedding form elements in a list provides some additional structure, whereas a div, by its very definition, is arbitrary. There is nothing semantic about a div, so it can't be "more semantically correct" than anything else. If you want to group a selection of form inputs with a single wrapper, the absolute most correct choice, semantically speaking, is to use a fieldset element.

Thanks for the reply. The

ext237 — Thu, 20 Mar 2008 00:40:00 -0400

Thanks for the reply. The JS isn't modifying the inputs and breaks, only adding DIVs to DOM to manage the style changes.

LI tags are for lists; form elements semantically do not fit that criteria. Its interesting to see developers turn their nose up at a table-based layout saying that tables aren't appropriate for design, but then use list markup (LI) or dictionary markup (DT, DD) to create forms and navigation.

Creating a single DIV container with only LABEL and INPUT tags is far cleaner than groups of LI, DT or TR/TDs. It is more semantically correct, usable and accessible, and much easier to maintain.

formReForm takes that correctly formatted code and applies nice GUI.

I've gotten comments on my first post about using LI and/or DT tags for this. It would be interesting to see LI code that would create a 4 column (label:field [ space ] label:field) structure that automatically resizes based on the available space within a fixed design ... or automatically adjust as the browser window shrinks in a fluid design.

Interesting concept but I'm

viking — Wed, 19 Mar 2008 22:44:20 -0400

Interesting concept but I'm not a fan of all the break tags. Plus it looks like the JS is stripping away the closing "/" on your inputs and breaks.

I don't think the amount of divs are too much but I would consider using an unordered list instead. That way you can contain each label/input/error message in an li and seperate each with a div. That would make multi-column forms a lot easier.