Lesson 8 - Forms
- Home
- Forms
We have completed the first half of the our Introduction to Dreamweaver course. You've created a practice homework site incorporating the tools and techniques learned in the prior lessons. The remaining lessons will introduce you to forms, AP Elements (layers), and behaviors, and provide resources for dreamweaver extensions.
Creating Simple Forms using Dreamweaver
HTML forms can be used for search engines, questionnaires, hotel reservations, registration and order forms, surveys, data entry, shopping carts and e-commerce, user feedback, and a wide variety of other applications. The form is specified as part of an HTML document. The user fills in the form and then submits it. The user agent then sends the form's contents to a recipient, as designated by the FORM element. Typically, this is to an HTTP server, but you can also email form contents. The form is one of the first interactive elements in web design. When the user submits the form, the information is sent to a server where a script acts on the data - sorting and organizing the contents before forwarding the results. The html author can create a confirmation notice to the user after the user submits the form.
You will create the form using Dreamweaver but all forms require a form handler to process the form data. You can not do this part with Dreamweaver since this part requires scripting on the server. A Common Gateway Interface (CGI) script runs on the server and is one way to process the information from the form (known as form data). CGI scripts can be used for tracking counters, message boards, email discussion groups, jump menus, etc. Many CGI scripts were written in Perl but there are other languages and scripts for processing forms such as AppleScript, C or C++, UNIX, Visual Basic.
Some CGI scripts have required fields which may be case sensitive. Check with your ISP or sysadmin to see if the mailform they use has any required fields.
Internet Service Providers (ISP) and universities often provide CGI scripts that can be used for free but these institutions restrict direct access to a CGI script. Contact your ISP to get specifics from them on their CGI and form processing features. Often they will have a generic Thank You or confirmation page where they redirect the user after they submit the form. You can create your own redirect confirmation page as well.
You can do a search for scripts and find many free scripts on the internet that you can plug into your HTML source. One of my favorites is: Matt's Script Archive.
Instead of using CGI you can use PHP, Hypertext Preprocessor, which is a scripting language that is run mainly on Linux Web servers. It is often used to access a database for information which is then formatted to be displayed in html. It is free and offered through an open source license. Go to the PHP web site to learn more about it.
Forms are created by placing input fields within paragraphs, preformatted text, lists and tables. The element in which a user enters data is called the input field. Information entered by the user is called the value. Before you can use any of the form fields, you must create the form itself.
Behind the Scenes of Forms
This is not an HTML course but this Lesson will be more valuable if you create your form using the split view 'Show Code and Design View' button. This way you can see behind the scenes (the HTML source) as you create the elements in bottom pane of the Document Window.
1. On the Document Window toolbar select the Split Button to split your screen into Code and Design Views.
2. Open the Forms Category of the Insert Panel or go to the Insert Menu - Insert>Form>Form to create a form. Below, the Forms icons are shown in the Classic view which is selected from the Dreamweaver toolbar.
Select the Form button to insert a form into your file. The Tag Editor comes up where you fill in the Form attributes. For now we will select the post Method.
Selecting this button will create the Form container tags represented by a red box in your Document Window. The contents of the form will go between the open form tag <form> and the end form tag </form>, i.e. within the red box.
If you don't see the red box in your document window, go to the View Menu - Visual Aids>Invisible Elements and make sure that there is a checkmark to the left of Invisible Elements. You can use the tag selector in the bottom status bar of the Document Window to select the form.
When you select the form by clicking on the red dotted-lined rectangle, the property inspector displays the properties for the form. Here are the Properties for the Form tag in the PI.
Select the form and open the PI. For this lesson, leave the Target dropdown menu blank, the Class dropdown menu blank, set the Method to POST, and leave the Enctype dropdown field blank unless you're using an email address for the form action, in which case type the words "text/plain" without the quotes into the the Enctype field.
You can not drag the red dotted-lined rectangle to change the size of the form. The size of this form container is dependent upon the elements you put inside the form. Here are the properties available in the PI for the form.
The Form Icon is represented in the upper left corner by a square with a dashed line.
The Form Name is form1 by default but I recommend changing the name to something descriptive. Do not use spaces, special characters or reserved words. Let's use feedback for our Form name. Replace "form1" with "feedback"without the quotes. Note that DW will name the forms by default form1, form2, form3, etc.
The Action attribute is the destination of the form. Most likely, the destination will be the URL of the CGI or PHP mailform and will usually end with cgi-bin or cgi_bin or php. Get the address of the cgi/php from your ISP. You can also have the results of the form data emailed to you, in which case you'd put your email address in the action field preceded by mailto: so the complete address would read mailto:someone@somewhere.com. Using the mailto presents some problems so it's best to get the cgi-bin from your system administrator or ISP or use the information at the end of this lecture to connect to the formmail site.
The Method attribute is determined by the way or method the form will be processed, either CGI or Web-based application. Check with your ISP to see which method to use. GET is not a secure way to send the info so should not be used for sensitive info or e-commerce. Most of the time you'll use POST.
The Form fields based on the above information using a CGI script would be displayed in your HTML source code as:
<form action="http://www.somewhere.com/cgi-bin" method="post" name="feedback">
form goes here
</form>
or using PHP would be displayed in your HTML source code as:
<form action="http://www.somewhere.com/phpFileName.php" method="post" name="feedback">
form goes here
</form>
or for those who are temporarily using an email as the form action, add text/plain for the enctype:
<form action="mailto:someone@somewhere.com" method="post" enctype="text/plain" name="feedback">
form goes here
</form>
Once you Insert the Form you can add Form Elements into the red box. You must insert all your form elements inside the red box. Many designers use Tables to create the layout for their form elements and then add labels or descriptive text associated with each label.
Note that it is better to use Div tags for layout rather than tables which you will do in the Positioning A value is required. lesson.
Insert a table of 100% inside your form and make 8 rows and 2 columns. You can adjust the rows and columns later by entering new numbers in the Property Inspector for the rows and columns. I recommend sketching a draft of your form on paper so you make sure you have all the proper form fields and labels to ensure that you'll collect the data you desire by making the form labels and input fields clearly laid out, defined, and intuitive for your user. Match the table inside your form to your sketch. HTML 4 has a new tag called Fieldsets which help in creating the structure of your form by grouping content or chunking related content into groups. You will read more about Fieldsets in this lesson.
Here is the FORMS Category of the Insert Bar. Notice that the icon buttons are divided into groups.
I have identified each button with its associated group below the image of the Insert Panel.
- Form
- Text Field - Hidden Field - Textarea
- Checkbox - Checkbox Group - Radio Button - Radio Group
- List/Menu - Jump Menu
- Image Field - File Field - Button
- Label - Fieldset
- Spry Validation: Text Field - Textarea - Checkbox - Select - Password - Confirm - Radio Group
Form Elements have at least three important attributes (some, as we will see, have more); these are the label that will appear on the form to describe the form element for the user, the name of the form element (which is important to the browser), and the value that will be reported to you when the user submits the form. When you click on the icon for most of the common form elements on the Insert>Forms tab of the Insert menu, you will see the pop-up box below, where you will specify the label you wish to associate with your form element. Enter the label you wish the user to see, leave the Style radio button on the default setting ("Attach label tag using 'for' attribute"), and choose the position for the label (before or after the form element) that suits your design. For now, ignore the Access key and Tab Index text boxes.
A few form elements require additional information, and will present a slightly more complex pop-up to you. You can set all other values for an element using the PI for that element; to view an element's PI, simply click on the element in your Design View window.
The form above is a non-functioning form so if you click the submit or reset button, no action will be taken.
List Values Dialog for List/Menu Buttons
 |
