The Division of Information Technology

• SERVICES
• Help Desk
• Computer Training
• Interactive Video Facility
• Media Services
• ResNet
• Telephone Services
• Webmail (OWA)
• RESOURCES
• Computer Labs
• Computer Security
• Policies
• Request Forms
• Available Software
• For Students
• For Faculty
• » Banner
• » Academics
• » Reports and Information
• » VCL
• ABOUT DoIT
• DoIT Today
• News and Information
• Resources Available
• DoIT Staff

 

Step-by-step: Creating WEB FORMS

• Overview
• UNCP Sumbit Setup
• Obtaining a Key
• Creating a Form
  • Text Boxes
  • Drop-Down Lists and List Boxes
  • Check Boxes and Radio Buttons
  • Text Area
  • Submit and Reset Buttons
  • Adding the Key
  • Upload the Form Page to the Web Server
• Form Data

---

1. Overview

A Web-page form is a good way to collect data from people by e-mail or/and a file whcih will be saved on your Web-page account. To make a Web form fully function, you have to complete the following three setups:

1. Using the UNCP Submit Setup, obtain a "key" to set up a data collection option
2. Create a form
3. Add the "key" and upload the form to the Web server

 

Back to top

---

2. UNCP Submit Setup

The UNCP Submit Setup enables you to set up data collection options easily. You just fill out the form and submit the information. Click here to go to the UNCP Submit Setup page in a separate browser window. You may then alternate between this window and the Setup page.

Tollbars: You will see the toolbar at the bottom of the page. The buttons in the toolbar provide you quick access to the various functions.

	Lists all assigned keys for a user. Username and Password fields must be filled in.
	Loads a previously assigned key into the form. Username, Password, and Key fields must be filled in.
	Adds a new key. Username and Password fields must be filled in and the form must be completed.
	After loading a previously assigned key into the form and making corrections, updates the existing key. Username, Password, and Key fields must be filled in.
	After loading a previously assigned key into the form, deletes the existing key. Username, Password, and Key fields must be filled in.
	After loading a previously assigned key into the form, empties the named data file stored on your Web account.
	Some functions of the Submit Setup tool write information into the Username/Password/Key panel at the bottom of the screen. Use to view the Username/Password/Key panel again.
	Web Tools help files.

	Your account username on the www server.
	Your account password on the www server.
	Any previously assigned submit key. Using List will display all previously assigned keys for your account.

Back to top

---

3. Obtaining a Key

Form data may be sent to you either by e-mail, as a file stored in your account on the Web server, or both. Using the UNCP Submit Setup, obtain a "key" to set up a data collection option. Click here to go to the UNCP Submit Setup page in a separate browser window.

 

I. E-mail option

If you would like the form data sent to you via e-mail, enable the Submit via e-mail check box then enter your e-mail address (i.e., yourname@nat.uncp.edu). For this example, enable the Submit via E-mail check box and enter your e-mail address.

 

 

II. File on Web server option

If you would like the form data stored in your account on the Web server, enable the Store in File check box. The form data stored on your account will be in comma delimited ASCII format, which can be imported into a spreadsheet such as Microsoft Excel. Always enable Convert Quotes. The server will automatically change any quotes in the form data to single quotes and will not cause any disruptions

 

 

In the Data File text box, enter the path and filename with either the .dat or .txt extension. This will be the file written to your account on the server when the user presses the Submit button on your form.
(i.e.,. /home/username/formdata.dat)

For this example, enable both the Store in File and Convert Quotes check boxes. In the Data File text box, type in /home/your_username/formdata.dat.

 

 

By entering field names used in your Web page form in the Required Information text area, the user will not be able to submit their data unless these fields have been filled in. All other fields on your form will be optional.

For this example, type 01 and 02 into the Required Fields text area, placing each on a separate line as you see below:

01
02

 

 

Optionally, you may also create two additional Web pages, a successful response page and an error response page. If you choose not to create the additional pages, the server will furnish a default response.

For this example, we will leave these text boxes empty and use the standard server responses.

When you have completed the Submit Setup form, click the button. At the very bottom of the screen you should see a response similar to the following:

