Form Builder


Overview
Form Builder Overview

The WebEdit form builder allows you to quickly and easily design HTML forms.  In addition to a full WYSIWYG preview window, the form builder provides a handy toolbar to simplify data entry, and supports drag and drop, making it easy to organize your HTML form elements.


Form Builder Tree

The form builder tree displays a heirarchical display of the current form elements.  Elements can be moved by simply dragging them to a new position, or deleted by highlighting and pressing the delete element toolbar button.  The preview is updated immediately after each action is performed.


Form Preview

The form preview shows how a form will look when it is published.  It is updated immediately after adding, moving, or deleting an element.  Additionally, the previewer allows entries to be typed into the form fields and displayed when the submit button on the form is pressed.


Form Dialog

The form dialog appears when the program is first started.  It provides information for the HTML <FORM> element.  This element is the basis for all HTML forms and is required.  Both the Action and the Method fields are required, and the dialog cannot be dismissed without entering information into both of these fields.

Required Fields:

Action

Method


Toolbar Reference


Form Builder Toolbar Reference

Form Builder's toolbar allows you easy access to HTML form elements.  To see descriptions of each toolbar function, follow the links below.

  Insert Text Field

  Insert Password

  Insert Text Area

  Insert Check Box

  Insert Radio Button

  Insert Hidden Field

  Insert Selection Box

  Insert Option

  Insert Submit Button

  Insert Reset Button

  Insert Document Text

  Insert Line Break

  Paragraph

  Delete Element


  Insert Text Field

Use the Insert Text Field button to create a text input field on your form.

When the Insert Text Field button is pressed, the following dialog appears.  This dialog generates an HTML <INPUT> element with the TYPE attribute set to TEXT.

Required Fields:

Name

Optional Fields:

Value

Size

Max Length


  Insert Password

Use the Insert Password button to create a password input field on your form.  A password field is a text input field that displays typed characters as asterisks.

When the Insert Password button is pressed, the following dialog appears.  This dialog generates an HTML <INPUT> element with the TYPE attribute set to PASSWORD.

Required Fields:

Name

Optional Fields:

Value

Size

Max Length


  Insert Text Area

Use the Insert Text Area button to create an area on your form for users to enter one or more lines of text.  Text areas are normally used when you need to let the user enter more text than a normal text field will hold.

When the Insert Text Area button is pressed, the following dialog appears.  This dialog generates an HTML <TEXTAREA> element.

Required Fields:

Name

Optional Fields:

Rows

Cols


  Insert Check Box

Use the Insert Check Box button to add a checkbox to your form.  A checkbox is a single toggle button that may be on or off.

When the Insert Check Box button is pressed, the following dialog appears.  This dialog generates an HTML <INPUT> element with the TYPE attribute set to CHECKBOX.

Required Fields:

Name

Value

Optional Fields:

Caption

Checked


  Insert Radio Button

Use the Insert Radio Button button to add a radio button to your form.  A radio button is a single toggle button that may be on or off.  Unlike checkboxes, other radio buttons with the same NAME are grouped together, and only one may be on at a time.  Clicking one radio button toggles it on, and toggles all other radio buttons in the group off.

When the Insert Radio Button button is pressed, the following dialog appears.  This dialog generates an HTML <INPUT> element with the TYPE attribute set to RADIO.

Required Fields:

Name

Value

Optional Fields:

Caption

Checked


  Insert Hidden Field

Use the Insert Hidden Field button to add a field to your form that is not displayed to the user.  This is useful when you want the form to submit some data in addition to what the user enters.

When the Insert Hidden button is pressed, the following dialog appears.  This dialog generates an HTML <INPUT> element with the TYPE attribute set to HIDDEN.

Required Fields:

Name

Value

Optional Fields:

None


  Insert Selection Box

Use the Insert Selection Box button to put a listbox or dropdown listbox on your form.

When the Insert Selection Box button is pressed, the following dialog appears.  This dialog generates an HTML <SELECT> element.

Required Fields:

Name

Optional Fields:

Size

Allow multiple selection


  Insert Option

Use the Insert Option button to add listbox items to your form.  Option elements are used in conjunction with a Selection Box.

When the Insert Option button is pressed, the following dialog appears.  This dialog generates an HTML <OPTION> element.  Option elements can only be placed as children of <SELECT> elements in the Form Builder tree.

Required Fields:

Text

Optional Fields:

Value

Selected


  Insert Submit Button

Use the Insert Submit Button button to add a button to your form which the user can press to submit the form's contents.

