User Guide Cancel

Create web forms

Last updated on Apr 27, 2021

Note:

Support for HTML form elements has been enhanced in Dreamweaver Creative Cloud updates. For information, see Enhanced HTML5 support for form elements.

About web forms

When a visitor enters information into a web form displayed in a web browser and clicks the submit button, the information is sent to a server where a server-side script or application processes it. The server responds by sending the processed information back to the user (or client), or by performing some other action based on the form’s contents.

You can create forms that submit data to most application servers, including PHP, ASP, and ColdFusion. If you use ColdFusion, you can also add ColdFusion-specific form controls to your forms.

Note:

You can also send form data directly to an e‑mail recipient.

Form objects

In Dreamweaver, form input types are called form objects. Form objects are the mechanisms that allow users to input data. You can add the following form objects to a form:

Text fields

Accept any type of alphanumeric text entry. The text can be displayed as a single line, multiple lines, and as a password field where entered text is replaced by asterisks or bullets to hide the text from onlookers.

Note:

Passwords and other information sent to a server using a password field are not encrypted. The transferred data can be intercepted and read as alphanumeric text. For this reason, you should always provide encryption for data you want to keep secure.

Hidden fields

Store information entered by a user, such as a name, e‑mail address, or viewing preference, and then use that data when the user next visits the site.

Buttons

Perform actions when clicked. You can add a custom name or label for a button, or use one of the predefined “Submit” or “Reset” labels. Use a button to submit form data to the server or to reset the form. You can also assign other processing tasks that you define in a script. For example, the button might calculate the total cost of items selected based on assigned values.

Check boxes

Allow multiple responses within a single group of options. A user can select as many options as apply. The following example shows three check box items selected: Surfing, Mountain Biking, and Rafting.

Radio buttons

Represent exclusive choices. Selecting a button within a radio button group deselects all others in the group (a group consists of two or more buttons that share the same name). In the example below, Rafting is the currently selected option. If the user clicks Surfing, the Rafting button is automatically cleared.

List menus

Display option values within a scrolling list that allows users to select multiple options. The List option displays the option values in a menu that allows users to select only a single item. Use menus when you have a limited amount of space, but must display many items, or to control the values returned to the server. Unlike text fields where users can type anything they want, including invalid data, you set the exact values returned by a menu.

Note:

A pop‑up menu on an HTML form is not the same as a graphical pop‑up menu. For information on creating, editing, and showing and hiding a graphical pop-up menu, see the link at the end of this section.

Jump menus

Navigational lists or pop‑up menus that let you insert a menu in which each option links to a document or file.

File fields

Let users browse to a file on their computer and upload the file as form data.

Image fields

Let you insert an image in a form. Use image fields to make graphical buttons such as Submit or Reset buttons. Using an image to perform tasks other than submitting data requires attaching a behavior to the form object.

Create an HTML form

(Creative Cloud users only): As part of HTML5 support, new attributes have been introduced in the Properties panel for form elements. In addition, four new form elements (E-mail, search, telephone, URL) have been introduced in the Forms section of the Insert panel. For more information, see Enhanced HTML5 support for form elements.

Open a page and place the insertion point where you want the form to appear.
Select Insert > Form, or select the Forms category in the Insert panel and click the Form icon.

In Design view, forms are indicated by a dotted red outline. If you don’t see this outline, select View > Visual Aids > Invisible Elements.
Set the properties of the HTML form in the Property inspector (Window >Properties):

a.In the Document window, click the form outline to select the form.

b.In the Form Name box, type a unique name to identify the form.

Naming a form makes it possible to reference or control the form with a scripting language, such as JavaScript or VBScript. If you do not name the form, Dreamweaver generates a name using the syntax formn, and increments the value of n for each form added to the page.

c.In the Action box, specify the page or script that will process the form data by typing the path, or clicking the folder icon to navigate to the appropriate page or script. Example: processorder.php.

d.In the Method pop‑up menu, specify the method to transmit the form data to the server.

Set any of the following options:

Default Uses the browser’s default setting to send the form data to the server. Typically, the default value is the GET method.

GET Appends the value to the URL requesting the page.

POST Embeds the form data in the HTTP request.

Do not use the GET method to send long forms. URLs are limited to 8192 characters. If the amount of data sent is too large, data will be truncated, leading to unexpected or failed processing results.