Make a record of the HTML code between the outer quotes. It will need to go in your form beside the Submit button so that the server will know what to do with the data. The alphanumeric value code assigned has to be unique to each form field.

 

Back to top

---

Creating a Web Page Form

We will create a simple Student Information form to collect student's names, e-mail addresses, and some basic information. Click here to view on the completed sample in a separate browser window.

1. Start Visual Page by double clicking on the desktop icon.
   
   
2. From the menu, select View, Toolbars, Form Tools. The Form Tools will appear on the far right of the toolbar.
   
   You may want to move the Form Tools by clicking in the margin around it's icons and drag to the lower part of the screen to the right of the Link text box. All the icons become now visible.
   
   
3. Click on the New icon in the toolbar (or select File, New from the menu).
   
   
4. Enter "Student Information" as the title for the page.
   
   

Text Boxes

1. Type in 'Name: ', then click on the Insert Text Box icon in the toolbar (or from the menu select Insert, Form Item, Text Field).
   
   
2. Right click in the text box and select Text Field Properties from the pop up menu.
   
   
3. Name the text field 01_Name, set the display width to 30 characters, and click on the OK button.
   
   
4. Type Required in italics to the right of the text box so that the user will know he is required to enter information.
   
   
5. On the next line type in 'Email Address: ', then click on the Insert Text Box icon in the toolbar (or from the menu select Insert, Form Item, Text Field).
   
   
6. Right click in the text box and select Text Field Properties from the pop up menu.
   
   
7. Name the text field 02_Email, set the display width to 30 characters, and click on the OK button.
   
   
8. Type Required in italics to the right of the text box so that the user will know he is required to enter information.

 

Drop-Down Lists and List Boxes

Drop-down lists only allow one value within the list to be selected. With a list box, the user may select more than one item in the list.

1. On the next line type in 'Class: ', then click on the Insert Drop-Down List icon in the toolbar (or from the menu select Insert, Form Item, Drop-Down List).
   
   
2. Click inside the drop-down list and change the Options to Freshman, Sophomore, Junior, and Senior.
   
   
3. Right click inside the drop-down list and select Selection Properties.
   
   
4. Name the selection 03_Class, then click on the OK button.
   
   
5. Drop down a few lines and type in 'Which of these programming languages do you have any experience with? (Select all that apply. Hold down the CTRL key to select more than one item.)'
   
   
6. On the next line click on the Insert List Box icon in the toolbar (or from the menu select Insert, Form Item, List Box).
   
   
7. Click inside the list box and change the Options to None, Assembly, C/C++, Pascal, and Other.
   
   
8. If you select a small check mark, the list item next to the mark is automatically selected in the form. For this example, we will have none of the items selected, so remove any checkmarks.
   
   
9. Right click in the list box and select Selection Properties from the pop up menu.
   
   
10. Enter 04_Experience as the Name, and make sure the Allow multiple choice check box is enabled.
    
    

Check Boxes and Radio Buttons

When using a group of check boxes or radio buttons, each check box or radio button in the group must have the same name but each must have a different value. Check boxes are "n of many", meaning that one or more within a group may be selected. Radio buttons are "one of many", meaning that only one within a group may be selected by the user.

