4.11.1 :: Form Items

Description


Form items allow you to place different types of form items into your form.

Quick Example


..snip..
  1.   <form>
  2.   <action>http://my-domain/location.htm</action>
  3.   <formItem item_type="text">
  4.   <name>s</name>
  5.   </formItem>
  6.   <formItem item_type="submit">
  7.   <name>Search</name>
  8.   </formItem>
  9.   </form>
  10.   </cell>
..snip..

Attributes


class


Specify a class for your form item so that you can use a style sheet to change the way it looks.

Example:

<formItem class="formItemClass">
<url>http://your-domain.com/file1.xml</url>
</formItem>

item_type


Defines the type of form element.

Options:

ValueUsage
textRenders a text input field
passwordRenders a password input field
submitSubmit button for the form
textareaMultiline text entry element
checkboxCheckbox form field
fileRender a file upload field
selectDropdown menu
hiddenHidden form field
titleAdds some text to the form without creating any control elements
menuselectorSeries of radio buttons populated by the menu created in
Canvas™
menudropSelect element with values populated by the menu created in
Canvas™

Example:

<formItem item_type="text">
<url>http://your-domain.com/file1.xml</url>
</formItem>

menu_id


Use a menu created within Wapple Canvas™ as the source data for a "menuselector" or "menudrop" form item. This attribute will only accept menu ids created in Wapple Canvas.

Example:

<formItem item_type="menuselector" menu_id="12345">
</formItem>

Child Elements


label


The label associated with your form item. This might describe what the form item actually is asking the end user.

Example:

<formItem item_type="text">
<label>My Form Label</label>
</formItem>


Nb. If the item_type is "submit", the <label> element will appear as the value inside the button.

name


The name of the variable associated with the form item and its resulting _POST. The name defined here will be used when the value is posted to your processing script.

Example:

<formItem item_type="text">
<name>name</name>
</formItem>

value


A pre-populated value for the form item. This can be used as the text on a submit button, and a default value for select and checkbox items (0 or 1 for checkboxes).

Example:

<formItem item_type="text">
<value>a default value</value>
</formItem>

possibility


When using an item_type of "select", you can specify your options to appear in the drop down list by using a <possibility> element. To specify more than 1 option, list the possibilities underneath each other.

Example:

<formItem item_type="select">
<possibility>
<label>Option 1</label>
<value>1</value>
</possibility>
<possibility>
<label>Option 2</label>
<value>2</value>
</possibility>
</formItem>


input_mask


Set the default character input mode for a form item. You can choose whether the input accepts only numbers or alpha charcaters. This method uses the Wap-Input-Mask attribute.

Possible Values:
*A = Uppercase letters and symbolic
*a = Lowercase letters and symbolic
*N = Numbers only
n*N = Optional symbol then numbers only

Example:
<formItem item_type="text">
<name>ID</name>
<input_mask>*N</input_mask>
</formItem>


maxlength


Set the max number of characters to enter in an input field

Example:
<formItem item_type="text">
<name>ID</name>
<maxlength>2</maxlength>
</formItem>


Detailed Example


..snip..
  1.   <form>
  2.   <action>http://my-domain/location.htm</action>
  3.   <formItem item_type="hidden">
  4.   <name>hidden_field</name>
  5.   <value>xyz</value>
  6.   </formItem>
  7.   <formItem item_type="select">
  8.   <name>select_field</name>
  9.   <possibility>
  10.   <label>Option 1</label>
  11.   <value>1</value>
  12.   </possibility>
  13.   <possibility>
  14.   <label>Option 2</label>
  15.   <value>2</value>
  16.   </possibility>
  17.   </formItem>
  18.   <formItem item_type="text">
  19.   <name>ID</name>
  20.   <value></value>
  21.   <input_mask>*N</input_mask>
  22.   <maxlength>2</maxlength>
  23.   </formItem>
  24.   <formItem item_type="file">
  25.   <label>Upload a file</label>
  26.   <label_class>file_upload</label_class>
  27.   <name>FILE</name>
  28.   </formItem>
  29.   <formItem item_type="checkbox">
  30.   <name>check</name>
  31.   <value>1</value>
  32.   </formItem>
  33.   <formItem item_type="textarea">
  34.   <name>text</name>
  35.   <value>Please enter your text...</value>
  36.   </formItem>
  37.   <formItem item_type="password">
  38.   <name>pass</name>
..snip..

Contents