ui:password

Purpose

Used for input of confidential or sensitive information such as passwords.

Refer to Password for further information.

Styles

The following styles apply to ui:password by default.

ui|password {
  display: inline;
}

Contains

Attributes

Attribute Description Type Default Options Use
maxlength The maximum number of characters allowed in the form field. xs:nonNegativeInteger     optional 
value The initial value of the control. xs:anySimpleType     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:password</title>
  </head>
  <body>
    <div>
      <div>
        <p>
          <ui:label for="pwd1">Password label: </ui:label>
          <ui:password id="pwd1" value="pass" maxlength="9"/>
        </p>
      </div>
      <div>
        <table>
          <tr>
            <td style="font-weight: bold;">Password properties:</td>
          </tr>
          <tr>
            <td>value</td>
            <td><cst:value property-value="pwd1#value" path="."/></td>
            <td>
              <ui:textfield id="pwd1value"/>
            </td>
            <td>
              <ui:button>
                <span>Update</span>
                <cf2:on event="cf2:activate">
                  <cf2:param component="pwd1" name="control"/>
                  <cf2:param component="pwd1value" 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="pwd1#maxlength" path="."/></td>
            <td>
              <ui:textfield id="pwd1maxlength"/>
            </td>
            <td>
              <ui:button>
                <span>Update</span>
                <cf2:on event="cf2:activate">
                  <cf2:param component="pwd1" name="control"/>
                  <cf2:param component="pwd1maxlength" 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="pwd1#readonly" path="."/></td>
            <td>
              <ui:button>
                <span>Switch</span>
                <cf2:on event="cf2:activate">
                  <cf2:param component="pwd1" 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="pwd1#required" path="."/></td>
            <td>
              <ui:button>
                <span>Switch</span>
                <cf2:on event="cf2:activate">
                  <cf2:param component="pwd1" 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="pwd1#enabled" path="."/></td>
            <td>
              <ui:button>
                <span>Switch</span>
                <cf2:on event="cf2:activate">
                  <cf2:param component="pwd1" name="control"/>
                  control.opGet('enabled').set(!control.opGet('enabled').get()); </cf2:on>
              </ui:button>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </body>
</html>

Related topics