SitePoint Sponsor |
|
User Tag List
Results 1 to 13 of 13
-
Jul 16, 2004, 11:36 #1
Article Discussion
This is an article discussion thread for discussing the SitePoint article, "Simple Tricks for More Usable Forms"
-
Jul 16, 2004, 11:36 #2GeorgeSitePoint Community Guest
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?
-
Aug 10, 2004, 15:08 #3BrianSitePoint Community Guest
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
-
Aug 15, 2004, 00:46 #4PravinSitePoint Community Guest
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.
-
Sep 23, 2004, 01:54 #5
- Join Date
- Jan 2002
- Location
- in the outskirts, and in the fringes
- Posts
- 501
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Nice, and the working example at the end is great for us who skim and hack
-
Jan 7, 2005, 06:17 #6
- Join Date
- May 2001
- Location
- The Netherlands
- Posts
- 1,745
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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 :-)
-
Mar 24, 2005, 08:45 #7
- Join Date
- Mar 2005
- Posts
- 4
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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! :-)
-
Mar 24, 2005, 09:05 #8
- Join Date
- Mar 2005
- Posts
- 4
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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 :-)
-
Apr 18, 2005, 14:49 #9joshSitePoint Community Guest
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.
-
Dec 15, 2005, 10:35 #10carolinemSitePoint Community Guest
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?
-
Dec 31, 2005, 18:40 #11http://www.photoprinters-sales.info/SitePoint Community Guest
And how many there is a print on the photoprinter? Who knows?
-
Jan 18, 2006, 22:13 #12StefanSitePoint Community Guest
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.
-
Feb 13, 2007, 13:33 #13
- Join Date
- Apr 2002
- Posts
- 2,322
- Mentioned
- 3 Post(s)
- Tagged
- 0 Thread(s)
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.
Bookmarks