Ir al contenido

XForms/Secret

De Wikilibros, la colección de libros de texto de contenido libre.

El control XForms secret

[editar]

Las personas sentadas cerca de usted pueden ver su password mientras lo ingresa. El control secret devuelve unos "*" a la pantalla por cada caracter que se digita.

Programa de Muestra

[editar]
<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

[editar]

Los caracteres de login deben ser retornados normalmente pero el campo de password debe solo retornar un caracter "*" por cada caracter que el usario digita.

Discusión

[editar]

Los valores para el login y password son grabados directamente en el model.

Este ejemplo usa una hoja de estilos CSS para poner las etiquetas label y fieldset en negrita y alinear las etiquetas de login y password.

Por defecto la fieldset box se extiende por todo el ancho de la página. Se puede hacer que esta esté estática agregando un atributo de estilo con el ancho establecido a 250 pixeles, así:

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