When the Insert Submit Button button is pressed, the following dialog appears.  This dialog generates an HTML <INPUT> element with the TYPE attribute set to SUBMIT.

Required Fields:

Name

Optional Fields:

Value


  Insert Reset Button

Use the Insert Reset Button button to add a reset button to your form.  A reset button resets the contents of all fields on the form so the user can start over.

When the "Insert Reset Button" button is pressed, the following dialog appears.  This dialog generates an HTML <INPUT> element with the TYPE attribute set to RESET.

Required Fields:

Name

Optional Fields:

Value


  Insert Document Text

Use the Insert Document Text button to add text to your form.

Click on the document text toolbar button, enter text into the dialog, and press the OK button when you are finished.


  Insert Line Break

Generates a line break tag (<BR>).


  Paragraph

Generates a paragraph marker (<P>).


  Delete Element

Deletes the currently higlighted form element in the Form Builder Tree.


HTML Form Reference

The Form element indicates the beginning and end of a form. HTML fill-out forms can be used for questionnaires, etc. The form is specified as part of an HTML document.  Every form must be enclosed within a FORM element. There can be several forms in a single document, but the FORM element can't be nested.

The Input element is used to specify a simple input element inside a FORM.  It is a standalone tag; it does not surround anything and there is no terminating tag.

The Option element is used within SELECT tags to present a number of options for the user to select.

The Select element is used inside <FORM>...</FORM>, any number of SELECT tags are allowed, freely intermixed with other HTML elements (including INPUT and TEXTAREA elements) and text (but not additional forms).

The Textarea element can be used to place a multiline text entry field with optional default contents in a fill-out form.


FORM

Description

HTML fill-out forms can be used for questionnaires, hotel reservations, order forms, data entry and a wide variety of other applications. The form is specified as part of an HTML document. The user fills in the form and then submits  it. The user agent then sends the form's contents as designate d by the FORM element. Typically, this is to an HTTP server, but you can also email form contents for asynchronous processing.

Note: You may not nest FORM elements!

Every form must be enclosed within a FORM element. There can be several forms in a single document, but the FORM element can't be nested. The browser is responsible for handling the input focus, i.e. which field will currently get keyboard input. Many platforms have existing conventions for form s, for example, using Tab and Shift-Tab to move the keyboard focus forwards and backwards between fields, and using the Enter key to submit the form.

This standard defines and requires support for the HTTP access protocol only. Under any protocol, the submitted contents of the form logically consist of a list of name/value pairs where the names are given by the NAME attributes of the various fields in the FORM. Each field will normally be giv en a distinct name. Several radio buttons can share the same name, as this is how you specify that they belong to the same control group - at any time, only one button in the group can be selected.

Note: The contents list of name/value pairs excludes unselected radio buttons and checkboxes. In general, any field with a null value can be omitted from the contents list.

Forms are created by placing input fields within paragraphs, preformatted text, lists and tables. This gives considerable flexibility in designing the layout of forms.

HTML 3.0 supports the following kinds of fields:

•	Simple text fields

•	Multi-line text fields

•	Radio buttons

•	Checkboxes

•	Range controls (sliders, or knobs)

•	Single/multiple choice menus

•	Scribble on image

•	File widgets for attaching files to forms.

•	Submit buttons for sending form contents

•	Reset buttons for resetting fields to their initial values

•	Hidden fields for book keeping information

It is expected that future revisions to HTML will add support for audio fields, multi-row entry of database tables, and extending multi-line text fields to support a range of other data types, in addition to plain text. Client-side scripts will provide the means to constrain field values and to add new field types.

Attributes

ACTION -  The ACTION attribute is a URL specifying the location to which the contents of the form is submitted to elicit a response. If the ACTION is missing, the URL for the document itself is assumed. The way data is submitted varies with the access protocol of the URL, and with the values of the METHOD and ENCTYPE attributes.

METHOD -  This specifies variations in the protocol used to send the form contents. It is currently restricted to GET (the default) or POST. The attribute was introduced to inform user agents which HTTP methods the server supports.

ENCTYPE -  This attribute specifies the MIME content type to be used to encode the form contents. It defaults to the string: "application/x-www-form-urlencoded"

SCRIPT - This can be used to give a URI for a script. The scripting language and the interface with the user agent is not part of the HTML 3.0 specification.

Example

This fictitious example is a questionnaire. It uses the INPUT element for simple text fields, radio buttons, checkboxes, and the submit and reset buttons. The TEXTAREA field is used for a multi-line text entry field. The form fields are laid out with several paragraph elements and an unordered l ist. Notice the use of the NAME attribute to name each field:

