Berikut adalah contoh componen inputbox pada zkoss
<grid vflex="1">
<columns>
<column label="Type" width="150px" />
<column label="Content" />
</columns>
<rows>
<row>
<label value="UserName" width="150px" />
<textbox value="Jerry" width="150px" />
</row>
<row>
Password
<textbox type="password" value="123456789" width="150px" />
</row>
<row>
Re-type Password
<textbox type="password" value="123456789" width="150px" />
</row>
<row>
Age:
<intbox value="19" constraint="no negative,no zero"
width="150px" />
</row>
<row>
Phone:
<intbox constraint="no negative,no zero" width="150px"
value="12345678" />
</row>
<row>
Weight:
<decimalbox format="###.##" value="154.32" width="150px" />
</row>
<row>
Birthday:
<hlayout>
<datebox id="db" width="150px" />
<listbox
onSelect="db.setFormat(self.selectedItem.value)" mold="select"
rows="1">
<listitem label="Default" value="" />
<listitem label="yyyy/MM/dd hh:mm a" value="yyyy/MM/dd hh:mm a" />
<listitem label="yyyy/MM/dd" value="yyyy/MM/dd" />
<listitem label="MM-dd-yy" value="MM-dd-yy" />
</listbox>
</hlayout>
</row>
<row>
Address
<vlayout>
<textbox width="250px"
value="123 W. 45 Street, New York, NY 10001" />
<hlayout>
<label value="Zip code :" />
<intbox constraint="no negative,no zero"
width="150px" />
</hlayout>
</vlayout>
</row>
<row>
E-mail:
<textbox width="150px" value="zk@zkoss.org"
constraint="/.+@.+\.[a-z]+/: Please enter an e-mail address" />
</row>
<row>
Introduction:
<hlayout>
<textbox id="intro" rows="3" width="250px">
<attribute name="value">I think ZK is the best! </attribute>
</textbox>
<vlayout>
More line :
<spinner value="3" constraint="no negative,no zero"
onChanging="if (event.value.length() > 0 && Integer.parseInt(event.value) > 0) intro.rows = Integer.parseInt(event.value);" />
</vlayout>
</hlayout>
</row>
<row>
Validation
<hlayout>
<vlayout>
<span sclass="edition-field">
Captcha and Colorbox requires
<a href="http://www.zkoss.org/product/zk/edition" sclass="edition-field" label=" ZK PE or EE."/>
</span>
<hlayout>
<textbox width="150px"
onChange='captchaResult.value = cpa.value.equalsIgnoreCase(self.value) ? "OK": "Wrong"'/>
<label id="captchaResult"/>
</hlayout>
<captcha id="cpa" length="6" width="150px"
height="50px" />
</vlayout>
<vlayout>
<label value=" " pre="true"/>
(Case Insensitive)
<button label="Regenerate"
onClick="cpa.randomValue();" />
<hlayout>
Background-Color:
<colorbox color="#FFFFFF" onChange="cpa.setBgColor(self.color); cpa.randomValue();" />
</hlayout>
</vlayout>
</hlayout>
</row>
</rows>
</grid>
