• Skip to main content
  • Select language
  • Skip to search
MDN Web Docs
  • Technologies
    • HTML
    • CSS
    • JavaScript
    • Graphics
    • HTTP
    • APIs / DOM
    • WebExtensions
    • MathML
  • References & Guides
    • Learn web development
    • Tutorials
    • References
    • Developer Guides
    • Accessibility
    • Game development
    • ...more docs
Archive of obsolete content
  1. MDN
  2. Archive of obsolete content
  3. Archived open Web documentation
  4. XForms
  5. Mozilla XForms User Interface

Mozilla XForms User Interface

In This Article
    1. Introduction
    2. Attribute Sets
      1. UI Common
      2. Binding attributes
    3. XForms Elements
      1. Form Controls Module
      2. Additional Elements
      3. XForms User Interface

Introduction

This article is a quick reference of the XForms user interface elements. Mainly this is aimed to document how XForms elements will be presented in Mozilla since the XForms specifications give only a hint of how controls might be rendered.

Currently XForms can be hosted by XHTML and XUL in Seamonkey and Firefox. Later we have plans to support XForms hosted by SVG. The XForms specs define two kinds of XForms UI elements, called 'Form Controls' and 'XForms User Interface'. Elements from the "Form Controls" group allows users to interact with instance data. The set of "XForms User Interface" elements exist to aid form authors in combining host language markup and XForms markup together in order to build user interfaces. Some of the 'Form Controls' can have multiple appearances and thus may be rendered in multiple ways. We use the data type of the instance node that the form control is bound to as a clue when making a rendering decision. The form author can also use the 'appearance' attribute on the form control to give us another clue. For example, a XForms input control may appear as a text field or as a datepicker depending on whether it is bound to a xsd:string type or a xsd:date type. When a xf:output binds to a node that has a type of xsd:date, we output the date value as plain text. An output bound to a date and also having @appearance='full' will display as a calendar.

This article uses several notations. If you see Fx 3.0 only, that means that the control will only be available for Firefox 3.0 (Gecko 1.9). There are several possible reasons for this restriction. The first is that the changes required for such controls could not be safely made to Firefox 1.5 or Firefox 2.0. The second is that the control is introduced in XForms 1.1 and we don't feel adding the enhancement would be prudent until the 1.1 spec is more stable. For instance, when the spec reaches 'recommendation'-level status. If you see xhtml/xul then it means the control is available when XForms is hosted in either XHTML or XUL. Similarly, if you see xhtml only or xul only, then it means the control is available only in that host language.

Attribute Sets

This section describes attributes that are often used on XForms elements. These attributes are combined into following logical groups.

UI Common

The UI Common attribute set (see the spec) contains the attributes that are available for the XForms elements that are used to build the user interface presentation in a form.

  • appearance - the value provided by the form author gives a hint to the processor as to which widget to use to represent the XForms control. Three possible values are available to the author: minimal, compact and full. Generally speaking, the main purpose for these values is to reflect how much space (screen real estate) the displayed widget will take.
  • tabindex - defines the keyboard navigation sequence between controls.
  • accesskey - keyboard shortcut for moving focus to an XForms element.

Binding attributes

Single-Node (see the spec) and Node-Set (see the spec) attributes are used to bind XForms elements to instance nodes. These attributes are: ref, nodeset, model and bind.

XForms Elements

Almost every XForms element can be presented as one of serveral different kinds of widgets. This section contains a short description of each XForms element and its representation. The XForms specification offers suggestions for some of the representations, but some of the widgets we use are only available in the Mozilla XForms processor. The choice of widget that we use is often determined by the data type of the instance node that the xforms element is bound to. The form author can also influence the widget by using the appearance attribute on the element.

Form Controls Module

This section contains a short description for each form control element.

input

A key xforms element to show and change the instance data to which it is bound. Usually bound to data that can be well-represented by a string (see the spec). It can have the following representations:

  • text field - default representation. Used for most data types, especially text data.
  • checkbox - used for boolean instance data
  • datepicker - default representation for date data types. Similar to a combobox. Consists of a text field for direct input and a dropdown calendar that can also be used to input the date value.
  • calendar - used for date data types when appearance = 'full'.
  • days list - used when the data has a data type of day.
  • months list - used when the data has a data type of month.
  • number field - used for numerical data types.
secret

Used for inputting passwords. Each character typed by the user is represented by an asterisk on the screen (see the spec).

textarea

Serves to show/change multiline text (see the spec).

output

Serves to show the instance data that the element is bound to in a read-only manner (see the spec). It can have the following presentations:

  • text - default representation for data of most types, especially static text.
  • calendar - used for date data types when appearance = 'full'.
  • image - if the instance node contains an image, then an output element can be used in combination with the mediatype element to display the image.
