This page has been archived. For the latest news on FormAssembly, go to: http://www3.formassembly.com/blog

The Field Hint Behavior Explained

Filed under wForms Documentation on April 6, 2005 by cedsav.

Update: Comments are closed for this post, but you can go to the wForms forum if you have any question or comment. Thanks !

 

This post is part of the wForms Documentation.

For additional help, visit the wForms forum.

The purpose of the Field Hint Behavior is to assign a contextual help to an input field and to highlight the help when the field gets the focus.

Demonstration: Click on the input field

This is the contextual help associated with the text input field.



A field hint can be a short text, an image, or just about anything you deem appropriate.

Implementation

Of course, if you use the form builder you don’t have to worry about the implementation details. If you use the wForms behaviors on your own forms follow these instructions to set the id and classe attributes correctly. That’s all you will need.

  1. Enable the wForms extension by adding the following code to the <head> element of your page:
    <script type="text/javascript" src="wforms.js" ></script>
  2. Assuming that the field has its id attribute set to ’someFieldId’, set the field hint id to ’someFieldId-H‘ (append -H) and add the ‘field-hint-inactive‘ class.
    <div id="someFieldId-H" class="field-hint-inactive" >Your Field Hint</div>
  3. Add the following CSS rules to your stylesheet to control the visual effect:
    • .field-hint {color: #000; /*... or any other css properties ... */}
    • .field-hint-inactive { color: #999; /*... or any other css properties ... */ }

That’s all folks. Don’t hesitate to give your feedback.

Note: Comments are now closed for this post, but you can go to the wForms forum if you have any question or comment. Thanks !

4 Responses to “The Field Hint Behavior Explained”

  1. Prerak Says:
    October 18th, 2005 at 10:02 pm

    I am trying to create the same display as the fieldset, with the text being in center of the top border. I’d appreciate if someone
    could suggest me a way to do this. Is there a javascript or css available for this.

  2. cedsav Says:
    October 25th, 2005 at 8:46 pm

    Prerak.. try to add something like this to your css.

    legend { margin: 0 auto; }

    or if it doesn’t work, just play with the left margin

    legend { margin-left: 50%; }

  3. gena Says:
    February 21st, 2006 at 11:53 pm

    You mentioned in the change log that you had added support for the Fade Anything Technique. Could you possibly explain how to make that work with the hints behavior?

    It works on the first hint, but doesn’t on subsequent ones. I have tried it with just adding the fade class and also using Fat.fade_element(”name2-H”), etc.., but don’t seem to be getting anywhere.

    Thanks, I realize this isn’t your code, but you are definitely the expert if you can spare the time!

  4. cedsav Says:
    February 26th, 2006 at 12:23 am

    Gena, I think that’s something I can include in wFORMS 2.0 which should be ready very soon (next week-end hopefully).

    To get it to work on the current version of wForms.js, you’d need to add
    Fat.fade_element(fh),

    at the end of the ‘activateFieldHint’ function.