XForms/Editar contenido con xf:input

Ventana Basica de entrada

editar

Uno de los controles de interfaz de usuario mas comunes es un web form es un simple campo de texto de una linea. en este ejemplo tenemos una ventana bastante simple con dos campos de entrada. Cada entrada tiene su propia etiqueta a la izquierda del campo de entrada.

 

Enlace a la aplicacion XForms

editar

Nota: no soy el autor original de este ejemplo solamente lo tomo con fines ilustrativos.
Campos de entrada

Estructura del programa ejemplo

editar

El ejemplo tiene dos partes, un modelo y una vista; el modelo tiene datos de instancia que son para almacenar los datos que el usuario ingresa en los campos. La vista es la presentacion que se encuentra en el Body del documento HTML.

Codigo del ejemplo

editar
<html
 xmlns="http://www.w3.org/1999/xhtml"
 xmlns:xf="http://www.w3.org/2002/xforms">
   <head>
      <title>XForms inputs with labels</title>
      <xf:model>
         <xf:instance xmlns="">
            <data>
               <PersonGivenName/>
               <PersonSurName/>
            </data>
         </xf:instance>
      </xf:model>
   </head>
   <body>
      <p>Enter your first name, and last name.</p>
         <xf:input ref="PersonGivenName" incremental="true">
            <xf:label>Input First-Name:</xf:label>
            <xf:hint>Also known as given name.</xf:hint>
         </xf:input>
         <br />
         <xf:input ref="PersonSurName" incremental="true">
            <xf:label>Input Last Name:</xf:label>
            <xf:hint>Also known as sur name or family name.</xf:hint>
         </xf:input>
         <br />
         <br />
         Output First Name: '''<xf:output ref="PersonGivenName"/>'''
         <br />
         Output Last Name: '''<xf:output ref="PersonSurName"/>'''
      <p>Note that as you type the model output will be updated.</p>
   </body>
</html>

Hints o ToolTips

editar

Tambien se pueden colocar "pistas" para el usuario usando el elemento <xf:hint> que sera esa pequeña burbuja que sale al poner el puntero sobre el campo

Referencias

editar

W3C XForms specification for input control