Dynamic pages generated by parameters passed by the GET method can be bookmarked because all the values needed to regenerate the page are contained in the URL displayed in the browser’s Address box. In contrast, dynamic pages generated by parameters passed by the POST method cannot be bookmarked.

If you collect confidential user names and passwords, credit card numbers, or other confidential information, the POST method may appear more secure than the GET method. However, the information sent by the POST method is not encrypted and can easily be retrieved by a hacker. To ensure security, use a secure connection to a secure server.

e.(Optional) In the Enctype pop‑up menu, specify the MIME encoding type of the data submitted to the server for processing.

The default setting of application/x-www-form-urlencode is typically used in conjunction with the POST method. If you are creating a file-upload field, specify the multipart/form‑data MIME type.

f.(Optional) In the Target pop‑up menu, specify the window in which to display the data returned by the invoked program.

If the named window is not already open, a new window with that name opens. Set any of the following target values:

_blank Opens the destination document in a new unnamed window.

_parent Opens the destination document in the parent window of the one displaying the current document.

_self Opens the destination document in the same window as the one in which the form was submitted.

_top Opens the destination document in the body of the current window. This value can be used to ensure that the destination document takes over the full window even if the original document was displayed in a frame.
Insert form objects in the page:

a.Place the insertion point where the form object should appear in the form.

b.Select the object in the Insert > Form menu, or in the Forms category of the Insert panel.

c.Complete the Input Tag Accessibility Attributes dialog box. For more information, click the Help button in the dialog box.

Note:

If you don’t see the Input Tag Accessibility Attributes dialog box, you might have had the Insertion point in Code view when you tried to insert the form object. Make sure the Insertion point is in Design view and try again. For more information on this topic, see David Powers’s article Creating HTML forms in Dreamweaver.

d.Set the properties of the objects.

e.Enter a name for the object in the Property inspector.

Every text field, hidden field, check box, and list/menu object must have a unique name that identifies the object in the form. Form object names cannot contain spaces or special characters. You can use any combination of alphanumeric characters and an underscore (_). The label you assign to the object is the variable name that stores the value (the entered data) of the field. This is the value sent to the server for processing.

Note:

All radio buttons in a group must have the same name.

f.To label the text field, check box, or radio button object on the page, click beside the object and type the label.
Adjust the layout of the form.

Use line breaks, paragraph breaks, preformatted text, or tables to format your forms. You cannot insert a form in another form (that is, you cannot overlap tags), but you can include more than one form in a page.

When designing forms, remember to label the form fields with descriptive text to let users know what they’re responding to—for example, “Type your name” to request name information.

Use tables to provide structure for form objects and field labels. When using tables in forms make sure all the table tags are included between the form tags.

For a tutorial on creating forms, see www.adobe.com/go/vid0160.

For a tutorial on styling forms with CSS, see www.adobe.com/go/vid0161.

Text Field object properties

Select the text field object, and set any of the following options in the Property inspector:

Char Width

Specifies the maximum number of characters that can be displayed in the field. This number can be less than Max Chars, which specifies the maximum number of characters that can be entered in the field. For example, if the Char Width is set to 20 (the default value) and a user enters 100 characters, only 20 of those characters will be viewable in the text field. Although you cannot view the characters in the field, they are recognized by the field object and are sent to the server for processing.

Max Chars

Specifies the maximum number of characters that the user can enter in the field for single-line text fields. Use Max Chars to limit zip codes to 5 digits, limit passwords to 10 characters, and so on. If you leave the Max Chars box blank, users can enter any amount of text. If the text exceeds the character width of the field the text will scroll. If a user exceeds the maximum number of characters, the form produces an alert sound.

Num Lines

(Available when the Multiline option is selected) Sets the height of the field for multiple-line text fields.

Disabled

Disables the text area.

Read-only

Makes the text area a read-only text area.

Type

Designates the field as a single-line, multiple-line, or password field.

Single-line

Results in an input tag with its type attribute set to text. The Char Width setting maps to the size attribute, and the Max Chars setting maps to the maxlength attribute.

Multi-line

Results in a textarea tag. The Char Width setting maps to the cols attribute, and the Num Lines setting maps to the rows attribute.

Password

Results in an input tag with its type attribute set to password. The Char Width and Max Chars settings map to the same attributes as in single-line text fields. When a user types in a password text field, the input appears as bullets or asterisks to protect it from observation by others.

