table of contents

XHTML-FML 1.0: Forms Markup Language

XHTML Modules for Dynamic Web Interfaces

This Version:
http://www.mozquito.org/xhtml-fml1/xhtml-fml10-990909.html
Previous Versions:
http://www.mozquito.org/xhtml-fml08/xhtml-fml08-990624.html
http://www.mozquito.org/fml05/fml05-990226.html
Editors:
Sebastian Schnitzenbaumer <schnitz@overflow.de>, Stack Overflow
Malte Wedel <malte@overflow.de>, Stack Overflow
Muditha Gunatilake, <mbh3gpa@afs.mcc.ac.uk>, Manchester University

Abstract

This specification defines XHTML-FML 1.0 which extends a subset of XHTML 1.1 [XHTML11] by a Forms Markup Language, based on the Modularization of XHTML [XMOD].

The document describes the semantics of the elements and attributes found in the Forms Markup Language (FML) in XHTML-FML. The XHTML semantics in XHTML-FML 1.0 are defined in the W3C Recommendation for HTML 4 [HTML4]. The purpose of FML is to improve the functionality and handling of web application interfaces in the tradition of the HTML 4.0 Forms tagset. FML focuses on dynamic web interfaces that cover multiple screen pages but originate from a single document, including input validation, navigation, event handling, template management and run-time calculations.

Status of this document

After several working drafts, this version of XHTML-FML marks a major milestone in Stack Overflow's effort to a simple but powerful markup language for richer web interfaces. XHTML-FML 1.0 as described in this document is fully implemented by Mozquito [MOZQUITO], making it possible to author and process XHTML-FML documents without modifications to the existing browser infrastructure.

The way in which XHTML-FML extends XHTML with new features is based on a series of recent W3C technologies. Some of these technologies are still works in progress. The authors of this document have constructed this hybrid markup language based on their best understanding of these W3C technologies and are looking forward to receiving further input.

Given that the documents collectively known as Modularization of XHTML are endorsed by the W3C as a Recommendation, XHTML-FML fully qualifies as a Member of the XHTML Family of Document Types.

Please send detailed comments on this document to editors@overflow.de. Public discussion on XHTML-FML features takes place on the mailing list xhtml@mozquito.org.

Contents

I. Preamble

I.I Why XHTML-FML?

It is not easy for web programmers to write HTML-based web interfaces. The current web forms in HTML have not been greatly improved to cope with the increasing demands since 1993, leaving it up to the programmer to manually enhance the functionality through scripting. Scripting can help sometimes, but not everyone is a JavaScript (ECMAScript) expert. Generating documents dynamically is extremely difficult when a substantial part of the document consists of script and not markup.

Stack Overflow felt the need for a more powerful forms language. HTML and Scripting is powerful but too costly for developing complex applications. The idea is to redefine the functionality available in JavaScript and beyond into a new markup language. This will keep the costs for authors down while offering richer features than is normally feasible in HTML.

The designers of XHTML-FML wanted to keep as close to HTML as possible to minimize the learning curve for authors. This approach is via a small set of modules. The FML modules are fully compatible with the modularization framework in XHTML and aim to provide a better alternative to HTML 4.0 forms, frames and scripting.

I.II New Features

XHTML-FML has real benefits for authors who want to construct sophisticated web forms and dynamic web pages comfortably using a markup language instead of tiresome cross-browser scripting.

  • Arbitrary screen pages in a single file
    In standard XHTML, a document can be of any length. A document that contains more information than a single screen page can display will automatically get scrollbars. With the FML extensions, it is possible to define any number of screen pages in a single document. You can build slideshows, multi-page forms or any other web page that needs to dynamically update the whole screen or parts of the screen based on the interactions with the user. Since everything is defined in a single file, all the pages defined in the file appear instantly without requesting the server. We call it a "stateful environment" because this feature allows you to maintain local state throughout a series of pages. The <x:toggle> tag is a scalable mechanism that has proven to be a more powerful alternative to frames in many scenarios.

  • Avoid repetition of similar markup constructs
    Documents often use the same chunks of markup code over and over again. With FML, you can define any combination of tags as a <x:template> within the XHTML-FML document. A template can be inserted with the <x:insert> tag at any point in the same document. The same template can be used multiple times. It is even possible to modify parts of the template when it is inserted, each instance being able to incorporate specific changes. The document is reduced in file size and is much easier to maintain.

  • Compute and display field calculations at run-time
    Imagine an order form where you could display the "total sum" of the orders immediately. Previously, calculations on the client using the values in form fields and the user's interactions were only possible with scripting - until now. The <x:calc> can be wrapped around any form field giving it the ability to reference other form fields or calc elements for interdependent field calculations. Additionally, the <x:textoutput> tag appears to the user as normal text, but internally behaves like any other form field. Changing the value of a textoutput will dynamically update the displayed text. This makes it possible to display the "total sum" as just plain text, unchangeable by the user, but able to submit its value back to the server with the rest of the form.

  • Input validation made easy
    Text input form fields allow the entry of any kind of text string, but it is often necessary to control the type of data entered by the user. On many of the currently used forms, we often find that these forms are being submitted to the server and then sent back again to the user because some fields were not filled out correctly. These "round-trips" to the server can be avoided. Input validation can now occur immediately while the user fills out a form. For this purpose, we have added two new attributes to the <x:textinput> element. If validation is set to "strict", the user is forced to enter the kind of data specified in the ctype (content type) attribute. If strict validation is desired, the user is forced to enter content of a specified type.

I.III Future Directions: XHTML Extended Forms

At the moment (the time this document is being published), the HTML Working Group is working on the next generation of web forms, XHTML Extended Forms (XForms). Stack Overflow has been playing an active role in this development and will continue to contribute to this effort.

The Forms Subgroup within the HTML Working Group has recently released the requirements for XHTML Extended Forms [XFORMSREQ]. XHTML-FML already provides the necessary functionality to satisfy a number of key requirements for XForms.

The positive response from authors on XHTML-FML has encouraged Stack Overflow to continue the development of XHTML-FML within the W3C, letting the new XForms benefit from the experience and feedback gained from XHTML-FML.

Since some of the concepts realized in XHTML-FML will continue to exist in XHTML Extended Forms, future versions of XHTML-FML will utilize modules from XForms as they become available. Although some modules in FML are likely to be replaced by XForms modules providing greater functionality, other parts of FML will continue to exist as extensions to XForms.

I.IV About this document: Namespaces, Modularization and Document Type

The Modularization of XHTML is a framework for the construction of XHTML family members. Extended Forms in XHTML will be defined as one or several modules that can be combined with the existing modules of XHTML 1.1. Prior to this, XHTML-FML will define a set of FML modules that can be used with XHTML 1.1.

