FORM-ORIENTED DATA ENTRY
Using form to inquire and collect information from users has been a common practice in modern web page design. Many Web sites used form-oriented input to request customers’ opinions and do business. The form-oriented data entry consists of three major components:
• Input forms (to request data)
• Data Validation functions (to validate data received) • Data Processing Module (to process the data received)
We will use a hypothetical “realty” Web page as an example to illustrate the development proc-ess and related techniques. The web page, when first loads, will display a pop-up window to in-form users the availability of new mortgage payment calculator. The web page will include a scrolling message that constantly displays, to remind visitors of the current low mortgage rates. The on-line mortgage payment calculator will allow users to enter the amount of mortgage, interest rate, and number of years for the mortgage. It then calculates the amount of monthly payment.
Input Forms:
All forms begin and end with the <Form> … </Form> tag pair. You can include as many forms as you like within an HTML document. However, unlike frames, you cannot nest one form in-side another form. Be sure to close each form with a closing </Form> tag.
Attributes:
The <Form> tag has the following attributes:
• Action: Specifies a URL (or e-mail address) to which a form’s data will be submitted. • Method: Determines how a form’s data will be submitted. Get – appends; Post – separate. • Enctype: Specifies the format of the data being submitted.
• Target: Specifies a window in which any results returned from the server appear. • Name: Designates a name for the form
For instance, the <Form method=”post” action=mailto:[email protected]> code would send the form’s output to me.
Input Fields:
The input form can be in the format of text boxes, password, radio buttons, check boxes,
standard buttons, and special buttons (e.g., reset, submit). The <Input> field has the following attributes:
• Align: Specifies the alignment of an image created with the type attribute. Valid values are Absbottom, Absmiddle, Baseline, Bottom, Left, Middle, Right, Texttop and top.
• Checked: Determines whether or not a radio button or a check box is selected. • Maxlength: Set the maximum number of characters that can be entered into a field. • Name: Designated a name for the element.
• Size: Specifies the width (number of characters) for a textbox. • SRC: Specifies the URL of an image.
• Type: Specifies the type of element such as text, radio, password, etc. • Value: Sets an initial value in a field or a label for buttons.
Syntax:
The following HTML tags can be used to develop the data-entry form: <FORM Name=”xxx”>
<INPUT type=”text” name=”string” value=” “ size=”number”> <INPUT type=”password” name=”string” value=” “ size=”number”> <INPUT type="radio" name="radio1">
<INPUT type="checkbox" name="checkbox1">
<INPUT type="button" name="button1" value="Standard Button"> <INPUT type="reset">
<INPUT type="submit"> </FORM>
Sample Codes:
<FORM Name = “MortCalc”> <Table>
<TR><TD>Amount of Mortgage:</TD>
<TD><INPUT Type=”text” Name=”Amount ” value=” “ Size=”9”></TD> </TR>
<TR><TD>Interest Rate as % (e.g., 7.9):</TD>
<TD><INPUT Type = “text” Name=”Rate” value = “ “ Size=”9”></TD> </TR>
<TR><TD>Number of Years:</TD>
<TD><INPUT Type=”text” Name=”Years ” value=” “ Size=”9”></TD> </TR>
<TR><TD>Monthly Payment:</TD>
<TD><INPUT Type=”text” Name=”Payment” value=” “ Size=”9”> </TD> </TR>
<TR><TD><INPUT Type=”Button” value=”Calculate” onClick=”Calc(MortCalc)”> <INPUT Type=”Reset”></TD> </TR> </Table> </FORM> Radio Buttons:
Each radio button requires a Value attribute. The radio buttons allows for only one selection. All radio buttons in the group must have the same name attributes. You can include the Checked attribute in the <Input> tag to select an initial value for a group of radio buttons. If the Checked attribute is not specified, the first radio button is selected.
Check Box:
Each check box requires a Value attribute. The check box allows for multiple selections. It is easier to have different names for each check box. You can include the Checked attribute in the <Input> tag to select an initial value for a group of check box.
Textarea:
You can use Textarea object to acquire user input where multiple entry lines is necessary. The general syntax of the textarea object is as follows:
<Textarea Name=”xxx” Rows=”number” Cols=”number” OnChange=”xxx” O nSelect=”xxx”> Text to be displayed
</Textarea>
Data Validation:
Data validation is one of the major components in data entry. Once user enters the data, a data validation function will be called to validate the data entered by the users. The data must not be
blank and contains numeric data (not text or characters). If the data entered is not valid, an alert
message box will be displayed to notify the user, the text box was cleared and the insertion
point is placed back to the text box. The following statements or built-in function will be used: • If … Else … Statement
• ParseInt(value, base). It will convert a string value into an integer number. Where the value is a string and the base is the format of numbers. 2 means binary base number, 8 means octal, and 10 means decimal. The function will strip the value after the decimal point to make it an integer value.
• IsNaN(value). IsNaN stands for “is Not a Number”. It can be used to test for numeric va l-ues. The function will return a Boolean condition of true or false.
Sample Codes:
Function Calc(myform) {
var mortAmount=document.MortCalc.Amount.value var mortAmount=parseInt(mortAmount,10)
if (isNaN(mortAmount)) {
alert(“The loan amount is not a number!”)
document.MortCalc.Amount.value=” “ document.MortCalc.Amount.focus() } else { var mortRate=document.MortCalc.Rate.value var mortRate=parseFloat(mortRate) if (isNaN(mortRate)) {
alert(“The interest rate is not a number!”)
document.MortCalc.Rate.value=” “ document.MortCalc.Rate.focus() } else { var mortYears=document.MortCalc.Years.value var mortYears=parseInt(mortYears,10) if (isNaN(mortYears)) {
alert(“The number of years is not a number!”)
document.MortCalc.Years.value=” “ document.MortCalc.Years.focus() } } } document.MortCalc.Payment.value=monthly(mortAmount,mortRate,mortYears); }
Data Processing:
Data processing module is used to process the data received from the user’ input. Normally the function will be activated once the user’s click on a button (On_Click event). If the system also involves a database, the data can be saved to the database.
Sample Codes:
function monthly(mortAmount,mortRate,mortYears) { var Irate=mortRate/1200;
return Loan * (Irate / (1 - (1 / Math.pow(1+Irate,Pmts)))); }
Example:
J15.htm shows a complete example of displaying a form, validating, and processing data. Run the code to get a feel of its use. Use the template file (templete.htm) as the basis for prac-tice. Discuss when can the code be used in pracprac-tice.
