|How a Form Renders||id= vs name=|
|HTML to Generate a Form||NULL fields|
|Conversation with the Server||HTML5|
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.
Here is how a typical form renders
Here is the HTML to generate it:
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:
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.
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:
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.
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.
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.
HTML5 offers some new features for forms:
This page is posted
Optional Replicator mirror
Please read the feedback from other visitors, or send your own feedback about the site.
Contact Roedy. Please feel free to link to this page without explicit permission.
Your face IP:[184.108.40.206]
You are visitor number|