XHTML-FML 1.0 introduces the following XHTML-conforming modules:

  • FML 1.0 Forms Markup Language Model (FML1-model.mod)
  • FML 1.0 Form Module (FML1-form.mod)
  • FML 1.0 Calculation Module (FML1-calc.mod)
  • FML 1.0 Toggle Module (FML1-model.mod)
  • FML 1.0 Image Module (FML1-image.mod)
  • FML 1.0 Template Module (FML1-template.mod)

The collection of names contained in the above FML modules define the FML Namespace. The FML Namespace is defined at the following URI:

  • http://www.mozquito.org/xhtml-fml1

Although the Forms Markup Language defines its own namespace, FML cannot exist as a stand-alone markup language. Rather, FML can be used in addition to other markup languages (e.g., SMIL) or any XHTML family member.

This document describes a specific combination of FML with XHTML. This specific combination is the XHTML-FML 1.0 Document Type. The XHTML-FML 1.0 Document Type is identified by the formal public identifier (FPI):

  • -//OVERFLOW//DTD XHTML-FML 1.0//EN

The FML Modules are currently implemented as XHTML-conforming DTD Modules. The DTD Modules attached to this document under Appendix A define the FML element names in their pure, uncolonized form under the FML Namespace. These modules are the basis for FML being used in a different context than XHTML-FML 1.0

The specific combination of XHTML and FML, XHTML-FML 1.0, described in this document assigns the character x as the namespace prefix for the FML names in XHTML-FML, the default namespace being the XHTML namespace. The XHTML-FML 1.0 DTD Driver and monolithic DTD under Appendix B in this document define the FML element names with this namespace prefix. The examples in this document show the FML element names in their colonized form, as defined in XHTML-FML 1.0. This document describes FML attributes, elements and event handler separetely to avoid redundancy; cross references are made where apprporiate.

I.IV.I Minimal XHTML-FML 1.0 Document

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//OVERFLOW//DTD XHTML-FML 1.0//EN"
"http://www.mozquito.org/dtd/xhtml-fml1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml1" xmlns:x="http://www.mozquito.org/xhtml-fml1">
<head>
<title>Untitled</title>
</head>
<body>

<x:form>
...
</x:form>

</body>
</html>

1. Form module

1.1 Form

1.1.1 Description

The <form> element is the outermost container of a form. Multiple forms are allowed in the same document.

The form element defines the action, encoding and method attributes in a form, as well as groups the form elements.

1.1.2 Content

plain text
inline elements
block elements
form elements

1.1.3 Attributes

ID
Action
Enctype
Method

1.1.3 Sample Code

<form id="foo" action="http://www.mozquito.org/servlets/Echo" method="post">
  ...
</form>

1.2 Button

1.2.1 Description

This element defines a push button. When a button is defined using Action Statements within its onclick event handler, the button triggers actions when the user pushes it.

1.2.2 Content

empty

1.2.3 Attributes

ID
Value
Style
Class
Onclick
Send
Mandatory

1.2.3 Sample Code

<button id="foo" value="bar" onclick="submit:MyForm" />

1.4 Textinput

1.3.1 Description

This defines an input field in the same way as the <input type="text">-element in HTML 4 Forms.

1.3.2 Content

empty

1.3.3 Attributes

ID
Value
style
Class
Size
Validation
Ctype
Send
Mandatory
Onchange
Onfocus
Onblur

1.3.3 Sample Code

<textinput id="foo" value="bar" ctype="url" validation="strict" />

1.3 Textoutput

1.4.1 Description

The textoutput element is the same as the textinput element, except that it is rendered as normal text and the user can not directly change the value of the "value" attribute. This is most useful when the "value" is changed either by a calc or by a toggle with the attribute shared="yes".

1.4.2 Content

empty

1.4.3 Attributes

ID
Value
Style
Class
Onclick
Send
Mandatory
Size

1.4.3 Sample Code

<textoutput id="foo" value="bar" />

1.5 Label

1.5.1 Description

The label element may be used to attach information to controls. Each label element is associated with exactly one form control. The for attribute associates a label with another control explicitly: the value of the for attribute must be the same as the value of the id attribute of the associated control element. More than one label may be associated with the same control by creating multiple references via the for attribute.

If mandatory is set to yes and the form control has a label then the alert will show a list of labels instead of IDs.

1.5.2 Content

plain text

1.5.3 Attributes

For

1.5.3 Sample Code

<x:label for="name">Your name</x:label>:
 <x:textinput id="name" size="30" send="true" mandatory="true" /><br />

1.6 Textarea

1.6.1 Description

Similar to <textarea> in HTML 4 forms, this element creates a textinput for entering text that extends over multiple rows. See also the HTML 4.01 specification.

1.6.2 Content

plain text

1.6.3 Attributes

ID
Value
Rows
Cols
Validation
Ctype
Style
Class
Send
Mandatory
Onchange
Onfocus
Onblur

1.6.3 Sample Code

<textarea id="foo" onchange="..." >
  Please enter text here...
</textarea>

1.7 Radio

1.7.1 Description

The radio element is very similar to the <input type="radio"> in HTML 4 Forms, except the <item> element is used to insert the values instead of having to use <input type="radio"> each time. Reason for this change: to make the grouping of radio buttons and the relationship between the button and its label more obvious, fascilitating among others web accessibility and device independence. See also the HTML 4.01 specification.

A list of radios allows the user to select a single item.

1.7.2 Content

inline elements
block elements
<x:item> element (at least one)

1.7.3 Attributes

ID
Value
Style
Class
Send
Mandatory

1.7.3 Sample Code

<radio id="foo">
  <item value="bar" onclick="...">
    ...
  </item>
  ...
</radio>

1.8 Checkbox

1.8.1 Description

The checkbox element is very similar to the <input type="checkbox"> in HTML 3.2 Forms, except the <item> element is used to insert the values instead of having to use <input type="checkbox"> each time. Reason for this change: to make the grouping of checkbox buttons and the relationship between the button and its label more obvious, fascilitating among others web accessibility and device independence. See also the HTML 4.01 specification.

A list of checkboxes allows the user to select several items.

1.8.2 Content

inline elements
block elements
<x:item> element (at least one)

1.8.3 Attributes

ID
Value
Style
Class
Send
Mandatory

1.8.3 Sample Code

<checkbox id="foo">
  <item value="bar">Check me!</item>
</checkbox>

1.9 Item

1.9.1 Description

The <item> element defines the items that appear within the radio/checkbox form control instead of using HTML 4´s radio/checkbox element each time. Please avoid confusion between HTML 4 radio and FML radio. See also the HTML 4.01 specification.

