Forms
Types of Forms - Form Template - Hidden Fields - Text Field Forms - Checkbox Forms - Radio Button Forms - Menu & List Options Forms - Jump Menus - Submit & Reset Buttons
Example Form Page - Digital Future Form Assignment
Forms provide us a way to interact with our viewers:
- fill in data (user surveys, order forms)
- request information for your viewers
- provide a search strategy (dialog boxes for web searching)
Forms are very much a part of e-commerce and shopping carts.
Creating the form is just the first step. The information from the form is "translated" by a script or program (CGI - Common Gateway Interface) written in PERL, C++
or other languages that manipulate text/files. ASP is used to transfer form responses into databases. Form validation utilizes JavaScript to verify the user's reponses.
This information, via the CGI scripting, is sent to a server. The server end of the transmission is generally an electronic mailbox where the mailbox owner can respond to or analyze the data.
Although most hosts will let you create your form, most prefer that you use their scripts. Check with the host to make sure they allow form processing.
Tables are often used to create form page layouts. In addition to all the form types above, a form can also contain lists, paragraphs, and other images.
Items within a form have a name and a value:
o Name: the "name" of the field that the browser will display
o Value: the viewer's input or response
The name and value are transmitted together in the results listing.
Return to the Top
Types of Forms
Form elements are the parts of the farm (text fields, checkboxes
) that the user fills in or selects.
- Text Input (user fills in the field with information)
- Checkbox - listing of items and multiple items can be selected
- Ex: multiple choice questions, several right answers
- Radio buttons - listing of items but only item can be selected
- Ex: multiple choice questions, only one right answer
- Menu Options - pull-down or scrolling list of items to select from
- Jump Menu - list of links, user selects a link and the browser will "jump" to that web page
Return to the Top
Creating a Form Shell
- Place the cursor on the page - where the form will be located
- Insert > form or Objects > forms panel
- Select a form, then click on one of the form buttons
- The form appears as a rectangle with a red dotted line surround it
TIP: if the form does not appear, select view > visual aids > invisible elements to "turn on" the red dotted lines
- Click inside the form rectangle
- Form Inspector (sets the form elements) -
- Name: type in a name for the form. The form name is used by the CGI script. If you don't give the form a name, Dreamweaver will supply a generic name.
- Action: enter the URL for the processing script
TIP: scripts are programs, such as PERL, C++, asp, cfm, jsp, cgi
Ex: mailto:llb5610@dcccd.edu
- Method:
- post - submits the form data via email
(default for browser, used most often)
- get - the results are displayed on your screen (ex:search engines)
- default - submits according to the default setting of the user's browser
TIP: You can create the form and fill in the ACTION and METHOD later.
Hidden Fields
- Place the cursor at the location within the form that will display the text box.
- Insert > form object > hidden field
or
Objects > forms panel > hidden field button
- Dreamweaver displays a hidden field marker in the dotted form.
- Form Property Inspector -
Hidden Field box: enter a nickname
Value: enter the field value
Text Field Form
Text Fields are often used to solicit information from your user: name, address
- Place the cursor at the location within the form that will display the text box.
- Insert > form object > text field
or
Objects > forms panel >text field button
- A dotted line surrounds the text box
- Text Field Property Inspector:
- Name: enter a nickname for the text field
- Char width: the visible width (in characters) of the text box that the browser will display
- Max Chars: maximum number of text characters the user can enter (leaving blank allows them unlimited text). This is often set to a specific number for zip codes, telephone numbers
- Select type:
- single line - short responses
- password - browser will display asterisks instead of the user's response. Transmits via the Internet the same as regular text - is not protected! You will need an encrypted connection for real security.
- multi-line - if this is selected, an additional menu opens:
- Num lines - number of lines that will display
- Wrap - determines what will happen when text is typed that does not display in the box:
- Off - disables word wrapping. The text scrolls to accommodate longer lines. The user must press ENTER at the end of each line.
- Virtual - text wraps to the next line automatically so text will remain visible in the browser window. The CGI script will submit the text as one long line. This is the recommended format!
- Physical - text wraps to the next line automatically and the text is submitted in the same format (looks exactly the same).
- Default - varies from one browser to another
- Init Value: normally left blank unless you wish the viewer to see text in the box when the page first displays. The viewer than will change, erase or type over this.
Repeat the Text Field Property Inspector steps for each text line.
Check Box Forms
Place the cursor at the location within the form that will display the text box.
Type the question.
Create the potential answers (choices) for the user:
- Insert > form object > checkbox
or
Objects > forms panel > checkbox
- A dotted line surrounds a small check box
- CheckBox Property Inspector:
- Name: enter a nickname for the question
- Checked Value: nickname for the user's response (potential answer)
- Initial State: checked or unchecked (default)
- In Dreamweaver, type the potential answer (before or after the checkbox) that the browser will display. (Each potential answer should identify its corrresponding checked value)
NOTE: The same NAME is used for all the potential answers to each question. Each choice has a different CHECKED VALUE.
Repeat the CheckBox Property Inspector steps for each potential answer to the question.
Radio Button Forms
Place the cursor at the location within the form that will display the text box.
Type the question.
Create the potential answers (choices) for the user:
- Insert > form object > radio button
or
Objects > forms panel >radio button
- A dotted line surrounds a small radio button
- Radio Button Property Inspector:
- Name: enter a nickname for the question
- Checked Value: nickname for the user's response (potential answers)
- Initial State: checked or unchecked (default)
- Repeat the Radio Button Property Inspector steps for each potential answer to the question.
NOTE: ALL the buttons will share the same checked value nickname!
TIP: To increase the spacing between radio and checkbox items, use the non-breaking space button. You can also insert a line break after each item so they appear in a verticle listing.
Menus / Selection Lists
Menus accomplish the same listings as checkboxes or radio buttons, however, menus take up less room on the screen.
A scrolling menu creates a multi-line display
A pull-down menu creates a single-line display
Place the cursor at the location within the form that will display the text box.
Type the question.
Create the potential answers (choices) for the user:
- Insert > form object > list/menu
or
Objects > forms panel > list/menu
- A dotted line surrounds a small popup menu
- List/Menu Property Inspector:
TIP: Select one item from the Initially Selected List in the Forms List Property Inspector if you wish an item to be "initially selected" when the browser displays the form. If the user doesn't make a selection, this item will be submitted with the form.
To deselect the item, hold down CTRL while clicking on the item.
TIP: If you are allowing the user to make multiple selections, tell the users this! Make sure to include the directions on HOW to make multiple selections: CTRL while clicking on the desired selection
Jump Menu
Place the cursor at the location within the form that will display the text box.
Type the text that describes the jump menu.
Create the selection listing:
TIP: A Jump Menu is actually a popup menu attached to JavaScript.
Submit & Reset Buttons
The user sends the information to the server by clicking the submit button. The user can "redo" the form prior to submitting it by clicking the reset button.
- Place the cursor at the location within the form that will display the text box.
- Insert > form object > button
or
Objects > forms panel >button
- A dotted line surrounds a small button. By default this button is the submit button
- Submit Property Inspector:
- Name: enter a nickname for the button
- Label: type the text that will appear on the button (this does not have to match the nickname. Ex: send it, go!)
- Action: select the item that corresponds with the label:
- Submit - sent it via the Internet
- Reset - sets all the fields back to their original display so the user can redo the form
- None (nothing happens - used by JavaScript programmers for popup windows, popup messages...)
TIP: You can use a graphic image for the submit (not reset) buttons.
- Place the cursor at the location within the form that will display the text box.
- Insert > form object > image field
or
Objects > forms panel >Insert Image Field
- Dreamweaver displays the Insert Image popup window.
- Locate the appropriate image button and click select.
- The image appears with a dotted line surrounding it.
- In the Image Form Property Inspector, type SUBMIT or RESET in the Image Field box. Change the image name to either SUBMIT or RESET - this tells the browser to treat the image as this type of image button.
Return to the Top
|