Aestiva H2O Web Site

Installation:
  Free Downloads
  The H2O Family
  Install Notes

Programming:
  Prerequisites
  H2O Whitepaper
  Online Manual
  Code Examples
  H2O Free Support

What's H2O?
H2O is programming made for the web.

What's it like?
H2O is English-like. If you know some Perl, VB, ASP, or PhP you'll be immediately productive in H2O. It runs on Linux, Mac, Unix, and Windows.

How do I try it?
Download H2O for free. Get it from hosting providers. Or buy on-line.

Where does H2O come from?
The language was invented by Aestiva. H2O stands for:
   HTML with
   HTML/OS
   Overlays.

Chapter 2:
HTML Forms Processing
HTML forms are used in everyday Web components such as login pages, guest books, database record editors, text editors, calculators, data-entry pages, setting pages, and almost everywhere data needs to be captured from users.

The HTML form is the primary mechanism for collecting data from users. It plays a central role in advanced Web site construction, because advanced Web sites require user interaction. In this chapter youb learn all about HTML forms.

ABOUT THIS TUTORIAL
This tutorial, once again, breaks through the clutter. In just a few hours you'll know all about HTML forms, a topic most books and courses do a poor job covering. Why? Because, HTML forms link to programming languages. Without an understanding of the language it's hard for authors to explain how HTML forms work.

In this tutorial we can explain HTML forms since we can assume you are using H2O. So dig in. Take the editor in H2O and test each example out. There's no better way to learn and get comfortable with these hugely important HTML components.
Good luck!

This chapter discusses the following ten HTML form components:

Textarea
Select
Text Box box
Password Boxbox
Hidden
Radio
Checkbox
Upload
Submit
Image

Conventions
This chapter does not organize HTML form tags by their official formal names. Instead, combinations of HTML form tags, along with their defining attributes, have been isolated and called "components." Unnecessary HTML attributes have been dropped. This chapter is designed to serve as a practical guide, so we have avoided those HTML tags that play a minimal role in advanced "cross-browser" Web-site construction.

The FORM
HTML forms are built using the components placed between a set of FORM tags.
A form is written as:

HTML and HTML form components

The destination here refers to another HTML document or an on-click Overlay. Unlike many HTML tags, HTML forms cannot be nested (placed within each other) and neither can their components.

It is usually best to place only one HTML form on a Web page. When a user clicks a Submit button in an HTML form, only the data in the HTML form passes to the Web server. Data in other HTML forms on the page is lost. As a result, putting more than one HTML form on a page can cause confusion for users and is not advised.

The H2O Destination
Hypertext links, GOTO tags, and ACTION parameters in HTML forms require you specify a destination. The destination may be a document name specified as full or relative path, such as cart.html or /work/two.html.

If no dot appears in the destination then H2O assumes the destination is an on-click Overlay. In these first two cases, the user never sees the actual document name specified since it is encoded and hidden from the user.

These links are said to be "inside" H2O. If the destination is written as a full URL, such as https://www.securepost.com/capture.html, then the link is said to be "outside" H2O.

If the destination is a remote location then data is passed to the remote server, outside of H2O, and no data is kept in H2O. This last kind of destination is not discussed here.

How Each Component Works
Setting up an HTML form component requires three pieces of information. First, you need to know the attributes of the HTML form tag needed to give the component the look you want.

For example, the single-row input box uses the attribute "size" to set the length of the input box. As another example, the input text area uses the attributes "cols" and "rows" to set the number of rows and columns of the input text area.

Second, you need to know the content of the component when it's displayed. For example, if a pull-down menu appears on the screen, you may wish to set the default selection. Or if a text box appears on the screen, you will want to determine the text in the box.

In H2O the HTML form components are initialized with the values in the variable names specified in the HTML form (at the time of page rendering).

For example, writing <input type=text name=abc
size=20>, builds a single-row input box on the screen that's twenty 20 characters wide. The name=abc in the component tells H2O to initialize the box with the contents of the variable abc.

Setting up the content of an HTML form component is about making sure the content of the variable name in the HTML form is what you wish to appear on the screen when the component is displayed.

Last, you need to know what information passes back to H2O when the user submits the HTML form. Typically, this is just the variable name defined in the form. However, in the special case when multiple HTML form components, each with the same variable
name, are placed in an HTML form, the submitted data is placed in different rows of the same variable.

The Components Explained
Using Textarea
<textarea cols=no_of_columns rows=no_of_rows name=name></textarea>

This component will display an editable text area no_of_columns wide and no_of_rows high filled with the contents of the variable name. One component is used per name. This component requires a closing </textarea> tag. When submitted, the content of the text area is placed in the variable name. When writing the tag you don't need anything between the <textarea> and </textarea> tags. Placing text between them overrides the contents of the text area with that text.

