Simple Tricks for More Usable Forms

[ArticleBot]

This is an article discussion thread for discussing the SitePoint article, "Simple Tricks for More Usable Forms"

[George]

Great article; it's certainly given me some ideas for improving the way I write forms.

One thing I've noticed though - the example form doesn't appear correctly in Netscape 6 or 7. I think it's due to the "float: left;" applied to the label tags. Any ideas on how this could be fixed?

[Brian]

Hopefully someone will see this even though its an older article. You reference the ability to make the form submit button disabled until all required fields are filled in. Would you happen to know of any examples on how to do this. My javascript skills are very rudimentary and I am unable to figure out how to do this. Any help would be greatly appreciated.

Thanks

[Pravin]

Brian,

Each input type has a property called 'disabled' (somebody please correct me if this is an IE-only thing), and all you have to do is set 'disabled' to 'true' for that submit button. You can enable the button by attaching a handler for 'onKeyUp' or 'onGotFocus' to a field in your form, and set 'disabled' to 'false' in that handler. Your submit button would then need a handler for 'onClick' that checks for all required fields being entered. That's just the start, I'm sure others may have more ideas.

[gdape]

Nice, and the working example at the end is great for us who skim and hack

[JMulder]

Funny how this great article popped up again in my del.icio.us feed. I got inspired by the Javascript DOM and as an experiment created: http://www.jeroenmulder.com/developm...ndle_form.html

I am no Javascript experts and have always been among the people to loath the technology. Thankfully, a while ago articles such as these made me realise there actually are good examples of using Javascript -- I like the one using the DOM completely the most as it keeps Javascript out of the markup.

Keep these articles up and open more people's eyes about Javascript. I know plenty who could use it :-)

[Chrisss]

Great article! my compliments!

I thought it would be nicer if the normal border size was just 1 pixel and the focussed border 2 pixels. After changing the style rules, the form fields 'jumped up and down' on selecting them because of the different box-sizes. Therefor I gave the normal fields a top and bottom padding of 1px. The javascript addition I made was:
source.style.border='2px Solid #711F5E';
source.style.margin='0';
for the focus and
source.style.border='1px Solid #711F5E';
source.style.margin='1px 0';
for the blur.

Now I want to enhance the script I a way that the label style: 'font-weight' changes to bold on the focus. I know it can be done but I'm not a DOM expert and have difficulties selecting the label element. I am working on it so if I find a solution I'll post it here! :-)

[Chrisss]

Hmm that wasn't too hard :-)
Here is the code addition to alter the label text:
function oninputfocus(e) {
/* Cookie-cutter code to find the source of the event */
[...cut...]
/* End cookie-cutter code */
var id = source.id;
var label = getLabelForId(id);
label.style.fontWeight='bold';

source.style.border='2px Solid #711F5E';
source.style.margin='0';
}
function oninputblur(e) {
/* Cookie-cutter code to find the source of the event */
[...cut...]
/* End cookie-cutter code */
var id = source.id;
var label = getLabelForId(id);
label.style.fontWeight='normal';

source.style.border='1px Solid #711F5E';
source.style.margin='1px 0';
}

Hope it's usefull! It was for me :-)

[josh]

If you're going to have a text field with a placeholder value that gets cleared with JavaScript, set the initial value with JavaScript. This way users with JavaScript disabled get a blank text field and aren't annoyed at having to manually clear placeholder text.

[carolinem]

Is it possible to use similar methods to build an accessible form whereby the selection of a particular radio button triggers the appearance of a text field?

[http://www.photoprinters-sales.info/]

And how many there is a print on the photoprinter? Who knows?

[Stefan]

Interesting site, it is well written. Registration not so was pleasant, and with scripts of a problem. Let's vary references, or banners. Write, how solve.

[johnyboy]

Throughout this article I'm continually not sure if "This whatever..." refers to the thing above the text or following on after and below it.