mobile

Medical Library / Department of Information and Communication Sciences

Preparing Forms for the Web

A functional form requires two files:

HTML page with form elements, such as text boxes, radio buttons, and check boxes.
A script to work with the HTML page. The scripting program used with the SIUSM server is formication.

HTML Page

CREATING A FORM

forms toolbar

Change the Insert menu from Common to Forms by clicking on the Forms tab.
Click in your document at the point where you want to insert the form.
Click the Insert Form button on the Forms palette OR choose Insert->Form->Form

FORM SETTINGS

With the form selected, go to the Properties Panel and click the "Browse for File" icon next to the Action box. Select the .fcn (formication) file created to work with your form.

HTML code: <FORM method="POST" action="documentname.fcn">

property inspector

FORM ELEMENTS

Text boxes

may be one line or multi-line
can hold any number of alphanumeric characters.

Check Boxes

often used in “check all the apply” situations. User may select as many as desired
each check box can be given a unique name in the Property Inspector

To insert a group of checkboxes

Place the insertion point inside the form outline.
Click the Check Box Group icon on the Insert panel OR Select Insert > Form > Checkbox Group.
Complete the Checkbox Group dialog box and click OK.

Radio Buttons

Provide a set of options from which the user may choose only one
Each radio button does not have a unique name – instead each group of buttons has a name.

To insert a group of radio buttons:

Place the insertion point inside the form outline.
Click the Radio Group icon on the Insert panel OR Select Insert > Form > Radio Group.
Complete the Radio Group dialog box and click OK.

Fieldset

Group check boxes or radio buttons together with a label or legend.

Use the Insert Fieldset icon on the insert panel OR Select Insert -> Form -> Fieldset
Dreamweaver will prompt you for a label for the group. It will actually apply a "legend" tag to the label .
Start adding checkboxes. When prompted for a label for each checkbox chose "Wrap with Label Tag" and Position "After Form item".

Drop-Down Menus

Use the Insert List/Menu icon on the insert panel OR select Insert -> Form -> List/Menu
In the Property Inspector choose Menu and click on the List Values button to add menu items
Allows person filling out the form to choose only one item

Scrolling Lists

Use the Insert List/Menu icon on the insert panel OR select Insert -> Form -> List/Menu
In the Property Inspector choose List and click on the List Values to add list items
Use the Property Inspector to specify how many lines of the list show at a time and to allow selection of multiple items

Submit and Reset Buttons

Use the Insert Button icon on the insert panel OR select Insert -> Form -> Button
In the Property Inspector designate Submit or Reset. You can change the text appearing on the button.

CREATING ACCESSIBLE HTML FORMS

When you insert an HTML form object and you’ve selected the Form Object option in Accessibility preferences, Dreamweaver prompts you to enter information to make the form object accessible. You can also change accessibility attributes after inserting the object.

To add an accessible form object:

The first time you add form objects, activate the Accessibility dialog box for form objects. (Edit -> Preferences -> Accessibility)
In the document, place the insertion point where you want the form object to appear.
Select Insert -> Form and select a form object to insert.
The Input Tag Accessibility Attributes dialog box appears.

Attach Label Tag using for uses the for attribute to wrap a label tag around the form item, as follows:

<input type="radio" name="radiobutton" value="radiobutton" id="radiobutton">
<label for="radiobutton">RadioButton2</label>
This choice causes the browser to render text associated with a checkbox and radio button with a focus rectangle, and enables the user to select the checkbox and radio button by clicking anywhere in the associated text instead of just the checkbox or radio button control.

Note: This is the preferred option for accessibility; however, the functionality may vary depending on the browser.

Complete the dialog box.

FORMICATION

Formication is a way of collecting data via a web interface. The formication script works with the html page.

Data can be sent to:

an e-mail account
a tab delimited text file
or a custom made text file.

Options include:

Requiring certain fields to be filled in
Redirect to another web page after data is sent
Create a response web page after data is sent

Tips for Editing a Formication File

Use NotePad or other simple text editor to create or edit the formication file.
Save as a text file with the extension .fcn

Send data to an email account

Example 1

Example fcn script for sending data to an email account

<error>
<h1>Please include last name</h1>
</error>
<require lastname>

<error>
<h1> Please include your street address</h1>
</error>
<require street>

<error>
<h1> Please include your city</h1>
</error>
<require city>

<error>
<h1> Please include your state</h1>
</error>
<require state data_format state>

<error>
<h1> Please include your zip code</h1>
</error>
<require zip>

<mail>

To: cgordon2@siumed.edu
From: %email%
Subject: Library Form

===============================================

The following data was submitted:

===============================================

First Name?	%firstname%
Last Name?	%lastname%
Street Address?	%street%
City?	%city%
State?	%state%
Zip Code?	%zip%
Gender?	%gender%
Requests?	%moreinfo%, %directions%, %money%

</mail>

<html>
<head>
<title>Thank you</title>
</head>
<body bgcolor = "FFFFFF" text = "000000">
<h2>Thank you for completing our form!</h2><br><br>