Init val

Assigns the value displayed in the field when the form first loads. For example, you might indicate that the user enters information in the field by including a note or example value.

Class

Lets you apply CSS rules to the object.

Button object options

Button Name

Assigns a name to the button. Two reserved names, Submit and Reset, tell the form to submit the form data to the processing application or script, or to reset all the form fields to their original values, respectively.

Value

Determines the text that appears on the button.

Action

Determines what happens when the button is clicked.

Submit Form

Submits the form data for processing when the user clicks the button. The data is submitted to the page or script specified in the form’s Action property.

Reset Form

Clears the contents of the form when the button is clicked.

None

Specifies the action to be performed when the button is clicked. For example, you can add a JavaScript behavior that opens another page when the user clicks the button.

Class

Applies CSS rules to the object.

Check Box object options

Checked Value

Sets the value to be sent to the server when the check box is checked. For example, in a survey you might set a value of 4 for strongly agree and a value of 1 for strongly disagree.

Initial State

Determines whether the check box is selected when the form loads in the browser.

Dynamic

Lets the server dynamically determine the initial state of the check box. For example, you can use check boxes to visually present the Yes/No information stored in a database record. At design time, you don’t know that information. At run time the server reads the database record and selects the check box if the value is Yes.

Class

Applies Cascading Style Sheets (CSS) rules to the object.

Single radio button object options

Checked Value

Sets the value to be sent to the server when the radio button is selected. For example, you might type skiing in the Checked Value box to indicate a user chose skiing.

Initial State

Determines whether the radio button is selected when the form loads in the browser.

Dynamic

Lets the server dynamically determine the initial state of the radio button. For example, you can use radio buttons to visually present information stored in a database record. At design time, you don’t know that information. At run time the server reads the database record and checks the radio button if the value matches one you specified.

Class

Applies CSS rules to the object.

Menu options

List/Menu

Assigns a name to the menu. The name must be unique.

Type

Indicates whether the menu drops down when clicked (the Menu option) or displays a scrollable list of items (the List option). Select the Menu option if you want only one option to be visible when the form is displayed in a browser. To display the other choices, the user must click the down arrow.

Select the List option to list some or all the options when the form is displayed in a browser, to let users select multiple items.

Height

(List type only) Sets the number of items displayed in the menu.

Selections

(List type only) Indicates whether the user can select multiple items from the list.

List Values

Opens a dialog box that lets you add the items to a form menu:

Use the Plus (+) and Minus (–) buttons to add and remove items in the list.
Enter label text and an optional value for each menu item.
Each item in the list has a label (the text that appears in the list) and a value (the value that is sent to the processing application if the item is selected). If no value is specified, the label is sent to the processing application instead.
Use the up and down arrow buttons to rearrange items in the list.
Items appear in the menu in the same order as they appear in the List Values dialog box. The first item on the list is the selected item when the page is loaded in a browser.

Dynamic

Lets the server dynamically select an item in the menu when it is first displayed.

Class

Lets you apply CSS rules to the object.

Initially Selected

Sets the items selected in the list by default. Click the item or items in the list.

Insert file-upload fields

You can create a file-upload field that lets users select a file on their computer—such as a word processing document or graphics file—and upload the file to the server. A file field looks like other text fields except it also contains a Browse button. The user either manually enters the path to the file they want to upload, or uses the Browse button to locate and select the file.

Before you can use file-upload fields, you must have a server-side script or a page capable of handling file submissions. Consult the documentation of the server technology you use to process form data. For example, if you use PHP, see “Handling files uploads” in the online PHP Manual at http://us2.php.net/features.file-upload.php.

File fields require that you use the POST method to transmit files from the browser to the server. The file is posted to the address you specify in the form’s Action box.

Note:

Contact your server’s administrator to confirm that anonymous file uploads are allowed before using the file field.

Insert a form in the page (Insert > Form).
Select the form to display its Property inspector.
Set the form Method to POST.
From the Enctype pop‑up menu, select multipart/form-data.
In the Action box, specify the server-side script or page capable of handling the uploaded file.
Place the insertion point inside the form outline, and select Insert > Form > File Field.
Set any of the following options in the Property inspector:

File Field Name

Specifies the name for the file field object.

Char Width

