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.
Building your form
Within our example we will be using the following form idea:
Comments form for our department’s services
First Name ______Last Name ______Email Address ______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 47712
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:
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:
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”, “E- mail 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 text- box” before inserting it. After you’ve done that, your form should look something like:
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.
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 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 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.