1.9.2 Content

inline elements
plain text

1.9.3 Attributes

ID
Value
Style
Class
Mandatory
Send
Checked
Onclick

1.9.3 Sample Code

<item value="bar" onclick="...">
  ...
</item>

1.10 Pulldown

1.10.1 Description

Although the functionality of pulldown is the same as for a <radio>, this form control is available to the user as a drop-down menu. See also the HTML 4.01 specification.

A list of options within a pulldown allows the user to select a single option.

1.10.2 Content

<x:option> element (at least one)

1.10.3 Attributes

ID
Value
Style
Class
Send
Mandatory
Onchange

1.10.3 Sample Code

<pulldown id="foo">
  <option value="1">one</option>
  <option value="2">two</option>
  ...
</pulldown>

1.11 Listbox

1.11.1 Description

Although the functionality of listbox is the same as for a <checkbox>, this form control is available to the user as a scrolled list box. See also the HTML 4.01 specification.

A list of options within a listbox allows the user to select several options.

1.11.2 Content

<x:option> element (at least one)

1.11.3 Attributes

ID
Value
Style
Class
Send
Mandatory
Rows
Onchange

1.11.3 Sample Code

<listbox id="foo">
  <option value="1">one</option>
  <option value="2">two</option>
  ...
</listbox>

1.12 Option

1.12.1 Description

The <option> element defines the items that appear within the listbox/pulldown form control.

1.12.2 Content

plain text

1.12.3 Attributes

ID
Value
Selected
Onclick

1.12.3 Sample Code

<x:listbox>
<option value="go" onclick="toggle:MyToggle,+">Go ahead!</option>
</x:listbox>

1.13 Hidden

1.13.1 Description

The <hidden> element is a standard form control without any visual appearance. Within a Toggle application, a <x:hidden> can, for example, take over the function of a placeholder in situations when nothing should be displayed.

1.13.2 Content

empty

1.13.3 Attributes

ID
Value

1.13.3 Sample Code

<hidden id="foo" value="remember this" />

2. Calc module

2.1 Calc

2.1.1 Description

The <calc> element enables a client-side calculation using a mathematical expression and the values of other form elements. The result can then be given to a <x:textoutput> that is nested within the calc.

2.1.2 Content

form controls

2.1.3 Attributes

ID
Term
Value
Digits
Send

2.1.3 Sample Code

<calc id="foo" term="field1 * field2">
  <textoutput />
</calc>

3. Image module

3.1 Img

3.1.1 Description

The <img> element embeds an image in the document at the location where the element is defined. It is mostly the same as in HTML 4.0, except for the addition of the preload attribute. This is needed to load images before the screen page finishes being displayed, since FML documents can contain multiple screen pages in a single document.

3.1.2 Content

empty

3.1.3 Attributes

ID
Src
Alt
Width
Height
Align
Onclick
Preload

3.1.3 Sample Code

  <img id="foo" src="http://www.server.ext/MyImage.gif" alt="My Image" preload="yes" onclick="..." />

4. Template module

4.1 Template

4.1.1 Description

The <template> element marks out a section of elements or tagset which will appear repeatedly in the document. The template is defined only once and invoked with the <insert> element as often as needed. Inside the template placeholders can be defined using strings enclosed in pipes ("|").

4.1.2 Content

plain text
block elements
inline elements
<tr>
<td>
<x:tg>

4.1.3 Attributes

ID

4.1.3 Sample Code

<template id="foo">
  <textinput value="|repl|" />
  ...
</template>

4.2 Insert

4.2.1 Description

The <insert> element pastes a predefined template in the position where the insert is specified.

4.2.2 Content

<x:prop>

4.2.3 Attributes

ID
Template

4.2.3 Sample Code

<insert template="foo">
  <prop name="repl">
    content to fill in...
  </prop>
  ...
</insert>

4.3 Prop

4.3.1 Description

The content of the <prop> element changes a placeholder in a predefined template when the template is inserted into a location defined by an <insert>.

4.3.2 Content

plain text

4.3.3 Attributes

ID
Name

4.3.3 Sample Code

<insert template="foo">
  <prop name="repl">
    content to fill in...
  </prop>
  ...
</insert>

5. Toggle module

5.1 Toggle

5.1.1 Description

The <toggle> element is used to switch through multiple parts of a document or even pages without requesting new data from the server. All the data is contained in the document, but not all of it is displayed until it becomes active through an event activated by toggling.

5.1.2 Content

form controles
<x:tg>
<x:insert>
<x:img>

5.1.3 Attributes

ID
Value
shared

5.1.3 Sample Code

<toggle id="no1">
  <img src="..." alt="First image" id="img1" />
  <img src="..." alt="Second image" id="img2" />
</toggle>

5.2 Tg

5.2.1 Description

Within a <tg> (toggle group), arbitrary elements that behave as one group when toggled are defined.

5.1.2 Content

plain text

5.2.3 Attributes

ID
Style
Class

5.2.3 Sample Code

<toggle id="togglegroup">
  <tg id="img1">
    Title of first image:
    <img src="..." alt="First image" id="img1" />
  </tg>
  <tg id="img2">
    Title of second image<
    <img src="..." alt="Second image" id="img2" />
  </tg>
</toggle>

6. Attributes / Event Handler


6.1 ID

6.1.1 Description

Unique identifier. The ID attribute corresponds to the ID attribute type as defined in XML. IDs provide a means to unambiguously identify element instances. In the FML context, the ID replaces the HTML FORM "name" (see HTML 4.01 Specification). Allowed values: subject to XML ID restrictions.

6.1.2 Used in following elements:

6.1.3 Sample Code

<x:button id="foo" />


6.2 Value

6.2.1 Description

Attribute containing the value of the element corresponds to HTML 4.01 form values (reference see previous). Typically this value is sent back to the server. Allowed types: plain text.

6.2.2 Used in following elements:

6.2.3 Sample Code

<x:textoutput id="foo" value="click here" />


6.3 Style

6.3.1 Description

The style attribute for CSS-statements. as reference see HTML 4.01. specification. Allowed types: plain text, though only legal CSS statements will produce an effect (see also CSS specification).

6.3.2 Used in following elements:

6.3.3 Sample Code

<x:tg id="foo" style="font-family:Arial;" />Attention!</x:tg>


6.4 Class

6.4.1 Description

The class attribute for CSS statements. See HTML 4.01. Allowed types: plain text, though only legal CSS statements will produce an effect (see also CSS specification).

6.4.2 Used in following elements:

6.4.3 Sample Code

<x:textoutput id="foo" value="Next" class="footer" onclick="toggle:chapter1,+;" />