Specifies the maximum number of characters that can be displayed in the field.

Max Chars

Specifies the maximum number of characters the field will hold. If the user browses to locate the file, the filename and path can exceed the specified Max Chars value. However, if the user attempts to type in the filename and path, the file field will only allow the number of characters specified by the Max Chars value.

Insert an image button

You can use images as button icons. Using an image to perform tasks other than submitting data requires attaching a behavior to the form object.

In the document, place the insertion point inside the form outline.
Select Insert > Form > Image Field.

The Select Image Source dialog box appears.
Select the image for the button in the Select Image Source dialog box, and click OK.
Set any of the following options in the Property inspector:

ImageField

Assigns a name to the button. Two reserved names, Submit and Reset, tell the form to submit the form data to the processing application or script, or to reset all the form fields to their original values, respectively.

Src

Specifies the image you want to use for the button.

Alt

Lets you enter descriptive text in case the image fails to load in the browser.

Align

Sets the align attribute of the object.

Edit Image

Starts your default image editor and opens the image file for editing.

Class

Lets you apply CSS rules to the object.
To attach a JavaScript behavior to the button, select the image, and then select the behavior in the Behaviors panel (Window > Behaviors).

Hidden field object options

HiddenField

Specifies the name for the field.

Value

Assigns a value to the field. This value is passed to the server when the form is submitted.

Insert a group of radio buttons

Place the insertion point inside the form outline.
Select Insert > Form > Radio Group.
Complete the dialog box and click OK.

a.In the Name box, enter a name for the radio button group.

If you set the radio buttons to pass parameters back to the server, the parameters are associated with the name. For example, if you name the group myGroup and set the form method to GET (that is, you want the form to pass URL parameters instead of form parameters when the user clicks the submit button), the expression myGroup="CheckedValue" is passed in the URL to the server.

b.Click the Plus (+) button to add a radio button to the group. Enter a label and checked value for the new button.

c.Click the up or down arrows to reorder the buttons.

d.To set a particular radio button to be selected when the page opens in a browser, enter a value equal to the radio button’s value in the Select Value Equal To box.

Enter a static value or specify a dynamic one by clicking the lightning bolt icon beside the box and selecting a recordset that contains possible checked values. In either case, the value you specify should match the checked value of one of the radio buttons in the group. To view the checked values of the radio buttons, select each radio button and open its Property inspector (Window > Properties).

e. Select the format in which you want Dreamweaver to lay out the buttons. Lay out the buttons using line breaks or a table. If you select the table option, Dreamweaver creates a single-column table, and places the radio buttons on the left and the labels on the right.

You can also set the properties in the Property inspector or directly in Code view.

Insert a group of check boxes

Place the insertion point inside the form outline.
Select Insert > Form > Checkbox Group.
Complete the dialog box and click OK.

a.In the Name box, enter a name for the check box group.

If you set the check boxes to pass parameters back to the server, the parameters are associated with the name. For example, if you name the group myGroup and set the form method to GET (that is, you want the form to pass URL parameters instead of form parameters when the user clicks the submit button), the expression myGroup="CheckedValue" is passed in the URL to the server.

b.Click the Plus (+) button to add a check box to the group. Enter a label and checked value for the new check box.

c.Click the up or down arrows to reorder the check boxes.

d.To set a particular check box to be selected when the page opens in a browser, enter a value equal to the check box’s value in the Select Value Equal To box.

Enter a static value or specify a dynamic one by clicking the lightning bolt icon beside the box and selecting a recordset that contains possible checked values. In either case, the value you specify should match the checked value of one of the check boxes in the group. To view the checked values of the check boxes, select each check box and open its Property inspector (Window > Properties).

e.Select the format in which you want Dreamweaver to lay out the check boxes.

Lay out the check boxes using line breaks or a table. If you select the table option, Dreamweaver creates a single-column table, and places the check boxes on the left and the labels on the right.

You can also set the properties in the Property inspector or directly in Code view.

About dynamic form objects

A dynamic form object is a form object whose initial state is determined by the server when the page is requested from the server, not by the form designer at design time. For example, when a user requests a PHP page that contains a form with a menu, a PHP script in the page automatically populates the menu with values stored in a database. The server then sends the completed page to the user’s browser.