upload

Provides a means for the user to select a file (see the spec).

range

Allows the user to choose a value from within a specific range of values. It is represented by a slider widget (see the spec).

trigger

Allows the user to initiate actions (see the spec). It can have the following representations:

  • button - default representation.
  • link/clickable text - used when appearance = 'minimal'.
submit

Invokes the submission of the selected instance data to its target destination, which could be local or remote (see the spec). It can have the following representations:

  • button - default representation.
  • link/clickable text - used when appearance = 'minimal'.
select

List control. Allows the user to choose one or multiple values from a list of pre-defined values (see the spec). It can have the following representations:

  • listbox - default representation
  • checkbox group - used when appearance = 'full'
select1

Combobox control. Allows the user to choose a single value from a list of pre-defined values (see the spec). It can have the following representations:

  • combobox - default representation
  • listbox - used when appearance = 'compact'
  • radio group - used when appearance = 'full'

Additional Elements

These elements may be used as child elements to the form controls described above.

label

Specifies the label for the xforms control (see the spec). Every form control other than the output element must contain a label element. It is valid for a form control to have an empty label element.

help

Specifies contextual help for the containing form control (see the spec). The help will be displayed if the F1 key is pressed while the containing form control has focus.

hint

Similar to a tooltip (see the spec). The hint is displayed when the mouse moves and pauses over the containing form control.

alert

This message will be shown when the form control cannot properly bind to instance data or when the instance data value is invalid or out of the specified range of selectable values (see the spec).

message

Used in combination with event listeners to display a message to the user when the specified event occurs (see the spec).

XForms User Interface

These elements are mainly used to organize and manage the form's markup.

They can be bound to instance nodes to define context for the xforms controls that they contain, should any of their child nodes happen to use relative xpath expressions. Binding these elements to instance data is also a way to apply Model Item Properties (for example, relevancy) to the elements.

Elements in this section do not have any behaviors that are dependent on the host language.

group

This element is used to logically group xforms elements together (see the spec).

switch

This element is used in conjunction with case and toggle elements (see the spec). The switch element contains case elements which in turn contain markup. Only the contents of a single case may be displayed at one time. The toggle element is used (as an event handler) to make a case visible and thereby hiding all other case elements contained by the same switch.

repeat

A repeat element contains markup and is itself bound to a nodeset in an instance document (see the spec). For each node in the nodeset, the contents of the repeat element will be displayed in the form. That node will serve as the context node for any relative xpath expressions in that set of repeated markup. For example, if a repeat is bound to a nodeset that contains 5 nodes and the repeat contains an output element that echoes the current node, then the user will see 5 outputs in the form. Combined together, these outputs would echo the value of every node in the selected nodeset.

Document Tags and Contributors

