Dreamweaver Assignment 13 – Forms

Photo credit: Katherine Kenny, uploaded via Flickr, Creative Commons License

13.1 Creating a Form:

Forms, whether they be paper or electronic, are principally for gathering specific formatted data.  With Dreamweaver, we can inset forms on a webpage by using the tools supplied on the Forms tab of the insert bar.

To get started, we simply click the Form icon.  Dreamweaver creates an area on our screen where we will craft our form layout, and inserts a <form> tag in the HTML code.

Glancing down to our Properties panel, we see some data fields pertaining to our newly created form.

The Form Properties Panel

 

Of course, there is a Form ID field, allowing us to name this particular form.

The Action field allows us to specify an executable script to call when the user submits her form.  This is usually some code that submits the input to a database, and possible does some data validation and/or runs some queries.  We need not specify the action at this point.

The Method dropdown box specifies a protocol for data transmission.  Our tutor advises us that the POST method (selected by default) is the most secure, and therefore preferred, method.

13.2 Text Fields:

The first element we add to our form is a text field.  Clicking the Text Field icon from the insert bar brings us to the Input Tag Attributes dialogue.  

Input Tag Attributes dialogue

  

We are immediately prompted to give our field a unique identifier, such as first_name, or some such.  This ID will be used by the database that we post our data to, but not visible on our form.

What will be visible to the user id the label we associate with that field, so we must label it First Name, or something that will tell the user what data to enter.

The Style attribute has to do with data handling by the script and the database, so we will leave the default value for now.

The Position option refers to the placement of the label with respect to the input field.

The Access Key is not discussed.

The Tab Index specifies the field’s place in the order in which the cursor focus moves from field to field when the user hits the TAB key.  We need not worry too much about it while adding fields, but we must verify that this order is correct before we send our form out into the wild.  I tells ya, there ain’t nuttin’ worse than a form with a botched tab index….don’t get me started.

Once we have finished with our attributes dialogue, our text field appears on our screen as the current selection.  Once again, a glance down at the Properties panel shows us a few parameters regarding our field, such as field size, single/multi-line, and the like.

13.3 Additional Form Fields:

Here we see our tutor add some other standard form-data input devices; namely a list box (which Adobe apparently calls a Select List/Menu), and a Radio Button group.

13.4 Checkboxes and Submit Button:

Oh my…now our instructor demonstrates adding a checkbox group to our form, but unfortunately adds a pair of checkboxes labeled Yes and No to allow the user submit a response to a yes or no question.  The problem with this is that unlike a radio button group, the checkbox group may have any number of boxes checked, or none.  So, a user may submit this form without answering our question, or worse (?), by answering both Yes and No.

Hmmm…I wonder if she’ll catch her mistake before the video ends.

Nope.

13.5 Validating Form Data:

Here we get a look at some rudimentary validation tools for our form data.  Of course, the process of data validation and error handling can be quite complex (as any programmer will attest), but we can build-in some preliminary checking right here in Dreamweaver as we design our form.

To do so, we browse on over to our Tag Inspector panel.  From there, we ensure that we are on the Behaviors panel, then click the Add Behavior icon, and select Validate Form from the list of behaviors.  The Validate Form dialogue box appears, listing the fields on our form that are available for validation testing. 

Our options are not all that extensive, but we can indicate that fields be required entries, and also require that character strings be numeric (for which we can specify a valid value range), or that strings pass as plausible e-mail addresses.

13.6 Using Spry for Form Validation:

When adding elements to our form, such as text fields, list or combo boxes, radio buttons, etc, we should note that these tools are available in both plain-vanilla and Spry flavors.

Spry is Adobe’s brand of enhanced form objects.  These come pre-loaded with boatloads of JavaScript and CSS code baked-right-in.  The scope of what all of this does is apparently beyond the pretext of this introduction.  However, for our purposes it is useful to note that Spry tools have some data validation and error handling procedures behind them.  We can take advantage of these advanced features by opting to use these spry tools if we please.