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