XForms, Input Example

Basic Form Input

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.

Link to XForms Application

Input Fields

Program Structure

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

xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms">;

XForms inputs with labels

xmlns="">

Enter your first name, and last name.

ref="PersonGivenName" incremental="true">
First Name:
Also known as given name.

ref="PersonSurName" incremental="true">
Last Name:
Also known as sur name or family name.

Output First Name: ** ref="PersonGivenName"/>**

Output Last Name: ** ref="PersonSurName"/>**
Note that as you type the model output will be updated.

Hints

You can also provide the user with data entry hints using the element.

Discussion

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

W3C XForms specification for input control

Where this page came from

This page was imported from Wikibooks. From “XForms” on Wikibooks, by its contributors, under CC BY-SA 4.0. Changed here: set as a page; navigation and edit links left out; each image under its own licence, credited in its caption.

Nobody has written it yet — it is the source material at a new address, which is why search engines are asked to skip it and why no one earns from it. It is up for grabs: take it on, and it is yours to rewrite and to earn from.