6.5 Ctype

6.5.1 Description

It is technically very difficult to check whether an e-mail address is not only syntactically correct but also valid. The only reliable method is to send an e-mail to the address and ask the receiver to reply. xxxxxx ANFANG Dennoch ermöglicht das ctype attribute eine clientseitige Vorab-Prüfung der Eingabe. So muss zum Beispiel ein @ dabei sein, um die Voraussetzungen des ctype-typus email zu erfüllen. xxxxxx ENDE

The ctype attribute allows the choice of a predefined input validation type:

  • 'email' (e.g., john@doe.com)
  • 'text' (for non-numeric text strings)
  • 'num' (for numbers only)
  • 'date' (for dates of type: DD.MM.YY / DD.MM.YYYY / DD/MM/YY / DD/MM/YYYY)
  • 'url' (e.g., http://www.domain.com)
  • 'www' (e.g., www.domain.com)
  • 'creditcard' (for the 15 or 16 digits of a credit card number)
  • 'expiredate' (for the credit card expiry date of the type: MM/YY)
  • 'all' (input anything) - default setting.

    • 6.5.2 Used in following elements:

    6.5.3 Sample Code

    <x:textinput id="foo" value="Enter here..." ctype="email" validation="strict" />


    6.6 Validation

    6.6.1 Description

    xxxxxx ANFANG In Beziehung zu ctype kann dieses Attribut die "Strenge" der ctype Validierung bestimmen. xxxxxx ENDE There are two levels of validation: strict and loose. Once the user hits the OK button in the validation alert, the incorrect data is deleted.

    If validation is set to strict, the user must either enter data matching the validation criteria or no data at all.

    When validation is set to loose, the incorrect data still remains in the form control after the alert has appeared. The user is informed that the data is incorrect but can still proceed and leave the data as it is.

    Legal entry: loose / strict / none. Default: none.

    6.6.2 Used in following elements:

    6.6.3 Sample Code

    <x:textinput id="foo" value="Enter here..." ctype="email" validation="strict" />


    6.7 Size

    6.7.1 Description

    This attribute defines the width of a textinput in characters (legal entry: numbers).

    6.7.2 Used in following elements:

    6.7.3 Sample Code

    <x:textinput id="foo" value="Enter here!" size="12" />


    6.8 Rows

    6.8.1 Description

    The vertical size of a textarea or listbox is expressed in number of rows. A row is one line of text. Legal entry: numbers.

    6.8.2 Used in following elements:

    6.8.3 Sample Code

    <x:listbox id="foo" rows="6" cols="8" />


    6.9 Cols

    6.9.1 Description

    The horizontal size of a textarea is expressed in number of characters. Legal entry: numbers.

    6.9.2 Used in following elements:

    6.9.3 Sample Code

    <x:textarea id="foo" rows="6" cols="8">Enter here...</x:textarea>


    6.10 Send

    6.10.1 Description

    The send attribute defines whether the value of a form element will be sent back to the server or not on pressing the submit button. Legal entry: yes/no (default: yes).

    6.10.2 Used in following elements:

    6.10.3 Sample Code

    Your name:
<x:textinput id="name" size="30" send="yes" />


    6.11 Mandatory

    6.11.1 Description

    This attribute specifies the form element as 'required'. xxxxxx ANFANG Der Benutzer muss bei diesen entsprechenden Form Feldern einen Eintrag tätigen, da sonst das Formular nicht absendbar ist. xxxxxx ENDE Legal entry: yes/no (default: no)

    6.11.2 Used in following elements:

    6.11.3 Sample Code

    <x:textinput id="name" size="30" send="true" mandatory="yes" />


    6.12 Checked

    6.12.1 Description

    Marks the <item> within a radio or checkbox element as 'checked'. Legal entry: yes/no. Default: no.

    6.12.2 Used in following elements:

    6.12.3 Sample Code

    <x:radio id="foo" >
 <x:item checked="yes">Version 1</x:item>
 <x:item>Version 2</x:item>
</x:radio>


    6.13 Selected

    6.13.1 Description

    Marks the <option> within a pulldown or listbox element as 'selected'. Legal entry: yes/no. Default: no.

    6.13.2 Used in following elements:

    6.13.3 Sample Code

    <x:listbox id="foo" >
 <x:option selected="yes">Version 1</x:option>
 <x:option>Version 2</x:option>
</x:listbox>


    6.14 Action

    6.14.1 Description

    This attribute specifies a form processing agent (legal entry: URI).
    For reference see also: http://www.w3.org/TR/html401/interact/forms.html

    6.14.2 Used in following elements:

    6.14.3 Sample Code

    <x:form id="orderform" action="http://www.mozquito.org/servlets/Echo" />


    6.15 Method

    6.15.1 Description

    This attribute specifies which HTTP method will be used to submit the form data set. Possible (case-insensitive) values are "get" (the default) and "post".

    6.15.2 Used in following elements:

    6.15.3 Sample Code

    <x:form id="orderform" action="http://www.mozquito.org/servlets/Echo" method="post" />


    6.16 Enctype

    6.16.1 Description

    This attribute specifies the content type used to submit the form to the server (when the value of method is "post"). The default value for this attribute is "application/x-www-form-urlencoded".

    6.16.2 Used in following elements:

    6.16.3 Sample Code

    <x:form id="orderform" action="http://www.mozquito.org/servlets/Echo"
method="post" enctype="application/x-www-form-urlencoded" />


    6.17 For

    6.17.1 Description

    This attribute explicitly associates the <label> being defined with another control. When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. When absent, the <label> being defined is associated with the element's contents.

    The value of the for attribute is the same as the associated form control’s ID. Legal value: ID reference (see specification as with ID attribute.

    6.17.2 Used in following elements:

    6.17.3 Sample Code

    <x:label for="name">Your name</x:label>:


    6.18 Digits

    6.18.1 Description

    Within the calc element this attribute defines the number of digits in the results of a calculation. Valid entry: numbers.

    6.18.2 Used in following elements:

    6.18.3 Sample Code

    <x:calc id="sum" term="unitprice * quantity" send="true" digits="2">
 <x:textoutput />
</x:calc>


    6.19 Term

    6.19.1 Description

    The term attribute includes any mathematical expression with numbers and the IDs of other FML form controls. It can include every legal JavaScript term. In the term, JavaScript variables must be surrounded by spaces.

    6.19.2 Used in following elements:

    6.19.3 Sample Code

    <x:calc id="sum" term=" 138 + 14 " send="true">
 <x:textoutput />
</x:calc>


    6.20 Src

    6.20.1 Description

    This attribute specifies the location of an image file (legal entry: URI) due to the HTML 4 specification.

    6.20.2 Used in following elements:

    6.20.3 Sample Code

    <x:img id="foo" alt="Maggie Cheung" src="images/01.jpg" preload="yes" width="112" height="213" />


    6.21 Alt

    6.21.1 Description

    The alt attribute specifies alternate text that is displayed when the image cannot be displayed (legal entry: plain text). See HTML 4 specification.

    6.21.2 Used in following elements:

    6.21.3 Sample Code

    <x:img id="foo" alt="Anita Mui" src="images/02.jpg" preload="yes" width="112" height="213" />


    6.22. Width

    6.22.1 Description

    This defines the image width (optional but required when 'preload' is 'true'). Legal entry: numbers (+ units). Default: pixel. See HTML 4 specification.

    6.22.2 Used in following elements:

    6.22.3 Sample Code

    <x:img id="foo" alt="Michelle Yeoh" src="images/03.jpg" preload="yes" width="112" height="213" />


    6.23 Height

    6.23.1 Description

    This defines the height of the image (optional but required when 'preload' is 'true'). Legal entry: numbers (+ units). Default: pixel. See HTML 4 specification.

    6.23.2 Used in following elements:

    6.23.3 Sample Code

    <x:img id="foo" alt="Gong Li" src="images/04.jpg" preload="yes" width="112" height="213" />


    6.24 Align

    6.24.1 Description

    The align attribute specifies an alignment of the image in context (values: left, right, center). See HTML 4 specification.

    6.24.2 Used in following elements:

    6.24.3 Sample Code

    <x:img id="foo" alt="Joan Chen" src="images/05.jpg" preload="yes" width="112" height="213" />


    6.25 Preload

    6.25.1 Description

    The preload attribute specifies whether images should be loaded or not when the document is initially loaded (values: yes/no, default: no).

    6.25.2 Used in following elements:

    6.25.3 Sample Code

    <x:img id="foo" alt="Bai Ling" src="images/06.jpg" preload="yes" width="112" height="213" />


    6.26 Shared

    6.26.1 Description

    If shared is set to yes then all FML forms controls inside the toggle share the same value. If the value of one form control changes, the values of all other form controls are adjusted automatically.

    When the page visitor changes the value of the text input control, the value of the pulldown is changed automatically. Since the value is different than any of the given option's values, a new option is created.

    Legal entry: yes/no (default: no).

    6.26.2 Used in following elements:

    6.26.3 Sample Code

    <x:toggle id="openlist" shared="true">
 <x:textinput value="Enter here..." />
 <x:textoutput />
</x:toggle />


    6.27 Template

    6.27.1 Description

    The id of a predefined template. This attribute is used to identify which template is being referenced.

    6.27.2 Used in following elements:

    6.27.3 Sample Code

    <x:insert template="foo"></x:insert>


    6.28 Name

    6.28.1 Description

    Corresponds with the string enclosed within pipes ("|"), specified as a placeholder in the template. Legal entry: plain text.

    6.28.2 Used in following elements:

    6.28.3 Sample Code

    <x:insert template="foo">
 <prop name="birthday">13.4.1947</x:prop>
</x:insert>


    6.29 Onclick

    6.29.1 Description

    The onclick event occurs if the mouse button presses a button. The event handler onclick specifies what happens if the user pushes the button. If the form is to submit, the submit action statement is used as the value of the onclick attribute (submit:MyForm). After the submit key word and the colon, the ID of the form to be submitted must be given.

    6.29.2 Used in following elements:

    6.29.3 Sample Code

    <x:button id="foo" onclick="toggle:MyToggle,2;" />


    6.30 Onchange

    6.30.1 Description

    The onchange event handler is activated when you change the value either of a <x:textinput> or a <x:textarea> and exit the field. With that and with onclick you can easily toggle between <x:textinput> and <x:textoutput> if the content (value) has been changed.

    6.30.2 Used in following elements:

    6.30.3 Sample Code

    <x:textinput size="20" id="more" onchange="toggle:openlist" />


    6.31 Onfocus

    6.31.1 Description

    The onfocus event occurs when an element receives focus either by the pointing device or by tabbing navigation (e.g., the cursor is placed into a textinput element).

    6.31.2 Used in following elements:

    6.31.3 Sample Code

    <x:textarea id="foo" onfocus="validate;" />


    6.32 Onblur

    6.32.1 Description

    The onblur event occurs when an element loses focus either by the pointing device or by tabbing navigation. It may be used with the same elements as onfocus.

    6.32.2 Used in following elements:

    6.32.3 Sample Code

    <x:textinput id="foo" onblur="validate;" />


    6.33 Onshow

    6.33.1 Description

    XXXXXX ANFANG

    Das Attribut onshow bestimmt, wie sich ein Toggle zu verhalten hat in dem Augenblick in dem das Element, das onshow in sich trägt auf dem Monitor erscheint. So kann zum Beispiel in einem Ablauf, der durch einen Forwärts- und Rückwärtsbutton gesteuert wird erreicht werden, dass zu Beginn des Ablaufs der Rückwärtsbutton nicht angezeigt wird und am ende der Vorwärtsbutton verschwindet.

    ENDE xxxxxx

    6.33.2 Used in following elements:

    6.33.3 Sample Code

    <x:onshow="toggle:backbutton;" />


    6.34 Onhide

    6.34.1 Description

    XXXXXX ANFANG

    Das Attribut onhide bestimmt, wie sich ein Toggle zu verhalten hat in dem Augenblick in dem das Element, das onhide in sich trägt wieder vom Monitor verschwindet. So kann zum Beispiel in einem Ablauf, der durch einen Forwärts- und Rückwärtsbutton gesteuert wird erreicht werden, dass zu Beginn des Ablaufs der Rückwärtsbutton nicht angezeigt wird und am Ende der Vorwärtsbutton verschwindet.

    ENDE xxxxxx

    6.34.2 Used in following elements:

    6.34.3 Sample Code

    <x:onhide="toggle:backbutton;" />


    7. Action statements

    All action statements can appear as the value of an event handler attribute.

    An example of syntax: <textinput onchange="action:statement" />

    7.1 toggle

    7.1.1 Description

    This action statement tells toggle element to switch to the next phase. Within an event handler, the id of the referenced toggle element is given after the action keyword toggle:. After the id string, it is possible to define which toggle group within the toggle element should be displayed. Every element or toggle group nested within a toggle is indexed as an array, where the first element has the index "0". Instead of telling the toggle where to jump directly by providing the desired element's array index, it also possible to toggle back and forth through the array with "-" and "+".

    7.1.2 Sample Code

    <toggle id="images">
  <img src="..." alt="First image" id="img1" />
  <img src="..." alt="Second image" id="img2" />
  <img src="..." alt="Third image" id="img3" />
</toggle>
<button value="show next image" onclick="toggle:images,+" />
<button value="show previous image" onclick="toggle:images,-" />
<button value="show first image" onclick="toggle:images,0" />
<button value="show third image" onclick="toggle:images,2" />

    7.2 setval

    7.2.1 Description

    The setval action is used to change the value of a form control with an event handler. With this action statement, it is possible to modify any value immediately.

    7.2.1 Sample Code

    <textoutput id="MyString" value="Hello World" />
  ...
<button value="Change" onclick="setval:MyString,Hello Again!" />

    7.3 reset

    7.3.1 Description

    The reset action changes the values of all form controls to their default value. This is similar to the <input type="reset"> button in HTML 4 Forms.

    See also HTML 4.01 reference.

    7.3.2 Sample Code

    <form id="MyForm">
  ...
<button value="Reset" onclick="reset:MyForm" />
</form<

    7.4 submit

    7.4.1 Description

    The reset action submits the form to the specified location defined in the action attribute of the form. This is similar to the <input type="submit"> button in HTML 4 Forms.

    See also HTML 4.01 reference.

    7.4.2 Sample Code

    <form id="MyForm">
  ...
  <button value="Submit!" onclick="submit:MyForm" />
</form>

    7.5 alert

    7.5.1 Description

    The alert action displays an alert dialog window when triggered. The user must click on the "OK" button of the alert window to proceed.

    7.5.2 Sample Code

    <button value="Alert" onclick="alert:This message appears!" />

    7.6 prompt

    7.6.1 Description

    The prompt specifies a prompt string for the input field. It creates a single input text string. This is used for adding a "free input" option to pulldowns and listboxes.

    7.5.2 Sample Code

    <listbox id="food">
<option>Steak</option>
<option>Sushi</option>
<option>Vegetables</option>
<option>Burger</option>
<option onclick="prompt:food,It's your turn!">[ - your entry - ]</option>
</listbox>

    Appendix A: FML 1.0 DTD Modules

    A.1 FML 1.0 Forms Markup Language Model

    <!-- ...................................................................... -->
<!-- FML 1.0 Forms Markup Language Model   ................................ -->
<!-- file: FML1-model.mod

     Copyright 1999 Stack Overflow AG, All Rights Reserved.
     Revision: FML1-model.mod, v1.0.3 1999/10/08 18:06:27

     This DTD module is identified by the PUBLIC and SYSTEM identifiers:

     PUBLIC "-//OVERFLOW//ELEMENTS FML 1.0 FML Document Model//EN"
     SYSTEM "FML1-model.mod"

     Revisions:
     ....................................................................... -->

<!ENTITY % Table.content "( caption?, ( col* | colgroup* ), (( thead?, tfoot?, tbody+ ) | ( tr | insert )+))">

<!ENTITY % Tbody.content "(( tr | insert )+)">

<!ENTITY % Thead.content "(( tr | insert )+)">

<!ENTITY % Tr.content "(( th | td | insert )+)">

<!ENTITY % Inline.extra
    "| textinput | pulldown | listbox | textoutput | textarea
     | radio | checkbox | calc | hidden | button | label" >

<!ENTITY % Inlspecial.class "| img | map | applet" >

<!ENTITY % Block.extra  "| table | template | insert | toggle | form" >


<!-- end of FML1-model.mod -->

    A.2 FML 1.0 Form Module

    <!-- ...................................................................... -->
<!-- FML 1.0 Form Module  ................................................. -->
<!-- file: FML1-form.mod

     Copyright 1999 Stack Overflow AG, All Rights Reserved.
     Revision: FML1-form.mod, v1.0.5 1999/10/08 18:06:20

     This DTD module is identified by the PUBLIC and SYSTEM identifiers:

     PUBLIC "-//OVERFLOW//ELEMENTS FML 1.0 FORM//EN"
     SYSTEM "FML1-form.mod"

     Revisions:
     ....................................................................... -->

<!-- %Block-noform.mix; includes all non-form block elements,
     plus %Misc.class;
-->
<!ENTITY % Block-noform.mix
     "%Heading.class;
      | %List.class;
      | %Blkstruct.class;
      %Blkphras.class;
      %Blkpres.class;
      | table
      %Misc.class;"
>

<!-- Common Form Attributes ............................ -->

<!ENTITY % Form.attrib
     "id           ID                       #IMPLIED
      class        CDATA                    #IMPLIED
      value        CDATA                    #IMPLIED
      mandatory    CDATA                    #IMPLIED
      send         CDATA                    #IMPLIED"
>

<!ENTITY % FormStyle.attrib
     "style        CDATA                    #IMPLIED"
>

<!ENTITY % FormValidation.attrib
     "ctype        CDATA                    #IMPLIED
      validation   CDATA                    #IMPLIED"
>

<!ENTITY % Formctrl.class
     "button |textinput |textarea |radio |checkbox
      |pulldown |listbox |hidden |textoutput |calc
      |toggle |template |insert |prop"
>

<!ENTITY % Form.content
     "(#PCDATA
      |%Inline.class;
      |%Block-noform.mix;
      |%Formctrl.class; )*"
>

<!-- form: Form Element ................................ -->

<!-- form elements should never be nested
-->
<!ELEMENT form %Form.content;
>
<!ATTLIST form
      id           ID                       #IMPLIED
      action       %URI.datatype;           #IMPLIED
      method       ( get | post )           'post'
      enctype      %ContentType.datatype;   "application/x-www-form-urlencoded"
>

<!ELEMENT button  EMPTY
>
<!ATTLIST button
      %Form.attrib;
      %FormStyle.attrib;
      onclick      CDATA                    #IMPLIED
>

<!ELEMENT textinput  EMPTY
>
<!ATTLIST textinput
      %Form.attrib;
      %FormStyle.attrib;
      %FormValidation.attrib;
      size         CDATA                    #IMPLIED
      onchange     CDATA                    #IMPLIED
      onblur       CDATA                    #IMPLIED
      onfocus      CDATA                    #IMPLIED
>

<!ELEMENT textarea  (#PCDATA)
>
<!ATTLIST textarea
      %Form.attrib;
      %FormStyle.attrib;
      %FormValidation.attrib;
      rows         CDATA                    #IMPLIED
      cols         CDATA                    #IMPLIED
      onchange     CDATA                    #IMPLIED
      onblur       CDATA                    #IMPLIED
      onfocus      CDATA                    #IMPLIED
>

<!ELEMENT hidden  EMPTY
>
<!ATTLIST hidden
      id           ID                       #IMPLIED
      value        CDATA                    #IMPLIED
>

<!ELEMENT textoutput  EMPTY
>
<!ATTLIST textoutput
      %Form.attrib;
      %FormStyle.attrib;
      size         CDATA                    #IMPLIED
      onclick      CDATA                    #IMPLIED
>

<!ELEMENT radio  ( %Inline.mix; | item )*
>
<!ATTLIST radio
      %Form.attrib;
>

<!ELEMENT checkbox  ( %Inline.mix; | item )*
>
<!ATTLIST checkbox
      %Form.attrib;
>

<!ELEMENT item  ( #PCDATA | %Inline.mix; )*
>
<!ATTLIST item
      %Form.attrib;
      %FormStyle.attrib;
      type         CDATA                    #IMPLIED
      checked      CDATA                    #IMPLIED
      onclick      CDATA                    #IMPLIED
>

<!ELEMENT listbox  ( option )*
>
<!ATTLIST listbox
      %Form.attrib;
      %FormStyle.attrib;
      rows         CDATA                    #IMPLIED
      multiple     CDATA                    #IMPLIED
      onchange     CDATA                    #IMPLIED
>

<!ELEMENT pulldown  ( option )*
>
<!ATTLIST pulldown
      %Form.attrib;
      %FormStyle.attrib;
      size         CDATA                    #IMPLIED
      multiple     CDATA                    #IMPLIED
      onchange     CDATA                    #IMPLIED
>

<!ELEMENT option  (#PCDATA)
>
<!ATTLIST option
      id           CDATA                    #IMPLIED
      value        CDATA                    #IMPLIED
      selected     CDATA                    #IMPLIED
      onclick      CDATA                    #IMPLIED
>

<!ELEMENT label  (#PCDATA)
>
<!ATTLIST label
      id           ID                       #IMPLIED
      for          CDATA                    #IMPLIED
>


<!-- end of FML1-form.mod -->

    A.3 FML 1.0 Calculation Module

    <!-- ...................................................................... -->
<!-- FML 1.0 Calculation Module  .......................................... -->
<!-- file: FML1-calc.mod

     Copyright 1999 Stack Overflow AG, All Rights Reserved.
     Revision: FML1-calc.mod, v1.0.2 1999/10/08 18:06:11

     This DTD module is identified by the PUBLIC and SYSTEM identifiers:

     PUBLIC "-//OVERFLOW//ELEMENTS FML 1.0 CALC//EN"
     SYSTEM "FML1-calc.mod"

     Revisions:
     ....................................................................... -->

<!ELEMENT calc  ( %Formctrl.class; )
>
<!ATTLIST calc
      %Form.attrib;
      %FormStyle.attrib;
      term         CDATA                    #REQUIRED
      digits       CDATA                    #IMPLIED
>

<!-- end of FML1-calc.mod -->

    A.4 FML 1.0 Toggle Module

    <!-- ...................................................................... -->
<!-- FML 1.0 Toggle Module  ............................................... -->
<!-- file: FML1-toggle.mod

     Copyright 1999 Stack Overflow AG, All Rights Reserved.
     Revision: FML1-toggle.mod, v1.0.2 1999/10/08 18:06:22


     This DTD module is identified by the PUBLIC and SYSTEM identifiers:

     PUBLIC "-//OVERFLOW//ELEMENTS FML 1.0 TOGGLE//EN"
     SYSTEM "FML1-toggle.mod"

     Revisions:
     ....................................................................... -->

<!ELEMENT toggle  ( tg | img | insert | %Formctrl.class; )*
>
<!ATTLIST toggle
      id           ID                       #IMPLIED
      shared       CDATA                    #IMPLIED
      mode         CDATA                    #IMPLIED
      send         CDATA                    #IMPLIED
>

<!ELEMENT tg  ( #PCDATA | %Flow.mix; )*
>
<!ATTLIST tg
      id           ID                       #IMPLIED
      onhide       CDATA                    #IMPLIED
      onshow       CDATA                    #IMPLIED
      style        CDATA                    #IMPLIED
      class        CDATA                    #IMPLIED
>

<!-- end of FML1-toggle.mod -->

    A.5 FML 1.0 Image Module

    <!-- ...................................................................... -->
<!-- FML 1.0 Image Module  ............................................. -->
<!-- file: FML1-image.mod

     Copyright 1999 Stack Overflow AG, All Rights Reserved.
     Revision: FML1-image.mod, v1.0.2 1999/10/07 11:42:46

     This DTD module is identified by the PUBLIC and SYSTEM identifiers:

     PUBLIC "-//OVERFLOW//ELEMENTS FML 1.0 IMAGE//EN"
     SYSTEM "FML1-image.mod"

     Revisions:
     ....................................................................... -->

<!ENTITY % ImgAlign.attrval  "(left|right|center)" >

<!ENTITY % Img.content  "EMPTY" >
<!ELEMENT img  %Img.content; >
<!ATTLIST img
      %Common.attrib;
      src          %URI.datatype;           #REQUIRED
      alt          %Text.datatype;          #REQUIRED
      height       %Length.datatype;        #IMPLIED
      width        %Length.datatype;        #IMPLIED
      align        %ImgAlign.attrval;       #IMPLIED
      preload      CDATA                    #IMPLIED
>

<!-- end of FML1-image.mod -->

    A.6 FML 1.0 Template Module

    <!-- ...................................................................... -->
<!-- FML 1.0 Template Module  ............................................. -->
<!-- file: FML1-template.mod

     Copyright 1999 Stack Overflow AG, All Rights Reserved.
     Revision: FML1-template.mod, v1.0.2 1999/10/07 11:42:31

     This DTD module is identified by the PUBLIC and SYSTEM identifiers:

     PUBLIC "-//OVERFLOW//ELEMENTS FML 1.0 TEMPLATE//EN"
     SYSTEM "FML1-template.mod"

     Revisions:
     ....................................................................... -->

<!ENTITY % Template.content
     "( #PCDATA | tr | td | tg
      | %Inline.class; | %Block.mix; )*"
>

<!ELEMENT template  %Template.content; >
<!ATTLIST template
      name         CDATA                    #IMPLIED
      id           ID                       #REQUIRED
>

<!ELEMENT insert        (prop*)>
<!ATTLIST insert
      name         CDATA                    #IMPLIED
      id           ID                       #REQUIRED
      template     CDATA                    #REQUIRED
>

<!ELEMENT prop          (#PCDATA)>
<!ATTLIST prop
      id           ID                       #IMPLIED
      name         CDATA                    #IMPLIED
>

<!-- end of FML1-template.mod -->

    Appendix B: XHTML-FML 1.0 Document Type Definition

    B.1 XHTML-FML 1.0 DTD Driver

    <!-- ....................................................................... -->
<!-- XHTML-FML 1.0 DTD  .................................................... -->
<!-- file: xhtml-fml1.dtd
-->

<!-- XHTML Forms Markup Language (XHTML-FML) 1.0

     This is XHTML-FML 1.0, a modularization-based extended subset of XHTML 1.1.

     Copyright 1998-1999 Stack Overflow AG, Munich.

     Permission to use, copy, modify and distribute the XHTML-FML 1.0 DTD and
     its accompanying documentation for any purpose and without fee is
     hereby granted in perpetuity, provided that the above copyright notice
     and this paragraph appear in all copies.  The copyright holders make
     no representation about the suitability of the DTD for any purpose.

     It is provided "as is" without expressed or implied warranty.

     Authors:    Malte Wedel <malte@overflow.de>
                 Sebastian Schnitzenbaumer <schnitz@overflow.de>
                 Murray M. Altheim <altheim@eng.sun.com>

-->
<!-- This is the driver file for version 1.0 of the XHTML-FML DTD.

     Please use this formal public identifier to identify it:

         "-//OVERFLOW//DTD XHTML-FML 1.0//EN"

     Please use this URI to identify the default namespace:

         "http://www.w3.org/TR/xhtml1"

     Please use this URI to identify the FML namespace in XHTML-FML:

         "http://www.mozquito.org/xhtml-fml1"

     For example, if you are using XHTML-FML 1.0 directly, use the FPI
     in the DOCTYPE declaration, with the xmlns attributes on the
     document element to identify the namespaces:

         <?xml version="1.0"?>
         <!DOCTYPE html PUBLIC "-//OVERFLOW//DTD XHTML-FML 1.0//EN"
                               "http://www.mozquito.org/dtd/xhtml-fml1.dtd" >
         <html xmlns="http://www.w3.org/TR/xhtml1"
               xmlns:x="http://www.mozquito.org/xhtml-fml1"
               xml:lang="en" >
         ...
         </html>

     Revisions:
     (none)
-->

<!ENTITY % XHTML.ns "http://www.w3.org/TR/xhtml1" >
<!ENTITY % HTML.version "" >

<!ENTITY % xhtml-applet.module "IGNORE" >
<!ENTITY % xhtml-script.module "IGNORE" >
<!ENTITY % xhtml-object.module "IGNORE" >
<!ENTITY % xhtml-image.module  "IGNORE" >

<!ENTITY % xhtml-form.module   "IGNORE" >

<!ENTITY % FML1-model.mod
     PUBLIC "-//OVERFLOW//ELEMENTS FML 1.0 MODEL//EN"
            "FML1-model.mod" >
%FML1-model.mod;

<!ENTITY % XHTML1-transitional
     PUBLIC "-//W3C//XHTML 1.0 Transitional//EN"
            "xhtml1-t.dtd" >
%XHTML1-transitional;

<!ENTITY % FML1-form.mod
     PUBLIC "-//OVERFLOW//ELEMENTS FML 1.0 FORM//EN"
            "FML1-form.mod" >
%FML1-form.mod;

<!ENTITY % FML1-calc.mod
     PUBLIC "-//OVERFLOW//ELEMENTS FML 1.0 CALC//EN"
            "FML1-calc.mod" >
%FML1-calc.mod;

<!ENTITY % FML1-template.mod
     PUBLIC "-//OVERFLOW//ELEMENTS FML 1.0 TEMPLATE//EN"
            "FML1-template.mod" >
%FML1-template.mod;

<!ENTITY % FML1-toggle.mod
     PUBLIC "-//OVERFLOW//ELEMENTS FML 1.0 TOGGLE//EN"
            "FML1-toggle.mod" >
%FML1-toggle.mod;

<!ENTITY % FML1-image.mod
     PUBLIC "-//OVERFLOW//ELEMENTS FML 1.0 IMG//EN"
            "FML1-image.mod" >
%FML1-image.mod;

<!-- end of XHTML-FML 1.0 DTD  ............................................ -->
<!-- ...................................................................... -->

    B.2 XHTML-FML 1.0 Monolithic DTD

    (link)

    Appendix C: Sample XHTML-FML 1.0 Document

    <?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//OVERFLOW//DTD XHTML-FML 0.8//EN"
"http://www.mozquito.org/dtd/xhtml-fml08.dtd">
<html xmlns="http://www.mozquito.org/xhtml-fml08">
<head>
<title>Order Form</title>
</head>
<body>

<template id="order_product">
  <textoutput id="product" value="product |name|" />
  <textoutput id="price_|name|" value="|price|" />
  <pulldown id="amount_|name|">
    <option id="0" value="1">one</option>
    <option id="1" value="2">two</option>
    <option id="2" value="3">three</option>
    <option id="3" value="4">four</option>
    <option id="4" value="5">five</option>
  </pulldown>
  <calc term="price_|name| * amount_|name|">
    <textoutput id="sum" size="10" />
  </calc>
</template>

<form id="shop">

  name:
  <textinput id="name" mandatory="yes" size="20" />
  adress:
  <textinput id="adress" mandatory="no" size="20" />
  e-mail:
  <textinput id="email" ctype="email" validation="strict" mandatory="yes" size="20" />

  payment method:
  <radio id="payment">
    <item id="credit" value="credit" onclick="toggle:payinp,1;">credit card</item>
    <item id="credit" value="transact" onclick="toggle:payinp,2;">transaction</item>
  </radio>

  <toggle id="payinp">
    <tg id="0">
      card number:
      <textinput id="cardnum" ctype="creditcard" size="16" />
      valid until:
      <textinput id="valid" ctype="sdate" size="5" />
    </tg>
    <tg id="1">
      account:
      <textinput id="account" ctype="bankaccount" size="16" />
      bank:
      <textinput id="bank" size="20" />
    </tg>
  </toggle>

  your order:
  <insert template="order_product">
    <prop name="name">one</prop>
    <prop name="price">9.99</prop>
  </insert>
  <insert template="order_product">
    <prop name="name">two</prop>
    <prop name="price">12.99</prop>
  </insert>

</form>

</body>
</html>
    HOME - MOZQUITO IN ACTION - THE CONCEPT - MOZQUITO FACTORY - DOWNLOAD/PURCHASE - DISCUSSION - DOCUMENTATION - F.A.Q. - XHTML NEWS - FEEDBACK


    copyright © 1999 Stack Overflow AG all rights reserved
    feedback to The MOZQUITO Team
    legal notices: terms and conditions
    last upate of http://www.mozquito.org/: Sunday, 24-Oct-1999 15:07:08 CEST




    This website was made with the Mozquito Factory and is valid XHTML