Introduction to HTML Forms

Those interested in learning about forms in HTML should obtain a book on the subject. A decent book on writing HTML documents is

HTML for the World Wide Web, Elizabeth Castro, Peachpit Press, Berkeley CA 1989, isbn 0-201-69696-7.

Below is a quick summary of the form-related tags.

An HTML form is a collection of input objects such as toggle buttons, text areas, and menus which allow the user to provide input. Within the form is a submit button, which when pressed causes a predefined action to occur. In HTML, the form is usually processed by the web page server (through a cgi script). In Xic, the form may instead be processed by an Xic script.

A form starts with a tag in the format

<form method="post" action="some text">

All but ``some text'' should be copied verbatim. In Xic, the ``some text'' is of the form

``action_local_xic script_path''.

The quotes are required, and action_local_xic should be copied verbatim. The second word is the name of an Xic script file. The ``.scr'' extension is optional, and if a directory path is not given, the script should exist in the script search path. Often, script_path is the predefined macro THIS_SCRIPT, which is replaced by the name of or path to the present script.

The opening <form ...> tag is followed by the contents of the form itself, which can consist of formatted text, and references to the following objects.

Every object is given a unique name. This name is used to access the data in the script. Each button object will also have a value, which is a string token passed to identify a choice, i.e., which button of a group is selected. This may be different than the label on the button. In the tags, constructs like name="name" indicate the keyword name, followed by an `=' with no surrounding space, which is followed by a quoted text string.

Text Boxes
These are one-line entry areas. The tag format is

<input type="text" name="name" options>

The options (which are not required), can be:

size="n"
The n is an integer that sets the field width in characters.

maxlength="n"
The n is an integer which limits the length of input text.

value="some text"
This indicates the text that will initially appear.

Example:

Enter username: <input type="text" name="usertext">

In this and other similar elements that take a ``value="string"'' clause, note that this will fail if string contains quote (`"') characters. However, HTML `&' escapes are expanded in the string, so quote characters can be replaced with ``&quot;'' to include quotation in the string.

Password Boxes
These are text boxes, except that characters are printed as `*' for security. The format is similar to text boxes:

<input type="password" name="name" options>

The options are the same as for text boxes.

Example:

Enter password: <input type="password" name="passwd">

Radio Buttons
These are groups of buttons, one and only one of which is always selected. The tag format is

<input type="radio" name="name" value="value1" option>text
<input type="radio" name="name" value="value2" option>text
...

Each radio button in the group has a line of the form above. The only option is ``checked'' which can appear in only one line, and indicates which button is initially pressed (default is the first button listed). Each button should have the same name, and a different value. The text that follows the tag appears next to the button, and is usually but not necessarily the same as the value.

Example:

<input type="radio" name="radioset" value="1">1
<input type="radio" name="radioset" value="2" checked>2
<input type="radio" name="radioset" value="3">3

Check Boxes
These are toggle buttons. The tag format is

<input type="checkbox" name="name" value="value" option>text

The only option is ``checked'' which indicates that the button is initially pressed. The text following the tag appears next to the button, and is usually but not necessarily the same as the value.

Example:

<input type="checkbox" name="check1" value="check1">check1
<input type="checkbox" name="check2" value="check2" checked>check2

Text Blocks
These are multi-line text input areas. The tag format is

<textarea name="name" options>default text</textarea>

The options are

rows="n"
The n is an integer that sets the height to n characters.

cols="n"
The n is an integer that sets the width to n characters.

The default text, if any, will appear in the text area initially.

Example:

Type in your message:<br>
<textarea name="message" rows="12" cols="40">Dear sirs,
</textarea>

Option Menu
This is a menu of selections, shown as a button containing the current selection. Pressing the button produces a drop-down menu of choices. the tag format is

<select name="name" size="1">
<option value="value1" option>text
<option value="value2" option>text
...
</select>

There is one <option ...> tag per menu entry. The text following the <option ...> tag will appear in the menu. The only option is ``selected'' which can be given on only one line and indicates which item is initially selected (the default is the first item listed).

Example:

<select name="opmenu" size="1">
<option value="choose1">choose1
<option value="choose2">choose2
<option value="choose3">choose3
<option value="choose4" selected>choose4
</select>

Selection Menu
This type of menu has multiple lines, which can be selected by clicking. The menu may be scrollable. The tag format is

<select name="name" size="n" option>
<option value="value1" option>text
<option value="value2" option>text
...
</select>

The size in the <select ...> tag is an integer greater than 1, which indicates the number of lines visible. If this is less than the number of <option ...> lines that follow, the menu will be scrollable. The option that can appear in the <select ...> tag is ``multiple'' which if given allows multiple lines to be selected, otherwise only a single entry can be selected.

Example:

<select name="menu" size="2">
<option value="choose1">choose1
<option value="choose2">choose2
<option value="choose3">choose3
<option value="choose4">choose4
</select>

File Selection
This is a text area with a browse button. When the browse button is pressed, the File Selection panel appears, and the Ok button of the File Selection panel will transfer the selected file name to the form text area. The format of the tag is

<input type="file" name="name" option>

The only option is size="n" to set the width in characters of the text area.

Example:

<input type="file" name="filesel" size="64">

Each form must have a submit button. A reset button, which resets all objects to their initial state, is generally useful.

Submit Button
This is a button which initiates action on the form. This button is required if any action is to be taken on the form data. The tag format is

<input type="submit" option>

The only option is value="message", where the message is the text that actually appears on the button, which is ``Submit'' if no value is specified.

Example:

<input type="submit" value="Done">

Reset Button
This button resets each component of the form to the initial state. The tag format is

<input type="reset" option>

The only option is value="message", where the message is the text that actually appears in the button, and is ``Reset'' if no value is specified.

Example:

<input type="reset">

The form items can be intermixed with text, images, or other HTML formatting and objects. To terminate a form definition, one must supply the tag

</form>

Below is the ``spform.html'' file which is used with the spiralform demonstration script, as an example.

<h2>Forms Demo -- Generate a Spiral</h2>
This page demonstrates the use of HTML forms as input devices for
<i>Xic</i> <a href="xicscript">scripts</a>.  Press the <b>Submit</b>
button when ready.  The spiral will be attached to the pointer, and
can be placed by clicking in a drawing window.

<p>
<form method="post" action="action_local_xic spiralform">

Choose the number of turns in the spiral
<select name="opmenu" size="1">
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
</select>

<p>
Enter the path width: <input type="text" name="pwidth" value="4"><br>
Enter the starting radius: <input type="text" name="rad1" value="20"><br>
Enter the pitch: <input type="text" name="pitch" value="10"><br>

<p>
Select the number of edges per turn:
<input type="radio" name="radioset" value="10" checked>10
<input type="radio" name="radioset" value="20">20
<input type="radio" name="radioset" value="40">40

<p>
<input type="submit">
<input type="reset">
</form>