XForms/Secret

From Wikibooks, open books for an open world
Jump to navigation Jump to search

The XForms secret control[edit | edit source]

People that are sitting near you should not be able to see your password as you enter it. The secret control echos a "*" to the screen for each character you type.

Screen Image[edit | edit source]

Here is what the user interface would look like:

Login Screen Using HTML Fieldset and Legend Formatting

Sample Program[edit | edit source]

<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>

Testing[edit | edit source]

The login characters should be echoed back but the password field should just echo a "*" character for every character the user types.

Discussion[edit | edit source]

The values for the login and password are stored directly in the model.

This example uses a CSS style sheet to put the labels and fieldset legend in bold and align the login and password labels.

By default the fieldset box stretches the entire width of the page. You can make it static by adding a style attribute with the width set to 250 pixels like this:

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


Next Page: Message Types | Previous Page: Input Field Width
Home: XForms