Forms: What they Are

Let's begin to understand forms. Forms, first of all are the essential element into creating dynamic webpages. You've got your survey, questionaire, or database gathering module, and then your create a form to gather or pool that information together. What really allows you to connect that information is to understand what the reality behind the nature of a form is. A form is basically a document that has snippets of the HTML <form> tag associated with it. And those tags are broken up into separate <input> tags. This input tags, in turn, allow you to "input" -- hence, once again, the brilliant html naming -- various form components like dialog boxes, radio buttions, checkmarks, and the like.Forms are full of dialog boxes that create an opportunity for your visitors to input information from a pre-selected list of options. You can have a form, for example, asking visitors which is the favorite food, and then list 3 or 4 foods to help them connect with what they really like. After creating this list of foods using checkboxes or dialog boxes, or even lists. You end up creating a valuable - very valuable information-gathering device. Forms also add structure to your page, especially within the table element. This is why I introduced you to tables earlier on. Tables can structure the input of the forms so that they are more easily understandable for the reader. Here is a sample form picture: 

And yet here is view of the same form filled out:

You will learn to create forms as complex and as detailed as these during this lesson.

Creating a Basic Form in Dreamweaver

Remember all of those frightening tag elements that were discussed regarding the <input> and <form> elements? Well, remember once again, because of Dreamweaver's dynamic WYSIWYG feature, you end up creating forms using a GUI (Graphical User Interface in techie-geek speak). I could go on for pages about the "techie-geek" speak of such values and compenents of html and the page design structure, but I'll just move on with the GUI for Dreamweaver to create a basic form.
Check-mark or Dialog?First off, you're going to want to create a form that has various compenents in it. For starters, let's begin with defining the various compoonents in a form. First, there are checkmarks. Checkmarks look like this:

These bad boys are great for questions in your survey or form (remember the whole point of a form is to create a demonstration to your pageviewers how spectacular you can code html - wrong! Well, I guess it depend on who is viewing them. In the end the main purpose of a form is creating a structure to receive data from your page viewers, then whatever you do with the dat, how ever you organize it, is up to you! We'll talk about this in the next section, and also be sure to check out Edition 6 for dealing with user input in creating databases and response e-mails. Back to the form elements... Next in our smorgashbord of input elements. Checkmarks are great when you ask a question that can have multiple responses. For example, in this form, the question of which food you look the most is asked. It would make sense to plan out which types of elements go with which questions. For example, if you asked a question: "Where are you in the United States?" and gave the possible answers to be Central, Northern, Southern, Western, or Eastern, you definitely would not want to use dialog boxes because they would not allow the user to add a bunch of "in-between" directions such as Colorado Springs which is the mid-west, and would require the need for a user to check, or identify, the appropriate boxes. If the user can't pick multiple ones (i.e. in a radio button response), then checkmarks would be the method of response that you should use. Overall, forms take a great deal of planning and produce a massive amount of data if "popularized", in other words, if users visit the sites. Next on the line-up of form input options is the radio button:

The radio button is great from types of data entry that allow one to create an instruction question that produces only one single response. This responses could then be listed as radio button options. Alternatively, another element, menu options, could be used. Here is an example of a menu option:This little buggers are similar to radio buttons in that you can only have a single response, but they are great for massive amounts of data. When you have a plethora of different options. If you ask for a the person's state, you would have a list of responses that came from a menu option to organize all of the 50 different options. Having a compact, organized menu option is much more practical and pragmatic, than having such a massive display of 50 dialog buttons on your page! The form would take up millions of pages! Yipe! Well, not millions, but a lot more necessary than the simple and ideal menu option. As you can see the possible form elements were designed for being used for the right purpose. You definitely would not use checkboxes as the method of input for the "What State are you From?" question.

About the Dynamic Content

I could stop right there with the form elements, those three are the main, and most commonly used prescribed answer form elements. The open answer form elements fall into two main categories - single line and multiple-line text response. A single line text response usually falls under a questions such as, "What is your name?" On the form page, the element looks like this:

These are great for simple, single-word, or single phrase responses, but what do you do when you ask for multiple-lines responses, such as comments for your lovely and lively page? Well, you can use a multiple-lined dialog box like this:

The multiple-lined dialog box, obviously, takes up more space on your page, but creates a more dynamic space for the content of which your "page-browser" wants to respond. The multiple-lined dialog box, referred to as a "Textarea" by Dreamweaver is called upon (its not as though we were summoning something!) by clicking on the Textarea button, here:

The Next Step: Actually Creating a Form

As you can see, it all depends on what information you are asking, in order to figure out which form you need to create. In the end, the process of thinking ahead and considering all the possible response options will allow you to plan out and create a much more comprehensive and usable form in the end. Taking the time to plan out what type of information you want to acquire can be time "very" well spent. Asking big questions about your form such as "Who will my page-browsers be?" "Will they be web-savvy, or newbies on using the internet?" "If they will be newbies, having a complex form would not be such a good idea, most likely?" Asking yourself questions such as "What type of information could I acquire from this question?" Will help you name the specific <form> input fields appropriatley. Remember this information is being sent back to you after it is being entered via an e-mail or a database of some type and you have to consider how you will interpret the response to the information. For example, naming an input field that asks the question on the page, "What is your name?", "name_input" would be appropriate and understandably useful in your page creation. However, naming the response variable, which Dreamweaver calls "textarea" for Text Area elements, "x_input" wouldn't really help you that much when it came around to deciphering the user's information because you would see something like this:

x_input: Kent Utah

y_input: 7

You would see x_input and the user's name, and 'y_input' labeling the user's age, and if the input's name was Utah, you may not know if this was the response to the State or the Name question! Thus, it is always important to create appropriately titled names for your variables.Working with DreamweaverWhen creating forms in Dreamweaver, start by clicking the "Forms" tab which is the 6th over from the left. This will dispaly a variety (8 main input values) of form-related buttons:

To first begin a form, always click the "Form" tab. Shown here:

This will create a <form> html tag in the source code of your web page. Also, clicking this form element will highlight the attributes dialog box at the bottom of the screen:

The attributes dialog box has a variety of components that help identify and create your forms. Herer is the breakdown of what these elements do:1. The "Form Name" entry box is simply the name of the form. No, this is not the name of the form that will be displayed on the page for user's to see. The default form name, "form1", is what YOU will see when examing the data on the page's output. When you go and see what information your page-viewers have inputted, you will see the title of your form, form1, in this case on the top of your response page so that the form, in case you have multiple forms on the same site, can appropriately be identified. 2. The "action" method gets a little bit tricky. It designates where the form will be sent. So, obviously, this field should contain a URL or e-mail (mailto:yourname@home.edu).3. The "method" attribute specifies how to send your form and calls for two attributes - GET or POST. Using the most common, post method, the content gets submitted in a two step procedure (this is getting into the techie-stuff, but I thought it was good stuff to know anyways). First, the URL, or mailto e-mail address, that you specified by the "action" attribute (#2 in this case) gets contacted. So if you put in "mailto:yourname@home.edu" under your "action" attribute, then "home.edu" would get dialed up (or aol.com or whatever the host of your e-mail name was). Next, after a successful contact, the contents are transmitted to the URL, or in this case the e-mail address. The "get" method, on the other hand, (which isn't very widely used I might add) appends the contents to the end of the URL, you can see this in action by examining the URL on a few "form" pages on the internet. If the url looks like this

http://www.yahoo.com/search.html?int=question

and has a question mark in it, then it is pretty much concievable to say that it is using a "get" method attribute. This kind of against the best way to do a form because the user sees there information in the URL, which can be kind of disorientating. The "form-taker" may also think their information is out in the blue for all to see when they see some of their responses or inputs in the URL.4. The "target" attribute is used to submit the contents of the <form> element to a specified window or frame. This window or frame is defined in dreamweaver with the creative: _top, _parent, _self, or _blank variables. The target attribute of forms isn't that important and you should really just worry abou the "Form name" (ex. 1), "Action" (ex. 2), and the "Method" (ex. 3) attributes.

Creating an Official Form

After clicking on the form element and filling in your various attributes. Click on the various form creation elements to create your form. Be sure that you have thought out the appropriate questions to your form, considered the types of data you will recieve, and consider the appropriate values to arrive at your final destination - hey, hey a readable, decipherable form! It's all in the planning, all in the planning! So, moving on to the various elements. Specify Checkboxes, Text fields, Radio Button/Group, Textarea, and List/Menu form input options, fill in the attributes, and you're all set and will have created a form! Navigat to some more tutorials!

• Basic Pages •

• Tables •

• Frames •

• Forms •

Cascading Style Sheets

• Buttons •

• The Whole Sha-Bang! •

For Questions, Commetns, and Conerns Contact the Webmaster SpyderByte Corp. Colorado Springs, CO 80903