The following styles apply to ui:textfield by default.
ui|textfield {
display: inline;
}| Attribute | Description | Type | Default | Options | Use |
|---|---|---|---|---|---|
| max | An optional maximum bound of possible values. | xs:string (restriction pattern: [\P{Zs}]+) | optional | ||
| maxlength | The maximum number of characters allowed in the field. | xs:nonNegativeInteger | optional | ||
| min | An optional minimum bound of possible values. | xs:string (restriction pattern: [\P{Zs}]+) | optional | ||
| pattern | A JavaScript regular expression pattern that defines the valid strings that can be entered into the field. | xs:string | optional | ||
| step | An optional delta-value to use for incrementing or decrementing the value. | xs:string (restriction pattern: [\P{Zs}]+) | optional | ||
| type | The type of data that can be entered into the field. | xs:NCName | text | date, datetime, email, number, tel, text, time, url | optional |
| value | The initial value of the control. | xs:anySimpleType | optional |
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
xmlns:cst="http://www.volantis.com/xmlns/2009/07/cf2/template"
xmlns:cf2="http://www.volantis.com/xmlns/2009/07/cf2"
xmlns:ui="http://www.volantis.com/xmlns/2009/07/cf2/ui">
<head>
<title>ui:textfield</title>
</head>
<body>
<div>
<div>
<p>
<ui:label for="txtfld1">Text Field label: </ui:label>
<ui:textfield id="txtfld1" value="init" maxlength="5"/>
</p>
</div>
<div>
<table>
<tr>
<td style="font-weight: bold;">Text Field properties:</td>
</tr>
<tr>
<td>value</td>
<td><cst:value property-value="txtfld1#value" path="."/></td>
<td>
<ui:textfield id="txtfld1value"/>
</td>
<td>
<ui:button>
<span>Update</span>
<cf2:on event="cf2:activate">
<cf2:param component="txtfld1" name="control"/>
<cf2:param component="txtfld1value" name="updater"/>
<cf2:param string="value" name="op"/>
control.opGet(op).set(updater.opGet('value').get()); </cf2:on>
</ui:button>
</td>
</tr>
<tr>
<td>maxlength</td>
<td><cst:value property-value="txtfld1#maxlength" path="."/></td>
<td>
<ui:textfield id="txtfld1maxlength"/>
</td>
<td>
<ui:button>
<span>Update</span>
<cf2:on event="cf2:activate">
<cf2:param component="txtfld1" name="control"/>
<cf2:param component="txtfld1maxlength" name="updater"/>
<cf2:param string="maxlength" name="op"/>
control.opGet(op).set(updater.opGet('value').get()); </cf2:on>
</ui:button>
</td>
</tr>
<tr>
<td>readonly</td>
<td><cst:value property-value="txtfld1#readonly" path="."/></td>
<td>
<ui:button>
<span>Switch</span>
<cf2:on event="cf2:activate">
<cf2:param component="txtfld1" name="control"/>
control.opGet('readonly').set(!control.opGet('readonly').get()); </cf2:on>
</ui:button>
</td>
</tr>
<tr>
<td>required</td>
<td><cst:value property-value="txtfld1#required" path="."/></td>
<td>
<ui:button>
<span>Switch</span>
<cf2:on event="cf2:activate">
<cf2:param component="txtfld1" name="control"/>
control.opGet('required').set(!control.opGet('required').get()); </cf2:on>
</ui:button>
</td>
</tr>
<tr>
<td>enabled</td>
<td><cst:value property-value="txtfld1#enabled" path="."/></td>
<td>
<ui:button>
<span>Switch</span>
<cf2:on event="cf2:activate">
<cf2:param component="txtfld1" name="control"/>
control.opGet('enabled').set(!control.opGet('enabled').get()); </cf2:on>
</ui:button>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>