Making form objects dynamic can simplify site maintenance. For example, many sites use menus to present users with a set of options. If the menu is dynamic, you can add, remove, or change menu items in a single place—the database table in which the items are stored—to update all instances of the same menu on the site.

Insert or change a dynamic HTML form menu

You can dynamically populate an HTML form menu or list menu with entries from a database. For most pages, you can use an HTML menu object.

Before you begin, you must insert an HTML form in a ColdFusion, PHP, or ASP page, and you must define a recordset or other source of dynamic content for the menu.

Insert an HTML List/Menu form object in your page:

a.Click inside the HTML form on the page (Insert > Form > Form).

b.Select Insert > Form > List/Menu to insert the form object.
Do one of the following:
- Select the new or an existing HTML List/Menu form object, and then click the Dynamic button in the Property inspector.
- Select Insert > Data Objects > Dynamic Data > Dynamic Select List.
Complete the Dynamic List/Menu dialog box, and click OK.

a.In the Options From Recordset pop‑up menu, select the recordset to use as a content source. You also use this menu to edit both static and dynamic list/menu items later.

b.In the Static Options area, enter a default item in the list or menu. Also, use this option to edit static entries in a list/menu form object after adding dynamic content.

c.(Optional) Use the Plus (+) and Minus (–) buttons to add and remove items in the list. Items are in the same order as in the Initial List Values dialog box. The first item on the list is the selected item when the page is loaded in a browser. Use the up and down arrow buttons to rearrange items in the list.

d.In the Values pop‑up menu, select the field containing the values of the menu items.

e.In the Labels pop‑up menu, select the field containing the labels for the menu items.

f.(Optional) To specify that a particular menu item is selected when the page opens in a browser or when a record is displayed in the form, enter a value equal to the menu item’s value, in the Select Value Equal To box.

You can enter a static value or you can specify a dynamic one by clicking the lightning bolt icon beside the box, and selecting a dynamic value from the list of data sources. In either case, the value you specify should match one of the menu item values.

Make existing HTML form menus dynamic

In Design view, select the list/menu form object.
In Property inspector, click the Dynamic button.
Complete the dialog box, and click OK.

Display dynamic content in HTML text fields

You can display dynamic content in HTML text fields when the form is viewed in a browser.

Before you begin, you must create the form in a ColdFusion, PHP, or ASP page, and you must define a recordset or other source of dynamic content for the text field.

Select the text field in the HTML form on your page.
In the Property inspector, click the lightning bolt icon beside the Init Val box to display the Dynamic Data dialog box.
Select the recordset column that will supply a value to the text field, and then click OK.

Set the Dynamic Text Field dialog box options

Select the text field to make dynamic from the Text Field pop‑up menu.
Click the lightning bolt icon beside the Set Value To box, select a data source from the list of data sources, and click OK.

The data source should contain textual information. If no data sources appear in the list, or if the available data sources don’t meet your needs, click the Plus (+) button to define a new data source.

Dynamically preselect an HTML check box

You can let the server decide whether to select a check box when the form is displayed in a browser.

Before you begin, you must create the form in a ColdFusion, PHP, or ASP page, and you must define a recordset or other source of dynamic content for the check boxes. Ideally, the source of content should contain Boolean data, such as Yes/No or true/false.

Select a check box form object on your page.
In the Property inspector, click the Dynamic button.
Complete the Dynamic CheckBox dialog box, and click OK:
- Click the lightning bolt icon beside the Check If box and select the field from the list of data sources.
  
  The data source must contain Boolean data such as Yes and No, or true and false. If no data sources appear in the list, or if the available data sources don’t meet your needs, click the Plus (+) button to define a new data source.
- In the Equal To box, enter the value the field must have for the check box to appear selected.
  
  For example, for the check box to appear selected when a specific field in a record has a value of Yes, enter Yes in the Equal To box.
Note:

This value is also returned to the server if the user clicks the form’s Submit button.

Dynamically preselect an HTML radio button

Dynamically preselect an HTML radio button when a record is displayed in the HTML form in a browser.

Before you begin, you must create the form in a ColdFusion, PHP, or ASP page, and insert at least one group of HTML radio buttons (Insert > Form > Radio Group). You must also define a recordset or other source of dynamic content for the radio buttons. Ideally, the source of content should contain Boolean data, such as Yes/No or true/false.

In Design view, select a radio button in the radio group.
In the Property inspector, click the Dynamic button.
Complete the Dynamic Radio Group dialog box, and click OK.

