Java Reading Data from Web Pages: Buttons and Text Fields

Reading Data from Web Pages: Buttons and Text Fields


This material is from Chapter 4, Reading Data from Web Pages: Buttons and Text Fields, from the book Sams Teach Yourself JavaServer Pages in 21 Days (ISBN: 0-672-32449-0) written by Steven Holzner, published by Sams Publishing.


Day 4: Reading Data from Web Pages: Buttons and Text Fields

Day 4: Reading Data from Web Pages: Buttons and Text Fields

Today, the gloves come off and we get down to some serious JSP programming—the kind that JSP was built for. In the previous two days, we've been gearing up our Java expertise, and now we'll put it to work as we create JSP programs that let the user send data to us.

We'll do that by seeing how to work with HTML controls today and tomorrow. Controls are those built-in HTML elements that the user can interact with and enter data in, such as buttons, check boxes, text fields (sometimes called text boxes because that's what they're called in various programs, but the true HTML name is text field), drop-down lists, and so on. We're going to put these HTML controls to work starting now. Here's an overview of today's topics:

  • Supporting HTML controls

  • Working with HTML forms

  • Submitting forms to the server

  • Using request objects

  • Using text fields and submit buttons

  • Using text areas, password controls, and hidden controls

  • Using buttons

Today's work will start by seeing how to place HTML controls in HTML Web pages, using HTML forms. As you probably know, HTML forms aren't visible in Web pages; they're purely HTML constructs that enclose HTML controls. We'll need forms to handle HTML controls in our Web pages, because browsers insist that controls be embedded in forms. You'll learn about creating HTML forms and configuring them as you need them.

When the user clicks a submit button in our Web pages, all the data in the various controls (such as text in the text fields) is sent back to the server. In JSP, you can get access to that data using the built-in request object (an object of the Java javax.servlet. http.HttpServletRequest class). You'll see the request object today and what it can do for you as we extract the data the user has sent.

That's what this and the next day are all about—adding HTML controls to Web pages and reading the data the user entered into those controls. Let's start with an overview of exactly what HTML controls are available to us.

HTML Controls

It turns out that there are plenty of HTML controls available. Here's the list, including the HTML element you use to create them—note in particular that many HTML controls are created with the <INPUT> element, using a different value for the TYPE attribute to create the various different controls:

  • Text fields (<INPUT TYPE="TEXT">)—These controls let the user enter and edit a line of text. They're the most common text-oriented HTML controls.

  • Buttons (<INPUT TYPE="BUTTON">)—The standard clickable buttons you see in so many Web pages these days.

  • Check boxes (<INPUT TYPE="CHECKBOX">)—Usually displayed as a small box with a check mark in it. The user can toggle the check mark on or off by clicking the check box.

  • Radio buttons (<INPUT TYPE="RADIO">)—Usually displayed as a circle that, when selected, displays a dot in the middle, these controls act much like check boxes, except that they work in mutually exclusive groups; only one radio button may be selected at a time.

  • File uploading controls (<INPUT TYPE="FILE">)—Allow the user to upload files to the server.

  • Hidden controls (<INPUT TYPE="HIDDEN">)—Hidden controls store data that is not visible to the user (unless she views the page's HTML source).

  • Password controls (<INPUT TYPE="PASSWORD">)—Like a text field, but this control masks each typed character by simply displaying an asterisk (*) instead of the character itself. That means this control is good for typing in passwords, because if someone is peeking over your shoulder, he can't read your password on the screen. (Watching your fingers on the keyboard is, of course, another matter.)

  • Reset buttons (<INPUT TYPE="RESET">)—Reset buttons are great for complex forms, because they let the users clear all the data they've entered to start over.

  • Submit buttons (<INPUT TYPE="SUBMIT">)—The submit button is a very important control in forms, because when you click this button, all the data in the form (that is, all the data in the controls in the form) is sent to a Web server for more processing.

  • Image controls (<INPUT TYPE="IMAGE">)—Just like submit buttons, except they are images the user can click. The actual location that the user clicked in the image is also sent to the server with the rest of the data from the form.

  • Selection lists (<SELECT>)—Also called select controls, these controls work much like drop-down list boxes.

  • Customizable Buttons (<BUTTON>)—This element is a button that can display images and other HTML inside itself.

  • Text areas (<TEXTAREA>)—These controls are two-dimensional text fields, enabling the user to enter more than one line of text. Text areas can also support text wrapping.

The next step is to start adding these controls to Web pages and making use of them in JSP code. To place an HTML control in a Web page, you need to enclose it in an HTML form.

HTML Forms

HTML controls must be enclosed in HTML forms, which you create with the <FORM> element. For example, if you want to add a text field to a Web page using the <INPUT TYPE="TEXT"> element, that element must be inside a form:

<HTML>
  <HEAD>
    <TITLE>Enter Your Data!</TITLE>
  </HEAD>

  <BODY>
    <H1>Enter Your Data!</H1>
    <FORM NAME="form1" ACTION="jsp1.jsp" METHOD="POST">
      <INPUT TYPE="TEXT" NAME="text">
      <INPUT TYPE="SUBMIT" VALUE="Click Me!">
    </FORM>
  </BODY>
</HTML>

Latest Posts

Related Stories