Use the tab key to add new Item Labels and Values. The Labels appear to the viewer in the list and the Values are submitted and parsed by the form handler. Notice that the Value can be the same word as the label. If the Value is the same word or a different word than the Item Label, it should be descriptive. Add items with the + and delete items with the -. Use the triangular arrows on the right to reorder the list items. |
Hidden Fields
Hidden fields are invisible in the html page but viewable in the source of the HTML document. You can put your hidden fields anywhere in your form but the standard location is at the beginning of the form. It's helpful to add a comment describing the purpose of the field. You can add comments to your document by going to the Common Panel of the Insert Panel and using the Comment Button.
 |
|
This yellow exclamation point icon is the comment icon in the DW document window. Select this icon to
open the Property Inspector for the selected comment. You must enable
View>Visual Aids> Invisible Elements and check the box next to comments in Preferences...>Invisible Elements.Jump Menus
A Jump Menu is a form element which displays as a dropdown menu of linked URLs used for navigation. Since it is a form element, jump menus must be contained within the form beginning and ending tags. Dreamweaver's Insert Jump Menu feature adds JavaScript behaviors to the form menu element. Although the jump menu is a form element, all the processing is done on the client side through JavaScript and the jump menu does not require a form handler or a submit button. Please create a new form in which to contain your jump menu rather than grouping it with another form that requires a handler or cgi script on the server side.
Create a basic jump menu. Do not include a jump menu within any other form tag. It should always be in it's own separate form. GET THIS RIGHT PLEASE. You won't believe how many students put their jump menu within their form homework. Create a jump menu on a separate html page than your submissible form.
You can link your jump menu selections to any external absolute URL or any relative files in your site, including graphic and .pdf files. You can use behaviors to replace the standard Go button with an image when you learn more advanced features of DW.
To make the first item of your jump menu informational without jumping anywhere upon selection, add the information to the item label and then deaden the link by setting the value to javascript:void('');. Note that the quotes within the parantheses are two single quotes.
Here is a jump menu that does not use a GO button and the first item is informational and does not jump anywhere:
To get your jump menu to open each URL in the current window or a frame, see these Adobe Tech Notes and Tutorials: Jump Menus
The Go Button - make sure that
the Go button is ONLY there if you are not programming the menu to jump automatically
when an option is selected. This is really important so read carefully.
TechNote: Jump Menu and Go Button Options
Targeting Frames from the Jump Menu:
TechNote: Setting a Target Frame in a Jump Menu
Go to Project 7's Web site check out their amazing extensions.
Adobe's Tech notes
Please visit Adobe's Tech notes Index for specific problems OR when you get stuck and no one has replied to your forum post!
Form Validation
Dreamweaver has a behavior which will validate your form. In other words if you want a proper email address in an email field, this behavior will check the formatting of the entry and notify the user with an alert box if they have not used a standards blank@blank.com email address. You can use this behavior to make some or all fields required. If the user submits without filling in the required fields, an alert box will display a message that you create informing them they need to fill out the required fields, etc.
Please keep the form assignment so that you can apply the form validation behavior when we learn to use behaviors later in the course. (soon!) You will be required to use form validation on the form page of your final project.
Form Tips
Always contact your ISP or sys admin for specific instructions on uploading forms to your server.
Use a unique name for each hidden field you use.
If you're allowing multiple selections for a form field, inform the user with a short text explanation and info on how they can select more than one item for a group. Modifier keys may be different for different operating systems.
Radio buttons always come in groups or sets. Each option within a set has a value and each option must be part of the same named group or set. Radio buttons are used when only one option at a time can be selected, just like the radio buttons on an old car radio. When you select another button, it turns off the station that was previously selected ...hence the name: radio button!
Checkboxes may come in groups or sets or by itself. Each option within a set has a value and each option in a set must be part of the same named group or set. Use checkboxes for multiple selections.
You can use the Submit button action set to None after you learn to use behaviors on form objects. Dreamweaver behaviors are written in JavaScript. You don't need to know JavaScript to use the behaviors with the form button.
For textarea Wrap property, use either Virtual or Physical to let the text automatically wrap within the text box. The difference between these options is how the text is sent to the CGI script. Wrap Physical preserves line wrapping that takes place in the text box and Virtual does not. Off displays all the text on a single line with horizontal scrolling until the Enter key is pressed. It's sent to the CGI as one single line of text.
You can set initial state of radio buttons and checkboxes within the Property Inspector. Select the form element and view the PI. I've selected unchecked for my samples above.
You can set an Initially Selected Option for List and Menu items. This can be a description or instruction rather than an option.
Name every element you use in your form.
You cannot nest forms which means you cannot insert another form within a form. You can, however, have more than one form on a page but I don't recommend it and I will not accept more than one form on a page for your final project. Just be certain to end one form before beginning another form.
Use tables to get a nice layout structure for your forms.
Jump Menus: You cannot add the GO button after you've closed the Insert Jump Menu dialog so it is best to add it and then delete it if you decide you don't want it later. For your final project make sure that you design the function of the jump menu to either immediately go to the selected URL - in which case you DON"T need the GO button so remove it OR you want to select a URL and then require the user to click the GO button to jump to the selected URL.
Using Formmail: Formmail provides tools and services to collect and process information from visitors to your web site. It allows you to hide your email address from your web forms. By using contact forms instead of a 'mailto:' link, spam bots will no longer be able to harvest your address. Formmail collects the information from your form and then emails it back to you.
Contact your web host to find out the URL they want you to enter for the Form Action. This will enable people to fill out the form online and have the results submitted to you via email (in the most basic use of this feature).
For those using Foothill's UNIX server or who don't have a cgi bin with their web hosting service, sign up for a free trial account at Formmail.com - which is Matt's Script - and this service will process your form. I think you can register for $1/month after your trial. Worth it.
http://www.formmail.com/register/
Using Zoho for your database: If you need to store information from a form in a database on the server but don't know how to code it, Zoho offers a free version where you can create a form and a database without having to know the coding details. Visit the site to get an idea of what you can do: http://creator.zoho.com
Here is a video that describes how to use Zoho Creator:
Examples of how to use Hidden Fields
Do an Internet or reference book search for Hidden Fields. A classmate informed me that the link that was here and worked last month, is no longer active, so I removed it. This reflects the ever-changing nature of the web as a living and dying organism. Sites come and sites go. Please inform me if/when you find broken links. They are all active as of the date I uploaded this page.
"By way of example, let's imagine that you have a small newsletter signup box in several pages of your website. When a user signs up for the newsletter, you might want to know from which pages they are signing up and which ones they aren't. After a while, you might notice some trends about which page(s) users prefer to sign up from and which pages they don't. Then you could ask a question like 'Why do my visitors prefer to sign up from that page more often than this page?' This information might help you better design your site."
Read a few sites to learn more about both client- and server-side applications of hidden fields. Hidden fields are variables which are passed to the Forms Processor, like any other piece of data entered into a form by a client, except that hidden fields and their values do not show up in the browser. Hidden fields can be used to store information for server-side processing that are related to the information entered at the client side.
For example, a CustomerID can be assigned when customer fills out an inquiry form. The CustomerID can then be sent to the server and stored in the database along with other customer information. Another example is when a website has multiple forms, a hidden field at the beginning of each form can be used to verify identification when any of the forms is submitted. I just wanted to point out that if there are multiple forms to fill out, hidden fields can contain this info and populate the rest of the forms after you have filled out the first one. Saves time when you track a user across multiple dynamically generated forms so that you can pre-fill user data for things that user already entered. A password will not be displayed on the screen as the person types it in. The price of items being purchased might be in a field that is hidden for some documents, such as a shipping form. When a person fills out a form to purchase an item by credit card , the credit card number, or perhaps all but the last four digits, might be in a hidden field. As the creator of the form, you might want to know the URL of the form, or the version number of the form, sent back to you as a hidden field.
Hidden fields should be used when sensitive information is being communicated. Examples include password information and credit card information. The use of hidden fields range from sensitive data to developer's comments in case you're part of a team working on the same site. However, a hidden field is not a comparable substitute for cookies. A hidden field is not secure since all the data is stored in the source. Leaving the page and coming back to it does not retain the data like persistent cookies can.
Hidden fields can be useful for collecting user data. For example, let's say you are a webmaster in a marcom organization and you are asked to create a form to collect user data for a promotion your company is running. The objective is to pre-qualify potential customers so that members of the sales force can follow up with them. But what if you've already used that form for an earlier campaign? The sales force doesn't want to work a dead-end lead and risk alienating a potential sale. If you add a hidden field to your form that denotes campaign-specific data, you can now analyze the data from repeat customers and search for trends and craft strategies that best target that particular customer. - Jeff Cooper
Client-side and server-side field data will be treated by the server in the same manner as the data input by the client. The only difference is that the information is not visible to the client. Some features that are enabled as a result:
- Noting the time/date when a page was accessed
- Noting the url of the page that was accessed
- Redirecting the user to a different page after a certain action by the user (appropriate link, thank you message, end-of-submission page
- Alerting the user with some response (warning, hint)
- Identifying a user and his/her course of action on a page (counter, page-tracking)
- Sending a piece of information/alert/subject header that will ignite a response from the server
- Authors generally use hidden control type to store information
between client/server exchanges that would otherwise be lost due to
the stateless nature of HTTP - for more info. go to http://www.ietf.org/rfc/rfc2616.txt
- Authors can comment the document with:
The name of file
The version no.
The Date of creation
The date of modification
The purpose of the site
- Authors can comment in between the document to explain the purpose of those steps. It can be used by the author to store information gathered from an earlier form so that it can be combined with the present form’s data.
One of the main uses of hidden fields that I know of, is to store state information in the web page when a web application moves you through a series of steps, like:
- page 1: select products
- page 2: enter credit card info
- page 3: select shipping method, etc,
The web server isn't supposed to keep track of where you are in the process. But the server needs to know the answers that you filled in on page 1 after you complete page 3. So the web page for page 3 can be written to include your answers from page 1 as hidden fields on page 3 when page 3 is generated. This makes it easy for you to be on page 3, then hit back twice to get to page 1 and just start from there again without confusing the web server.
An example of a hidden field is when some data should not be viewed by the visitor but is required for form processing. For example:
<input type="hidden" fname="Jane" value="Jane">
<input type="hidden" lname="Doe" value="Doe">
The hidden field another student used on her form:
<input type="hidden" name="recipient" value="hername@yahoo.com">
This line of code was required by her host server in order to get the mailto command to work. You can also add other hidden fields which will direct the user back to your home page after submitting the form. Ask your web host what they require to make your form function.
You can use hidden fields to embed text in a form that will be submitted along with the other data. This can be used by the server receiving the data to sort out which version of the form is sending the data and how
Do not put sensitive information in a hidden field. Remember, hidden fields are displayed if a user views the HTML source.
This will put a subject in the subject line of your email:
<input type="hidden" name="subject" value="Your Subject">
This will send the user to a thank you or confirmation page:
<input type="hidden" name="redirect" value="http://www.domain.com">
Read: http://www.echoecho.com/htmlforms07.htm for more info on form fields.
More about Forms
Tutorial: http://www.smartwebby.com/web_site_design/dreamweaver_form_tips.asp
Make your form element show customized fonts and/or background colors.
You can select a defined class from the Class dropdown menu and apply it to any form element or the entire form. For instance I have defined a class called v12greenBG. For this class, I defined the font to Arial white 12 points, and the background to green-blue. When I assign this class to a textfield, the background of the textfield will be green-blue to the user and as the user types data, it will appear in white Arial 12 point font.
Here is how this textarea appears when I set the Char width to 40, the Num Lines to 6, and the Wrap to Virtual:
Make sure to include a form action. I left mine null in the example above
using the pair of quotes: ""
Tips on Forms Layout:
A user should be able to tab from table cell to table cell of your form. Evaluate the layout of your form by resizing your browser window to see if you want/need to make any adjustments. Often when you make the browser window smaller you get strange layout of the names fields, checkboxes and radio button sets. If you put those in tables (even nested tables), you have more control over them when the user resizes the browser. For instance you can put the form label in one call and the form element in another to control the layout as such:
Always view your site with several sizes of browser windows to see how the changes affect your layout and see if you can implement more control over the layout. Please note that in the form above there is no submit or cancel button. Also note that the user cannot both like rap and not like rap. Radio buttons are used when you only want ONE reply - either yes or no, on or off, blue OR red but NOT both, etc.
You are not required to use a form validation behavior for this homework. Behaviors are taught in another lesson. However - please use the forms validation behavior on your final website. In addition, when you collect data, you want to make sure that you name your form elements descriptively so that you know what you mean when you get back a YES or NO reply, or some text returned to you by the server.
For example, this is what I received when I clicked on a previous student's submit button without filling out required fields. This is meaningless to both the user and to the author - and/or those processing the data. Name all of your labels and elements descriptively. For instance in the form reflected by the alert box below, textfield was firstname, textfield2 was lastname, textfield3 was email, etc.
Resources and Examples
- About Spry Widgets from Adobe
- Example Forms:
- Web Forms Powerpoint
