Home > Articles

  • Print
  • + Share This

Developing the Input Page

The input page is an HTML page containing different input fields in which the user can provide data to be processed. As per the requirements, the input page should be used to specify the month and the year.

Defining the HTML Form

To create an input page containing fields, you need to add an HTML form to your HTML/JSP document. A form can be added anywhere within the body of the document like any other HTML element.

All input fields in an HTML page that need to send data to the server for processing need to be contained within a form.

A form has the following syntax:

<form action="FormHandlerURL" method="get|post" name="name">..</form>

It specifies the application on the Web server that will process the form contents using the 'action' parameter and also a request passing mechanism using the 'method' parameter. If your Web page has more than one form you will need to provide its name as well.

For our application, the enhanced month.jsp will process the requests to generate the specified month's calendar. You can specify month.jsp as the action parameter's value. You can specify either absolute or relative URLs for the action field, thus by simply specifying month.jsp you are assuming that you will be placing the HTML page/JSP in the same directory as month.jsp.

Choosing the Right Input Fields to Capture User Data

After you define the form, you will need to determine the input fields that go into the form to capture your user's data. The input fields are determined by the information you need to capture from your users. For example, to obtain your user's name, you need to provide an input text field where the user can enter the name. HTML provides a choice of input fields to choose from. Figure 3.2 displays the different input fields using the HTML interface.

Figure 3.2 An HTML page containing different types of input fields

There are eight different types of input fields. The source of the input field used to obtain the result shown in Figure 3.2 is shown in the following list.

  • Text fields—These input fields accept single-line text. This includes data such as name, age, city, email address, state, credit card number, and any similar information that can fit in one line.

  • Sample:

    <input type="text" name="textinput" value="Single line of text" size="20">
  • Password fields—Accept single-line text but mask user inputs by echoing asterisks instead of the characters typed in by the user—a must for accepting sensitive data such as passwords so that anybody who's watching over your shoulder can't determine what you just typed. Serves the purpose of shielding what you just entered and not very useful if the user is a very slow typist who punches the keyboard with a single index finger!

  • Sample:

    <input size="20" type="password" value="password">
  • Text area—These form fields permit free-flowing text for text input. Data such as comments, descriptions, complete addresses, multiple FedEx tracking numbers or any other input that can potentially spill over to another line should be ideally captured in text areas.

  • Sample:

    <textarea name="unboundtext" rows="4" cols="20">Text...on multiple lines. Unbound</textarea>
  • Option buttons—These input fields allow the user to select only one value from a set of options. For example, to identify your user's age group you could provide a set of option buttons categorizing the age groups as 15-19, 20-25, and so on.

  • Sample:

    <input type="radio" name="radio" value="radio 1">
  • Check boxes—If you have ever been a part of a survey, you might have checked a lot of boxes as answers to some questions. This feature has been extended to the Web in the form of check boxes. Check boxes are useful if the input required is for a yes/no or a true/false question. Some examples are smoker, married, play cricket, and so on.

  • Syntax:

    <input name="smoker" type="checkbox" checked value="true">
  • Option menus or drop-down lists—These fields allow a user to choose from a drop-down list of items. You might consider using this field if there are more than two choices for the input and when the display area is limited.

    Listing 3.1 shows the source for a sample drop-down list containing four items with the first item selected.

Listing 3.1 Usage of the Options Menu Input Field

<select>
 <option value="1" selected="true">Choice 1</ option >
 <option value="2">Choice 2</ option >
 <option value="3">Choice 3</ option >
 <option value="4">Choice 4</ option >
</select>
  • List boxes—These inputs are similar to Option menus, except that the visible area can be set to more than one row. They also allow the user to select more than one item.

    Listing 3.2 contains the source for a sample HTML list containing multiple selected items.

Listing 3.2 Usage of the List Input Field

<select size="4" multiple>
 <option value="1">Item 1</ option >
 <option value="2">Item 2</ option >
 <option value="3" selected="true">Item 3</ option >
 <option value="4" selected="true">Item 4</ option >
</select>
  • Buttons—These allow the user to submit data in the HTML fields to the Web server to be processed by a specified JSP. Reset buttons, like the name suggests, reset the values in the fields within a form to their original values.

  • Sample:

    <input type="submit" name="Submit" value="Submit Button">
    <input type="reset" value="Reset Button">

If you have submitted information on the Web before, you might have noticed the different approaches that Web sites have to capture user's data. In some sites, while providing your personal information, you need to specify your complete address within a multiline text area and in another you need to specify a street address, city, and zip code in different text fields and also choose from a list of states and countries.

NOTE

Rule of thumb: If the input is limited to a definite set of values, allow the user to select from options rather than allowing the user to type out the values. For one, it prevents misspelled values for inputs and second it saves the user from remembering possibly abstruse values for fields. For example, you might want to save the user the trouble of finding out the numeric equivalent for the month of August and simply let the user choose the item August from the drop-down list while specifying a value for a month in the form.

To capture the user data for the Calendar application you will need to define two input-fields: the month and year. As you would typically be using the Gregorian calendar that contains twelve months, you should allow the user to choose from a list of the month names rather than type the month's name or its numeric equivalent. For capturing the year information, a text field would serve the purpose.

You will also need to add a Submit button to send the data to the server for processing. You could also specify a Reset button, but because you have only two fields it would be overkill and would waste valuable display area, as well as potentially distracting the user with the extra button to click.

Defining the HTML Fields

Now that you have identified the fields in the input page, you can add the input fields within the HTML form:

  • Year

  • <input type="text" name="year" size="20" maxlength="4">
  • Month

    Listing 3.3 displays the source for the drop-down list containing the month names.

Listing 3.3 HTML Source for the Month Options Menu Using Hard-Coded Values

<select name="month">
 <option value="0">January</option>
 <option value="1">February</option>
 <option value="2">March</option>
 <option value="3">April</option>
 <option value="4">May</option>
 <option value="5">June</option>
 <option value="6">July</option>
 <option value="7">August</option>
 <option value="8">September</option>
 <option value="9">October</option>
 <option value="10">November</option>
 <option value="11" selected="true">December</option>
</select>

The values for the field might not be the same as the text that will be displayed in the drop-down list, as you can see in the source of the previous menu.

You can also dynamically generate the options for the menu using a scriptlet like you did for obtaining the month names in month.jsp as shown in Listing 3.4.

Listing 3.4 JSP Source for Dynamically Generating the Month Options

<%@ page import="java.text.DateFormatSymbols" %>
<%! String[ ] monthNames = (new DateFormatSymbols()).getMonths(); %>

<select name="month">
<% 
 int selectedMonth = 11;
 // Print all the options
 for (int i = 0; i < 12 ; i++) {
 out.print("<option value=\""+ i + "\"");
if (i == month) {
  out.print(" selected=\"true\"");
 }
 out.println(">" + monthNames[i] + "</option>");
 } // end for-loop
%>
</select>

Excursion

HTTP Parameter Passing Methods

