[jala-dev] AW: Code Convention in jalaForm.js
- From: <Christoph.Lincke@xxxxxx>
- To: <jala-dev@xxxxxxxxxxxxx>
- Date: Tue, 15 May 2007 15:06:22 +0200
Hi,
here is a follow-up after a brief discussion with Stefan.
We suggest to use the following HTML elements and class names for a form
component:
<div class="component require* error*">
<div class="errorText">only in case of an error</div>
<label for="title">title</label>
<input class="input" name="title" ... />
<div class="helpText">optional</div>
</div>
Note: The * behind a class name indicates that it appears only if needed.
In case of IDs we agreed on camel case instead of underscores. The form ID
should be name of the form, e.g.
<form id="form1" ...
To avoid multiple IDs in components (for example, if there are two search forms
on a page) we suggest to use the form's name at the beginning of the ID, e.g.
<div class="component" id="form1Input2 ...
The child elements of this div do not necessarily need an ID, but for the sake
of easy and direct accessibility in client-side JS we suggest this notion:
<div class="errorText" id="form1Input2Error" ...
<label id="form1Input2Label" ...
<input id="form1Input2Control" ...
<div class="helpText" id="form1Input2Help" ...
As a side note, I may remark that the case of a class name or an ID does not
matter in CSS. On the other hand, XHTML is case-sensitive.
Another issue that needs to be addressed in jalaForms is the possibility to add
handlers and additional attributes like tabindex or accesskey to a component.
Stefan suggested to add an object called attributes in the form definition,
e.g.
name: "author",
label: "Author:",
require: true
attributes: {
onClick:"alert(this);",
accesskey: "t"
}
Whatever you write in this object will be added as and attribute to the
respective HTML tag.
Finally, it would be nice if the cursor or the focus changes to the component
that has an error. This could be done in a small client-side JS.
So, that's it. What do you think? Have we addressed everything or are we
considering too much?
Best,
Christoph
-----Ursprüngliche Nachricht-----
Von: jala-dev-bounce@xxxxxxxxxxxxx [mailto:jala-dev-bounce@xxxxxxxxxxxxx] Im
Auftrag von Christoph.Lincke@xxxxxx
Gesendet: Freitag, 11. Mai 2007 16:10
An: jala-dev@xxxxxxxxxxxxx
Betreff: [jala-dev] Code Convention in jalaForm.js
Hi,
I'm currently trying to build a CSS for form generated by Jala and I was
wondering if the HTML output can be simplified.
It basically started with the fact that there is a notion of "row" in
the IDs for something that is called "component" in the JavaScript. The
other thing is that I'm not fond of the underscores in id names. See
https://opensvn.csie.org/traccgi/jala/ticket/62
Spending a while thinking about it, I'm tempted to believe that we don't
need so many IDs.
Imagine you have a form called "myform" with and input called "title".
Then this is roughly the current HTML:
<form id="myform" method="post" class="form" name="myform">
<div id="myform_title_row" class="row require">
<div id="myform_title_error" class="error">...</div>
<label id="myform_title_label" for="myform_title">Title</label>
<div class="element">
<input id="myform_title" class="input" name="title" ... />
</div>
</div>
</form>
From the point of CSS formatting the following code (influenced by
http://alistapart.com/articles/prettyaccessibleforms) would be
sufficient:
<form id="myform" method="post" class="form" name="myform">
<ol>
<li id="title" class="require">
<div class="error">...</div>
<label for="title">Title</label>
<input class="input" name="title" ... />
</div>
</ol>
</form>
This way we have less IDs and, even better, no hassle with their names.
Please note that this is just a rough idea and I haven't thought about
every input element types yet. I don't see a problem CSS wise but maybe
some other aspects require IDs on every element. I'm also not sure if
I'm missing something important.
What do you think?
Best,
Christoph
Other related posts:
