HTML Forms : Java Glossary

*0-9ABCDEFGHIJKLMNOPQRSTUVWXYZ (all)

Forms
Introduction FORMs and JavaScript
How a Form Renders id= vs name=
HTML to Generate a Form NULL fields
Conversation with the Server HTML5
FORM Combo Links

Introduction

A form lets the user fill in the blanks, then send just the data to the server. It does not do any validation. That all must be handled by the server. A more advanced validation system is called XFORMS.

How a Form Renders

Here is how a typical form renders




Male
Female

HTML (Hypertext Markup Language) to Generate a Form

Here is the HTML to generate it:

Conversation with he Server

In this case the forms sends its data to a locally running test echoserver waiting for input on port 8081. What gets sent to the server looks something like this, 640 bytes:

The parameters arrive after a set of standard header fields separated from the by a blank line. The datafields are urlencoded, e.g. space appears as %40. Servlets have method for decoding and parsing all this information. Had I not ticked the sendAds checkbox the &sendAds=yes would be missing entirely.

In English that message means:
firstname=Francois Marie
lastname=d’Arouet Voltaire
email=voltaire@mindprod.com
sex=Male
sendAds=yes

The method can be either GET for short idempotent queries or POST for more complex ones. You can embed more elaborate HTML formatting commands inside the <form… </form> sandwich. The name fields identify the data to the server. the id fields help link together a label with its data field.

FORM Combo

Here is a combo, where you are allowed to select any combination of allergies:

Shift-Click to select each of your allergies:

Here is the HTML to generate the combo form:

To turn on the option to allow multiple choices, some older browsers would have you code plain multiple instead of multiple=multiple and to mark an option as selected, selected instead of selected=selected. selected=selected is the new idiotic XHTML-compatible way of specifying a Boolean field option. Here is typically what gets sent back to the server:

In English this says:
patient=Roedy Green
Allergies= cat hair & milk

Note how the allergies field gets sent more than once, once for each selected value.

<optgroup can group <option. This results is a collapsed list of possibilities, making a long list more compact and easy to navigate.

Forms don’t have the equivalent of a Java JTable. The best you can do is use a giant radio button, or a checkbox on each row, to select a row, then have the server resend that row as a single record. Alternatively, you can put the selection into a giant <select <option list. You could also create a link per row and have that display the selected row by itself. Similarly you can cobble together ways to delete one or multiple records.

If you leave out the action tag, it defaults to the URL (Uniform Resource Locator) of the page containing the form.

Form tags may not be nested, though they may appear either inside or enclosing a table.

When you use <input type=image, you may not specify width and height attributes. Go figure.

FORMs and JavaScript

You can add some JavaScript calls to fields in your form for validation using the onsubmit and onclick attributes:

If the expression returned is true, the submit proceeds.

For some fancy tricks dynamically changing the GET url on the fly and dynamically changing the name of the fields and dynamically adding extra decorative fields, look at the source for general search. I have not yet figured out how to pull off the same stunts for POST without using an Applet.

There is form mailto feature to have the contents of the form emailed to you. I don’t recommend this because:

If your form is https:, temporarily convert it to http: so that you can snoop on the exchanges with Wireshark.

id= vs name=

You will notice in the example above that each field in the form was named twice, once with name= and once with id=. What’s the difference? The short answer is, use both and don’t worry about it. But if you want to understand this goofiness, here’s the skinny:

Another way to get buttons is to use *.png file as the background, or a generic long gradient bar image the way Oracle does. You just use a slice of it.

Null Fields

HTML5 (Hypertext Markup Language v 5)

HTML5 offers some new features for forms:


This page is posted
on the web at:

http://mindprod.com/jgloss/htmlforms.html

Optional Replicator mirror
of mindprod.com
on local hard disk J:

J:\mindprod\jgloss\htmlforms.html
Canadian Mind Products
Please the feedback from other visitors, or your own feedback about the site.
Contact Roedy. Please feel free to link to this page without explicit permission.

IP:[65.110.21.43]
Your face IP:[44.213.80.203]
You are visitor number