<TITLE>Sample Questionnaire</TITLE>

<H1>Sample Questionnaire</H1>

<P>Please fill out this questionnaire:

<FORM METHOD=post ACTION="http://www.hal.com/sample">

<P>Your name: <input name="name" size="48">

<P><input name="male" type=radio> Male

<P><input name="female" type=radio>Female

  Number in family: <input name="family" type=int>

<P>Cities in which you maintain a residence:

<UL PLAIN>

<LI><input name="city" type=checkbox value="kent"> Kent

<LI><input name="city" type=checkbox value="miami"> Miami

<LI>Others <textarea name="other" cols=48 rows=4></textarea>

</UL>

<P>Nickname: <INPUT NAME="nickname" size ="42">

<P>Thank you for responding to this questionnaire.

<P><INPUT TYPE=SUBMIT> <INPUT TYPE=RESET>

</FORM>


INPUT

Description

The INPUT element is used to specify a simple input element inside a FORM.  It is a standalone tag; it does not surround anything and there is no terminating tag.

Attributes

TYPE -   must be one of:

•	"text" (text entry field; this is the default)

•	"password" (text entry field; entered characters are represented as asterisks)

•	"checkbox" (a single toggle button; on or off)

•	"radio" (a single toggle button; on or off; other toggles with the same NAME are grouped into "one of many" behavior)

•	"submit" (a pushbutton that causes the current form to be packaged up into a query URL and sent to a remote server)

•	"reset" (a pushbutton that causes the various input elements in the form to be reset to their default values)

NAME -  the symbolic name (not a displayed name -- normal HTML within the form is used for that) for this input field.  This must be present for all types  except "submit" and "reset", as it is used when putting together the query string that gets sent to the remote server when the filled-out fo rm is submitted.

VALUE -  for a text or password entry field, can be used to specify the default contents of the field.  For a checkbox or a radio button, Value specifies the value of the button when it is checked  (unchecked checkboxes are disregarded when submitting queries);  can be used to specify the label for the pushbutton.

CHECKED -  (no value needed) specifies that this checkbox or radio button is checked by default; this is only appropriate for checkboxes and radio buttons.

SIZE -  the physical size of the input field in characters; this is only appropriate for text entry fields and password entry fields.  If this is not present, the default is 20.  Multiline text entry fields can be specified as SIZE=width,height; e.g., SIZE=60,12.  Note: the SIZE attribute should

 not be used to specify multiline text entry fields now that the TEXTAREA tag is available.

MAXLENGTH -  the maximum number of characters that are accepted as input; this is only appropriate for text entry fields and password entry fields (and only for single-line text entry fields at that).  If this is not present, the default will be  unlimited.  The text entry field is assumed to sc roll appropriately if MAXLENGTH is greater than SIZE.

Example

<TITLE>Sample Questionnaire</TITLE>

<H1>Sample Questionnaire</H1>

<P>Please fill out this questionnaire:

<FORM METHOD=post ACTION="http://www.hal.com/sample">

<P>Your name: <input name="name" size="48">

<P><input name="sex" type=radio value="male"> Male

<P><input name="sex" type=radio value="female"> Female

  Number in family: <input name="family" type=int>

<P>Cities in which you maintain a residence:

<UL PLAIN>

<LI><input name="city" type=checkbox value="kent"> Kent

<LI><input name="city" type=checkbox value="miami"> Miami

<LI>Others <textarea name="other" cols=48 rows=4></textarea>

</UL>

<P>Nickname: <INPUT NAME="nickname" size ="42">

<P>Thank you for responding to this questionnaire.

<P><INPUT TYPE=SUBMIT> <INPUT TYPE=RESET>

</FORM>


TEXTAREA

Description

The TEXTAREA tag can be used to place a multiline text entry field with optional default contents in a fill-out form.

Attributes

NAME -  the symbolic name of the text entry field.

ROWS -  the number of rows (vertical height in characters) of the text entry field.

COLS -  the number of columns (horizontal width in characters) of the text entry field.

Notes

TEXTAREA fields automatically have scrollbars; any amount of text can be entered in them.

The TEXTAREA element requires both an opening and a closing tag.  A TEXTAREA with no default contents looks like this:

<TEXTAREA NAME="foobar" ROWS=3 COLS=20></TEXTAREA>

A TEXTAREA with default contents looks like this

<TEXTAREA NAME="foobar2" ROWS=4 COLS=20>

Default contents go here

</TEXTAREA>

