Price: $12.99

Works in Dreamweaver MX and higher, all server models

This extension is a suite of Dreamweaver behaviors (JavaScripts) that allow you to set up a form with labels where the labels are highlighted when the focus is on a particular form field. For example, if you have an address form, as the user tabs through the form or moves form one form element to another with his mouse, the label for that form element becomes highlighted. The suite contains the following behaviors:

Highlight Form Labels

The first behavior adds a highlighting to the label of a specific form element. Use this if you want to target individual form elements for highlighting, such as on an input form where you want the input fields to have label highlights but don't want a search box or login form to also have highlights.

To apply the extension to any HTML page (or .cfm, .asp, .aspx, .php or any other valid web page) follow these simple steps:

1. Open the Behaviors panel.
2. Select an html element/event in Design view (best applied to form fields/links with associated label tags).
3. Select Tom-Muck.com > Highlight Form Labels from the behaviors panel. You'll see this dialog box:

4. Fill in or accept the following values:

The Background Color of the label tag

The Border of the label tag

5. Click OK to apply the behavior.

Remove Highlight from Label

The second behavior removes the highlighting by setting the background and border of the label back to what it was before. To apply it, simply select your trigger element/event, such as a form element or link, and choose Behaviors > Tom-Muck.com > Remove Highlight From Label . The following dialog box will appear:

The dialog box has no variables to input, so click OK to apply it.

Highlight All Form Labels

Similar to the first extension, however this one applies a script to the onload event of the page which will programatically add a highlighting function to every form element on the page, as well as adding a function to remove highlighting to every form element as well. You apply it by selecting the body tag in the tag selector (or simply select nothing on the page to apply the event to the body onload event) and choosing Behaviors > Tom-Muck.com > Highlight All Form Labels. The extension has the following parameters:

The Background Color of the label tag

The Border of the label tag

After filling in these two properties, click OK to apply the extension.

Set Class for All Form Labels

This extension will apply a behavior to the body onload event just like the last, however with this extension you can use a CSS class to set your highlighting rather than manually choosing the background color and border of the label. The advantage of using a CSS class is that you can use background images, padding, margins, and many more CSS properties to style your labels. To apply the extension, select the body tag in the tag selector and choose the class to use for the label whose form field has focus.

The following links show the behaviors in action.

Highlight Form Labels (target individual labels)

Highlight All Form Labels (all labels associated with form elements)

Set Class All Form Labels (all labels associated with form elements)