Tags: 
  • XForms
 Contributors to this page: Sheppy, teoli, markg, Surkov.alexander, Mgjbot, Dmccreary
 Last updated by: Sheppy, Apr 14, 2014, 3:00:09 PM

  1. .htaccess ( hypertext access )
  2. <input> archive
  3. Add-ons
    1. Add-ons
    2. Firefox addons developer guide
    3. Interaction between privileged and non-privileged pages
    4. Tabbed browser
    5. bookmarks.export()
    6. bookmarks.import()
  4. Adding preferences to an extension
  5. An Interview With Douglas Bowman of Wired News
  6. Apps
    1. Apps
    2. App Development API Reference
    3. Designing Open Web Apps
    4. Graphics and UX
    5. Open web app architecture
    6. Tools and frameworks
    7. Validating web apps with the App Validator
  7. Archived Mozilla and build documentation
    1. Archived Mozilla and build documentation
    2. ActiveX Control for Hosting Netscape Plug-ins in IE
    3. Archived SpiderMonkey docs
    4. Autodial for Windows NT
    5. Automated testing tips and tricks
    6. Automatic Mozilla Configurator
    7. Automatically Handle Failed Asserts in Debug Builds
    8. BlackConnect
    9. Blackwood
    10. Bonsai
    11. Bookmark Keywords
    12. Building TransforMiiX standalone
    13. Chromeless
    14. Creating a Firefox sidebar extension
    15. Creating a Microsummary
    16. Creating a Mozilla Extension
    17. Creating a Release Tag
    18. Creating a Skin for Firefox/Getting Started
    19. Creating a Skin for Mozilla
    20. Creating a Skin for SeaMonkey 2.x
    21. Creating a hybrid CD
    22. Creating regular expressions for a microsummary generator
    23. DTrace
    24. Dehydra
    25. Developing New Mozilla Features
    26. Devmo 1.0 Launch Roadmap
    27. Download Manager improvements in Firefox 3
    28. Download Manager preferences
    29. Drag and Drop
    30. Embedding FAQ
    31. Embedding Mozilla in a Java Application using JavaXPCOM
    32. Error Console
    33. Exception logging in JavaScript
    34. Existing Content
    35. Extension Frequently Asked Questions
    36. Fighting Junk Mail with Netscape 7.1
    37. Firefox Sync
    38. Force RTL
    39. GRE
    40. Gecko Coding Help Wanted
    41. HTTP Class Overview
    42. Hacking wiki
    43. Help Viewer
    44. Helper Apps (and a bit of Save As)
    45. Hidden prefs
    46. How to Write and Land Nanojit Patches
    47. Introducing the Audio API extension
    48. Java in Firefox Extensions
    49. JavaScript crypto
    50. Jetpack
    51. Litmus tests
    52. Makefile.mozextension.2
    53. Microsummary topics
    54. Migrate apps from Internet Explorer to Mozilla
    55. Monitoring downloads
    56. Mozilla Application Framework
    57. Mozilla Crypto FAQ
    58. Mozilla Modules and Module Ownership
    59. Mozprocess
    60. Mozprofile
    61. Mozrunner
    62. Nanojit
    63. New Skin Notes
    64. Persona
    65. Plug-n-Hack
    66. Plugin Architecture
    67. Porting NSPR to Unix Platforms
    68. Priority Content
    69. Prism
    70. Proxy UI
    71. Remote XUL
    72. SXSW 2007 presentations
    73. Space Manager Detailed Design
    74. Space Manager High Level Design
    75. Standalone XPCOM
    76. Stress testing
    77. Structure of an installable bundle
    78. Supporting private browsing mode
    79. Table Cellmap
    80. Table Cellmap - Border Collapse
    81. Table Layout Regression Tests
    82. Table Layout Strategy
    83. Tamarin
    84. The Download Manager schema
    85. The life of an HTML HTTP request
    86. The new nsString class implementation (1999)
    87. TraceVis
    88. Treehydra
    89. URIScheme
    90. URIs and URLs
    91. Using Monotone With Mozilla CVS
    92. Using SVK With Mozilla CVS
    93. Using addresses of stack variables with NSPR threads on win16
    94. Venkman
    95. Video presentations
    96. Why Embed Gecko
    97. XML in Mozilla
    98. XPInstall
    99. XPJS Components Proposal
    100. XRE
    101. XTech 2005 Presentations
    102. XTech 2006 Presentations
    103. XUL Explorer
    104. XULRunner
    105. ant script to assemble an extension
    106. calICalendarView
    107. calICalendarViewController
    108. calIFileType
    109. xbDesignMode.js
  8. Archived open Web documentation
    1. Archived open Web documentation
    2. Browser Detection and Cross Browser Support
    3. Browser Feature Detection
    4. Displaying notifications (deprecated)
    5. E4X
    6. E4X Tutorial
    7. LiveConnect
    8. MSX Emulator (jsMSX)
    9. Old Proxy API
    10. Properly Using CSS and JavaScript in XHTML Documents
    11. Reference
    12. Scope Cheatsheet
    13. Server-Side JavaScript
    14. Sharp variables in JavaScript
    15. Standards-Compliant Authoring Tools
    16. Using JavaScript Generators in Firefox
    17. Window.importDialog()
    18. Writing JavaScript for XHTML
    19. XForms
    20. background-size
    21. forEach
  9. B2G OS
    1. B2G OS
    2. Automated Testing of B2G OS
    3. B2G OS APIs
    4. B2G OS add-ons
    5. B2G OS architecture
    6. B2G OS build prerequisites
    7. B2G OS phone guide
    8. Building B2G OS
    9. Building and installing B2G OS
    10. Building the B2G OS Simulator
    11. Choosing how to run Gaia or B2G
    12. Customization with the .userconfig file
    13. Debugging on Firefox OS
    14. Developer Mode
    15. Developing Firefox OS
    16. Firefox OS Simulator
    17. Firefox OS apps
    18. Firefox OS board guide
    19. Firefox OS developer release notes
    20. Firefox OS security
    21. Firefox OS usage tips
    22. Gaia
    23. Installing B2G OS on a mobile device
    24. Introduction to Firefox OS
    25. Mulet
    26. Open web apps quickstart
    27. Pandaboard
    28. PasscodeHelper Internals
    29. Porting B2G OS
    30. Preparing for your first B2G build
    31. Resources
    32. Running tests on Firefox OS: A guide for developers
    33. The B2G OS platform
    34. Troubleshooting B2G OS
    35. Using the App Manager
    36. Using the B2G emulators
    37. Web Bluetooth API (Firefox OS)
    38. Web Telephony API
    39. Web applications
  10. Beginner tutorials
    1. Beginner tutorials
    2. Creating reusable content with CSS and XBL
    3. Underscores in class and ID Names
    4. XML data
    5. XUL user interfaces
  11. Case Sensitivity in class and id Names
  12. Creating a dynamic status bar extension
  13. Creating a status bar extension
  14. Gecko Compatibility Handbook
  15. Getting the page URL in NPAPI plugin
  16. Index
  17. Inner-browsing extending the browser navigation paradigm
  18. Install.js
  19. JXON
  20. List of Former Mozilla-Based Applications
  21. List of Mozilla-Based Applications
  22. Localizing an extension
  23. MDN
    1. MDN
    2. Content kits
  24. MDN "meta-documentation" archive
    1. MDN "meta-documentation" archive
    2. Article page layout guide
    3. Blog posts to integrate into documentation
    4. Current events
    5. Custom CSS classes for MDN
    6. Design Document
    7. DevEdge
    8. Developer documentation process
    9. Disambiguation
    10. Documentation Wishlist
    11. Documentation planning and tracking
    12. Editing MDN pages
    13. Examples
    14. Existing Content/DOM in Mozilla
    15. External Redirects
    16. Finding the right place to document bugs
    17. Getting started as a new MDN contributor
    18. Landing page layout guide
    19. MDN content on WebPlatform.org
    20. MDN page layout guide
    21. MDN subproject list
    22. Needs Redirect
    23. Page types
    24. RecRoom documentation plan
    25. Remove in-content iframes
    26. Team status board
    27. Trello
    28. Using the Mozilla Developer Center
    29. Welcome to the Mozilla Developer Network
    30. Writing chrome code documentation plan
    31. Writing content
  25. MMgc
  26. Makefile - .mk files
  27. Marketplace
    1. Marketplace
    2. API
    3. Monetization
    4. Options
    5. Publishing
  28. Mozilla release FAQ
  29. Newsgroup summaries
    1. Newsgroup summaries
    2. Format
    3. Mozilla.dev.apps.firefox-2006-09-29
    4. Mozilla.dev.apps.firefox-2006-10-06
    5. mozilla-dev-accessibility
    6. mozilla-dev-apps-calendar
    7. mozilla-dev-apps-firefox
    8. mozilla-dev-apps-thunderbird
    9. mozilla-dev-builds
    10. mozilla-dev-embedding
    11. mozilla-dev-extensions
    12. mozilla-dev-i18n
    13. mozilla-dev-l10n
    14. mozilla-dev-planning
    15. mozilla-dev-platform
    16. mozilla-dev-quality
    17. mozilla-dev-security
    18. mozilla-dev-tech-js-engine
    19. mozilla-dev-tech-layout
    20. mozilla-dev-tech-xpcom
    21. mozilla-dev-tech-xul
    22. mozilla.dev.apps.calendar
    23. mozilla.dev.tech.js-engine
  30. Obsolete: XPCOM-based scripting for NPAPI plugins
  31. Plugins
    1. Plugins
    2. Adobe Flash
    3. External resources for plugin creation
    4. Logging Multi-Process Plugins
    5. Monitoring plugins
    6. Multi-process plugin architecture
    7. NPAPI plugin developer guide
    8. NPAPI plugin reference
    9. Samples and Test Cases
    10. Shipping a plugin as a Toolkit bundle
    11. Supporting private browsing in plugins
    12. The First Install Problem
    13. Writing a plugin for Mac OS X
    14. XEmbed Extension for Mozilla Plugins
  32. SAX
  33. Security
    1. Security
    2. Digital Signatures
    3. Encryption and Decryption
    4. Introduction to Public-Key Cryptography
    5. Introduction to SSL
    6. NSPR Release Engineering Guide
    7. SSL and TLS
  34. Solaris 10 Build Prerequisites
  35. Sunbird Theme Tutorial
  36. Table Reflow Internals
  37. Tamarin Tracing Build Documentation
  38. The Basics of Web Services
  39. Themes
    1. Themes
    2. Building a Theme
    3. Common Firefox theme issues and solutions
    4. Creating a Skin for Firefox
    5. Making sure your theme works with RTL locales
    6. Theme changes in Firefox 2
    7. Theme changes in Firefox 3
    8. Theme changes in Firefox 3.5
    9. Theme changes in Firefox 4
  40. Updating an extension to support multiple Mozilla applications
  41. Using IO Timeout And Interrupt On NT
  42. Using SSH to connect to CVS
  43. Using workers in extensions
  44. WebVR
    1. WebVR
    2. WebVR environment setup
  45. XQuery
  46. XUL Booster
  47. XUL Parser in Python