The default contents must be straight ASCII text.  New lines are respected (so in the above example there will be a new line both before and after "Default contents go here.").


SELECT

Description

Inside <FORM>...</FORM>, any number of SELECT tags are allowed, freely intermixed with other HTML elements (including INPUT and TEXTAREA elements) and text (but not additional forms).

Unlike  INPUT, SELECT has both opening and closing tags.  Inside SELECT, only a sequence of OPTION tags -- each followed by an arbitrary amount of plain text (no HTML markup ) -- is allowed.

Attributes

NAME -  the symbolic name for this SELECT element.  This must be present, as it is used when putting together the query string for the submitted form.

SIZE -  if SIZE is 1 or if the SIZE attribute is missing, by default the SELECT will be

MULTIPLE -  if present (no value), specifies  that the SELECT should allow multiple selections (n of many behavior).  The presence of MULTIPLE forces the SELECT to be represented by a scrolled list, regardless of the value of SIZE.

Example

<SELECT NAME="FooBar">

<OPTION>First Option

<OPTION SELECTED>Second Option

<OPTION DISABLED>Third Option

</SELECT>


OPTION

Description

OPTION tags are used within SELECT tags to present a number of options for the user to select.

Attributes

PLAIN -  specifies that this option is not disabled or specified.

SELECTED -  specifies that this option is selected by default.  If the SELECT allows multiple selections (via the MULTIPLE attribute), multiple options can be specified as SELECTED.

DISABLED -  specifies that this option is visible but not selectable.  It should appear "greyed-out".

Example

<SELECT NAME="FooBar">

<OPTION>First Option

<OPTION SELECTED>Second Option

<OPTION DISABLED>Third Option

</SELECT>


ACTION
The ACTION attribute is a URL specifying the location to which the contents of the form is submitted.  If the ACTION is missing, the URL for the document itself is assumed. The way data is submitted varies with the access protocol of the URL, and with the values of the METHOD and ENCTYPE attributes.


METHOD
METHOD -  This specifies variations in the protocol used to send the form contents. It is currently restricted to GET (the default) or POST. The attribute was introduced to inform user agents which HTTP methods the server supports.


NAME
The symbolic name (not a displayed name -- normal HTML within the form is used for that) for this input field.  This must be present for all types except "submit" and "reset", as it is used when putting together the query string that gets sent to the remote server when the filled-out form is submitted.


TYPE
Must be one of:

•	"text" (text entry field; this is the default)

•	"password" (text entry field; entered characters are represented as asterisks)

•	"checkbox" (a single toggle button; on or off)

•	"radio" (a single toggle button; on or off; other toggles with the same NAME are grouped into "one of many" behavior)

•	"submit" (a pushbutton that causes the current form to be packaged up into a query URL and sent to a remote server)

•	"reset" (a pushbutton that causes the various input elements in the form to be reset to their default values)


VALUE
For a text or password entry field, VALUE can be used to specify the default contents of the field.  For a checkbox or a radio button, it specifies the value of the button when it is checked (unchecked checkboxes are disregarded when submitting queries).  VALUE can also be used to specify the label for the SUBMIT pushbutton.


SIZE
The physical size of the input field in characters; this is only appropriate for text entry fields and password entry fields.  If this is not present, the default is 20.  Multiline text entry fields can be specified as SIZE=width,height; e.g., SIZE=60,12.  Note: the SIZE attribute should not be used to specify multiline text entry fields now that the TEXTAREA tag is available.


CHECKED
Specifies that this checkbox or radio button is checked by default; this is only appropriate for checkboxes and radio buttons.


MAXLENGTH
The maximum number of characters that are accepted as input; this is only appropriate for text entry fields and password entry fields (and only for single-line text entry fields at that).  If this is not present, the default will be  unlimited.  The text entry field is assumed to scroll appropriately if MAXLENGTH is greater than SIZE.


ROWS
The number of rows (vertical height in characters) of the text entry field.


COLS
The number of columns (horizontal width in characters) of the text entry field.


CAPTION
The name to be displayed for this item.


SOURCE
The URL for the specified item.


ALIGN
The alignment for this item.


MULTIPLE
If present, specifies that the SELECT should allow multiple selections.  The presence of MULTIPLE forces the SELECT to be represented by a scrolled list, regardless of the value of SIZE.


TEXT
For an OPTION element, this represents the text that is displayed to the user.


SELECTED
Specifies that this option is selected by default.  If the SELECT allows multiple selections (via the MULTIPLE attribute), multiple options can be specified as SELECTED.