In the static Web world, the client requests a particular document using a URL. For dynamic Web pages, requests are specified using two main formats as defined by HTTP: GET and POST. In both, the URL of target JSP/application specified in the form constitutes a part of the request. The user-specified values are passed depending on the request method defined for the form:

  • GET—In the GET request method, the browser rewrites the URL by including the parameters from the form as shown in the following list:
    1. The browser identifies the form which was submitted.

    2. Gathers all the name-value pairs from the input fields of the form.

    3. Encodes the spaces and other special characters in the name and values.

    4. Concatenates the pairs obtained above after separating them by ampersands (&) to create the query string.

    5. Appends the query string to the targeted JSP's URL.

    6. Sends the string obtained as above to the Web server.

      The Web server extracts the targeted JSP/application from the request and passes the query string as an environment variable to it.

  • POST—Almost the same as GET, except the browser does not append the query string to the targeted JSP's URL but instead directs it to the standard input of the Web server. The Web server reads the content by reading a specified number of bytes from the standard input and passes on the information to the JSP/CGI application.
  • Each parameter passing mechanism has its own advantages. The GET protocol allows you to capture state, defined by the user values appended in the URL, so it can be bookmarked for use later or be used as another hyperlink.

    The disadvantage is that some Web servers have the restriction of handling request URLs that are not more than 255 characters in length. So if you want to pass large data across you should consider using POST. Also you wouldn't like storing and passing passwords in the request URLs.

    In your Web application you would use a mix of the two methods depending on your requirements: capturing state (GET) and passing large amounts of data and shielding information (POST).

    Putting the Input Page Together

    The input page can be an HTML or a JSP (by a mere switch of the file extension). Although the page doesn't contain any JSP tags or directives, you can still set it as a JSP. For the form, you can specify the request method as GET because the data is small and doesn't contain any sensitive information. You can add the different HTML fields within the input page, input.jsp, as shown in Listing 3.5. Figure 3.3 displays the output of the page in a browser.

    Figure 3.3 The Input page rendered in Netscape Navigator

    Listing 3.5 input.jsp: Source of the Input Page

    <html>
    <head>
     <title>Calendar Input Page</title>
    </head>
    <body>
     <center><h1>Calendar Viewer</h1></center>
     <table border=0 WIDTH="500" >
     <tr>
      <td></td>
      <td width="80%"><font size=+2>Overview</font> <br>Provide the Month and Year andclick on the Submit button to view the Calendar for the Month.
      <p><br>
      <form method="get" action="month.jsp" name="monthform">
      <table border="0" >
      <tr>
       <td width="40%"><b>Month:</b></td>
       <td><select name="month">
        <option value="0">January</option>
        <option value="1">February</option>
        <option value="2">March</option>
        <option value="3">April</option>
        <option value="4">May</option>
        <option value="5">June</option>
        <option value="6">July</option>
        <option value="7">August</option>
        <option value="8">September</option>
        <option value="9">October</option>
        <option value="10">November</option>
        <option value="11" selected="true">December</option>
       </select></td>
      </tr>
      <tr>
       <td><b>Year:</b></td>
       <td><input type="text" name="year" size="20" maxlength="4">
      </td>
      </tr>
      </table>
      <br><p>
      <input TYPE="submit" NAME="Submit" ID="Submit" VALUE="Submit">
      <input TYPE="reset" NAME="Reset" ID="Reset" VALUE="Reset">
      </form></td>
     </tr>
    </table>
    </body>
    </html>
    
    • + Share This
    • 🔖 Save To Your Account

    InformIT Promotional Mailings & Special Offers

    I would like to receive exclusive offers and hear about products from InformIT and its family of brands. I can unsubscribe at any time.

    Overview


    Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about products and services that can be purchased through this site.

    This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

    Collection and Use of Information


    To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

    Questions and Inquiries

    For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

    Online Store

    For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

    Surveys

    Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites, develop new products and services, conduct educational research and for other purposes specified in the survey.

    Contests and Drawings

    Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

    Newsletters

    If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email information@informit.com.

    Service Announcements

    On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

    Customer Service

    We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

    Other Collection and Use of Information


    Application and System Logs

    Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

    Web Analytics

    Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

    Cookies and Related Technologies

    This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

    Do Not Track

    This site currently does not respond to Do Not Track signals.

    Security


    Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

    Children


    This site is not directed to children under the age of 13.

    Marketing


    Pearson may send or direct marketing communications to users, provided that

    • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
    • Such marketing is consistent with applicable law and Pearson's legal obligations.
    • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
    • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

    Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

    Correcting/Updating Personal Information


    If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

    Choice/Opt-out


    Users can always make an informed choice as to whether they should proceed with certain services offered by InformIT. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.informit.com/u.aspx.

    Sale of Personal Information


    Pearson does not rent or sell personal information in exchange for any payment of money.

    While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

    Supplemental Privacy Statement for California Residents


    California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

    Sharing and Disclosure


    Pearson may disclose personal information, as follows:

    • As required by law.
    • With the consent of the individual (or their parent, if the individual is a minor)
    • In response to a subpoena, court order or legal process, to the extent permitted or required by law
    • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
    • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
    • To investigate or address actual or suspected fraud or other illegal activities
    • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
    • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
    • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

    Links


    This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

    Requests and Contact


    Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

    Changes to this Privacy Notice


    We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

    Last Update: November 17, 2020