The HTML for a form is tagged with <form> </form>.
Attributes for the <form> include "method" and "action".
The method attribute has the values "POST" or "GET".
POST results in encoding the form results in the URL. There are limitations on the length of data that can be sent with POST. In MS IE it seems to be about 2K characters.
GET results in sending the form results invisibly. GET does not seem to have the same length limitations as POST.
A form has 0 or more input tags. An input tag is the HTML representation for either a text field, a push button, a radio button, or a drop-down list.
The attributes for the input tag are "type" (text, push-button, etc.), "value", which supplies a default value, and "name", which gives a name to the value that is entered. The name=value pair is sent to the program specified by the form's "action" attribute. The name becomes a global variable in the action program as well as an entry in a table.
Input
Our first application will be very simple. The form will have one field - Name. We will set the form up to call the CW program ProcessName.cw. The program will respond simply by responding with Hello, Name.
Here is what our form will look like:
The simplified HTML for this form is
<html> <body> <p>Form Example 1</p> <form method="POST" action="ProcessName.cw"> <p>Please enter your Name: <input type="text" name="Name" size="20"><br> <input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p> </form> </body> </html> |
These are the key features of this form:
When ProcessName.cw is called, CloudWriter will automatically create a variable name "Name".
This is the program, ProcessName.cw:
<$Hello, <?Name?>$> |
Here is an alternate version of the program:
Client << "Hello, " << Name; |
Press here to see the program in action
With radio buttons we may select one from a set of choices. Here is a form with radio buttons:
Here is some simplified HTML for selecting from among three choices.
<html> <head> <title>Radio Buttons Example</title> </head> <body> <p>Radio Buttons</p> <form method="POST" action="ProcessRadioButtons.cw"><p><input type="radio" value="Button A" checked name="Buttons"> Button A<br> <input type="radio" name="Buttons" value="Button B"> Button B<br> <input type="radio" name="Buttons" value="Button C"> Button C</p> <p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p> </form> </body> </html> |
In this example, there are three buttons. Each button has a value, "Button A", "Button B", or "Button C". The value will be associated with the name "Buttons". So, our program will have a variable called "Buttons". Here is the program ProcessRadioButtons.cw:
| <$You selected <?Buttons?>$> |
Press here to see it work.
The drop-down control allows you to select one or more choices from a list of choices that are displayed as a drop-down. Our form will look like this:
The HTML looks like this:
<html> <body> <p>Dropdown Form</p> <form method="POST" action="DropdownExample.cw"><p><select size="1" name="D1"> <option>Choice 1</option> <option>Choice 2</option> <option>Choice 3</option> </select><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p> </form> <p> </p> </body> </html> |
Notice that there is a set of "option" tags specifying all the possible values in the drop-down list. One of these values will be associated with the name "D1". When the "submit" button is pressed, the program DropdownExample.cw will be called.
<$You selected <?D1?>$> |
To try it press here.
A push button typically is used to start an "action". However, a push button is a type of input field and can be used to, say, select among multiple actions. Consider the following:
Here is the HTML:
<html> <body> <p><b>Push Button</b></p> <form method="POST" action="form_pushbutton.cw"><p>Text: <input type="text" name="Text" size="20"></p> <p> <input type="submit" value="Forward" name="Button"> <input type="submit" value="Reverse" name="Button"> </p> </form> <p> </p> </body> </html> |
.. and here is the program:
switch (Button)
{
case "Forward":
Client << Text;
break;
case "Reverse":
Client << reverse(text);
break;
}
|
Press here to try it.
Check boxes can be used to submit multiple selections to a form-processing program.
Here is the HTML:
<html> <body> <p><b>Check Box</b></p> <form method="POST" action="form_checkbox.cw"><p>What pets do you own?</p> <p><input type="checkbox" name="Pet" value="Dog"> Dog<br> <input type="checkbox" name="Pet" value="Cat"> Cat<br> <input type="checkbox" name="Pet" value="Bird"> Bird<br> <input type="checkbox" name="Pet" value="Fish"> Fish<br> </p> <p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p> </form> <p> </p> </body> </html> |
If Dog is checked, the URL will contain Pet=Dog; if Cat is checked, the URL will contain Pet=Cat; if both are checked, then the URL will contain Pet=Dog&Pet=Cat. When this occurs, what will be the value of the CloudScript variable Pet? Simple. Pet will be an array containing all the values.
Thus, our program:
switch (Pet.class_name)
{
case "null":
Client << "You don't like animals?";
break;
case "array":
for (i=0; i<Pet.size; ++i)
Client << "You have a " << Pet[i] << ".<br>";
break;
default:
Client << "You have a " << Pet << ".<br>";
}
|
Try it by pressing here.
Hidden fields in a form are a way to embed information in the form that cannot be altered by the user or the browser. In CloudScript we can use a hidden field to supply special information to the server, specifically, the function call to use in the case of a "full program". (Of course, you can use a hidden field any way you like.)
eppfunction is a special variable name that is sent via the URL if it is defined in a form either as a hidden field or any other way. If eppfunction is defined, CloudWriter interprets it as a function call. It also concludes that since a function call has been supplied, then the code in the "action" file is a set of declarations rather than just a simple "macro" of executable functions. CloudWriter compiles the code and the function is evaluated.
Consider the following CloudScript code:
func1 ()
{
Client << reverse(s);
}
|
and the following form:
.. which has the source:
<html> <body> <p><b>Hidden Field</b></p> <form method="POST"><p>Text: <input type="text" name="s" size="20"></p> <p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p> <input type="hidden" name="eppfunction" value="func1()"> </form> </body> </html> |
Try it by pressing here.
All the examples above use static HTML generated by FrontPage (and then edited for simplicity). Frequently the form needs to be customized in some way. We do customization in a CloudScript program.
The easiest way to customize a form is to build it using your HTML editor. Then, read it into your CloudScript program. Then, modify the form in some way. Then, send the form to your client.
To learn more about this topic, see Techniques for Generating HTML.