Set the Dynamic Radio Group dialog box options

In the Radio Button Group pop‑up menu, select a form and radio button group in the page.

The Radio Button Value box displays the values of all radio buttons in the group.
Select a value to dynamically preselect from the list of values. This value is displayed in the Value box.
Click the lightning bolt icon beside the Select Value Equal To box and select a recordset that contains possible checked values for the radio buttons in the group.

The recordset you select contains values that match the radio buttons’ checked values. To view the checked values of the radio buttons, select each radio button and open its Property inspector (Window > Properties).
Click OK.

Set the Dynamic Radio Group dialog box options (ColdFusion)

Select a radio group and form from the Radio Group pop‑up menu.
Click the lightning bolt icon next to Select Value Equal To box.
Complete the Dynamic Data dialog box, and click OK.

a.Select a data source from the list of data sources.

b.(Optional) Select a data format for the text.

c.(Optional) Modify the code that Dreamweaver inserts in your page to display the dynamic text.
Click OK to close the Dynamic Radio Group dialog box, and insert the dynamic content placeholder in the Radio Group.

Validate HTML form data

Dreamweaver can add JavaScript code that checks the contents of specified text fields to ensure that the user has entered the correct type of data.

You can use Spry form widgets to build your forms and validate the contents of specified form elements. For more information, consult the Spry topics listed below.

You can also build ColdFusion forms in Dreamweaver that validate the contents of specified fields. For more information, consult the ColdFusion chapter listed below.

Create an HTML form that includes at least one text field and one Submit button.

Make sure every text field that you want to validate has a unique name.
Select the Submit button.
In the Behaviors panel (Window > Behaviors), click the Plus (+) button and select the Validate Form behavior from the list.
Set the validation rules for each text field, and click OK.

For example, you might specify that a text field for a person’s age accepts only numbers.

Note:

The Validate Form behavior is available only if a text field has been inserted into the document.

Attach JavaScript behaviors to HTML form objects

You can attach JavaScript behaviors stored in Dreamweaver to HTML form objects such as buttons.

Select the HTML form object.
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.

Select a Submit button in a form.
In the Behaviors panel (Window > Behaviors), click the Plus (+) button, and select Call JavaScript from the list.
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().
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

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.
In the document, place the insertion point where you want the form object to appear.
Select Insert > Form, and select a form object to insert.

The Input Tag Accessibility Attributes dialog box appears.
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:
<label> <input type="radio" name="radiobutton" value="radiobutton"> RadioButton1</label>

Attach Label Tag Using For

Uses the for attribute to wrap a label tag around the form item, as follows:

<input type="radio" name="radiobutton" value="radiobutton" id="radiobutton"> <label for="radiobutton">RadioButton2</label>

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:
<input type="radio" name="radiobutton" value="radiobutton"> 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.

Setting a tab order is useful when you have other links and form objects on the page and need the user to tab through them in a specific order.
Click Yes to insert a form tag.

The form object appears in the document.

Note:

If you press Cancel, the form object appears in the document, but Dreamweaver does not associate accessibility tags or attributes with it.

Edit accessibility values for a form object

In the Document window, select the object.
Do one of the following:
- Edit the appropriate attributes in Code view.
- Right-click (Windows) or Control‑click (Macintosh), and then select Edit Tag.

More like this

Adobe

Get help faster and easier

New user?

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Create web forms

About web forms

Form objects

Create an HTML form

Text Field object properties

Button object options

Check Box object options

Single radio button object options

Menu options

Insert file-upload fields

Insert an image button

Hidden field object options

Insert a group of radio buttons

Insert a group of check boxes

About dynamic form objects

Insert or change a dynamic HTML form menu

Make existing HTML form menus dynamic

Display dynamic content in HTML text fields

Set the Dynamic Text Field dialog box options

Dynamically preselect an HTML check box

Dynamically preselect an HTML radio button

Set the Dynamic Radio Group dialog box options

Set the Dynamic Radio Group dialog box options (ColdFusion)

Validate HTML form data

Attach JavaScript behaviors to HTML form objects

Attach custom scripts to HTML form buttons

Create accessible HTML forms

Add an accessible form object

Edit accessibility values for a form object

More like this

Get help faster and easier

Ask the Community

Contact Us