XForms/Secret

XForms secret 控制

坐在你附近的人不应该能够看到你输入密码时，secret 控制会为每个你输入的字符在屏幕上回显一个 "*".

屏幕图像

以下是用户界面看起来的样子

示例程序

<html
   xmlns="http://www.w3.org/1999/xhtml"
   xmlns:ev="http://www.w3.org/2001/xml-events"
   xmlns:xf="http://www.w3.org/2002/xforms">
   <head>
      <title>Sample XForms Login</title>
      <style type="text/css"><![CDATA[
   @namespace xf url("http://www.w3.org/2002/xforms");
  
  xf|group {
     display: table;
   }
   
   xf|input, xf|secret {
      display: table-row;
   }
   
   xf|value {
      text-align: left;
   }

  xf|label, legend {
      display: table-cell;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: bold;
      text-align: right;
      width: 100px;
   }
]]>      
</style>
      <xf:model>
         <xf:instance xmlns="">
            <Login>
               <LoginID />
               <Password />
            </Login>
         </xf:instance>
      </xf:model>
   </head>
   <body>
      <fieldset>
         <legend>System Login</legend>
      <xf:input ref="LoginID">
         <xf:label>Login: </xf:label>
      </xf:input>
      <br />
      <xf:secret ref="Password">
         <xf:label>Password: </xf:label>
      </xf:secret>
      </fieldset>
   </body>
</html>

测试

登录字符应该回显回来，但密码字段应该只为用户输入的每个字符回显一个"*"字符。

讨论

登录和密码的值直接存储在模型中。

此示例使用 CSS 样式表将标签和 fieldset 说明文字加粗，并对齐登录和密码标签。

默认情况下，fieldset 框会拉伸到页面的整个宽度。你可以通过添加一个带有宽度设置为 250 像素的样式属性来使其固定，例如

 <fieldset style="width: 250px;">

下一页: 消息类型 | 上一页: 输入字段宽度
首页: XForms