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.

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.

Enable the wForms extension by adding the following code to the <head> element of your page:
<script type="text/javascript" src="wforms.js" ></script>
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>
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 !

Comments (4)

The Repeat Behavior Explained

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

Updated documentation: Server-side handling of the Repeat Behavior part 1 and part 2

This post is part of the wForms Documentation. wForms is an open-source javascript library that adds commonly needed behaviors to traditional web forms without the need for any programming skill.

For additional help, visit the wForms forum.

The Repeat Behavior is a functionality offered by the wForms extension. It allows you to define a section of a form that the visitor can duplicate as many times as he wants.
It is particularly suited for situation when you don’t want to limit the number of possible answers to a question. For example, the professional experience section of a employment form :

As with all wForms behaviors, you don’t need to write a single line of code. Add the class “repeat” to the desired tag and everything inside that element will be duplicable. The wForms extension will even take care of adding the ‘repeat’ link.

In this example, the class was added to the TR tag. Other valid candidates for the repeat class are:
DIV, FIELDSET, SPAN, LI, P (*).

The repeat behavior will not work if set on the following tags: TABLE, UL, OL, INPUT, TEXTAREA, SELECT.

Let’s review how to enable the Repeat behavior in your form:

Enable the wForms extension by adding the following code to the <head> element of your page:
<script type="text/javascript" src="wforms.js" ></script>
Add the ’Repeat’ class to the element to be duplicated.
<div ... class="repeat"> ... </div>
The wForms extension generates the ‘repeat’ and ‘remove’ links. You can style them with the following CSS rules:
.duplicateLink { ... css properties ... } .removeLink { ... css properties ... }

That’s all folks. For information regarding server-side code, see Server-side handling of the Repeat Behavior part 1 and part 2.

Notes:
(*) and any other tag that can accept a link as a child element.

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

Comments (83)

The Field Hint Behavior Explained

Implementation

The Repeat Behavior Explained

Search the Blog Archive

Latest Posts

Categories