HOW TO CREATE AND VALIDATE A FORM

Forms are used to collect data from users by letting them submit the data from a web site.  This can be used for feedback, registration, e-commerce, search criteria, etc. Forms can also be used to minimize spam.

Creating a Form

You must first create a <form> tag in order to add form elements (discussed later) to a page. 

A red dashed-box will appear on screen if you have the Invisible Elements option turned on to let you know where you must insert all form elements.  The form will expand vertically automatically as you insert content (form elements, text, images, etc.) into it.  It will also expand 100% horizontally of its parent container unless given a specific width:

  Form elements goes INSIDE of form tags

NOTE: While it is not best practice, you can have more than one form on a page. However, only one form can be submit at a time.

Form Example

At Rich Media Creative Services, we're here to listen and help.  Fields marked with an asterisk (*) are required.
NOTE: We will never share your information with anyone except where required by law. (It is best to use a full policy page instead)


Form Properties

A form has many attributes (form name, action, method, enctype, target, and class); However, there are two (action and method) that are the most important to remember when working with forms:

<form id="form1" name="form1" method="post" action="Formmail.php"> </form>

ActionWhere to submit the form – usually a script (See FormMailer tutorial)

MethodHow to submit the form:

Form Elements (or Form Objects)

While is is not recommended, you can insert a table into the form so that you can align the form objects better.  Create a table with the following properties:

NOTE: As you add form elements, Dreamweaver may insert both LABEL and FORM ELEMENT.  If you are using a two column table, insert both elements in the second column and then select the <label> tag with the tag chooser and drag-and-drop it into the first column.

As an alternative, you can use CSS to style the form. (See Styling Forms tutorial)

After creating a form (and table, if necessary), you can use the Insert Bar's Form tab to insert various types of form elements into it to provide different ways of collecting data from a user.

IMPORTANT NOTE: While you can still use the form element in the Form Tab of the Insert Bar, it is better to use the Spry version in the Spry Tab, if they are available because it adds more functionality and validation for these form elements.

Most form elements uses three major tags:

Text Field vs Text Area

Text Field / Text Area – allows users to enter alphanumeric data.  The Text Field (which is the most common form element) is used to enter a SINGLE line of data like a name or address; whereas, the TextArea is used to enter MULTIPLE lines of data like a request for feedback.

The Text Field form element can be converted in the Property Inspector to:

EXAMPLE (Text Field):


NOTE: For the Text Field, you can specify the maximum character count in the Property Inspector.

EXAMPLE (TextArea):
Please provide us your feedback:

NOTE: For the TextArea, you can specify the number of lines and the Initial value in the Property Inspector.

NOTE: Common properties for both the Text field and the Text area in the Property Inspector include (Form name, class, disable, read-only,  and Type [Single, Multi line and password] )
NOTE: When using TextFields with a database, the field name and the Max Chars should match the field names and field length in the database.
NOTE: When submitting a password, the password is transmitted as plain text and can be intercepted.  If security is a concern, use a Secure Sockets Layer (SSL).

Checkbox vs Radio buttons

Checkboxes – allows users the option to choose MULTIPLE options from a group of related options.
EXAMPLE:  What do you like on your sandwich?       

Radio buttons – allows users to choose only a SINGLE option from many options
EXAMPLE: What is your gender?

NOTE: Common properties for both the Checkbox and the Radio Group in the Property Inspector include (Form name, class, and Initial state [Checked or Unchecked] )
NOTE: If multiple checkboxes are used together, they must have the same name but different checked values.
NOTE: Radio buttons in the same group must have the same form name.

NOTE: If you need to ADD additional checkboxes or radio buttons to your EXISTING group, it is best to create another group with the same group name below the current group and delete the  closing </p> tag from the first group and delete the opening <p> tag from the second group.

List vs Menu

List / Menu – allows users to select from a list or a menu (also called combo box or pull-down/pop-up menu). A menu allows only a single selection; whereas, a list CAN offer MULTIPLE selection if the allow multiple selection is selected. However, it is best practice to let the user know by way of instruction that they can select multiple items from a list (i.e., Press the CTRL (Windows) or Command (Mac) key and click to make multiple selections). The menu is best used if you are attempting to save space on a page and only need one selection to be made at a time.

You can "populate" the list/menu either using STATIC data by clicking on the List Values... button in the Property Inspector or you can use a database query with a server-side language like ColdFusion or PHP to DYNAMICALLY populate them.

Each List Value is composed of two values:

  or

NOTE: Common properties for both the List and the Menu in the Property Inspector include (Form name, class, List Values, Type [ Menu/List], and Initially selected option )
NOTE: The List has two additional properties that can be set – Height and Allow multiple selections.

Button

Button – has three options:

EXAMPLE:

NOTE: If yo are using a Strict doctype, the Submit button must be placed inside a fieldset in order for the form to be validated.
NOTE: Properties for button in the Property Inspector include (Form name, Value, Action[Submit/Reset or None] and Class)
NOTE: It is becoming best practice to omit the Reset button because to often users inadvertently click the Reset button instead of the Submit button and clear the form in the process. If you have to use the Reset button make sure it is label clearly and position it away from the Submit button to minimize the chances of a user clicking it by mistake.
NOTE: The label is the value that will be submitted for that button.  As a result, multiple Submit buttons can be created with different values.  This is typically of server-side technologies where one button can be named Insert, another Delete and and another Update with each button performing a different operation (Insert, Delete, and Update, respectively)

Hidden Field

Hidden Field – allows authors (not users) to hide data in a hidden field.  This is typically used with Server-side technology like ColdFusion or PHP to identify certain attribute of a page or a user.   It does not show up on the form in the browser.  It is indicated by an hidden field icon (see below) if the Invisible Element option is turned on.  Hidden fields are typically used with form processing scripts to submit email parameters to the script. (See FormMailer Tutorial)