1. On the next line type 'In which of the following classes are you currently enrolled? (Check all that apply)'
   
   
2. On the next line click on the Check Box icon in the toolbar (or from the menu select Insert, Form Item, Check Box).
   
   
3. Beside the check box, type 'CSC 155'.
   
   
4. Right click on the check box and select Check Box Properties from the pop up menu.
   
   
5. Enter 05_Current as Name and enter CSC 155 as Value.
   
   
6. Insert a few spaces, by adding Special Character,   from the menu. Then add another check box.
   
   
7. Beside this check box, type 'CSC 255'.
   
   
8. Right click on the check box and select Check Box Properties from the pop up menu.
   
   
9. Enter 05_Current as the Name and enter CSC 255 as Value.
   
   
10. Repeat Steps 6 through 9 for CSC 275 and CSC 365. Note that 05_Current is used for the Name on all the check boxes and only the Value changes for each one in the group.
    
    
11. Move down a few lines and type 'Major: '.
    
    
12. Click on the Radio Button icon in the toolbar (or from the menu select Insert, Form Item, Radio Button).
    
    
13. Beside the radio button, type 'Computer Science'.
    
    
14. Right click on the radio button and select Radio Button Properties from the pop up menu.
    
    
15. Enter 06_Major as the Name and enter CSC as the Value.
    
    
16. Insert a few spaces, by adding Special Character,   from the menu. Then add another radio button.
    
    
17. Beside this radio button, type 'Mathematics'.
    
    
18. Right click on the radio button and select Radio Button Properties from the pop up menu.
    
    
19. Enter 06_Major as the Name again but this time enter MAT as the Value.
    
    
20. Insert a few spaces and then add another radio button.
    
    
21. Beside this radio button, type 'Other'.
    
    
22. Right click on the radio button and select Radio Button Properties from the pop up menu.
    
    
23. Enter 06_Major as the Name again but this time enter Other as the Value.

 

Text Area

1. On the next line, type 'What do you plan to do with your major? '.
   
   
2. On the next line click on the Insert Text Area icon in the toolbar (or from the menu select Insert, Form Item, Text Area).
   
   
3. Right click on the text area and select Text Area Properties from the pop up menu.
   
   
4. Enter 07_Goal for the Name and 80 for the width.

 

Submit and Reset Buttons

On the next row simply click on the Submit icon and the Reset icon from the toolbar.

 

Adding the Key

1. Click on the Insert Text Box icon in the toolbar (or from the menu select Insert, Form Item, Text Field).
   
   
2. Right click in the text box and select Text Field Properties from the pop up menu.
   
   
3. Enter 'recipient' as the Name for the hidden text box.
   
   
4. Enter 0's for the display width and maximum length.
   
   
5. Enable the Hidden check box.
   
   
6. Click on the OK button.
   
   
7. Enter your key value for this form in the text box.
   
   
8. From the menu select Insert, Form Item, Extra Form from the menu.
   
   
   
   
9. Enter /cgi-bin/submit as the Action.
   
   
10. Select Post as the Method.
    
    
11. Click on the OK button.

 

Upload the Form to the Web Server

If you have created your form as part of a Visual Page project, use the Upload icon to copy the page to the Web server. If your page is not part of a Visual Page project, use your favorite FTP program to copy the file to the web server.

 

Back to top

---

4. Form Data

When using the UNCP Submit Setup tool, you have the option of having the form data submitted to you by e-mail and/or the option of having it stored on your www server account. Here we'll take a look at how each method submits the data to you.

Submitted by e-mail

In the previous example, we selected the e-mail data option. The following is an example of what you will receive:

The following data was entered at http://www.uncp.edu/home/train10/forms/info.html:

01_Name:	A. Student
02_Email:	student@papa.uncp.edu
03_Class:	Sophomore
04_Experience:	Assembly, C/C++, Other
05_Current:	CSC 275, CSC 365
06_Major:	CSC
07_Goal:	Don't know yet.

 

Stored on the Server

In the previous example, we also selected the file data option and formdata.dat for the file name. The data file is stored as a comma delimited ASCII text file, which can be imported into many databases and spreadsheet programs, such as Microsoft Excel. Using Notepad or any word processor you may also open the file and view the contents. Using an FTP program, you can download the file from the Web server.

The following is an example of what you will receive:

"A. Student","student@papa.uncp.edu","Sophomore","Assembly, C/C++, Other","CSC 275, CSC 365","CSC","Don't know yet.","Submit"

Each set of quotes contains the data from a field on the form. Between each set of quotes is a comma which separates the individual fields. Referring back to our form, the data indicates:

01_Name:	A. Student
02_Email:	student@papa.uncp.edu
03_Class:	Sophomore
04_Experience:	Assembly, C/C++, Other
05_Current:	CSC 275, CSC 365
06_Major:	CSC
07_Goal:	Don't know yet.

 

Back to to

 

Updated: Wednesday, June 2, 2010

Loading

About Site | Campus Directory | Ask UNCP | University Calendar