SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    ********* Articles ArticleBot's Avatar
    Join Date
    Apr 2001
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Article Discussion

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

  2. #2
    George
    SitePoint 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?

  3. #3
    Brian
    SitePoint 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

  4. #4
    Pravin
    SitePoint 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.

  5. #5
    . gdape's Avatar
    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

  6. #6
    1-800-JMULDER JMulder's Avatar
    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 :-)

  7. #7
    SitePoint Member
    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! :-)

  8. #8
    SitePoint Member
    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 :-)

  9. #9
    josh
    SitePoint 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.

  10. #10
    carolinem
    SitePoint 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?

  11. #11
    http://www.photoprinters-sales.info/
    SitePoint Community Guest
    And how many there is a print on the photoprinter? Who knows?

  12. #12
    Stefan
    SitePoint 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.

  13. #13
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,301
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •