Support for HTML form elements has been enhanced in Dreamweaver Creative Cloud updates. For information, see Enhanced HTML5 support for form elements.
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.
You can also send form data directly to an e‑mail recipient.
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:
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.
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.
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.
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.
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.
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.
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.
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.
Navigational lists or pop‑up menus that let you insert a menu in which each option links to a document or file.
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.
(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.
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.
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.
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.
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.
All radio buttons in a group must have the same name.
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.
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.
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.
(Available when the Multiline option is selected) Sets the height of the field for multiple-line text fields.
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.
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.
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.
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.
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.
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.
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.
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.
Sets the items selected in the list by default. Click the item or items in the list.
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.
Contact your server’s administrator to confirm that anonymous file uploads are allowed before using the file field.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
This value is also returned to the server if the user clicks the form’s Submit 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.
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.
When you insert an HTML form object, you can make the form object accessible, and change the accessibility attributes later.
The first time you add accessible form objects, activate the Accessibility dialog box for form objects (see Optimizing the workspace for visual development).
The screen reader reads the name you enter as the Label attribute for the object.
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
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.