ui:textarea

Purpose

A multi-line input control for large amounts of text.

The default value of the form field is the text between the <ui:textarea> and </ui:textarea> elements.

Refer to Text Area for further information.

Styles

The following styles apply to ui:textarea by default.

ui|textarea {
  display: inline;
}

Contains

Attributes

Attribute	Description	Type	Default	Options	Use
maxlength	The maximum number of characters allowed in the form field.	xs:nonNegativeInteger			optional

Attribute groups

Example

<?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:textarea</title>
  </head>
  <body>
    <div>
      <div>
        <p>
          <ui:label for="txtar1">Text Area label: </ui:label>
          <ui:textarea id="txtar1">initial-value</ui:textarea>
        </p>
      </div>
      <div>
        <table>
          <tr>
            <td style="font-weight: bold;">Text Area properties:</td>
          </tr>
          <tr>
            <td>value</td>
            <td><cst:value property-value="txtar1#value" path="."/></td>
            <td>
              <ui:textfield id="txtar1value"/>
            </td>
            <td>
              <ui:button>
                <span>Update</span>
                <cf2:on event="cf2:activate">
                  <cf2:param component="txtar1" name="control"/>
                  <cf2:param component="txtar1value" name="updater"/>
                  <cf2:param string="value" 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="txtar1#readonly" path="."/></td>
            <td>
              <ui:button>
                <span>Switch</span>
                <cf2:on event="cf2:activate">
                  <cf2:param component="txtar1" 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="txtar1#required" path="."/></td>
            <td>
              <ui:button>
                <span>Switch</span>
                <cf2:on event="cf2:activate">
                  <cf2:param component="txtar1" 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="txtar1#enabled" path="."/></td>
            <td>
              <ui:button>
                <span>Switch</span>
                <cf2:on event="cf2:activate">
                  <cf2:param component="txtar1" name="control"/>
                  control.opGet('enabled').set(!control.opGet('enabled').get()); </cf2:on>
              </ui:button>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </body>
</html>