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 process and related techniques. The web page, when first loads, will display a pop-up window to inform 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 inside 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:chu@ist.psu.edu> 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: 1
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> <FORM Name = MortCalc > <Table> <TR><TD>Amount of Mortgage:</TD> <TD><INPUT Type= text Name= Amount value= Size= 9 ></TD> <TR><TD>Interest Rate as % (e.g., 7.9):</TD> <TD><INPUT Type = text Name= Rate value = Size= 9 ></TD> <TR><TD>Number of Years:</TD> <TD><INPUT Type= text Name= Years value= Size= 9 ></TD> <TR><TD>Monthly Payment:</TD> <TD><INPUT Type= text Name= Payment value= Size= 9 > </TD> 2
</Table> </FORM> <TR><TD><INPUT Type= Button value= Calculate onclick= Calc(MortCalc) > <INPUT Type= Reset ></TD> 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 OnSelect= 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. ParseFlot(value). It will return the value as a floating-point number. 3
IsNaN(value). IsNaN stands for is Not a Number. It can be used to test for numeric values. The function will return a Boolean condition of true or false. 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. function monthly(mortamount,mortrate,mortyears) { var Irate=mortRate/1200; var Pmts=mortYears*12; var Loan=mortAmount; 4
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 practice. Discuss when can the code be used in practice. 5