Using Select
<select name=name size=no_items>
<option value=v1>item1<option value=v2>item2<option value=v3>item3..
</select>

This component displays a pull-down menu. It uses the two HTML tags; select and option. One set of components is used per name. The first item in the pull-down menu on the
screen is item1. The second is item2 and so on. The pull-down menu will show no_items items at a time. A scroll bar will appear on the screen if the total number of menu items exceeds the size specified.

A menu item will be highlighted on the screen if its value matches the contents of the variable name. When submitted, the value associated with the item selected (v1, v2, v3, etc.) is saved to the variable name.

The "Multiple" Flag
Placing the word multiple in the <select> header enables select boxes to accept more than one selection. Menu items with values that match a row in the specified name are highlighted on the screen. When submitted, the values associated with the items selected are placed in the specified name, one per row.

If addons is a one-column, two-row variable containing a 1 in one cell and a 3 in the other, then the menu items Onions and Coke will be highlighted.

If the user selects both Extra Fried Fries and Coke, then addons will become a one-column, two-row variable containing a 2 in one cell and a 3 in the other.

Using Text Box
<input type=text name=name size=no_cols>

This component displays a single-row input box, no_cols characters wide. Most often only one component is used per name specified. You fill the box. The box is initialized by
H2O with the contents of the variable name. When submitted, the values the user entered in the box are placed in the specified name.

When more than one input box has the same name, the boxes are loaded with different rows of the specified name. When submitted, the values in each box are placed in the specified name, one per row.

Using Password Box
<input type=password name=name size=no_cols>

This component is similar to the input text box (type=text). Here too a single-row input text box, no_cols characters wide, is displayed. One Use one component is used per name. The box is filled initialized with the contents of the variable name. But here, characters in the box are displayed as stars (*). Here too, when the user submits the HTML form is submitted, the values entered in the box are placed in the specified name.

Using Hidden
<input type=password name=name>

This component is an invisible HTML form component. The box is filled with the contents of the variable name. But it is not visible. Use one component per name.

When the HTML form is submitted, the value stored in the input box is placed in the specified name.

Using Radio
<input type=radio name=name value=v1>
<input type=radio name=name value=v2>
<input type=radio name=name value=v3>

This component is a radio button. Unlike all the previous HTML form components, here the component is repeated. Typically one component is specified for each possible value of the same variable name. A radio button will be appear selected on the screen if its value matches the contents of the variable name. A radio button's feature is that the user can
select only at the most, one button at a time (for a given variable name). When the
user submits the HTML form, the value in the component (v1, v2 or v3) that was he
or she selected is saved to the variable name.

Using Checkbox
<input type=checkbox name=name value=v1>
<input type=checkbox name=name value=v2>
<input type=checkbox name=name value=v3>

This component is a check box button. It is similar to the Radio component in that the component is repeated for each possible value of the same variable name. Unlike the Radio
component, the user can select multiple check boxes (for a given variable name). A check box will appear clicked on the screen if its value matches the contents of any of
the rows in column one of the variable name. When the user submits the HTML form, submitted, the values in the selected components (v1, v2, or v3) are saved to different rows of the variable name. This component behaves similarly to the Select component (with the Multiple flag) discussed earlier in this section.

Using Upload
<input type=file size=no_cols name=filename>

This component is a special file upload button. It looks like a Ttext Box box with an extra Browse button used for browsing the user's computer for a file.

To use an Upload component, you need to add the name-value pair enctype="multipart/form-data" needs to be added to the HTML form header. See the following example below. An upload page is also presented at the end of this chapter. This component does not give you the ability to set the default contents of the Upload box. When the user submits the HTML formsubmitted, the file is uploaded and the name of the file in the Upload Box is saved to the variable filename. The actual file is placed in the /upload directory with the name filename.

Using Submit
<input type=submit name=value value="ButtonText">

This component is a submit button. When the user clicks the submit button, the data in all of the components in the HTML form are submitted. The variable name captures the ButtonText specifed in the tag. The variable name itself is saved in the H2O variable HTMLOS.CLICKED so you know which submit button was clicked.

Using Image
<input type=image border=width name=name src=image_name>

This component is another kind of submit button. Here too, when the a user clicks the button, the data in all of the components in the HTML form components are submitted. The
submit button itself is the image_name specified in the component. The image will have a border, width pixels wide. When the image is clicked the variable name used by the tag is placed in the HTMLOS.CLICKED variable.

Capturing Image Coordinates
When an a user clicks an Image button H2O captures the pixel coordinates where the button was clicked. These values are placed and places those values in name.x and name.y where name is the variable specified in the component.