<p><a href="http://www.siumed.edu/lib">SIU Medical Library</a></p>

</body>
</html>

</response>

Example of an email generated by using a form:

Subject: Library Form
Date: Wed, 7 Nov 2001 12:48:49 -0600
From: webmaster@siumed.edu
To: cgordon2@siumed.edu

===============================================

The following data was submitted:

===============================================

First Name?
Last Name?
Street Address?
City?
State ?
Zip Code?
Gender?
Requests?

Mortimer
Snerd
1118 S. Walnut St.
Springfield
IL
62704
male
send information, send directions, send money

Send data to a tab delimited text file

Requires 3 files: html file with form, fcn file, data file.

NOTE: You must set file read and write permissions for the data file.

Example 2

Example fcn script for sending data to a tab delimited text file

<error>
<h1>Please include your name!</h1>
</error>
<require name>

<error>
<h1>Please select a sex!</h1>
</error>
<require sex>

<error>
<h1>Please input a color!</h1>
</error>
<require color>

<error>
<h1>Please input a food!</h1>
</error>
<require food>

<error>
<h1>Please input a lucky number!</h1>
</error>
<require number>

<savedata"test2.dat">

name sex color food number

</savedata>

Send data to a custom text file

Requires 3 files: html file with form, fcn file, data file.

NOTE: You must set file read and write permissions for the data file.

Example 3

Example fcn script for sending data to a custom text file

<error>
<h1>Please include your name!</h1>
</error>
<require name>

<error>
<h1>Please select a sex!</h1>
</error>
<require sex>

<error>
<h1>Please input a color!</h1>
</error>
<require color>

<error>
<h1>Please input a food!</h1>
</error>
<require food>

<error>
<h1>Please input a lucky number!</h1>
</error>
<require number>

Name = %name%
Sex = %sex%
Color = %color%
Food = %food%
Lucky Number = %number%

</savecustom>

<html>
<head>
<title>Thank you</title>
</head>
<body bgcolor = "FFFFFF" text = "000000">
<h2>Thank you for completing our form!</h2><br><br>

<p><a href="http://www.siumed.edu/lib">SIU Medical Library</a></p>

</body>
</html>

</response>

Send data to to a secure email account

Example script for sending data to a secure email account

<error>
<h1>Please include your name!</h1>
</error>
<require name>

<error>
<h1>Please enter a valid e-mail address!</h1>
</error>
<require email data_format email>

<error>
<h1>Please select a sex!</h1>
</error>
<require sex>

Name = %name%
Sex = %sex%

</securemail>

Syntax and Description of Formication Commands

Required Fields and Data Validation

Function:
Validation of user input prior to web page submission.

Field Options:

required
required with format check
non-required with format check

Usage:
If a field is required, and the input needs to checked for a valid format:
'require field_name data_format formattype'

Example:
<require user_ssn data_format ssn>

If a field is not required, but you still want to check for a valid format, use the following syntax:
'data_format format_name fieldname thefieldname'

Example:
<data_format money fieldname total_cost>

The following data types can be validated:

Data Type	Description of valid data
name	Alphas, hyphens, apostrophes, periods. No numbers allowed.
email	Valid-looking email – must include @ and may include sub-domains
state	A valid 2-letter state or territory abbreviation as used by the USPS
zip	5 digits or 5 digits plus 4 digits with hyphen 44444 or 44444-4444
phone	Standard U.S. 10 digit phone number. Dashes and parentheses are optional. (333) 333-3333 will pass, as will 555-555-5555.
ssn	xxx-xx-xxxx must include dashes
sex	m, f, male or female
age	1-99
time	00:00 through 23:59 Must include 4 digits and colon
military time	Time in military format, i.e. 0400 2045
ip	1.1.1.1 through 255.255.255.255
domain	A valid-looking domain name. xxxx.(optional xxx).[com, biz, edu, net, mil, info, org, name, museum, aero, pro, coop]
date	MM/DD/YYYY must include slashes and a 4 digit year
money	Any number followed 2 decimal digits. $ is optional
credit	A valid credit card format– Visa, MasterCard, Discover and American Express. DOES NOT check for valid cards, only valid formats.
comments	Alphanumeric
numbers	Numeric only

Error syntax

<error>

This is where the HTML code would go to display the specific error.

</error>

Description for error:

Error is used in conjunction with require, if a required field is not filled out from the form then the .fcn file reverts to the HTML code embedded in the error codeExample 1 has five different error statements, all five display a simple heading telling the user they did not include a required field. After the message is displayed the user then would have to click on the back button and fill in the necessary fields.

Require syntax

<require input_name>

Description for require:

Require looks at the input_name and then sees if it has been set or not. If there is no value given to that input name, require then calls the previous error block from the .fcn file. As you can see in Example 1, each error statement is placed before the require field, so that if the required field does not have any value it goes to the proper error message. If the required field does have a value, then it continues on down through the .fcn file.

