Creating Web forms

In Web documents, forms provide a means for users to submit information of some sort that is then processed by a Web server in some way. A form consists of a collection of controls, such as text boxes, drop-down menus, and buttons, through which users enter information. Usually, one button serves as a “submit” button, which the user clicks to have the browser submit the information to the server. More specifically, the form data—which consists of both the information entered by the user and the identifying names of the form controls—is passed to a form handler, a server program or script that takes the form data as input and acts upon it in according to the intentions of the web developer. The form handler is specified in the form’s action attribute.

Example of a Web form

As an example, consider a form on a search page, like the simple form below, which consists of a drop-down menu, a one-line text box, and a submit button:

Search in:

For:

All Support Products Order Company News

Each control on a form has a name and a value. Names are assigned by the author, while values are provided by the user (either directly, as when the user enters something in a text box; or indirectly, as when the user selects an item in a drop-down menu or clicks a button). In the search form above, the name of the drop-down menu might be “area”; that of the text box, “query”; and that of the button, “button”.

When the user selects a search area, enters a search term, and clicks the button, the browser sends the form data to the form handler, which for example might be http://deepsearch.namo.com/cgi-bin/mclient.cgi. The form data consists of one name/value pair for each control in the form. If the user has selected “Support” in the menu and entered “WebEditor” in the text box, the form data would be as follows:

area = support
query = WebEditor
button = Search

In this example, the program mclient.cgi then takes the query term and performs a search for that term on the documents in the specified area. When the search is complete, mclient.cgi generates an HTML document whose content is the list of search results, and the server returns this response document to the browser.

Steps to create a form

To create a Web form in Namo WebEditor, you simply insert one or more form controls in a document. You do not need to explicitly insert the <form> tag itself, since Namo WebEditor, by default, automatically inserts <form> tags around the controls you insert. In Edit mode, if the display of special tag marks is enabled, the form will be surrounded by a dashed outline, as in the example below. (To toggle the display of special tag marks, click Show/Hide Special Tag Marks Namo Web Editor button show hide tag marks Creating Web forms on the Standard Toolbar.)

Namo Web Editor 5.interaction.forms Creating Web forms

A dashed outline surrounds a form in Edit mode

To ensure that a new form control belongs to the right form, make sure to insert it within the form’s dashed outline.

After inserting the form controls, make sure to specify the form’s action in the Form Properties dialog box.

Namo Web Editor icon tip Creating Web formsEven if you have no script or program available on the Web server to handle a form, you can still make use of forms on your Web site by designating an e-mail address as the form handler. If you enter a mailto link such as “mailto:bob@namo.com” as the form’s action, most modern browsers will send the form data to the specified e-mail address. So, for instance, you could create a form to receive feedback from your users, and the form would be useful even if you have no form handler on the server. Note: if you use a mailto action, you should also set the form’s method attribute to POST.

In this section

Inserting and editing form controls

Specifying a form’s action and other properties

Creating a form in a table

Creating Web forms