EMP105A-D - How to plan and build a basic form in Front Page.

Transcription

1 EMP105A-D - How to plan and build a basic form in Front Page. Instructor : Scott Klassen Room : OC2004 Main Objectives: Recognizing when to use a form Building your form o Creating the form o Inserting form fields One-line text fields Radio buttons Multi-line test fields Check boxes o Naming the fields o Form validation Recognizing when to use a form When you general objective is to get feedback via the Internet, you definitely want to use a form in order to retrieve this information. Microsoft Front Page has many tools to assist you in building this user interface.

2 Building your form Within our example we will be using the following form idea: First Name Last Name Address Comments form for our department s services _Complaint _Problem _Suggestion Type of Comments _Praise _Other: Comments _Please contact me as soon as possible regarding this matter. Please print and mail to: Bob Smith 8600 University Blvd. Evansville, IN As you can see above, we would like our users to enter comments and suggestions for our particular service. This is the perfect scenario for the use of a form. To begin, the first step we want to take is to create our form using MS FrontPage. To do this, go to the top menu and select Insert and then Form, as shown below: This will create a dotted-line in the shape of a rectangle, showing the form s boundaries, with a submit button and a reset button already within the form. Now that our basic form template has been created, we can insert our table of information within the form s boundaries. Highlight the whole form and cut and paste it within the form s boundaries and above the submit and reset buttons. Once you ve done that, you ll notice the following:

3 The whole table is now within the form boundaries. Now that our table is contained within these boundaries, we can insert our form fields where the user will enter their data that you want to retrieve. Inserting form fields First we notice that we would like the user to enter their first name. Within the right column we need to insert a one-line text box. First move your mouse cursor to the table cell in which you would like your one-line text box and click. Then, go to the top menu and click on Insert, Form and then One-line text box. You should see the following: And the result:

4 Make sure you delete the underscores that are within the table cell. Now that our first text box is in place, go ahead and insert a one-line text box for Last Name, address, and Other. Next, we need to create something to gather data for Type of comment. In this case, you can see that we already have some answers that we would like the user to use in answering this question. For this scenario we ll use what is called a Radio button. Radio buttons work in groups, only allowing a user to select one answer within an answer group. In this situation our answer group with consist of: comment, problem, suggestion, praise, and other. To create a radio button, we follow the same procedure when creating a one-line text box except we select: Radio button. Your form should look something like the following: Now that our radio buttons are in place, we can start thinking about the comments section. If a user enters a comment it will most likely be longer than one line. In this case, we need to use a form field larger than a one-line text box. We ll use a Scrolling text-box which can handle more that one line of text. To insert a scrolling text-box, we follow the same procedure as when we inserted the radio button and one-line text box, except this time, we select scrolling text-box. Make sure you click on the table cell in which you would like to insert scrolling textbox before inserting it. After you ve done that, your form should look something like:

5 Now that our comments input field has been inserted, we re ready to look at our last field, the one that states: Please contact me as soon as possible regarding this matter. Since this suggests a yes or no answer, we ll use a Check box. A Check box can carry only two values, True or False. When the Checkbox is checked it carries a True value, when unchecked it carries a False value. To insert this check box, click beside the beginning of the sentence within the cell and follow the same procedure to insert fields as before, this time selecting Check box. After inserting the checkbox it may appear as a thin line, but, be rest-assured that it is actually there.

6 Naming the form fields Now our form fields are in place. The next step we need to take is to name the form fields. Naming the form fields helps identify each field when the form is being programmed to transmit the data. To begin naming fields, click on the First Name form field. When you ve done that, the following dialog box will appear: For each one-line text box we want to give our fields a verbose name to identify it. For this particular one, First Name, we ll simply give it the name First Name. Type the name in the dialog box s field named Name. Do this for all the one-line

7 text box, scrolling text-box and check box fields, clicking OK after entering in each name. Naming the Radio button fields is a little different than the procedure described above. In this situation, you want to name all of your radio button fields that pertain to the same question, the same group name. So, each radio button should have the same group name. You ll notice when opening the dialog box, by double clicking on a radio button, the field you want to enter data for is called Group Name. Before enter the group name for all of your radio button fields, we need to populate the Value field as well. Within the value field we want to put our answer to the question that s associated to the radio button field s label. For instance, the value for the Suggestion radio button filed will be, simply: suggestion. Now enter the name and value for each radio button. Validating the form fields After naming each field, you are ready to prepare the form for interacting with users on the web. For certain fields you want certain types of data. For example, say you had a form field in which you only wanted a user to enter digits, not letters or special characters, just digits. Front Page will let you police this activity. To do this, all you have to do is double click on the specific form field you would like to work on and then click on the validate button. This will result in the following dialog box: Let s say, for example, all you wanted the user to enter was text. To do this select the drop-down box labeled Data type and choose Text. After you ve done that select the

8 type of characters you would like the user to enter that field by checking the check box fields below the label Text format. For our example, let s same we just want white space and letters. The dialog box will look something like the following: Once you ve entered these parameters click on OK. Now go through the rest of your fields and validate those to your personal specifications. Now that you ve created your form you re ready to send it of to be programmed. The programming will instruct the data where to be stored or sent. To have your form programmed, please contact Web Services in the Computer Center at x1080.