Jump to content

XForms/Input Example

From Wikibooks, open books for an open world

Basic Form Input

[edit | edit source]

One of the most common user interface controls in a web form is a simple, one-line text field. In this example we have a very simple form with two input fields. Each input has its own label to the left of the input field.

[edit | edit source]

Input Fields

Program Structure

[edit | edit source]

Our program has two parts, a model and a view. The model has instance data in it to store the values that the user enters in the form. The view is part of the presentation in the body of the HTML document.

Sample Program

[edit | edit source]
<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>First Name:</xf:label>
            <xf:hint>Also known as given name.</xf:hint>
         </xf:input>
         <br/>
         <xf:input ref="PersonSurName" incremental="true">
            <xf:label>Last Name:</xf:label>
            <xf:hint>Also known as sur name or family name.</xf:hint>
         </xf:input>
         <br/>
         <br/>
         Output First Name: <b><xf:output ref="PersonGivenName"/></b>
         <br/>
         Output Last Name: <b><xf:output ref="PersonSurName"/></b>
      <p>Note that as you type the model output will be updated.</p>
   </body>
</html>

Hints

[edit | edit source]

You can also provide the user with data entry hints using the <xf:hint> element.

Discussion

[edit | edit source]

Notice that as you type, the output gets immediately updated. This is because the XForms input control has an incremental="true" attribute.

Our model is simple, just the first and last name of a person.

Note that the label and hint tags are nested INSIDE the input tags.

References

[edit | edit source]

W3C XForms specification for input control

Next Page: Incremental Many to One | Previous Page: XForms Architecture
Home: XForms