Lesson 6 - Forms Review
We have completed the first half of the our Dreamweaver Interactive course. You've created a practice homework site incorporating the tools and techniques learned in the first 6 lessons, plus the additional features from topics including templates, and library items. This next assignment will show you some basic integration of DW with open source databases, and server side technologies. These remaining lessons will introduce you to advanced aspects of forms, XML and RSS, and provide resources for becoming a stronger website developer / webmaster. This is a very challenging assignment, and requires you to have some rudimentary knowledge of PHP, databases, and in particular, MySQL - if you are unsure about this, email me before jumping in! This page is a review of forms for anyone in this course who did not complete COIN74A, or needs a refresher. At the bottom of the page will be several forms that you can download. 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 Bar or go to the Insert Menu - Insert>Form>Form to create a form.
Select the Form button to insert a form into your file. Selecting this button will create the Form container tags represented by a red dotted-lined rectangle 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 dotted box.
If you don't see the red dotted line 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 mailform and will usually end with cgi-bin or cgi_bin. Get the address of the cgi 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"> or using PHP would be displayed in your HTML source code as: <form action="http://www.somewhere.com/phpFileName.php" method="post" name="feedback"> 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"> Once you Insert the Form you can add Form Elements into the red dotted line. Many designers use Tables to create the layout for their form elements and then add labels or descriptive text associated with each label. You must insert all your form elements inside the red-dotted rectangle. 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.
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
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 Bar and using the Comment Button.
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. To make the first item of your jump list instructions, set the Go to URL to the null (javascript:void(''); Note that the quotes within the parantheses are two single quotes) symbol and add your instructional text in the appropriate Text: field of the Insert Jump Menu window. 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. Here is a jump menu: 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 TechNote: How to insert a Jump Menu 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. Targeting Frames from the 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 sysadmin 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 always come in groups or sets. 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 in 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. Radio Buttons are toggle. You can only select one option and you can have more than two choices per group or set of radio buttons. Think of them as buttons on an old car radio. You can only have one radio station playing at a time on one radio right? You push one button in and the other pops out. Same with Radio Buttons in forms. Radio buttons always come in groups or sets. Within each set, only one Radio Button can be selected. Name every element you use in your form. You can not nest forms which means you can not 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 can not add the GO button after you've closed the Insert Jump Menu dialog so it may be 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: 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/ 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.
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 will be when a web site has multiple forms, a hidden field at the beginning of each form can be used to clear 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, lets 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 inputted by the client. The only difference is that the information is not visible to the client. Some features that are enabled as a result:
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:
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 would be when some data should not be viewed
by the visitor but is required for form processing. For example, The hidden field another student used on here form follows: 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 to respond. 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: Read: http://www.swin.edu.au/corporate/webmanager/forms_tutorial/page07.htm
to see how to insert a hidden field using DW. Form Tricks
Tutorial: http://www.smartwebby.com/web_site_design/dreamweaver_form_tips.asp Make your form element show customized fonts and/or background colors. *New with DW MX2004: Notice Class dropdown menu in the PI for all your Form Elements:
You have not yet learned to create classes for Cascading Style Sheets, but for those who do (and you all will after lessons 10 and 11), you can simply 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. Notice that the Class does not display in the Document Window. You have to preview in browser to see the Class for the Textarea.
Here is how this textarea appears in the browser when I set the Char width to 40, the Num Lines to 6, and the Wrap to Virtual:
For both IE 4> and Netscape 4>. View the Source Code of my form and change the parameters I used to customize
some form elements in your homework sample. Make yours with different
font, different background colors, etc. Different browsers display the
form's CSS styling differently. In order for the styling to work on birth
IE and Netscape, we have to use two external stylesheets, one for IE and
one for Netscape. In doing so, you could adapt your font sizes, or background
properties, or the other styles that NN4.xx can't interpret. To do that
you can use the fact that NN 4.xx does not recognize the @import. Therefore
you link two style sheets:
I inserted a style attribute in the tag for the submit button
like this: 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 can not 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. HELP! Your Form mailto: Action doesn't work....... Here's a success story from a previous student who set up her form to go through a cgi script provided by her new ISP and web host:
Another student found her problem in her browser of choice:
NOTE: Before you post a question about forms or the mailto: action in the form, please search the FORUMS with the keyword "FORMS" and include archived posts. You are not required to use a form validation behavior for this homework. Behaviors are taught in another lesson later in the course. 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.
Validate Forms
Copyright © 2008 - 2009 Robert D. Cormia - October 29, 2008 |
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.
