11. Using Forms and Fields
A lot of websites exist just to provide information and entertainment to site visitors. But if you want your site to get information back from your visitors, you’ll need some way to let them interact with you and your site. To do that, you’ll need to add a form.
A form contains fields, and those fields can be anything from a simple check box to a group of radio buttons or a single or multi-line text entry area. And of course, you’ll want some sort of “OK” or “Submit” button so that your visitors know how to send you their completed form.
Creating Forms with the Insert Panel
Look at the Form category of the Insert panel 
, and you’ll see that it contains everything you need to add any kind of form and field to your site. Dreamweaver CC adds support for many new form input types, including some that are part of the HTML5 standard. These elements make it easier to create forms with an improved user experience, and they are supported by all modern browsers. Best of all, if your users aren’t using a modern browser, forms using these elements “degrade gracefully” (in the language of web developers), which is a kinder way of saying that the forms won’t break. Users simply won’t get the new functionality that HTML5 provides.
The Form category of the Insert panel contains all the items you might want to add to your form.
Examples of the new HTML5 form input types include email, tel, url, search, color, number, range, and several date and time picker elements.
Besides the new form input types, there are also new HTML5 form attributes, of which there are too many to list here. But as an example, you can now use the placeholder attribute to display text in an empty input field. That text will disappear as soon as the user clicks (or tabs to) the field and begins typing.
Tip
In the case of Microsoft’s Internet Explorer, the definition of “modern browser” for HTML5 form elements is “version 10 or later.” Most other major browsers added support several years prior to IE10’s August 2012 release.
Tip
If you’re not familiar with the added HTML5 form elements, we suggest the excellently readable primer by Mark Pilgrim from his book HTML5: Up & Running (Google Press, 2010). The entire book is online under a Creative Commons license, and we refer you specifically to the forms chapter at http://diveintohtml5.info/forms.html.
Tip
For a good chart showing which browsers support which HTML5 form elements and attributes, check out www.wufoo.com/html5/.
Adding a Form to a Page
You could start creating a page by throwing fields onto it, but when your visitor clicks Submit, the browser won’t know what to do with the data. That’s where you need a form—it tells the browser that all this information is part of one package, and it tells the browser what it should do with all of the information that it has gathered.
A form is made of a number of different elements, but not all of them need to appear on every form. shows the form we’ll be creating in this chapter. This form, which for layout purposes is created within the main page content div, contains a nested div that includes the First Name and Last Name text fields and the comments text area.
The completed form, with its components, as it appears in a browser.
To add a form to a page
1. Choose where on your webpage you want your form, and click the Form button on the Insert panel. A red dashed box appears on your page 
.
A form looks bare until you add the form fields.
The red box is the form area, and behind the scenes in the code, Dreamweaver has added a <form>...</form> container tag.
2. If that box isn’t automatically selected, select it, and you’ll see the options you can change for your new form in the Property inspector 
. The ones that apply solely to forms are:
Form ID: If you’re going to be doing any JavaScript validation of your form, it’s a requirement to give it a name. In addition, some CGI protocols need their associated forms to have a particular name. (CGI stands for Common Gateway Interface—a server program that interprets the data sent by your form.)
Action: This is the program on the web server that is executed when the form is submitted. You’ll need to get the name of this from your system administrator or hosting provider. It’s also commonly referred to as a system CGI.
Method: The most common options are GET and POST. POST passes the form data as part of the header of the request to the server. GET passes the data as part of the URL of the request to the server. Because of this, and because GET has a length limitation, POST is what you’ll usually want. Dreamweaver also has a Default choice in the Method pop-up menu, which allows the form to be submitted using the browser’s default setting. This is usually a GET method, and we don’t recommend it.
Enctype: This field describes the enclosure type being sent to the server. The default is application/x-www-form-urlencoded. The only time you’ll want to use multipart/form-data is if you’re asking your visitors to upload a file.
The Property inspector is where you set a form’s name, action, and method.
Tip
Make sure that all your form fields are inside your form; if they are not, their contents won’t be sent to the server.
Tip
If you try to add a form field to a page that doesn’t have a form, you’ll be asked if you want to add a form tag. You might think from this that it’s not worth bothering to add a form tag manually first, but it is. You’ll have better control over where the form is placed, and what ends up going inside it.
Tip
No, that red border around the form won’t actually display on your site. It’s just there in Dreamweaver’s Design view so that you’ll know where the form begins and ends. If you turn on Live view, the red outline disappears.
Adding Text Fields
The simplest type of form field you can have is a single-line text field. Your average form will have several of them, allowing people to enter anything from their name to their shoe size. Dreamweaver CC lets you add additional kinds of specialized HTML5 form input fields for which text fields were previously used, including the following:
Email is designed for email addresses. On some browsers, such as the browser in Mobile Safari on iOS, using an email field instead of a text field makes the onscreen keyboard automatically change to an email entry–friendly layout.
Password is used to ask the user for password input. It replaces typed characters with dots for privacy. This field input type was available in previous versions of Dreamweaver, but only as an attribute in the Property inspector. It gets a promotion to the Insert panel in this version.
Url asks for an Internet address. Again, on some browsers, using this field makes the onscreen keyboard automatically change to a URL entry–friendly layout.
Tel is used to enter a telephone number.
To add text fields
1. Choose where in your form you want your text field to appear (by clicking in the document), and click the Text button on the Form category of the Insert panel. The Input Tag Accessibility Attributes dialog may appear, depending on the settings in Dreamweaver’s Preferences. If it does, see how to handle it in the “Labeling Your Fields” sidebar, later in this chapter, and then return to this point. The new text field appears on your page .
The first text entry field added to the form.
2. If the text field hasn’t been automatically selected, select it, and you’ll see the options you can change for your new field in the Property inspector . From there, you can change the fields:
Name: This field contains the name of the field, which can be used by JavaScript behaviors and by scripts on the server.
Class: This is the CSS class, if any, applied to the field.
Size: The width of the text input area on your page. The larger this number, the wider the space it needs. And because it’s the number of characters allowed, the larger the font you’ve set (usually with CSS), the wider the space will be.
Max Length: The maximum number of characters that a user can enter into this field. For instance, you could limit a credit card to 16 characters.
Value: This is the initial value of the field. This text is displayed when the page is loaded.
Title: This attribute is intended to be used to add extra labeling to fields, appearing as a tool tip. It hasn’t been well supported by browser makers, and it is especially poorly supported by mobile and disability devices. We recommend you do not use it.
Place Holder: This text appears in a field until the user clicks or tabs into the field. It’s used to suggest the content the user should enter.
Disabled: Select this check box to disable the form element when the page loads; the user won’t be able to click it. You could then add a JavaScript that would enable the element when some other condition is met. As an example, in a contact form that has two fields for the street address, you could disable the second field until there was an entry in the first field.
Auto Focus: If you select this check box, the browser will move the input focus to this field when the page loads. Only one field can have focus, so make sure you don’t check this attribute on more than one field.
Required: Select this check box to mark the field as required. The form can’t be submitted unless the field has an entry.
Read Only: Select this check box to make the field read-only. A read-only input field can’t be modified (but the user can still tab to it, highlight it, and copy its text).
Auto Complete: This check box allows you to enable or disable a browser’s autocomplete feature (which can automatically fill in a form). By default, Dreamweaver has this attribute unselected, and therefore auto-completion is enabled (its default value).
Form: This is the form ID that specifies the form the input field is part of.
Pattern: This field accepts a regular expression specifying a custom validation target against which the field is checked.
Tab Index: This allows you to specify a custom tab order for the form.
List: This works with a <datalist> element to show a drop-down list with possible choices for the field. Choose the name of the datalist from the pop-up menu.
Set a text field’s properties using the Property inspector.
To add specialized text fields
1. Choose where in your form you want your field to appear (by clicking in the document), and click the appropriate button (Email, Password, Url, or Tel) on the Form category of the Insert panel.
The selected kind of input field appears on the page. Clicking in the field changes the Property inspector to show the field’s special attributes .
The Property inspector changes for specialized field input types, such as this email address.
2. Change the attributes in the Property inspector as needed. For example, in a contact form, you might want to make the field required by selecting the Required check box.
Tip
A hidden field is similar to a text field. It’s used when there’s information that a script needs from a form, but which a user doesn’t enter—so the field contains a value but isn’t seen in the document. Adding a hidden field is virtually identical to adding a text field: just click the Hidden Field button in the Insert panel (obviously, where it’s put on the webpage doesn’t matter, though it needs to be inside the Form box), and then set the value and unique field name in the Property inspector.
When you click a button in the Insert panel to add a form field to your page, the Input Tag Accessibility Attributes dialog may appear . This dialog allows you to set certain attributes that can enhance accessibility for people with disabilities. These fields are:
To enable your site to be accessible for people with disabilities, set the label attributes here. The default position for a text field label is before the form item.
ID: This is the same as the Name in the Property inspector. It’s used by scripts (both client-side and server-side) to manipulate the contents of fields and process the form.
Label: 
shows a label of “First Name:” being entered. in “Adding Text Fields” shows the result: that text is displayed just to the left of the new text field.
Style: There are three style options: Attach label tag using ‘for’ attribute, Wrap with label tag, and No label tag. If you choose Wrap with label tag, Dreamweaver surrounds your new <input> tag with a <label> tag:
<label>First Name: <input type="text" name="textfield" /></label>
If you choose Attach label tag using ‘for’ attribute, Dreamweaver writes the <label> tag based on what you enter for Position (covered on the next page):
<label for="textfield">First Name: </label><input type="text"
name="textfield" id="textfield" />
Unfortunately, Dreamweaver doesn’t offer full WYSIWYG support for this option—you can change the name and id attributes of your new text field (by changing the Name field), but the label’s for attribute, which should change to match, doesn’t. There isn’t any way to change it short of going into the markup and changing it by hand.
If you choose No label tag, the text you enter appears, but it’ll be just that: text.
The <label> tag helps make your site more accessible in two ways: it tells voice browsers that this is the text associated with this field, and it allows users with certain browsers (such as Firefox) to click the text label as an alternative to only clicking inside a check box. This gives your visitor a larger space in which to click. Accessibility is important, and using the <label> tag helps make your site more accessible—but if you want to use it with Dreamweaver’s Design view, stick with the Wrap with label tag option.
Position: The label for a form field can be either before or after the field. For text fields, you’ll usually see the label before the field. For check boxes and radio buttons, you’ll usually see the label afterwards. The default value of the position changes depending on the type of field .
For a check box, the label’s default position is usually after the form item.
Access key: Some browsers allow users to enter keyboard shortcuts to select form fields. If you want this option, enter the keyboard shortcut for the field here. For instance, if I entered g in 
, a user with Internet Explorer for Windows could click that check box by pressing Alt-G.
Tab Index: If you want users to be able to tab from form field to form field in a particular order, you’ll want to assign each field a tab index. This is the numbered order in which the user can tab through your form’s fields. It’s especially useful to set this when your form fields are inside table cells, as the default can be quite different from what you actually want to occur. The numbers need to be between 0 and 32767, and they don’t have to be in sequence: you can make your fields be (for instance) 100, 200, and so on, leaving room for future changes to your form.
Adding a Text Area
It’s possible that you want your visitors to enter more than just a single line of text—maybe they have a lot to say, or you just want them to have a free-form area in which to enter their comments. If that’s the case, you’ll want to use a text area.
To add a text area
1. Choose where in your form you want your text area to appear, and click the Text Area button on the Insert panel. The new text area appears on your page .
A text area lets your visitors enter multiple lines of text, and it will scroll when necessary.
2. If the text area isn’t automatically selected, select it, and you’ll see the options you can change for your new field in the Property inspector . From there, you can change the same values that you could for text fields, with some small differences:
Rows and Cols: This is the height and width that you want the field to take up on the page. If you only want a single line, use a text field instead.
Disabled and Read Only: These check boxes do similar but not identical things. Disabled displays the text area, but doesn’t let users select or change it. You might use this with a script that enables the text area if the user performs a particular action. Read Only makes the text area unchangeable by users, but they can still select and copy the field’s contents.
Use the Property inspector to set the dimensions and initial value of the text area.
Adding Check Boxes
Check boxes are one of the most commonly used form fields, and you’re likely to want several on your forms. They’re particularly useful when you want specific responses from your site visitors and you don’t want them to have to enter data into text fields (and possibly misspell their entry).
To add a check box
1. Choose where in your form you want your check box to appear, and click the Checkbox button on the Insert panel. A new check box appears on your page .
Check boxes are an easy way to get exact information from your site’s visitors.
2. If the check box isn’t automatically selected, select it, and you’ll see the options you can change for your new field in the Property inspector :
Name: This is the name of the field, and it’s used by JavaScript validation as well as server-side scripts.
Value: This is the value that’s passed to the server (and JavaScript client-side code) when the user has selected the check box.
Checked: This refers to the appearance of the check box when the page is first loaded—is the box checked or unchecked? Select the box to make the initial state checked.
Set the name and value of the check box in the Property inspector, along with the checked status of the box when the page is loaded.
Tip
Just a reminder: the difference between check boxes and radio buttons is that for a group of radio buttons, only a single option can be picked. When you have a group of check boxes, however, the state of each check box is not dependent on the other check boxes, so you can select multiple check boxes.
Adding a Fieldset
A fieldset is HTML’s way of grouping fields on your form to add additional meaning for the user. How a fieldset displays on a webpage depends on the browser being used, and you can’t control that: Dreamweaver’s Design view shows a thin gray line around a fieldset’s contents. Compare in “Adding Check Boxes” with : it’s easier to see that those check boxes are grouped together and that all have a similar function.
Adding a fieldset to your form helps group related form fields, making your form easier for your visitors to understand. Dreamweaver puts a thin gray line around the fieldset in the document (top). Selecting the <fieldset> tag in the tag selector shows you the items in the fieldset (middle), and selecting the <legend> tag in the tag selector highlights the fieldset’s legend (bottom).
To add a fieldset
1. Choose where in your form you want your fieldset to appear, and click the Fieldset button on the Insert panel.
2. The Fieldset dialog appears , asking you to enter a legend—that’s the text that appears at the beginning of the fieldset . Enter that text, click OK, and the fieldset box appears in the document.
Enter the legend text in the Fieldset dialog.
3. If you’re adding a fieldset to an existing form, drag the related fields into the fieldset. If it’s a new form, click inside the fieldset and create its fields.
Tip
If the fieldset contains no form fields, the legend appears inside the box. When form fields are added, the legend is displayed as part of the box.
Tip
If you’re dragging fields inside the fieldset, be careful when selecting—make sure (for example) that all of a label is selected.
Tip
You can’t change a fieldset or a legend using the Property inspector. You can change the legend by modifying the text in the document window, and you can change the fieldset by going into Code view.
Tip
A fieldset can contain any form fields, not just check boxes.
Adding a Radio Button Group
Radio buttons don’t exist by themselves—they always come in a group. And of that group, only one option can be chosen: your visitors can pick rock or paper or scissors.
To add a radio button group
1. Choose where in your form you want your radio button group to appear, and click the Radio Group button on the Insert panel.
2. The Radio Group dialog appears , asking you to enter several fields:
The Radio Group dialog lets you enter all of your radio buttons in a single dialog.
Name: A radio group needs a name that associates all of the radio buttons together. In this example, your visitor is choosing whether or not to subscribe to a newsletter, so the name is “newsletter.” This name will not appear in the finished form.
Label: Each radio button needs a label to distinguish it from its neighbors. In this example, the labels are “Yes” and “No.”
Value: Each radio button needs a value, which will be passed back to the server, to JavaScript, or to both. The example values here are, again, “yes” and “no.”
Lay out using: Radio buttons are normally aligned vertically, so here you make your choice of how you want that layout to be done in the HTML markup. Your choices are “Line breaks” and “Table.” Line breaks will almost always be sufficient.
The Radio Group dialog starts with two fields, which you can overwrite to say whatever you want. If you want to add more radio buttons, click the + on the left side. If you want to delete buttons, select the one you want to remove in the list and click the –.
To rearrange the order of buttons, select the name of the button to move, and then click the up/down arrows to move that button.
3. Click OK to accept your entries, and your new radio button group is added to your document .
Here’s your radio group. Only one item can be selected.
Tip
If you want your buttons to all be on the same line (as in this example), select “Lay out using: Line breaks” and then remove the line breaks. Sadly, Dreamweaver doesn’t include the option “just leave them on the same line, OK?”
Tip
There’s also an option on the Insert panel to add a single radio button (Radio Button): It’s unlikely, though, that you’ll ever want to have only a single radio button on a page. If you add a single radio button to an existing radio group, be sure to copy the name of the group exactly into the Name field of the Property inspector . The Name fields of all the buttons must match exactly (including things like case and trailing spaces). In fact, your best bet is to click one of the existing radio buttons, copy the name from the Property inspector, click the new radio button (if it already exists; add it if it doesn’t), and then paste the name in from the clipboard.
When setting the properties for an individual radio button, set the name of the group carefully—it has to match other radio buttons to work correctly.
Tip
If you want one of your radio buttons to be set as selected, click that button in your document and then select the Checked check box in the Property inspector.
Tip
Dreamweaver will happily let you set multiple radio buttons with their initial state checked even though browsers won’t display it that way. Each kind of browser may display this error in a different fashion, so don’t make the mistake in the first place. Be careful that you’re only setting one (or no) radio button to be checked.
Adding a Select Menu or List
Another common form element is what’s referred to in the Form category of the Insert panel as a Select. It’s actually the two forms of the HTML <select> tag: either a pop-up menu or a scrolling list of options. If it’s the latter, you can decide whether the user can click a single option or multiple options.
To add a pop-up menu
1. Choose where in your form you want your pop-up menu to appear, and click the Select button on the Insert panel. The Input Tag Accessibility Attributes dialog may appear. If so, fill it out as described earlier in this chapter.
The empty list appears in your layout, with a downward-pointing triangle indicating the future pop-up menu.
2. Make sure the empty list is selected in the layout; then, in the Property inspector, click the List Values button. The List Values dialog appears . Enter your desired options. The Item Label is what appears in the pop-up, and the Value is what’s sent to the server/JavaScript.
You’ll enter all the values for pop-up menus and scrolling option lists in the List Values dialog.
3. Click OK, and your new pop-up appears on your page .
The new pop-up menu is now on your form (shown here in Live view to display the menu in action).
4. If the pop-up menu isn’t automatically selected, select it, and you’ll see the relevant options for your new field in the Property inspector :
Name: This text field at the left side of the Property inspector contains the field name that will be passed back to the server-side CGI/JavaScript when it processes the form.
Selected: You can choose one of the menu options to be the default that’s shown when the page loads.
List Values: Clicking this button causes the List Values dialog 
to reappear, so you can easily change the list contents.
You can change the existing pop-up menu into a scrolling option list by setting the size in the Property inspector.
You can return to the List Values dialog to view or change the items by clicking the List Values button in the Property inspector.
To add a scrolling option list
1. Follow steps 1–3 in the previous exercise to create a pop-up menu, and select the pop-up menu.
2. In the Property inspector 
, select the Multiple check box. You’ll notice that even though you’ve changed this, your field still displays as a pop-up menu.
To change from a pop-up menu to a scrolling list, change the Multiple and Size options in the Property inspector.
3. Change the Size field to show the number of items (in lines) you want displayed at any one time in the scrolling list. Changing this causes the field to display as a scrolling list 
.
Here’s what a scrolling list looks like.
4. If desired, change the Selections option to allow multiple choices. When you do this, visitors to your site will be able to pick several options in the scrolling list at one time.
Tip
If you leave the Size field set to 1 and select Multiple, you’ll also see your pop-up menu change to a scrolling list. But a scrolling list with a height of one line isn’t much of a scrolling list—it’s too difficult for your users to see what’s available.
Adding a Submit or Reset Button
A form on your site doesn’t do you much good unless you can get the information that’s entered into it, and that’s the primary use of buttons. A Submit button triggers the action specified in the form tag (described earlier in this chapter). Another type of button is the Reset button, which allows a user to go back to a form’s original state. In Dreamweaver CC, you add each button with its own option in the Insert panel.
To add a Submit button
1. Choose where in your form you want your button to appear, and click the Submit Button icon on the Insert panel. The button appears in your document .
Add a Submit button to your web form so you can receive your visitor’s completed form.
2. If the button isn’t automatically selected, select it, and you’ll see the options you can change for your new button in the Property inspector :
Name: This is the name of the button; generally, you’ll use “submit” to specify that it’s a Submit button. Note that the value in this field is what will be used by the code processing the form (the user doesn’t see it), so lowercase is generally preferable; by standardizing on all lowercase for code names, you lessen the possibility for errors if you modify the code by hand. You should use the properly capitalized name for the Value field.
Value: This is the message that is displayed on the Submit button itself. It’s common for it to say “Submit,” but it can also say, “Place order,” “OK,” or whatever you think your users will understand.
Form Action: This is the name of the system CGI that is triggered by the Submit button. You’ll need to get this from your system administrator.
The Submit Button pane in the Property inspector allows you to specify what will happen when the form is submitted.
To add a Reset button
1. Choose where in your form you want your button to appear, and click the Reset Button icon on the Insert panel. The button appears in your document.
2. If the button isn’t automatically selected, select it, and you’ll see the options you can change for your new button in the Property inspector .
Inserting a Reset button changes the Property inspector.
Tip
There is actually one other type of button: an image button. It is created by clicking the Image Button button on the Insert panel. You’ll be prompted to browse for an image file in your site, and the image will then appear in your document. When a visitor comes to your site and completes the form, clicking that image triggers an immediate submission of the form.
In a nutshell, Windows users expect to find the OK/Submit button as the first button in a group, whereas Mac users are accustomed to always seeing it as the rightmost button. As shown in and , interface designers who work on cross-platform applications are able to change the order depending on the user’s platform. While this is the same General Preferences dialog on both platforms, notice that where Mac and Windows users click to accept their changes is very different.
Dreamweaver’s General Preferences panel on Windows shows the buttons as OK and Cancel at the bottom right and Help at the bottom left.
The General Preferences panel on the Mac also has Help at the bottom left, but uses the order Cancel and OK at the bottom right.