Adobe Dreamweaver CC 2014 v.13 - Manual (Page 599)

To the top
To the top
1. Select the HTML form object.
2. In the Behaviors panel (Window > Behaviors), click the Plus (+) button, and select a behavior from the list.
Attach custom scripts to HTML form buttons
Some forms use JavaScript or VBScript to perform form processing or some other action on the client as opposed to sending the form data to the
server for processing. You can use Dreamweaver to configure a form button to run a specific client-side script when the user clicks the button.
1. Select a Submit button in a form.
2. In the Behaviors panel (Window > Behaviors), click the Plus (+) button, and select Call JavaScript from the list.
3. In the Call JavaScript box, enter the name of the JavaScript function to run when the user clicks the button, and click OK.
For example, you can enter the name of a function that doesn’t exist yet, such as processMyForm().
4. If your JavaScript function doesn’t exist in the head section of the document yet, add it now.
For example, you could define the following JavaScript function in the head section of the document to display a message when the user
clicks the Submit button:
function processMyForm(){
alert('Thanks for your order!');
}
Create accessible HTML forms
When you insert an HTML form object, you can make the form object accessible, and change the accessibility attributes later.
Add an accessible form object
1. The first time you add accessible form objects, activate the Accessibility dialog box for form objects (see Optimizing the workspace for visual
development).
This is a one-time-only step.
2. In the document, place the insertion point where you want the form object to appear.
3. Select Insert > Form, and select a form object to insert.
The Input Tag Accessibility Attributes dialog box appears.
4. Complete the dialog box, and click OK. Here is a partial list of options:
Note: The screen reader reads the name you enter as the Label attribute for the object.
ID assigns an ID to the form field. This value can be used to refer to the field from JavaScript; it's also used as the value of the for attribute if
you choose the Attach Label Tag Using For option under the Style options.
Wrap With Label Tag Wraps a label tag around the form item, as follows:
RadioButton1
Attach Label Tag Using For Uses the for attribute to wrap a label tag around the form item, as follows:
RadioButton2
This choice causes the browser to render text associated with a check box and radio button with a focus rectangle, and enables the user to
select the check box and radio button by clicking anywhere in the associated text instead of just the check box or radio button control.
Note: This is the preferred option for accessibility; however, the functionality may vary depending on the browser.
No Label Tag Does not use a label tag, as follows:
RadioButton3
Access Key Uses a keyboard equivalent (one letter) and the Alt key (Windows) or the Control key (Macintosh) to select the form object in
the browser. For example, if you enter B as the Access Key, users with a Macintosh browser could type Control+B to select the form
object.
Tab Index Specifies a tab order for the form objects. If you set tab order for one object, you must set the tab order for all objects.
592