<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//MOZQUITO//DTD XHTML-FML 1.0//EN"
"http://www.mozquito.org/dtd/xhtml-fml1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:x="http://www.mozquito.org/xhtml-fml">
<head>
<title>XHTML-FML Reference</title>
<meta name="generator" content="Mozquito Factory 1.5" />
<style type="text/css">
 <![CDATA[
  a:link    	{ text-decoration:underline;font-family:Arial,Helvetica,sans-serif; }
  a:active  	{ text-decoration:underline;font-family:Arial,Helvetica,sans-serif; }
  a:visited		{ text-decoration:underline;font-family:Arial,Helvetica,sans-serif; }
	.index			{	font-size:9pt;color:#222566;font-weight:bold;text-decoration:underline;font-family:Arial,Helvetica,sans-serif;	}

	.element     { color:#800000; }
	.attribute   { color:#800080; }
	.action		   { color:#333333; }
	.handler     { color:#006633; }

	.elementb     { font-size:10pt;font-weight:bold;color:#800000;font-family:Arial,Helvetica,sans-serif; }
	.attributeb   { font-size:10pt;font-weight:bold;color:#800080;font-family:Arial,Helvetica,sans-serif; }
	.actionb		  { font-size:10pt;font-weight:bold;color:#333333;font-family:Arial,Helvetica,sans-serif; }
	.handlerb     { font-size:10pt;font-weight:bold;color:#006633;font-family:Arial,Helvetica,sans-serif; }

	.black9			{	font-size:9pt;color:#000000;font-weight:normal;text-decoration:none;font-family:Arial,Helvetica,sans-serif;	}
	.black9b		{	font-size:9pt;color:#000000;font-weight:bold;text-decoration:none;font-family:Arial,Helvetica,sans-serif;	}
	.dred9b			{	font-size:9pt;color:#873940;font-weight:bold;text-decoration:none;font-family:Arial,Helvetica,sans-serif;	}
	.red				{	font-size:9pt;color:#FF0000;font-weight:bold;text-decoration:none;font-family:Arial,Helvetica,sans-serif;	}
	.green			{	font-size:9pt;color:#008000;font-weight:bold;text-decoration:none;font-family:Arial,Helvetica,sans-serif;	}
	.code				{	font-size:9pt;color:#000000;font-weight:normal;text-decoration:none;font-family:courier new,courier,sans-serif;	}
	.black10b		{	font-size:10pt;color:#000000;font-weight:bold;text-decoration:none;font-family:Arial,Helvetica,sans-serif;	}
	.dred15b		{	font-size:15pt;color:#873940;font-weight:bold;text-decoration:none;font-family:Arial,Helvetica,sans-serif;	}

	.bg					{	background-image:url(img/bg_1.gif);	}
	.bgblank		{	background-image:url(img/blank.gif);font-size:1pt;	}
	.bgblblack15b		{	background-image:url(img/blank.gif);font-size:15pt;color:#000000;font-weight:bold;text-decoration:none;font-family:Arial,Helvetica,sans-serif;	}
	.bgblblack9			{	background-image:url(img/blank.gif);font-size:9pt;color:#000000;font-weight:normal;text-decoration:none;font-family:Arial,Helvetica,sans-serif;	}

	.margin1		{	margin-left:25px;	}
	.margin2		{	margin-left:10px;	}
	.margin3		{	margin:10px;	}
	.margin4		{	margin-left:111px;	}
  ]]>
</style>
</head>
<!-- lightgray #ACABA7  darkred #873940 darkblue #222566;  background="img/bg_100.gif"  -->
<body bgcolor="#FFFFFF">
<div align="center">

<!-- T E M P L A T E   1  -->
<x:template id="tmp1">
	<table width="750" border="0" cellpadding="0" cellspacing="0" class="bgblblack9">
		<tr>
			<td width="110" height="30" class="bgblblack9">
				 
			</td>
			<td width="640" class="bgblank">
				<div class="margin2"><span class="black10b">|group|</span><span class="|color|">|titel|</span></div>
			</td>
		</tr>
	</table>
</x:template>

<!-- template for insert -->
<x:template id="tmp_insert">
	<x:textoutput value="I am defined in a template and inserted here!" class="dred9b" />
</x:template>

<!-- template for prop -->
<x:template id="tmp_prop">
	<x:textoutput value="This template is inserted with |text| color" class="|color|" />
</x:template>

<x:form id="reference">

<!-- UNTERGRUND DER TABELLE (uebergeordnete Tabelle) -->
	<table width="760" border="0" cellpadding="0" cellspacing="0">
		<tr>
			<td width="760" height="570" class="bg" valign="top">
<!-- NAVIGATION Tabelle (BACK - INDEX - NEXT) -->
				<table width="760" border="0" cellpadding="0" cellspacing="0">
					<tr>
						<td width="760" colspan="4" height="40" class="bgblank">
							 
						</td>
					</tr>
					<tr>
						<td width="550" height="28" align="right" valign="middle" class="bgblank">
							 
						</td>
						<td width="70" height="28" align="right" valign="middle" class="bgblank">
							<x:toggle id="backbutton">
								<x:img src="img/nav_back_g.gif" width="70" height="20" preload="yes" alt="click next" />
								<x:img src="img/nav_back_r.gif" onclick="toggle:pages,--" width="70" height="20" preload="yes" alt="back" />
							</x:toggle>
						</td>
						<td width="70" height="28" align="right" valign="middle" class="bgblank">
							<x:img id="index" src="img/nav_index.gif" onclick="toggle:pages,p01" width="70" height="20" preload="yes" alt="index" />
						</td>
						<td width="70" height="28" align="right" valign="middle" class="bgblank">
							<x:toggle id="nextbutton">
								<x:img src="img/nav_next_g.gif" width="70" height="20" preload="yes" alt="click back" />
								<x:img src="img/nav_next_r.gif" onclick="toggle:pages,++" width="70" height="20" preload="yes" alt="next" />
							</x:toggle>
						</td>
					</tr>
				</table>

				<x:toggle id="pages">
<!-- S T A R T S E I T E  -->
					<x:tg id="p00" onshow="toggle:backbutton;toggle:nextbutton;" onhide="toggle:backbutton;toggle:nextbutton;">
						<table width="750" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="110" height="490" class="bgblank">
									 
								</td>
								<td width="640" align="center" valign="middle" class="bgblblack15b">
									<span class="black9">Welcome To The</span>
									<br /><br />XML-UI 2.0 Reference
									<br /><br /><span class="black9">An Overview Of The</span>
									<br /><br />Forms Markup Language
									<br /><br /><span class="black9">Extending The</span>
									<br /><br />Extensible HyperText Markup Language
									<br /><br /><span class="dred15b">Click <x:textoutput value="INDEX" onclick="toggle:pages,p01;" class="dred15b"/>  to proceed</span>
									<br /><br /><br /><br /><span class="black9">copyright © 2001 Mozquito Technologies AG, all rights reserved.</span>
								</td>
							</tr>
						</table>
					</x:tg>
<!-- I N D E X  -->
					<x:tg id="p01">
						<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0" class="bgblblack9">
							<tr>
								<td width="120" align="left" valign="top" class="bgblblack9">
									<br /><div class="margin2"><span class="dred9b">» </span><x:textoutput value="Introduction" onclick="toggle:idx,idx1" class="index" /></div>
									<br /><div class="margin2"><span class="dred9b">» </span><x:textoutput value="Form module" onclick="toggle:idx,idx2" class="index" /></div>
									<div class="margin1">
										<x:textoutput value="form" onclick="toggle:pages,p02" class="element" />
										<br /><x:textoutput value="button" onclick="toggle:pages,p03" class="element" />
										<br /><x:textoutput value="textinput" onclick="toggle:pages,p04" class="element" />
										<br /><x:textoutput value="textoutput" onclick="toggle:pages,p05" class="element" />
										<br /><x:textoutput value="textarea" onclick="toggle:pages,p06" class="element" />
										<br /><x:textoutput value="label" onclick="toggle:pages,p07" class="element" />
										<br /><x:textoutput value="hidden" onclick="toggle:pages,p08" class="element" />
										<br /><x:textoutput value="radio" onclick="toggle:pages,p09" class="element" />
										<br /><x:textoutput value="checkbox" onclick="toggle:pages,p10" class="element" />
										<br /><x:textoutput value="item" onclick="toggle:pages,p11" class="element" />
										<br /><x:textoutput value="pulldown" onclick="toggle:pages,p12" class="element" />
										<br /><x:textoutput value="listbox" onclick="toggle:pages,p13" class="element" />
										<br /><x:textoutput value="option" onclick="toggle:pages,p14" class="element" />
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="320" preload="yes" alt="" />									
								</td>
								<td width="135" align="left" valign="top" class="bgblblack9">
									<br /><div class="margin2"><span class="dred9b">» </span><x:textoutput value="Calc module" onclick="toggle:idx,idx3" class="index" /></div>
									<div class="margin1"><x:textoutput value="calc" onclick="toggle:pages,p15" class="element" /></div>
									<div class="margin2"><span class="dred9b">» </span><x:textoutput value="Image module" onclick="toggle:idx,idx4" class="index" /></div>
									<div class="margin1"><x:textoutput value="img" onclick="toggle:pages,p16" class="element" /></div>
									<div class="margin2"><span class="dred9b">» </span><x:textoutput value="Toggle module" onclick="toggle:idx,idx5" class="index" /></div>
									<div class="margin1"><x:textoutput value="toggle" onclick="toggle:pages,p17" class="element" />
									<br /><x:textoutput value="tg" onclick="toggle:pages,p18" class="element" /></div>
									<div class="margin2"><span class="dred9b">» </span><x:textoutput value="Template module" onclick="toggle:idx,idx6" class="index" /></div>
									<div class="margin1">
										<x:textoutput value="template" onclick="toggle:pages,p19" class="element" /><br />
										<x:textoutput value="insert" onclick="toggle:pages,p20" class="element" /><br />
										<x:textoutput value="prop" onclick="toggle:pages,p21" class="element" />
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="320" preload="yes" alt="" />									
								</td>
								<td width="135" align="left" valign="top" class="bgblblack9">
									<br /><div class="margin2"><span class="dred9b">» </span><x:textoutput value="Event handlers" onclick="toggle:idx,idx7" class="index" /></div>
									<div class="margin1">
										<x:textoutput value="onclick" onclick="toggle:pages,p22" class="handler" />
										<br /><x:textoutput value="onchange" onclick="toggle:pages,p22" class="handler" />
										<br /><x:textoutput value="onfocus" onclick="toggle:pages,p23" class="handler" />
										<br /><x:textoutput value="onblur" onclick="toggle:pages,p23" class="handler" />
										<br /><x:textoutput value="onshow" onclick="toggle:pages,p24" class="handler" />
										<br /><x:textoutput value="onhide" onclick="toggle:pages,p24" class="handler" />
									</div>
									<br /><div class="margin2"><span class="dred9b">» </span><x:textoutput value="Action statements" onclick="toggle:idx,idx8" class="index" /></div>
									<div class="margin1">
										<x:textoutput value="toggle" onclick="toggle:pages,p25" class="action" />
										<br /><x:textoutput value="setval" onclick="toggle:pages,p26" class="action" />
										<br /><x:textoutput value="reset" onclick="toggle:pages,p26" class="action" />
										<br /><x:textoutput value="submit" onclick="toggle:pages,p27" class="action" />
										<br /><x:textoutput value="setmand" onclick="toggle:pages,p27" class="action" />
										<br /><x:textoutput value="alert" onclick="toggle:pages,p28" class="action" />
										<br /><x:textoutput value="prompt" onclick="toggle:pages,p28" class="action" />
										<br /><x:textoutput value="link" onclick="toggle:pages,p29" class="action" />
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="320" preload="yes" alt="" />
								</td>
								<td width="115" align="left" valign="top" class="bgblblack9">
									<br /><div class="margin2"><span class="dred9b">» </span><x:textoutput value="Attribute" onclick="toggle:idx,idx9" class="index" /></div>
									<div class="margin1">
										<x:textoutput value="ctype" onclick="toggle:pages,p30" class="attribute" />
										<br /><x:textoutput value="validation" onclick="toggle:pages,p31" class="attribute" />
										<br /><x:textoutput value="mandatory" onclick="toggle:pages,p32" class="attribute" />
										<br /><x:textoutput value="send" onclick="toggle:pages,p32" class="attribute" />
										<br /><x:textoutput value="shared" onclick="toggle:pages,p33" class="attribute" />
										<br /><x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" />
										<br /><x:textoutput value="value" onclick="toggle:pages,p34" class="attribute" />
										<br /><x:textoutput value="style" onclick="toggle:pages,p35" class="attribute" />
										<br /><x:textoutput value="class" onclick="toggle:pages,p35" class="attribute" />
										<br /><x:textoutput value="checked" onclick="toggle:pages,p36" class="attribute" />
										<br /><x:textoutput value="selected" onclick="toggle:pages,p36" class="attribute" />
										<br /><x:textoutput value="digits" onclick="toggle:pages,p37" class="attribute" />
										<br /><x:textoutput value="term" onclick="toggle:pages,p37" class="attribute" />
										<br /><x:textoutput value="first" onclick="toggle:pages,p38" class="attribute" />
										<br /><x:textoutput value="target" onclick="toggle:pages,p38" class="attribute" />
										<br /><x:textoutput value="size" onclick="toggle:pages,p39" class="attribute" />
										<br /><x:textoutput value="rows" onclick="toggle:pages,p39" class="attribute" />
										<br /><x:textoutput value="cols" onclick="toggle:pages,p39" class="attribute" />
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="320" preload="yes" alt="" />									
								</td>
								<td width="115" align="left" valign="top" class="bgblblack9">
									<br />
									<div class="margin2"><span class="dred9b">» </span><x:textoutput value="Attribute" onclick="toggle:idx,idx9" class="index" /></div>
									<div class="margin1">
										<x:textoutput value="message" onclick="toggle:pages,p40" class="attribute" />
										<br /><x:textoutput value="wrap" onclick="toggle:pages,p40" class="attribute" />
										<br /><x:textoutput value="hidden" onclick="toggle:pages,p40" class="attribute" />
										<br /><x:textoutput value="action" onclick="toggle:pages,p41" class="attribute" />
										<br /><x:textoutput value="method" onclick="toggle:pages,p41" class="attribute" />
										<br /><x:textoutput value="enctype" onclick="toggle:pages,p41" class="attribute" />
										<br /><x:textoutput value="src" onclick="toggle:pages,p42" class="attribute" />
										<br /><x:textoutput value="alt" onclick="toggle:pages,p42" class="attribute" />
										<br /><x:textoutput value="preload" onclick="toggle:pages,p42" class="attribute" />
										<br /><x:textoutput value="width" onclick="toggle:pages,p43" class="attribute" />
										<br /><x:textoutput value="height" onclick="toggle:pages,p43" class="attribute" />
										<br /><x:textoutput value="align" onclick="toggle:pages,p43" class="attribute" />
										<br /><x:textoutput value="for" onclick="toggle:pages,p44" class="attribute" />
										<br /><x:textoutput value="template" onclick="toggle:pages,p44" class="attribute" />
										<br /><x:textoutput value="name" onclick="toggle:pages,p44" class="attribute" />
										<br /><x:textoutput value="title" onclick="toggle:pages,p45" class="attribute" />
										<br /><x:textoutput value="dir" onclick="toggle:pages,p45" class="attribute" />
										<br /><x:textoutput value="lang" onclick="toggle:pages,p46" class="attribute" />
									</div>
								</td>
							</tr>
							<tr>
								<td colspan="9">
									<x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" />
								</td>
							</tr>
							<tr>
								<td width="634" colspan="9" height="100" valign="top" class="bgblblack9">
<!--  I N D E X   /   K A P I T E L N   -->
									<x:toggle id="idx">
										<x:tg id="idx1"><div class="margin3">
											<span class="black9b">Introduction</span>
											<br /><br /><span class="black9">
                  	   	XHTML-FML is a member of the XHTML Family, built upon the Modularization of XHTML.<br /><br />
                     		The FML Modules make HTML 4.0 Forms, frames and scripting obsolete. 
                     		FML introduces a set of powerful tags for dynamic web interfaces, 
												lowering skill level and reducing production costs.<br /><br />
                     		Web interfaces written in XHTML-FML run in current generation 4 and 5 browsers thanks to MOZQUITO.
											</span></div>
										</x:tg>
										<x:tg id="idx2"><div class="margin3">
											<span class="black9b">Form module</span>
											<br /><br /><span class="black9">
												The Form module is a replacement for the standard HTML 4.0 Forms module. Improvements  
												include client-side input validation, more flexibility and some logical cleanups.
											</span></div>
										</x:tg>
										<x:tg id="idx3"><div class="margin3">
											<span class="black9b">Calc module</span>
											<br /><br /><span class="black9">The calc module makes it possible to do on-line calculations.
											</span></div>
										</x:tg>
										<x:tg id="idx4"><div class="margin3">
											<span class="black9b">Image module</span>
											<br /><br /><span class="black9">
												The img module significantly enhances HTML 4.0's image features. 
												When a document makes heavy use of toggle elements, a browser needs 
												immediate access to any images included. 
												FML's img element uses the preload attribute, allowing images to be loaded when 
												the whole document is loaded. The image module does not replace the HTML 4.0 <img> element. 
												Both the HTML 4.0 <img> element and the FML img element (the latter qualified with a namespace identifier) 
												are legal in the same document, but only the FML img can use the preload attribute.
											</span></div>
										</x:tg>
										<x:tg id="idx5"><div class="margin3">
											<span class="black9b">Toggle module</span>
											<br /><br /><span class="black9">
												The toggle module is a fundamental enhancement to Web interactivity. It enables documents 
												to "switch" to different parts of themselves when activated by the user. 
											</span></div>
										</x:tg>
										<x:tg id="idx6"><div class="margin3">
											<span class="black9b">Template module</span>
											<br /><br /><span class="black9">
												The template module lets you define sections of markup for repeated use. This saves you coding energy 
												and keeps your original .xhtml document shorter and more manageable. 
												The browser behaves as if the section was actually repeated in the document. 
											</span></div>
										</x:tg>
										<x:tg id="idx7"><div class="margin3">
											<span class="black9b">Event handlers</span>
											<br /><br /><span class="black9">
												Event handlers are glorified attributes. Every event handler triggers actions that are 
												performed as soon as the specified event occurs, such a click or change of focus. 
												These actions are defined as the values of the attribute. 
												All legal action statements can be used as event handler values.
											</span></div>
										</x:tg>
										<x:tg id="idx8"><div class="margin3">
											<span class="black9b">Action statements</span>
											<br /><br /><span class="black9">
												An action statement is a command that triggers an action of some sort. An event handler determines 
												what kind of command is to be carried out, but an action statement defines what is really supposed to happen. 
									      All action statements can function as the value of an event handler attribute. 
											</span></div>
										</x:tg>
										<x:tg id="idx9"><div class="margin3">
											<span class="black9b">Attribute</span>
											<br /><br /><span class="black9">
												Elements have properties called attributes. Attributes go in an element's opening tag before 
												the final ">". Any number of (legal) attributes, separated by spaces, can be in 
												an element's opening tag. They can be put in any order but you cannot have more than one of 
												the same attribute in an element. An attribute has a value, either a default one or one set 
												by you or by another the action of another FML tag. These values must also be surrounded by 
												either single quotes (' ') or double quotes (" ").
											</span></div>
										</x:tg>
									</x:toggle>
								</td>
							</tr>
						</table>
						</div>
					</x:tg>	
					
<!-- form module / f o r m  -->
					<x:tg id="p02">
						<x:insert  template="tmp1" >
							<x:prop name="group">Form module: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel"> form</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" height="288" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Description</span>
										<br /><br />The <span class="element">form </span> element is the outermost container of
									  an FML form. You can have multiple forms in the same document, but you can't nest <span class="element">form </span>
									  elements. This corresponds to HTML 4.0's <form> element.
										<br />The <span class="element">form </span> element carries the 
										<x:textoutput value="action" onclick="toggle:pages,p41" class="attribute" />,
										<x:textoutput value="enctype" onclick="toggle:pages,p41" class="attribute" />  and 
										<x:textoutput value="method" onclick="toggle:pages,p41" class="attribute" /> 
									  attributes in a form, defining how the data input is processed once the form
										is submitted. Once the form is submitted (with the 
										<x:textoutput value="submit" onclick="toggle:pages,p27" class="action" />  
									  action handler), the following happens:
										<ol>
											<li>The <x:textoutput value="value" onclick="toggle:pages,p34" class="attribute" />  attributes 
											for all form controls contained in the <span class="element">form </span> with 
													<x:textoutput value="send" onclick="toggle:pages,p32" class="attribute" />="yes" are collected.</li>
										  <li>These values are grouped in name-value pairs with the attribute identification
									   			being the <x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" />  
									       of the control.</li>
										  <li>The name-value pairs are encoded using <x:textoutput value="enctype" onclick="toggle:pages,p41" class="attribute" />.</li>
										  <li>This data is returned to the URL contained in the 
										   <x:textoutput value="action" onclick="toggle:pages,p41" class="attribute" /> 
											attribute using the method defined in the <x:textoutput value="method" onclick="toggle:pages,p41" class="attribute" /> 
											attribute.</li>
											<li>The browser shows the answer delivered from the server as defined in the 
											<x:textoutput value="target" onclick="toggle:pages,p38" class="attribute" />.</li>
										</ol>
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="288" preload="yes" alt="" />									
								</td>
								<td width="216" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Attributes</span>
										<div class="margin3">
											» <x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" /><br />
											» <x:textoutput value="action" onclick="toggle:pages,p41" class="attribute" /><br />
											» <x:textoutput value="method" onclick="toggle:pages,p41" class="attribute" /><br />
											» <x:textoutput value="enctype" onclick="toggle:pages,p41" class="attribute" /><br />
											» <x:textoutput value="target" onclick="toggle:pages,p38" class="attribute" /><br />
											» <x:textoutput value="title" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="dir" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="lang" onclick="toggle:pages,p46" class="attribute" /><br />
										</div>
									</div>
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" height="168" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Sample Code</span>
										<br /><div class="code">
											<br /><x:form id="foo" action="http://www.mozquito.org/ -->
											<br /><div align="right"> --> servlets/Echo" method="post"></div>
											 ...
											<br /></x:form>
										</div>
										<br />When the user submits, this action is not displayed but sends the form back
									  to http://www.mozquito.org/servlets/Echo using the post method and the default encoding.
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="168" preload="yes" alt="" />									
								</td>
								<td width="216" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Content</span>
										<div class="margin3">
										  » plain text<br />
										  » inline elements<br />
										  » block elements<br />
											» form elements<br />
										</div>
									</div>
								</td>
							</tr>
						</table>
					</div>
					</x:tg>
<!-- form module / b u t t o n  -->
					<x:tg id="p03">
						<x:insert  template="tmp1" >
							<x:prop name="group">Form module: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel"> button</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Description</span>
										<br /><br />A <span class="element">button</span>  displays a push button labeled with the 
										content of the <x:textoutput value="value" onclick="toggle:pages,p34" class="attribute" /> 
									  attribute. Usually, a <span class="element">button</span> is used to trigger
									  an action when the user pushes it. To do this, an action
									  statement is placed in the <x:textoutput value="onclick" onclick="toggle:pages,p22" class="handler" />  
									  event handler.
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</td>
								<td width="216" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Attributes</span>
										<div class="margin3">
											» <x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" /><br />
											» <x:textoutput value="value" onclick="toggle:pages,p34" class="attribute" /><br />
											» <x:textoutput value="style" onclick="toggle:pages,p35" class="attribute" /><br />
											» <x:textoutput value="class" onclick="toggle:pages,p35" class="attribute" /><br />
											» <x:textoutput value="send" onclick="toggle:pages,p32" class="attribute" /><br />
											» <x:textoutput value="title" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="dir" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="lang" onclick="toggle:pages,p46" class="attribute" /><br />
											» <x:textoutput value="onclick" onclick="toggle:pages,p22" class="handler" /><br />
										</div>
									</div>
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Sample Code</span>
										<br /><br /><div class="code">
										<x:button id="foo" value="send" --><br /><div align="right">--> onclick="submit:MyForm" /></div>
										</div>
										<x:button id="button" value="send" onclick="" />
										<br /><br />This displays a button labeled "send".<br />Pushing the button submits the <span class="element">form</span>  MyForm.
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</td>
								<td width="216" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Content</span>
										<div class="margin3">
											» empty<br />
										</div>
									</div>
								</td>
							</tr>
						</table>
					</div>
					</x:tg>
<!-- form module / t e x t i n p u t  -->
					<x:tg id="p04">
						<x:insert  template="tmp1" >
							<x:prop name="group">Form module: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel"> textinput</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Description</span>
										<br /><br />The <span class="element">textinput</span>  element defines an input field similar
									  to the <input type="text"> tag in HTML 4.0 Forms.
									  The text contained in the <x:textoutput value="value" onclick="toggle:pages,p34" class="attribute" />  attribute is
									  displayed in a box defined by the <x:textoutput value="size" onclick="toggle:pages,p39" class="attribute" />  attribute.
									  The user can put the cursor (or equivalent for non-visual devices) in that
									  box and change the text. The browser then changes the
									  <x:textoutput value="value" onclick="toggle:pages,p34" class="attribute" />  attribute. 
										<br />Going beyond HTML 4.0's <input type="text">,  FML adds simple client-side input validation
									   using the <x:textoutput value="validation" onclick="toggle:pages,p31" class="attribute" />  
									  and <x:textoutput value="ctype" onclick="toggle:pages,p30" class="attribute" />  attributes.
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</td>
								<td width="108" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Attributes</span>
										<div class="margin3">
											» <x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" /><br />
											» <x:textoutput value="value" onclick="toggle:pages,p34" class="attribute" /><br />
											» <x:textoutput value="style" onclick="toggle:pages,p35" class="attribute" /><br />
											» <x:textoutput value="class" onclick="toggle:pages,p35" class="attribute" /><br />
											» <x:textoutput value="ctype" onclick="toggle:pages,p30" class="attribute" /><br />
											» <x:textoutput value="validation" onclick="toggle:pages,p31" class="attribute" /><br />
											» <x:textoutput value="mandatory" onclick="toggle:pages,p32" class="attribute" /><br />
											» <x:textoutput value="size" onclick="toggle:pages,p39" class="attribute" /><br />
											» <x:textoutput value="send" onclick="toggle:pages,p32" class="attribute" /><br />
										</div>
									</div>
								</td>
								<td width="108" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b"> </span>
										<div class="margin3">
											» <x:textoutput value="message" onclick="toggle:pages,p40" class="attribute" /><br />
											» <x:textoutput value="title" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="dir" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="lang" onclick="toggle:pages,p46" class="attribute" /><br />
											» <x:textoutput value="hidden" onclick="toggle:pages,p40" class="attribute" /><br />
											» <x:textoutput value="onchange" onclick="toggle:pages,p22" class="handler" /><br />
											» <x:textoutput value="onfocus" onclick="toggle:pages,p23" class="handler" /><br />
											» <x:textoutput value="onblur" onclick="toggle:pages,p23" class="handler" /><br />
										</div>
									</div>
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Sample Code</span>
										<br /><br /><div class="code">
											<x:textinput id="foo" value="bar" ctype="url" --><br /><div align="right">--> validation="strict" size="20" /></div>
										</div>
										<br /><x:textinput id="textinput" value="bar" ctype="url" validation="strict" size="20" />
										<br /><br />This renders a textinput field with the default text "bar". Since only valid
									  URLs are accepted, the default text will be rejected. However, it is possible
									  to leave this field blank. (Otherwise, <x:textoutput value="mandatory" onclick="toggle:pages,p32" class="attribute" /> 
									  would need to be set to yes.)
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</td>
								<td width="216" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Content</span>
										<div class="margin3">
											» empty<br />
										</div>
									</div>
								</td>
							</tr>
						</table>
					</div>
					</x:tg>
<!-- form module / t e x t o u t p u t  -->
					<x:tg id="p05">
						<x:insert  template="tmp1" >
							<x:prop name="group">Form module: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel"> textoutput</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Description</span>
										<br /><br />The value of the <span class="element">textoutput</span>  element 
										is displayed as normal text, but the user cannot directly
									  change it. The element <span class="element">textoutput</span> is most useful
									  when you need to display the value of the 
									  <x:textoutput value="value" onclick="toggle:pages,p34" class="attribute" />  
									  attribute, for example, when it is changed either by a <x:textoutput value="calc" onclick="toggle:pages,p15" class="element" />  
									  element or by a <x:textoutput value="toggle" onclick="toggle:pages,p17" class="element" />  element with the attribute
									  <x:textoutput value="shared" onclick="toggle:pages,p33" class="attribute" />="yes".
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</td>
								<td width="216" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Attributes</span>
										<div class="margin3">
											» <x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" /><br />
											» <x:textoutput value="value" onclick="toggle:pages,p34" class="attribute" /><br />
											» <x:textoutput value="style" onclick="toggle:pages,p35" class="attribute" /><br />
											» <x:textoutput value="class" onclick="toggle:pages,p35" class="attribute" /><br />
											» <x:textoutput value="send" onclick="toggle:pages,p32" class="attribute" /><br />
											» <x:textoutput value="title" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="dir" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="lang" onclick="toggle:pages,p46" class="attribute" /><br />
											» <x:textoutput value="onclick" onclick="toggle:pages,p22" class="handler" /><br />
										</div>
									</div>
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Sample Code</span>
										<br /><br /><div class="code">
										<x:textoutput id="foo" value="bar" class="red" />
										</div>
										<br /><x:textoutput id="textoutput" value="bar" onclick="" class="red" />
										<br /><br />Renders the text "bar".
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</td>
								<td width="216" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Content</span>
										<div class="margin3">
											» empty<br />
										</div>
									</div>
								</td>
							</tr>
						</table>
					</div>
					</x:tg>
<!-- form module / t e x t a r e a  -->
					<x:tg id="p06">
						<x:insert  template="tmp1" >
							<x:prop name="group">Form module: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel"> textarea</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Description</span>
										<br /><br />Similar to <textarea> in HTML 4.0 and
									  the <x:textoutput value="textinput" onclick="toggle:pages,p04" class="element" />  element, this element
									  lets the user input text extending over multiple rows. The number of rows is
									  given in the <x:textoutput value="rows" onclick="toggle:pages,p39" class="attribute" />  attribute.
										<br />The text contained in the <span class="element">textarea</span>  element is
									  the default content of the input area. Otherwise, <span class="element">textarea</span> 
									  behaves exactly like <x:textoutput value="textinput" onclick="toggle:pages,p04" class="element" />.
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</td>
								<td width="108" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Attributes</span>
										<div class="margin3">
											» <x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" /><br />
											» <x:textoutput value="style" onclick="toggle:pages,p35" class="attribute" /><br />
											» <x:textoutput value="class" onclick="toggle:pages,p35" class="attribute" /><br />
											» <x:textoutput value="ctype" onclick="toggle:pages,p30" class="attribute" /><br />
											» <x:textoutput value="validation" onclick="toggle:pages,p31" class="attribute" /><br />
											» <x:textoutput value="mandatory" onclick="toggle:pages,p32" class="attribute" /><br />
											» <x:textoutput value="rows" onclick="toggle:pages,p39" class="attribute" /><br />
											» <x:textoutput value="cols" onclick="toggle:pages,p39" class="attribute" /><br />
											» <x:textoutput value="send" onclick="toggle:pages,p32" class="attribute" /><br />
										</div>
									</div>
								</td>
								<td width="108" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b"> </span>
										<div class="margin3">
											» <x:textoutput value="message" onclick="toggle:pages,p40" class="attribute" /><br />
											» <x:textoutput value="wrap" onclick="toggle:pages,p40" class="attribute" /><br />
											» <x:textoutput value="title" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="dir" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="lang" onclick="toggle:pages,p46" class="attribute" /><br />
											» <x:textoutput value="onchange" onclick="toggle:pages,p22" class="handler" /><br />
											» <x:textoutput value="onfocus" onclick="toggle:pages,p23" class="handler" /><br />
											» <x:textoutput value="onblur" onclick="toggle:pages,p23" class="handler" /><br />
										</div>
									</div>
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Sample Code</span>
										<br /><br /><div class="code">
										<x:textarea id="foo" rows="3" cols="30">
										<br />Please enter text here...
										<br /></x:textarea>
										<br /><br />without inside text:
										<br /><x:textarea id="foo" rows="3" cols="30" />
										<br /><br /><x:textarea id="textarea" rows="3" cols="30">Please enter here...</x:textarea>
										</div>
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</td>
								<td width="216" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Content</span>
										<div class="margin3">
											» plain text<br />
										</div>
									</div>
								</td>
							</tr>
						</table>
					</div>
					</x:tg>
<!-- form module / l a b e l  -->
					<x:tg id="p07">
						<x:insert  template="tmp1" >
							<x:prop name="group">Form module: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel"> label</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" height="207" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Description</span>
										<br /><br />The <span class="element">label</span> element may be used to attach information
									  to other form elements. The attached information is used in error messages
									  and warnings, e.g., violations of the rules defined in 
									  <x:textoutput value="mandatory" onclick="toggle:pages,p32" class="attribute" /> 
									  or <x:textoutput value="validation" onclick="toggle:pages,p31" class="attribute" />  attributes.
										<br />The <x:textoutput value="for" onclick="toggle:pages,p44" class="attribute" />  attribute 
										explicitely associates a label
									  with exactly one other form control by referencing the 
									  <x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" /> 
									  of the target element. When the browser issues
									  a warning or an error, the content of the <span class="element">label</span> 
									  element is displayed instead of the element id.
										<br />Only one label may be associated with the same control.
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="207" preload="yes" alt="" />									
								</td>
								<td width="216" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Attributes</span>
										<div class="margin3">
											» <x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" /><br />
											» <x:textoutput value="style" onclick="toggle:pages,p35" class="attribute" /><br />
											» <x:textoutput value="class" onclick="toggle:pages,p35" class="attribute" /><br />
											» <x:textoutput value="for" onclick="toggle:pages,p44" class="attribute" /><br />
											» <x:textoutput value="title" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="dir" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="lang" onclick="toggle:pages,p46" class="attribute" /><br />
										</div>
									</div>
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" height="247" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Sample Code</span>
										<br /><br /><div class="code">
										<x:label for="name">Your name</x:label>:
										<br /><x:textinput id="name" size="30" send="yes" --><div align="right"> --> mandatory="yes" /></div>
										</div>
										<br />If the user does not input a name, the 
										<x:textoutput value="mandatory" onclick="toggle:pages,p32" class="attribute" />="yes"
									  part in the example above will trigger an error message when the user tries
									  to <x:textoutput value="submit" onclick="toggle:pages,p27" class="action" />  the 
									  <x:textoutput value="form" onclick="toggle:pages,p02" class="element" />. 
									  With the <span class="element">label</span>  element, the message will refer to "Your name" instead.
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="247" preload="yes" alt="" />									
								</td>
								<td width="216" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Content</span>
										<div class="margin3">
											» plain text<br />
										</div>
									</div>
								</td>
							</tr>
						</table>
					</div>
					</x:tg>
<!-- form module / h i d d e n  -->
					<x:tg id="p08">
						<x:insert  template="tmp1" >
							<x:prop name="group">Form module: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel"> hidden</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Description</span>
										<br /><br />The <span class="element">hidden</span>  element has  
									  no display. It is used as a placeholder, e.g.,
									  for carrying information from one element to another. Within a 
									  <x:textoutput value="toggle" onclick="toggle:pages,p17" class="element" />,  
							      a <span class="element">hidden</span>  can 
									  function as a placeholder when nothing need be displayed.
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</td>
								<td width="216" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Attributes</span>
										<div class="margin3">
											» <x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" /><br />
											» <x:textoutput value="value" onclick="toggle:pages,p34" class="attribute" /><br />
											» <x:textoutput value="send" onclick="toggle:pages,p32" class="attribute" /><br />
											» <x:textoutput value="title" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="dir" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="lang" onclick="toggle:pages,p46" class="attribute" /><br />
										</div>
									</div>
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Sample Code</span>
										<br /><br /><div class="code">
										<x:hidden id="foo" value="remember this" />
										</div>
										<br />(No Display)
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</td>
								<td width="216" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Content</span>
										<div class="margin3">
											» empty<br />
										</div>
									</div>
								</td>
							</tr>
						</table>
					</div>
					</x:tg>
<!-- form module / r a d i o  -->
					<x:tg id="p09">
						<x:insert  template="tmp1" >
							<x:prop name="group">Form module: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel"> radio</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" height="237" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Description</span>
										<br /><br />The <span class="element">radio</span>  element gives the user a list
									  of choices connected to small buttons.
									  The user can select only one of these choices. The choices are provided by 
									  <x:textoutput value="item" onclick="toggle:pages,p11" class="element" />  
									  elements. The <x:textoutput value="value" onclick="toggle:pages,p34" class="attribute" />  
									  of the selected <x:textoutput value="item" onclick="toggle:pages,p11" class="element" />  
									  becomes the <x:textoutput value="value" onclick="toggle:pages,p34" class="attribute" />  
									  of the <span class="element">radio </span> group.
										<br />You can also put <span class="element">radio </span> elements in a table and thereby 
									  create a horizontal set of radio buttons.
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="237" preload="yes" alt="" />									
								</td>
								<td width="216" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Attributes</span>
										<div class="margin3">
											» <x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" /><br />
											» <x:textoutput value="value" onclick="toggle:pages,p34" class="attribute" /><br />
											» <x:textoutput value="style" onclick="toggle:pages,p35" class="attribute" /><br />
											» <x:textoutput value="class" onclick="toggle:pages,p35" class="attribute" /><br />
											» <x:textoutput value="mandatory" onclick="toggle:pages,p32" class="attribute" /><br />
											» <x:textoutput value="send" onclick="toggle:pages,p32" class="attribute" /><br />
											» <x:textoutput value="title" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="dir" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="lang" onclick="toggle:pages,p46" class="attribute" /><br />
										</div>
									</div>
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" height="217" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Sample Code</span>
										<br /><div class="code">
										<br /><x:radio id="foo">
										<br />  <x:item value="1" onclick="...">One</x:item>
										<br />  <x:item value="2" onclick="...">Two</x:item>
										<br />  <x:item value="3" onclick="...">Three</x:item>
										<br /></x:radio>
										</div>
										<br />
										<x:radio id="radio">
											<x:item value="1" class="black9">One</x:item>
											<x:item value="2" class="black9">Two</x:item>
											<x:item value="3" class="black9">Three</x:item>
										</x:radio>
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="217" preload="yes" alt="" />									
								</td>
								<td width="216" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Content</span>
										<div class="margin3">
											» inline elements<br />
											» block elements<br />
											» one or more item elements<br />
										</div>
									</div>
								</td>
							</tr>
						</table>
					</div>
					</x:tg>
<!-- form module / c h e c k b o x  -->
					<x:tg id="p10">
						<x:insert  template="tmp1" >
							<x:prop name="group">Form module: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel"> checkbox</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Description</span>
										<br /><br />The <span class="element">checkbox </span> element is similar to the 
										<x:textoutput value="radio" onclick="toggle:pages,p09" class="element" />  
									  element. Both give the user a list of choices. But as opposed to the 
									<x:textoutput value="radio" onclick="toggle:pages,p09" class="element" />,
									  the user can select any number of choices. As with the 
									<x:textoutput value="radio" onclick="toggle:pages,p09" class="element" /> 
									  element, the choices are <x:textoutput value="item" onclick="toggle:pages,p11" class="element" />  
									elements displayed. The <x:textoutput value="value" onclick="toggle:pages,p34" class="attribute" />  
									  of the <span class="element">checkbox </span>
									  group is a comma-separated list consisting of the 
									<x:textoutput value="value" onclick="toggle:pages,p34" class="attribute" /> 
									  of each selected <x:textoutput value="item" onclick="toggle:pages,p11" class="element" />.
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</td>
								<td width="216" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Attributes</span>
										<div class="margin3">
											» <x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" /><br />
											» <x:textoutput value="value" onclick="toggle:pages,p34" class="attribute" /><br />
											» <x:textoutput value="style" onclick="toggle:pages,p35" class="attribute" /><br />
											» <x:textoutput value="class" onclick="toggle:pages,p35" class="attribute" /><br />
											» <x:textoutput value="mandatory" onclick="toggle:pages,p32" class="attribute" /><br />
											» <x:textoutput value="send" onclick="toggle:pages,p32" class="attribute" /><br />
											» <x:textoutput value="title" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="dir" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="lang" onclick="toggle:pages,p46" class="attribute" /><br />
										</div>
									</div>
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Sample Code</span>
										<br /><div class="code">
										<br /><x:checkbox id="foo">
									  <br />  <x:item value="1">One</x:item>
									  <br />  <x:item value="2">Two</x:item>
									  <br />  <x:item value="3">Three</x:item>
										<br /></x:checkbox>
										</div>
										<br /><x:checkbox id="checkbox">
											<x:item value="1" class="black9">One</x:item>
											<x:item value="2" class="black9">Two</x:item>
											<x:item value="3" class="black9">Three</x:item>
										</x:checkbox>
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</td>
								<td width="216" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Content</span>
										<div class="margin3">
											» inline elements<br />
											» block elements<br />
											» one or more item elements<br />
										</div>
									</div>
								</td>
							</tr>
						</table>
					</div>
					</x:tg>
<!-- form module / i t e m  -->
					<x:tg id="p11">
						<x:insert  template="tmp1" >
							<x:prop name="group">Form module: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel"> item</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Description</span>
										<br /><br />The <span class="element">item </span> element defines the items that appear within the 
									  <x:textoutput value="radio" onclick="toggle:pages,p09" class="element" />/<x:textoutput value="checkbox" onclick="toggle:pages,p10" class="element" />  
									  elements. The <x:textoutput value="checked" onclick="toggle:pages,p36" class="attribute" /> 
									  attribute defines the default state of each <span class="element">item</span>.
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</td>
								<td width="216" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Attributes</span>
										<div class="margin3">
											» <x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" /><br />
											» <x:textoutput value="value" onclick="toggle:pages,p34" class="attribute" /><br />
											» <x:textoutput value="style" onclick="toggle:pages,p35" class="attribute" /><br />
											» <x:textoutput value="class" onclick="toggle:pages,p35" class="attribute" /><br />
											» <x:textoutput value="checked" onclick="toggle:pages,p36" class="attribute" /><br />
											» <x:textoutput value="title" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="dir" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="lang" onclick="toggle:pages,p46" class="attribute" /><br />
											» <x:textoutput value="onclick" onclick="toggle:pages,p22" class="handler" /><br />
										</div>
									</div>
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Sample Code</span>
										<br /><div class="code">
										<br /><x:item value="bar">
									  <br />  Choose this item
										<br /></x:item>
										</div>
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</td>
								<td width="216" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Content</span>
										<div class="margin3">
											» plain text<br />
											» inline elements<br />
										</div>
									</div>
								</td>
							</tr>
						</table>
					</div>
					</x:tg>
<!-- form module / p u l l d o w n  -->
					<x:tg id="p12">
						<x:insert  template="tmp1" >
							<x:prop name="group">Form module: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel"> pulldown</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Description</span>
										<br /><br />Although the <span class="element">pulldown </span>  essentially has 
									  the same function as the <x:textoutput value="radio" onclick="toggle:pages,p09" class="element" />, this
									  element is displayed differently. It appears to the user as a drop-down
									  menu. <br />The choices are displayed by 
										<x:textoutput value="option" onclick="toggle:pages,p14" class="element" />  elements,
									  and the <x:textoutput value="value" onclick="toggle:pages,p34" class="attribute" />  of the selected 
									  <x:textoutput value="option" onclick="toggle:pages,p14" class="element" /> 
									  becomes the <x:textoutput value="value" onclick="toggle:pages,p34" class="attribute" />  of the 
									<span class="element">pulldown</span>. <br /><br />
									 A <span class="element">pulldown </span> cannot have additional content
									  between the <x:textoutput value="option" onclick="toggle:pages,p14" class="element" />  elements.
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</td>
								<td width="216" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Attributes</span>
										<div class="margin3">
											» <x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" /><br />
											» <x:textoutput value="value" onclick="toggle:pages,p34" class="attribute" /><br />
											» <x:textoutput value="style" onclick="toggle:pages,p35" class="attribute" /><br />
											» <x:textoutput value="class" onclick="toggle:pages,p35" class="attribute" /><br />
											» <x:textoutput value="send" onclick="toggle:pages,p32" class="attribute" /><br />
											» <x:textoutput value="title" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="dir" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="lang" onclick="toggle:pages,p46" class="attribute" /><br />
											» <x:textoutput value="onchange" onclick="toggle:pages,p22" class="handler" /><br />
										</div>
									</div>
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Sample Code</span>
										<br /><div class="code">
										<br /><x:pulldown id="foo">
										<br />  <x:option value="1">One</x:option>
										<br />  <x:option value="2">Two</x:option>
										<br />  <x:option value="3">Three</x:option>
										<br /></x:pulldown>
										</div>
										<br /><x:pulldown id="pulldown">
											<x:option value="1">One</x:option>
											<x:option value="2">Two</x:option>
											<x:option value="3">Three</x:option>
										</x:pulldown>
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</td>
								<td width="216" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Content</span>
										<div class="margin3">
											» one or more option elements<br />
										</div>
									</div>
								</td>
							</tr>
						</table>
					</div>
					</x:tg>
<!-- form module / l i s t b o x  -->
					<x:tg id="p13">
						<x:insert  template="tmp1" >
							<x:prop name="group">Form module: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel"> listbox</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Description</span>
										<br /><br />A <span class="element">listbox </span> appears to the user as a scrollable list.
										<br />A list of options within a <span class="element">listbox </span> lets the
									  user select any number of choices. As with the 
									 <x:textoutput value="pulldown" onclick="toggle:pages,p12" class="element" />,
									  the choices are displayed by <x:textoutput value="option" onclick="toggle:pages,p14" class="element" />  
									  elements, and the <x:textoutput value="value" onclick="toggle:pages,p34" class="attribute" />  
									  of the <span class="element">listbox </span> is a comma-separated list consisting of the 
									<x:textoutput value="value" onclick="toggle:pages,p34" class="attribute" /> 
									  of each selected <x:textoutput value="option" onclick="toggle:pages,p14" class="element" />.
									<br /><br /> A <span class="element">listbox </span> cannot have any additional content between the 
									<x:textoutput value="option" onclick="toggle:pages,p14" class="element" />  elements.
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</td>
								<td width="216" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Attributes</span>
										<div class="margin3">
											» <x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" /><br />
											» <x:textoutput value="value" onclick="toggle:pages,p34" class="attribute" /><br />
											» <x:textoutput value="style" onclick="toggle:pages,p35" class="attribute" /><br />
											» <x:textoutput value="class" onclick="toggle:pages,p35" class="attribute" /><br />
											» <x:textoutput value="mandatory" onclick="toggle:pages,p32" class="attribute" /><br />
											» <x:textoutput value="send" onclick="toggle:pages,p32" class="attribute" /><br />
											» <x:textoutput value="rows" onclick="toggle:pages,p39" class="attribute" /><br />
											» <x:textoutput value="title" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="dir" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="lang" onclick="toggle:pages,p46" class="attribute" /><br />
											» <x:textoutput value="onchange" onclick="toggle:pages,p22" class="handler" /><br />
										</div>
									</div>
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Sample Code</span>
										<br /><div class="code">
										<br /><x:listbox id="foo">
									  <br />  <x:option value="1">One</x:option>
									  <br />  <x:option value="2">Two</x:option>
									  <br />  <x:option value="3">Three</x:option>
										<br /></x:listbox>
										</div>
										<br /><x:listbox id="listbox" rows="2">
											<x:option value="1">One</x:option>
											<x:option value="2">Two</x:option>
											<x:option value="3">Three</x:option>
										</x:listbox>
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</td>
								<td width="216" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Content</span>
										<div class="margin3">
											» one or more option elements<br />
										</div>
									</div>
								</td>
							</tr>
						</table>
					</div>
					</x:tg>
<!-- form module / o p t i o n  -->
					<x:tg id="p14">
						<x:insert  template="tmp1" >
							<x:prop name="group">Form module: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel"> option</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Description</span>
										<br /><br />The <span class="element">option </span> element defines the items that appear
									  within a <x:textoutput value="listbox" onclick="toggle:pages,p13" class="element" />  or a 
									<x:textoutput value="pulldown" onclick="toggle:pages,p12" class="element" />.  
									  Similar to the <x:textoutput value="item" onclick="toggle:pages,p11" class="element" />  
									element, an <span class="element">option </span> may be preselected using the 
									<x:textoutput value="selected" onclick="toggle:pages,p36" class="attribute" />  attribute.
									  An <span class="element">option </span> may also trigger external events in combination
									  with an <x:textoutput value="onclick" onclick="toggle:pages,p22" class="handler" />  action handler.
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</td>
								<td width="216" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Attributes</span>
										<div class="margin3">
											» <x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" /><br />
											» <x:textoutput value="value" onclick="toggle:pages,p34" class="attribute" /><br />
											» <x:textoutput value="selected" onclick="toggle:pages,p36" class="attribute" /><br />
											» <x:textoutput value="title" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="dir" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="lang" onclick="toggle:pages,p46" class="attribute" /><br />
											» <x:textoutput value="onclick" onclick="toggle:pages,p22" class="handler" /><br />
										</div>
									</div>
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Sample Code</span>
										<br /><div class="code">
										<br /><x:option value="bar">
									  <br />  Choose this option
										<br /></x:option>
										</div>
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</td>
								<td width="216" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Content</span>
										<div class="margin3">
											» plain text<br />
										</div>
									</div>
								</td>
							</tr>
						</table>
					</div>
					</x:tg>
<!-- form module / c a l c  -->
					<x:tg id="p15">
						<x:insert  template="tmp1" >
							<x:prop name="group">Form module: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel"> calc</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Description</span>
										<br /><br />The <span class="element">calc</span> element lets the browser do client-side calculations
									  using simple mathematical expressions and the values of other form elements.
									  The expression is given in the <x:textoutput value="term" onclick="toggle:pages,p37" class="attribute" />  
									  attribute. User input is refered to by the 
									  <x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" />  of the corresponding
									  form element. The <x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" />  
									  do not have to be surrounded by whitespace so be careful not to use the characters (., *, /, +) in an id 
									  because the Matrix could confuse them with mathematical operands.
									   The operation is executed and the result rounded to match the number
									  of decimal places set in <x:textoutput value="digits" onclick="toggle:pages,p37" class="attribute" />. 
									  The result is then sent to the <x:textoutput value="value" onclick="toggle:pages,p34" class="attribute" />  
									  attribute of the contained form element. 
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</td>
								<td width="216" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Attributes</span>
										<div class="margin3">
											» <x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" /><br />
											» <x:textoutput value="value" onclick="toggle:pages,p34" class="attribute" /><br />
											» <x:textoutput value="mandatory" onclick="toggle:pages,p32" class="attribute" /><br />
											» <x:textoutput value="digits" onclick="toggle:pages,p37" class="attribute" /><br />
											» <x:textoutput value="term" onclick="toggle:pages,p37" class="attribute" /><br />
											» <x:textoutput value="title" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="dir" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="lang" onclick="toggle:pages,p46" class="attribute" /><br />
										</div>
									</div>
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Sample Code</span>
										<br /><div class="code">
										<br /><x:calc id="foo" term="field1 * field2">
									  <br />  <x:textoutput />
										<br /></x:calc>
										</div>
										<br /><x:textoutput id="field1" value="10" /> * <x:textinput id="field2" value="" size="1" /> = <x:calc id="calc" term="field1*field2"><x:textoutput /></x:calc>
										<br /><br />This example refers to the form elements with the ids "field1" and "field2".
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</td>
								<td width="216" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Content</span>
										<div class="margin3">
											» exactly one form element<br />
										</div>
									</div>
								</td>
							</tr>
						</table>
					</div>
					</x:tg>
<!-- form module /  i m g  -->
					<x:tg id="p16">
						<x:insert  template="tmp1" >
							<x:prop name="group">Form module: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel"> img</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Description</span>
										<br /><br />The <span class="element">img</span> module significantly enhancemes
									  HTML 4.0's image tag. When a file uses many <x:textoutput value="toggle" onclick="toggle:pages,p17" class="element" />  
									  elements, a browser may need immediate access to images when <span class="element">img </span>
									  elements are "activated" in a toggle group. FML's <span class="element">img </span>
									  element can implement the <x:textoutput value="preload" onclick="toggle:pages,p42" class="attribute" />  attribute,
									  allowing images to be loaded at the same time the whole document is loaded.
									  The image module does not replace the HTML 4.0 <img> element. Both the
									  HTML 4.0 <img> element and the FML <span class="element">img </span> element
									  are legal in the same document, but only the FML <span class="element">img </span> can implement the 
									<x:textoutput value="preload" onclick="toggle:pages,p42" class="attribute" />  attribute.
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</td>
								<td width="216" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Attributes</span>
										<div class="margin3">
											» <x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" /><br />
											» <x:textoutput value="src" onclick="toggle:pages,p42" class="attribute" /><br />
											» <x:textoutput value="alt" onclick="toggle:pages,p42" class="attribute" /><br />
											» <x:textoutput value="width" onclick="toggle:pages,p43" class="attribute" /><br />
											» <x:textoutput value="height" onclick="toggle:pages,p43" class="attribute" /><br />
											» <x:textoutput value="align" onclick="toggle:pages,p43" class="attribute" /><br />
											» <x:textoutput value="preload" onclick="toggle:pages,p42" class="attribute" /><br />
											» <x:textoutput value="title" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="dir" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="lang" onclick="toggle:pages,p46" class="attribute" /><br />
											» <x:textoutput value="onclick" onclick="toggle:pages,p22" class="handler" /><br />
										</div>
									</div>
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Sample Code</span>
										<br /><div class="code">
										<br /><x:img id="Mozquito" src="img/log_mzq.gif" 
								    width="86" height="73" alt="Factory Logo" preload="yes"/>
										<br /><br />or url source <br />(src="http://www.mozquito.org/img/logoindex.gif")
										</div>
										<br /><x:img id="Mozquito" src="img/log_mzq.gif" width="53" height="60" preload="yes" alt="Mozquito Logo" />
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</td>
								<td width="216" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Content</span>
										<div class="margin3">
											» empty<br />
										</div>
									</div>
								</td>
							</tr>
						</table>
					</div>
					</x:tg>
<!-- form module / t o g g l e  -->
					<x:tg id="p17">
						<x:insert  template="tmp1" >
							<x:prop name="group">Form module: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel"> toggle</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Description</span>
										<br /><br />A <span class="element">toggle </span> element can contain different sections of a 
									  document. These different sections become children of the <span class="element">toggle </span> 
									  element. At any given time, only one child can be active and displyed, though 
									  it is possible to switch between the elements of a <span class="element">toggle </span> 
									  without any of them being displayed. The <x:textoutput value="shared" onclick="toggle:pages,p33" class="attribute" />   
									  attribute forces all the children of a <span class="element">toggle </span> to 
									  share the same value. The <x:textoutput value="value" onclick="toggle:pages,p34" class="attribute" /> of a toggle is 
									  the <x:textoutput value="value" onclick="toggle:pages,p34" class="attribute" /> of its currently active child element. 
									  If the active child doesn't have a <x:textoutput value="value" onclick="toggle:pages,p34" class="attribute" />, then 
									  <span class="attribute">value="" </span> equals that of the toggle itself.
										<br /><span class="element">Toggle </span> elements can also be nested. 
										<br />The cycling process is triggered by a <x:textoutput value="toggle" onclick="toggle:pages,p25" class="action" /> action handler.
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</td>
								<td width="216" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Attributes</span>
										<div class="margin3">
											» <x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" /><br />
											» <x:textoutput value="value" onclick="toggle:pages,p34" class="attribute" /><br />
											» <x:textoutput value="mandatory" onclick="toggle:pages,p32" class="attribute" /><br />
											» <x:textoutput value="send" onclick="toggle:pages,p32" class="attribute" /><br />
											» <x:textoutput value="shared" onclick="toggle:pages,p33" class="attribute" /><br />
											» <x:textoutput value="first" onclick="toggle:pages,p38" class="attribute" /><br />
											» <x:textoutput value="title" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="dir" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="lang" onclick="toggle:pages,p46" class="attribute" /><br />
										</div>
									</div>
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Sample Code</span>
										<x:toggle id="tog_code">
											<x:tg>
												<br /><div class="code">
													<br /><x:toggle id="no1">
												  <br />  <x:button value="Click" onclick="toggle:no1,1" />
												  <br />  <x:img src="..." width="53" height="60" alt="Mozquito<br />    Logo" onclick="toggle:no1,0" />
													<br /></x:toggle>
												</div>
												<br /><x:toggle id="no1">
													<x:button value="Click" onclick="toggle:no1,1" />
													<x:img src="img/log_mzq.gif" width="53" height="60" onclick="toggle:no1,0" alt="Mozquito Logo" />
												</x:toggle>
												<br /><br /><div align="right"><x:textoutput value="Example with Shared Values" onclick="toggle:tog_code,1" /></div>
											</x:tg>
											<x:tg>
												<br /><div class="code">
													<br /><x:toggle id="no2" shared="yes">
												  <br />  <x:textoutput value="Click to modify"<br />    onclick="toggle:no2,1" />
												  <br />  <x:textinput value="" size="25"<br />    onblur="toggle:no1,0" />
													<br /></x:toggle>
												</div>
												<br /><x:toggle id="no2" shared="yes">
													<x:textoutput value="Click to modify" onclick="toggle:no2,1" />
													<x:textinput value="" size="25" onblur="toggle:no2,0" />
												</x:toggle>
												<br /><br /><div align="right"><x:textoutput value="Back ..." onclick="toggle:tog_code,0" /></div>
											</x:tg>
										</x:toggle>
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</td>
								<td width="216" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Content</span>
										<div class="margin3">
											» form controls<br />
											» <x:textoutput value="tg" onclick="toggle:pages,p18" class="element" /><br />
											» <x:textoutput value="insert" onclick="toggle:pages,p20" class="element" /><br />
											» <x:textoutput value="img" onclick="toggle:pages,p16" class="element" /><br />
										</div>
									</div>
								</td>
							</tr>
						</table>
					</div>
					</x:tg>
<!-- form module / t g  -->
					<x:tg id="p18">
						<x:insert  template="tmp1" >
							<x:prop name="group">Form module: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel"> tg</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" height="197" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Description</span>
										<br /><br />The <span class="element">tg </span> element ("toggle group") can
									  be used to group any sequence of elements in a document so that they behave as one block inside a
									 <x:textoutput value="toggle" onclick="toggle:pages,p17" class="element" />  element.
									  While the <span class="element">tg</span> does not have an explicit 
									<x:textoutput value="value" onclick="toggle:pages,p34" class="attribute" />,
									  it generates a comma-separated list of the values of its children.
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="197" preload="yes" alt="" />									
								</td>
								<td width="216" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Attributes</span>
										<div class="margin3">
											» <x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" /><br />
											» <x:textoutput value="style" onclick="toggle:pages,p35" class="attribute" /><br />
											» <x:textoutput value="class" onclick="toggle:pages,p35" class="attribute" /><br />
											» <x:textoutput value="title" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="dir" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="lang" onclick="toggle:pages,p46" class="attribute" /><br />
											» <x:textoutput value="onshow" onclick="toggle:pages,p24" class="handler" /><br />
											» <x:textoutput value="onhide" onclick="toggle:pages,p24" class="handler" /><br />
										</div>
									</div>
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" height="257" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Sample Code</span>
										<br /><div class="code">
											<br /><x:toggle id="no3">
										  <br />  <x:button value="Click" onclick="toggle:no3,1" />
											<br />  <x:tg>
										  <br />    <x:img src="..." width="53" height="60"<br />    alt="Logo" onclick="toggle:no3,0" />
										  <br />    <x:img src="..." width="53" height="60"<br />    alt="Logo" onclick="toggle:no3,0" />
											<br />  </x:tg>
											<br /></x:toggle>
										</div>
										<br /><x:toggle id="no3">
											<x:button value="Click" onclick="toggle:no3,1" />
											<x:tg>
												<x:img src="img/log_mzq.gif" width="53" height="60" onclick="toggle:no3,0" alt="Mozquito Logo" />
												<x:img src="img/log_mzq.gif" width="53" height="60" onclick="toggle:no3,0" alt="Mozquito Logo" />
											</x:tg>
										</x:toggle>
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="257" preload="yes" alt="" />									
								</td>
								<td width="216" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Content</span>
										<div class="margin3">
											» plain text<br />
										</div>
									</div>
								</td>
							</tr>
						</table>
					</div>
					</x:tg>
<!-- form module / t e m p l at e  -->
					<x:tg id="p19">
						<x:insert  template="tmp1" >
							<x:prop name="group">Form module: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel"> template</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Description</span>
										<br /><br />The <span class="element">template </span> element defines a section of code 
									  for repeated use in the document. The content of the <span class="element">template </span>
									  element is not displayed. The contents of a <span class="element">template </span>
									  element are displayed later in the document with the <x:textoutput value="insert" onclick="toggle:pages,p20" class="element" />  
									  element. Inside the template, placeholders are defined using strings enclosed in pipes (| |).
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</td>
								<td width="216" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Attributes</span>
										<div class="margin3">
											» <x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" /><br />
											» <x:textoutput value="title" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="dir" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="lang" onclick="toggle:pages,p46" class="attribute" /><br />
										</div>
									</div>
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Sample Code</span>
										<br /><div class="code">
										<br /><x:template id="foo1">
										<br />  <x:textoutput value="I am defined in a template and inserted here!" id="output" />
										<br /></x:template>
										
										<br /><br /><x:template id="foo2">
										<br />  <x:textoutput value="This template is inserted with |text| color" id="output" />
										<br /></x:template>
										</div>
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</td>
								<td width="216" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Content</span>
										<div class="margin3">
											» plain text<br />
											» inline elements<br />
											» block elements<br />
											» tr elements<br />
											» td elements<br />
											» tg elements<br />
											» insert elements<br />
										</div>
									</div>
								</td>
							</tr>
						</table>
					</div>
					</x:tg>
<!-- form module / i n s e r t  -->
					<x:tg id="p20">
						<x:insert  template="tmp1" >
							<x:prop name="group">Form module: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel"> insert</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Description</span>
										<br /><br />At its position in a document, the <span class="element">insert</span> element
									  triggers a previously defined <x:textoutput value="template" onclick="toggle:pages,p19" class="element" />. 
									The <x:textoutput value="template" onclick="toggle:pages,p19" class="element" /> 
									  attribute refers to the <x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" /> of the target 
									<x:textoutput value="template" onclick="toggle:pages,p19" class="element" />.
										<br />Note that it is not immediately possible to reference the 
										<x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" />
									  of an element inserted with this mechanism: In a naive implementation, the 
									<x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" />
									  of the inserted copy of a <x:textoutput value="template" onclick="toggle:pages,p19" class="element" /> 
									would match
									  that of its corresponding source <x:textoutput value="template" onclick="toggle:pages,p19" class="element" /> 
									element,
									  thereby conflicting with XML's rule that each 
									<x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" />
									  in a document must be unique. Therefore, this specification
									  states that the <x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" /> of an inserted element be
									  created by combining the <x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" /> of the 
									<span class="element">insert</span>,
									  a dot (".") and the <x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" /> of the element.
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</td>
								<td width="216" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Attributes</span>
										<div class="margin3">
											» <x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" /><br />
											» <x:textoutput value="title" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="dir" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="lang" onclick="toggle:pages,p46" class="attribute" /><br />
											» <x:textoutput value="template" onclick="toggle:pages,p19" class="element" /><br />
										</div>
									</div>
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Sample Code</span>
										<br /><div class="code">
										<br /><x:insert template="foo1"></x:insert>
										<br /><x:insert template="foo1"></x:insert>
										</div>
										<br /><x:insert template="tmp_insert"></x:insert>
										<br /><x:insert template="tmp_insert"></x:insert>
										<br /><br />The <x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" /> of the <x:textoutput value="textoutput" onclick="toggle:pages,p05" class="element" /> 
 										in this example becomes "foo.output", assuming that this occurs in conjunction
									  with the <x:textoutput value="template" onclick="toggle:pages,p19" class="element" /> example.
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</td>
								<td width="216" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Content</span>
										<div class="margin3">
											» prop elements<br />
										</div>
									</div>
								</td>
							</tr>
						</table>
					</div>
					</x:tg>
<!-- form module / p r o p  -->
					<x:tg id="p21">
						<x:insert  template="tmp1" >
							<x:prop name="group">Form module: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel"> prop</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Description</span>
										<br /><br />The content of the <span class="element">prop</span> element replaces a placeholder 
									  when a predefined <x:textoutput value="template" onclick="toggle:pages,p19" class="element" /> is triggered. The <x:textoutput value="name" onclick="toggle:pages,p44" class="attribute" /> 
									  attribute of the <span class="element">prop</span> contains the name of the placeholder.
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</td>
								<td width="216" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Attributes</span>
										<div class="margin3">
											» <x:textoutput value="id" onclick="toggle:pages,p34" class="attribute" /><br />
											» <x:textoutput value="name" onclick="toggle:pages,p44" class="attribute" /><br />
											» <x:textoutput value="title" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="dir" onclick="toggle:pages,p45" class="attribute" /><br />
											» <x:textoutput value="lang" onclick="toggle:pages,p46" class="attribute" /><br />
										</div>
									</div>
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Sample Code</span>
										<br /><div class="code">
										<br /><x:insert template="foo2">
										<br />  <x:prop name="text">red</x:prop>
										<br /></x:insert>
										<br /><br /><x:insert template="foo2">
										<br />  <x:prop name="text">green</x:prop>
										<br /></x:insert>
									</div>
									<br /><x:insert template="tmp_prop">
										<x:prop name="text">red</x:prop>
										<x:prop name="color">red</x:prop>
									</x:insert>
									<br /><x:insert template="tmp_prop">
										<x:prop name="text">green</x:prop>
										<x:prop name="color">green</x:prop>
									</x:insert>
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</td>
								<td width="216" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="black9b">Content</span>
										<div class="margin3">
											» plain text<br />
										</div>
									</div>
								</td>
							</tr>
						</table>
					</div>
					</x:tg>
<!-- event handlers / o n c l i c k   &   o n c h a n g e  -->
					<x:tg id="p22">
						<x:insert  template="tmp1" >
							<x:prop name="group">Event handlers: </x:prop>
							<x:prop name="color">handlerb</x:prop>
							<x:prop name="titel"> onclick & onchange</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="416" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										<span class="handlerb">onclick </span><span class="black9b"> Description</span>
										<br /><br />The <span class="handler">onclick</span> event occurs when the mouse button is pressed and then released in a form element.
									</div>
									<div class="margin3">
										<br /><br /><span class="black9b">Sample Code</span>
										<br /><div class="code">
										<br /><x:button id="foo" onclick="toggle:MyToggle,2;" />
										</div>
									</div>
								</td>
								<td>
									<x:img src="img/grau.gif" width="1" height="227" preload="yes" alt="" />									
								</