|
Form Up to Learn About HTML Forms
by Shannon O'Donnell
In previous issues you've seen how easy it is to create static HTML Web pages. You've seen some ways to format data and
even how to make text fly across the screen. You've also seen how easy it is to move HTML pages to your
iSeries and display them from a Web browser. In this issue, you'll learn how to create HTML forms to
accept input from users and how to use Java Script.
What Is a Form?
An HTML form is simply a standard HTML document that contains two special HTML tags:
<FORM> and </FORM>. These two tags define the boundaries of the form and are inserted
between the opening <BODY> and closing </BODY> tags. An HTML form is an interactive
document in that using a few form input tags, you can allow your users to enter data onto the form. We'll
create a sample form in just a moment, but before we do, let's take a look at the special HTML tags that
allow you to enter data into a form.
Form Input Tags
There is really only one new HTML tag you need to learn about to create an input-capable HTML
document. However, this HTML tag, <Input > can contain many additional primary parameters that
define how it appears on the screen:
<Input type="text" name="TextField1">
<Input type="checkbox" name="Checkbox1" >
<Input type="radio" name="RadioButton1" >
<Input type="button" name="Button1" value="Press Here" >
<Input type="submit" name="Submit1" value="Submit Form Data" >
There are more input types available than the ones shown here, but this is a good start. Let's take a look at
each of these in a bit more detail.
The "Text" input field type, when placed between HTML form tags, will create an input-capable text field.
Your users can enter a single line of text into this field.
The "Checkbox" input type field will add a check box to your input form. Check boxes can be used to
allow a user to select multiple options from your form.
The "Radio" input type field will add a radio button to your input form. Generally, you'll want to add more
than a single radio button, but not always. Radio buttons are unlike check boxes in that the user can only
select a single radio button from a group. For example, you might have two radio buttons on your form.
They may contain labels such as "I like eggs" and "I don't like eggs." Since these are mutually exclusive
statements, you'd only want your user to select one or the other. A radio button is just the ticket to add this
functionality. To assign a radio button to a group, give each radio button the same value for the "name="
parameter.
The "Button" input type field will allow you to add a button to your form. Buttons are useful in that they
allow the user to indicate that an action is desired, such as printing a form. Your form can contain as many
buttons as you desire.
The "Submit" input type field is used to place a SUBMIT button onto your form. A Submit button is used
to submit the data from your form to the program or Web page identified on the "Action" parameter of the
<FORM> tag. We're not going to discuss processing form data in this article, so I won't be covering
the use of the "Submit" button here. However, for a great article on how to use Java Server Pages to process
your form data, see "Build
Dynamic Web Apps With iSeries Tomcat."
The <TEXTAREA> tag takes on a slightly different form than the other input type fields. Text areas
are input-capable fields that allow a user to enter multiple lines of text. On a form, they appear as a
rectangle with scroll bars. You specify an opening Textarea field and within it, you can specify a name for
the text area fields, and the number of rows and columns that will appear on the page. You end a text area
field with the closing text area tag, </TEXTAREA>.
A Form Example
Let's take a look at an example of an HTML form. In the following example, which I created using the
Windows Notepad program, you see what might be a typical form. This form contains all the elements
described above, with the exception of a "Submit" button.
<HTML>
<head>
<TITLE>Example of a Form</TITLE>
</head>
<BODY>
<FORM>
<B>Please enter the appropriate responses to each question:</b>
<br><br>
What is the name of your pet? <input type="text" name="Pet Name">
<br><br>
Please write a short description of your pet: <br>
<Textarea name="Pet Description" cols="30" rows="5"></textarea>
<br><br>
Please select your pet type: <br>
<input type="Radio" name="RadioButtonGrp1" value="Dog"
group="PETTYPE"> Dog <br>
<input type="Radio" name="RadioButtonGrp1" value="Cat"
group="PETTYPE"> Cat <br>
<br>
Please select your pet's habits (choose all that apply): <br>
<input type="checkbox" name="check1" value="sleeps">Likes
to sleep<br>
<input type="checkbox" name="check2" value="snores">Likes
to snore<br>
<input type="checkbox" name="check3" value="Playful">Very playful
<br><br>
<input type="Button" name="PrintButton" value="Print Form">
</form>
</body>
</html>
Copy and paste the text into a blank text document and save it as a file type of *.htm. Then open it in your
Web browser. You should see an HTML form similar to the one shown in this image:
Try it out. Notice that if you enter many lines of text into the "TextArea" box, you'll see scroll bars appear
that allow you to move around within that text. Notice also that you can only select a single radio button,
but that you can select one or more check boxes.
Finally, notice that when you click on the "Print Form" button, that the button appears to depress, but
nothing happens. That's because we haven't added any code behind it yet to allow you to print the form.
We'll do that next.
Java Script
Java Script is code that you can enter into an HTML document to provide additional functionality beyond
that provided by HTML alone. Java Script is not Java. It looks sort of like Java, but it's not Java. It's
just a scripting language that was developed by Netscape several years ago to allow Web developers a way
to add additional features to standard HTML documents. In a future article, I'll go into much more detail on
the structure of Java Script and provide lots of great examples. Here, you're just going to see an example of
how to use it.
Once the user has entered something into the form fields, you may want to allow them to print a copy and
take it with them. To do that, you need to access the Windows Printer selection window. Accomplishing
this with Java Script is very easy by adding some Java Script directly to the "PrintButton" input field's
"onClick" event.
An "event" in HTML is just what it sounds like. It's some action that happens to some part, or all, of an
HTML document. For example, when an HTML document is first opened, an "onFocus" event is
generated. When you click on a button, the "onClick" event is generated. When you move a mouse cursor
into a text area, the "onMouseEnter" event is generated. When the cursor leaves the text area field, the
"onMouseExit" event is generated. And so on. There are dozens of events that can be monitored, and when
they occur, you can perform some action on them.
In this case, we'll perform an action on the button so that when it is pressed and the onClick event is
generated, we'll run some Java Script to display the Windows Printer selection window.
Modify your HTML form so that it looks like the following example.
<script type="text/javascript" language="JavaScript">
function printPage()
{ window.print() }
</script>
What you're doing is adding an "onClick" event procedure to the "Print Form" button, and a Java Script
"function" in the <HEAD> section that will perform the actual displaying of the Printer Selection
panel. Place the code into the <HEAD> section of your HTML document somewhere before the
</HEAD> closing HEAD tag.
Modify the form's "Print Form" button so that it resembles the following example:
<input type = "button" value="Print Form" onclick="printPage()" />
Save your document and redisplay it in the Web browser. Now when you click on the "Print Form" button,
the Windows Printer Selection prompt should appear.
Before I leave, let me tell you about one more button that you might find useful. The "Reset" input type
allows you the capability to reset automatically all the fields on the form to their default values. To add the
Reset button to your form, add the following line of code:
<Input type="reset">
Practice, Practice, Practice
Practice creating your own HTML forms. Since you also now know how to load and display them from
your iSeries, you can experiment with different forms for your users. If you combine the HTML knowledge
you've gained so far with the knowledge of how to process forms using JSP, then you'll begin to realize
how all these technologies work together. And you'll realize that, while these topics used to seem complex
and hard to understand, now they are becoming very easy to use and understand.
|