EXAMPLE:

NOTE: Properties for Hidden Field in the Property Inspector include (Form name and Value)

Jump Menu

Jump Menu – allows users to select from a drop-down menu that can take them to another page inside or outside of the current web site. It is a unique form element because it creates a form, a menu and a button with support JavaScript code.

EXAMPLE:
Which web site do you want to go to?

NOTE: Since the Jump Menu is a combination of a menu and a button form object, the properties for it in the Property Inspector is the same for the menu and button as explained earlier. However, the following JavaScript code is placed in the <script> tag to make it more interactive:

<script type="text/javascript">
<!--
function MM_jumpMenuGo(objId,targ,restore){ //v9.0
var selObj = null; with (document) {
if (getElementById) selObj = getElementById(objId);
if (selObj) eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0; }
}
//-->
</script>

File Field

File Field – is used many to provide an avenue to upload files, images, etc. to a server.  Dreamweaver will automatically set the form Enctype to multipart/form-data which is the correct type for uploading files.  Notice the File Field form object will automatically include a Browse... button next to a text field.  When you click on either one, you will highlight both of them.  Ensure your web server is set up to receive uploaded files as many Web servers have this option turned off for security reasons.  When the user click on the Browse... button, it will open up the default Mac or PC File Open dialog box to allow a user to select a  file from the OS file system.

What image do you want to upload?

NOTE: There are several DW Extension that can assist you in connecting the File Field to a script (VERIFY LINKS)

Label and Fieldset Tags

The label tag is automatically insert next to the form element when you fill in the Label field in most dialog boxes which assist user with assistive technologies like screen readers.  If you did not initially add a label to a form field.  Once you select a form element, you can "wrap" a <label> tag about the form element.

The Fieldset tag is used group related form objects under one heading (legend) like "Mailing Address" and "Billing Address" which may be different.  This is also use for screen reader to distinguish the different parts of a form.  The fieldset will appear as a border with a legend (in this case, Login Info) in the top-level corner around the selected form elements. It can also be styled with CSS. They can also be nested.  On some browsers, the access keys could be used to tab to specific fields.

Login Info

Image Field

The Image Field form object is one of the least used form object. Instead of using the default Submit button, you can insert a Image Field with a graphic instead.  The Image Field; however, can not function as a Reset button.

Form dialog boxes

Most of the information on how to fill out form elements are basically the same and most of the options to select or fill out are self-explanatory.

A typical screen (Input Tag Accessibility Attributes) for the text field, text area, radio buttons and checkbox would look like:

Style options:

Access key is used to jump directly to that field by pressing the Control key and then pressing the access key.
Tab key is used to set the tab specific order from one form object to the next.

A typical screen for the checkbox group or radio group would look like:

A typical screen for the jump menu would look like:

Form validation

It is best practice to validate or check most TEXT FIELDS (as well as some of the other fields) to ensure they have the correct format or required data you need to process the form or to submit the data to a database in the proper format.  Whether intentional or by accident, users sometime enter the wrong information or skip a field altogether.  To prevent this from happening, you can prompt the user before or after the form is submitted.

While you can still use the Behaviors panel (Window > Behaviors) and select Validate Form from the Add Behavior (plus (+) icon) drop-down list, it is better to use the new Spry form elements and the Property Inspector to validate form elements.  However, you will need to click on the small blue tag on top of the form element to see the correct view of the Property Inspector for form validation.

After you create a form and enter form elements into it, click on a form element's blue tab and view the Property Inspector Panel.  Make the necessary validations that you need based on the form element. 

While Phone Number, Email Address, Date, and Social Security Number are the most common types of validation, below are some additional validation types:

Validation can be done based on some type of user event:

You can change the default text for the Require and Invalid preview states to whatever you want in the Design view after you make a select from the drop-down list.

For example, you can change the default Invalid text "A value is required" to something more descriptive of that field. (i.e., Your full name is required)

NOTE: Dreamweaver will copy a set CSS and JS files to your site folder.  Ensure you upload these files to your server.
NOTE: The Spry Validation Text Field creates a <span> tag around the input field to provide JavaScript functionality which is used to validate the field.
NOTE
: If you are using a elastic layout which uses ems, the form will become more flexible and accessible.  For example, the for fields will expand and contract when the font size changes, yet the same number of character can be placed in those fields.

BONUS 2: Setting Focus on First Form Field (F4)

By default, the insertion point is not automatically set to the first form field. It is, however, best practice to set the focus on the first form field so that the user do not have to first click or tab to the first field before typing.   In order to do this, you will need to write a single line of JavaScript code INSIDE the <body> tag:

<body onLoad = "window.document.formname.fieldname.focus()">

Replace formname and fieldname with the actual names of your form name and first form field, respectively.

NOTE: The onLoad event is set as an attribute of the <body> tag to tell the browser to execute this command immediately after the page loads. window.formname is a "path" the the form name and focus() is a built-in JavaScript command (function) to set the focus on the specified form field (in this case, fieldname)
NOTE: If the body tag has other attributes, adding this one will not affect them:  <body class = "twoColFixWidth" onLoad = "window.document.formname.fieldname.focus()">


BONUS 3: Auto Clearing Text Field

If your provide an initial value for a form field, it is best practice to have the field cleared when the user click on it or tab to it.  To do this, you could add the following code that appears in bold to your text field:

<input type="text" name="comment" value="Your message" onfocus="if(this.value=='Your message')this.value='';" />

NOTE: Replace "Your message" with whatever you want as your initial value. 
NOTE: The "onfocus" will response to EITHER a click from the user or if the user tabs to that field.
NOTE: This code only works with textfields not textareas.