11 Untitled

Nick, it seems to be my fault. I have FF 1.5.0.4 on Windows. My colleague has the same and for him it works fine. 5:
<quote>“Rely on JavaScript as an enhancement for, not a replacement of, website features.”</quote>
But that’s right what it is. It works without JS. It works also without CSS. It’s just nicer with both.

posted at 10:11 am on June 20, 2006 by Chris Leipold

12 Untitled

I’m a bit unsure why use javascript, but it is a tricky issue this however does the lining up of labels / inputs https://secureonline.dwp.gov.uk/ice/

posted at 10:13 am on June 20, 2006 by David Joseph

13 Kind of messy

First of all, thank you for taking the time to write an article for ALA.

But I just don’t see why half of what you have done here is needed? There are, as I’m told, approximately 4,356 ways of doing something but this seems to be the long way around.

The first thing I’m kind of stuck upon is the use of the ordered list, but that’s really a minor detail since we can debate semantics all night before we realize that no two persons think alike.

There are much easier and more cross browser ways of achieving exactly the same thing. Without all the JavaScript and the poorly supported inline-block. I still haven’t seen any issue with a carefully constructed form that uses floats wisely.

It just seems a bit too bloated for what it’s going to be used for…

posted at 10:15 am on June 20, 2006 by Tim Ceuppens

14 IE7

Thanks for the aricle.

I do like how you have used an ordered list for each form item and i would have liked to see the radio buttons being listed as 5.1 and 5.2 :)

I don’t think js should have been used, people are right by saying that too many js solutions are being created to do (with a big of creativity) what css can do.

Finally, I also noticed that it partially worked in IE7 Beta 2. What didn’t look correct where the legends what didn’t align correctly.

Cheers
GK

posted at 10:22 am on June 20, 2006 by Stephen Hill

15 A different take

Thank you for another take at providing semantic markup for forms. However, I was really disappointed with the CSS/JS solution.

I have always managed to get a very long way with floating the labels and input fields to the left combined with, the “clearing without structural markup” technique for standards compliant browsers and the usual hasLayout hacks for MSIE.

In only a couple of minutes I produced an identical result without the extensive use of Javascript for Firefox 1.5 and MSIE6. With some more time you might not get it identical in older browsers, but surely that is not a reason to include a Javascript solution for today’s standards compliant browser?

posted at 10:24 am on June 20, 2006 by Jeroen Mulder

16 *== Mandatory

And whenever I see this “mandatory fields marked *� kind of thing, I think, why don’t they just add text “(mandatory)� or “(required)� after the field name?

I was hoping someone would mention this. It’s to do with convention, and convention morphing into semantics.

The convention has been established, like it or not, that an asterisk next to a form label implies that the field is ‘required’, it has done in visual mediums for a long time, requiring little-to-no explanation in almost every imaginable usage. Its continued, consistent use for this has led to even users of non-visual browsers (such as screen-readers) recognising it as meaning ‘required’ [1].

The crux of the matter is that an asterisk, either visually or audially, now means ‘required’, so any further explanation is generally spurious and a waste of time, space & effort.

1. This assertation comes from a great deal of work a colleague of mine has done directly with disabled users, and their experience of using screen readers.

posted at 10:32 am on June 20, 2006 by Jordan Harper

18 Why all the nagging?

I have to state my support for the author on this scripting issue.

The CSS is supposed to be a “library” to be included without modification into any project. Not the cleanest way to make one single form look nice. I am not sure I will have use for it myself but I can see the benefits.

Even though it has been commented on already I also have to join in to say that the scripting is implemented unobtrusively for the purpose of keeping the HTML cleaner. If it is not to your liking just add the tags manually. It is not like te whole technique is based on javascript.

The thing that struck me though… (now I am really trying to make enemies in all camps)
…was the visual layout itself. It is usually preferable to have the labels right-aligned to visually link to their fields better. This is defenitely true when the length of the labels differ greatly. But this is something that anyone can modify to their liking. The technique in the article is still valid IMHO.

posted at 12:10 pm on June 20, 2006 by Martin Westin

19 How to indicate required or optional fields

As a related read I’ve previously posted about the best way, from a accessibility point of view, to indicate required or optional fields in a form.

See How to indicate required or optional form fields

posted at 12:34 pm on June 20, 2006 by Thomas Watson Steen

20 Use of Javascript

Rely on JavaScript as an enhancement for, not a replacement of, website features

I agree entirely with that sentiment – which is why I think JS is perfectly justified in this situation.

The form works. It works without Javascript, it works without CSS. What both of them do is offer an enhancement to the form, by making it look better.

In general, I agree that styling is better done with pure CSS than scripting, but there are some times when this can’t be done. On my own website, I use :hover pseudo-classes on arbitrary elements to make styling changes – this works in Opera and Gecko but not IE (does it work in IE7?). I could (when I have time and can be bothered!) include a script to modify the DOM so that this feature would work in IE … which would be a sensible use of Javascript to augment the styling of the page.

posted at 12:40 pm on June 20, 2006 by Stephen Down

Discussion Closed

New comments are not being accepted, but you are welcome to explore what people said before we closed the door.

Got something to say?

Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.

Create a new account or sign in below if you’d like to leave a comment.

Forgot your password?

Subscribe to this article's comments: RSS (what’s this?)