--------------------------------------------------------------------------------

Redirrectto syntax

<redirectto href="Some web page address">

Description for redirectto:

This is pretty easy to understand. When the server gets to this part of the .fcn file and no errors have occured, it will automatically send the user to the desired webpage that you have input, just make sure it is a valid webpage.

--------------------------------------------------------------------------------

Savedata syntax

<savedata "filename">

input_name1

</savedata>

Description of savedata:

Simply put the input names (field names) between the two savedata statements.
Enter with a space between the field names
Must allow read and write access to the file

Delimited format, meaning after each field there is going to be a tab placed. Tab delimited data is very easy to import into an Excel worksheet and manipulate the data.

New data is appended to the end of the file.

Important:
Make sure that none of your data contains any tabs or it will throw off your file's definition

Make sure that none of your data contains new line characters. New line characters occur when you have a textarea field on your form and you allow the user to separate lines by hitting the return key. If you allow them to use the return key it causes the data to be stored incorrectly in the file.

Note:If you have several hundred fields you want to put in your file, to make it easier to read you can have several input names on each line. The end result of this procedure will be one line of data for each entry from the form. The reason being, the savedata function ignores any white space and therefore creates one line of data in your file. Also if the file does already exist and is not blank, it appends the new data to the end of the file.

-------------------------------------------------------------------------------

Savecustom syntax

Description: %field1%

Description: %field2%

Description for savecustom:

Not tab delimited
Enclose the input name (field name) in percent signs (%)
Enter with a space between the field names
Must allow read and write access to the file
Appends data to the file

--------------------------------------------------------------------------------

Mail syntax

<mail>

To: e-mail address to be sent to

From: e-mail address of person sending it

Subject: A subject for the e-mail

Then the body of the e-mail message.

</mail>

Description for mail:

Mail allows you to set up an e-mail message to send to a particular e-mail address.
The first line contains "To: " and then the receiver of the e-mail message.
The second line contains "From: " and then the sender's identity.
The third line is the subject of the e-mail message. The next line after Subject MUST BE BLANK. If not the e-mail message will not be sent properly. After that the body of the e-mail message goes in.

From Example 1

Notice that there are certain words contained in percent signs, those are the input fields from the form. So %email% is the e-mail address that the user will input on the form page. And within the body of the message I have put the name and the sex the user has entered. In order to get the value of an input field from a form, you must remember to give that input a name when typing the HTML code.

--------------------------------------------------------------------------------

Securemail syntax

<securemail to="receiver" from="sender" subject="foobar">

Body of e-mail message.

</securemail>

Description for securemail:

Securemail uses ldap to check the identity of the receiver of the message.
The rest is just like using mail, except now the sender and subject information are also included in the tag.
The body of the e-mail message goes in between the tags, and once again you must remember to place a blank line before the body of the e-mail message.

Tips for Editing a Formication File

Use NotePad or other simple text editor to create or edit the formication file.
Save as: choose "all files" as file type and add the extension .fcn (i.e. filename.fcn)
WordPad adds the extension .txt. Change the extension back to .fcn before uploading to the server.

More Information

SECURE FORMS - Consult with Paul Fleming, 217-545-4194, pfleming@siumed.edu. The secure form and formication file will need to go on the secure web site. Your link to the secure form will begin with https:// rather than http://

Setting read and write permission for data files

When making a form to send information to a tab delimited file or a custom file, after putting the file up on the server you must set read and write permission for everyone.

Step 1 - Open and expand the Files panel so that both the local files and remote server are showing:

files panel

Step 2 - Right click on the data file on the Remote server side and choose Set Permissions...

set permissions

Step 3 - Check the box to allow everyone to write to the file.

file permissions panel

People to contact for assistance with forms:

Carol Gordon, Medical Library	217-545-7452	cgordon2@siumed.edu
Paul Fleming, Information Resources	217-545-4194	pfleming@siumed.edu

SIU School of Medicine

Medical Library / Department of Information and Communication Sciences

Preparing Forms for the Web

HTML Page

CREATING A FORM

FORM SETTINGS

FORM ELEMENTS

Text boxes

Check Boxes

Radio Buttons

To insert a group of radio buttons:

Fieldset

Drop-Down Menus

Scrolling Lists

Submit and Reset Buttons

CREATING ACCESSIBLE HTML FORMS

To add an accessible form object:

FORMICATION

Tips for Editing a Formication File

Send data to an email account

Example fcn script for sending data to an email account

Send data to a tab delimited text file

Example fcn script for sending data to a tab delimited text file

Send data to a custom text file

Example fcn script for sending data to a custom text file

Send data to to a secure email account

Example script for sending data to a secure email account

Syntax and Description of Formication Commands

Required Fields and Data Validation

Error syntax

Require syntax

Redirrectto syntax

Savedata syntax

Savecustom syntax

Mail syntax

Securemail syntax

Tips for Editing a Formication File

More Information

Setting read and write permission for data files