Orbeon Forms
  • Getting started
  • Installation
    • Logging
    • Configuration banner
    • Docker
    • Azure
    • Tomcat
    • WildFly
    • WebSphere
    • WebLogic
    • GlassFish
    • Caches
    • Replication
    • Upgrading
  • Configuration
    • Properties
      • General
        • HTTP client
      • Form Runner
        • Detail page
          • Attachments
          • Email properties
          • PDF
          • Table of contents
        • Persistence
        • Summary page
      • Form Builder
      • XForms
    • Advanced
      • Workflows
      • Session management
      • State handling
      • Client-side error handling
      • Clustering and High Availability
      • Configuring a Form Runner eXist database
      • Creating a production WAR
      • Environments
      • JavaScript and CSS assets
      • Limiter filter
      • Run modes
      • Security
        • Content-Security-Policy header
      • SAP Hybris Module
      • XForms logging
    • Troubleshooting
      • Troubleshooting with the orbeon.log
      • Memory and threads
      • Relational database logging
      • Misc
  • Form Builder
    • Form settings
      • Time window
    • Form editor
      • Form area
      • Toolbox
      • Buttons bar
      • Control settings
      • Dependent fields and sections
      • Validation
      • Choices editor
      • Publishing
      • Cut, copy and paste
      • Section and grid settings
      • Section settings
      • Grid settings
      • Quick control search
      • Repeat settings
      • Repeated grids
      • Undo and redo
      • Keyboard shortcuts
    • Formulas
      • Examples of formulas
      • Formulas inspector
      • Formulas console
    • Summary page
    • Form localization
    • Advanced
      • Edit source
      • Services and actions
        • HTTP services
        • Database services
        • Simple Actions
        • Action Syntax
        • Action Syntax examples
        • Synchronizing repeated content
      • Testing a form in web mode
      • Testing PDF production
      • Testing offline functionality
      • Email Settings dialog
      • Field-level encryption
      • Messages
      • Section templates
      • Template syntax
      • XML Schemas support
      • Extensibility
        • Extension API
        • Integration
        • Toolbox component metadata
  • Form Runner
    • Overview
      • Terminology
    • Pages
      • Landing page
      • Published Forms page
      • Forms Admin page
      • Summary page
    • Components
      • Alert dialog
      • Attachment
      • Autocomplete
      • Captcha
      • Character counter
      • Checkbox input
      • Currency
      • Date
      • Dropdown date
      • Static and dynamic dropdown
      • Error summary
      • Grid
      • Handwritten signature
      • Hidden field
      • Image
      • Image annotation
      • Image attachment
      • Number
      • Open selection
      • Repeater
      • Formatted Text / Rich Text Editor
      • Section
      • Single-selection tree
      • Source code editor
      • Time
      • US phone
      • US state
      • Video
      • Video attachment
      • Wizard
      • XForms inspector
      • Yes/No answer
    • Features
      • Automatic calculations dependencies
      • Datasets
      • Excel and XML import
      • Excel and XML export
      • Summary page Excel Export
      • Form definitions and form data Zip Export
      • Purging historical data
      • Lease
      • Localization
      • Supported languages
      • Mobile support
      • Multitenancy
      • Form Runner navigation bar
      • PDF production
        • Automatic PDF
        • Automatic PDF header and footer configuration
        • PDF templates
      • Responsive design
      • Revision history
      • S3 storage
      • Simple data migration
      • TIFF production
      • Versioning
      • Wizard view
      • Workflow stage
    • Persistence
      • Using a relational database
      • Relational database schema
      • Purging old data using SQL
      • Auditing
      • Autosave
      • Database support
      • Flat view
    • Linking and embedding
      • Linking
      • Java Embedding API
      • JavaScript Embedding API
      • Liferay full portlet
      • Liferay proxy portlet
      • Securing Form Runner access
      • Form Runner offline embedding API
      • Angular component
      • React component
    • Access control and permissions
      • Users
      • Login & Logout
      • Deployed forms
      • Form fields
      • Editing forms
      • Owner and group member
      • Organizations
      • Scenarios
      • Token-based permissions
    • Styling
      • CSS
      • Grids CSS
      • Automatic PDF styling and CSS
    • APIs
      • Authentication of server-side service APIs
      • Persistence API
        • CRUD API
        • Search API
        • List form data attachments API
        • Form Metadata API
        • Lease API
        • Reindexing API
        • Caching
        • Versioning
        • Revision History API
        • Zip Export API
        • Custom persistence providers
      • Other APIs
        • Connection context API
        • Duplicate form data API
        • File scan API
        • Form Runner JavaScript API
        • Generate XML Schema API
        • PDF API
        • Publish form definition API
        • Run form in the background API
      • Data formats
        • Form data
        • Date and time
        • Form definition
    • Architecture and integration
      • Architecture
      • Access form data
      • Integration
    • Advanced
      • Buttons and processes
        • Simple process syntax
        • Core actions
        • Form Runner actions
          • Save action
          • Send action
          • Email action
        • XForms actions
        • Predefined buttons, processes and dialogs
        • Summary page buttons and processes
      • Custom dialogs/model logic
      • Services
      • Singleton form
      • Monitoring HTTP requests
  • XForms
    • Core
      • Attribute Value Templates (AVTs)
      • Binds
      • Validation
      • Variables
      • Keyboard focus
      • XForms JavaScript API
      • Error handling
        • Detailed behavior
      • Model-Bind variables
      • XForms 2.0 support
    • Events
      • Standard support
      • UI refresh events
      • Keyboard events
      • Extension events
      • Extension context information
      • Other event extensions
    • Actions
      • Repeat, insert and delete
      • Scripting actions
      • Extensions
    • Controls
      • Label, hint, help
      • Input
      • Output
      • Text area
      • Button
      • Upload
      • Dialog
    • Submission
      • Standard support
      • JSON support
      • Asynchronous submissions
      • Caching extension
      • Other submission extensions
    • XPath
      • Type annotations
      • Expression analysis
      • Tips
      • Compatibility
      • Standard functions
      • Maps and arrays Functions
      • Extension functions
        • Core functions
        • Utility functions
        • Model functions
        • Controls functions
        • XML functions
        • JSON functions
        • HTTP functions
        • Form Runner functions
        • Other functions
        • Deprecated functions
    • XBL components
      • FAQ
      • Guide
        • XBL Tutorial
        • Bindings
        • XForms models
        • Including content
        • Event handling
        • Conventions
        • Map XBL example
        • Learning from existing components
      • Advanced topics
        • XBL Modes
        • JavaScript companion classes
        • XBL library
        • Extensions
        • Attachment controls
    • XForms tutorial
      • Introduction
      • Installation
      • The Hello application
      • The Bookcast application
        • The basic app
        • Database access
        • Polishing the app
        • Adding a feed
    • Using XForms from Java apps
  • XML Platform
    • Page Flow Controller
      • Basics
      • XML submission
      • Navigating between pages
      • Paths and matchers
      • Other configuration elements
      • Typical combinations of page model and page view
      • Examples
      • Authorizing pages and services
    • Processors
      • URL generator
      • Request generator
      • PDF to image converter
    • Resources
      • Resource managers
      • Setting up an external resources directory
    • Other
      • Binary and text documents
  • FAQ
    • Licensing
    • PE and Dev Support
    • Form Builder and Form Runner
    • Resources and support
    • Other technical questions
  • Contributors
    • Automated tests
    • Building Orbeon Forms
    • Localizing Orbeon Forms
    • Validation functions
    • Contributor License Agreement
  • Release notes
    • Orbeon Forms 2022.1.9
    • Orbeon Forms 2024.1.1
    • Orbeon Forms 2023.1.7
    • Orbeon Forms 2024.1
    • Orbeon Forms 2023.1.6
    • Orbeon Forms 2023.1.5
    • Orbeon Forms 2021.1.11
    • Orbeon Forms 2022.1.8
    • Orbeon Forms 2023.1.4
    • Orbeon Forms 2023.1.3
    • Orbeon Forms 2023.1.2
    • Orbeon Forms 2022.1.7
    • Orbeon Forms 2023.1.1
    • Orbeon Forms 2023.1
    • Orbeon Forms 2022.1.6
    • Orbeon Forms 2021.1.10
    • Orbeon Forms 2022.1.5
    • Orbeon Forms 2021.1.9
    • Orbeon Forms 2022.1.4
    • Orbeon Forms 2022.1.3
    • Orbeon Forms 2021.1.8
    • Orbeon Forms 2022.1.2
    • Orbeon Forms 2022.1.1
    • Orbeon Forms 2022.1
    • Orbeon Forms 2021.1.7
    • Orbeon Forms 2021.1.6
    • Orbeon Forms 2021.1.5
    • Orbeon Forms 2021.1.4
    • Orbeon Forms 2021.1.3
    • Orbeon Forms 2021.1.2
    • Orbeon Forms 2021.1.1
    • Orbeon Forms 2021.1
    • Orbeon Forms 2020.1.6
    • Orbeon Forms 2019.2.4
    • Orbeon Forms 2019.1.2
    • Orbeon Forms 2018.2.5
    • Orbeon Forms 2018.1.4
    • Orbeon Forms 2020.1.5
    • Orbeon Forms 2020.1.4
    • Orbeon Forms 2020.1.3
    • Orbeon Forms 2020.1.2
    • Orbeon Forms 2019.2.3
    • Orbeon Forms 2020.1.1
    • Orbeon Forms 2020.1
    • Orbeon Forms 2019.2.2
    • Orbeon Forms 2019.2.1
    • Orbeon Forms 2019.1.1
    • Orbeon Forms 2019.2
    • Orbeon Forms 2019.1
    • Orbeon Forms 2018.2.4
  • Release history
  • Use cases
  • Product roadmap
  • Index of features
Powered by GitBook
On this page
  • Basic Usage
  • Standard appearance
  • Attributes
  • Placeholder for label and hint
  • Appearance based on type and appearance
  • date, time, and dateTime types
  • Date picker configuration
  • Smart date and time format
  • Two digits years
  • Date picker internationalization
  • Date picker in scrollable area
  • On iOS
  • Limitations
  • Text input sanitization
  • See also
  1. XForms
  2. Controls

Input

PreviousLabel, hint, helpNextOutput

Last updated 2 months ago

Basic Usage

<xf:input ref="text"/>

Standard appearance

By default, the text area control is rendered as a regular single-line input field:

Examples of input fields

Attributes

With the standard appearance, the following attributes are available and forwarded to the corresponding HTML element:

  • xxf:maxlength

  • xxf:pattern

    • SINCE Orbeon Forms 2016.1

  • xxf:autocomplete

  • xxf:size

    • not recommended, use CSS instead

  • xxf:title

    • SINCE Orbeon Forms 2016.1

    • can be useful for accessibility

Example:

<xf:input ref="text" xxf:autocomplete="off"/>

Placeholder for label and hint

Per-control properties

The label or hint associated with <xf:input> may have the minimal appearance:

<xf:input ref=".">
    <xf:label appearance="minimal">Your name</xf:label>
    <xf:hint>Hint</xf:hint>
</xf:input>

<xf:input ref=".">
    <xf:label>Your name</xf:label>
    <xf:hint appearance="minimal">Hint</xf:hint>
</xf:input>

This causes either the label or the hint to appear on the background of the field when it is empty. If both the label and hint have a minimal appearance, the label wins.

This is only supported for text, date, and time input fields.

Orbeon Forms leverages the HTML 5 placeholder attribute for browsers that support it (Firefox 3.5+, Chrome, Safari, Opera), and simulates the HTML 5 placeholder functionality in JavaScript for browsers that don't support it (IE8 and IE9). In that case, you can customize how the placeholder is displayed by overriding the CSS class xforms-placeholder.

NOTE: The xxf:placeholder appearance is deprecated. It has the same effect as the minimal appearance. The latter is standardized in XForms 2.0.

Per-form properties

[SINCE Orbeon Forms 2016.2]

The XForms oxf.xforms.label.appearance or oxf.xforms.hint.appearance (or the corresponding xxf:label.appearance and xxf:hint.appearance attributes on the first <xf:model> element) allow setting a default for the labels and hint appearances for the entire form.

The default value is full:

<property
    as="xs:string"  
    name="oxf.xforms.label.appearance"                            
    value="full"/>
    
<property
    as="xs:string"  
    name="oxf.xforms.hint.appearance"                             
    value="full"/>

Supported values for oxf.xforms.label.appearance:

  • full: labels show inline above the control (the default)

  • full minimal: labels show inline above the control, but for text, date, and time input fields only, labels show as an HTML placeholder within the field when the field is empty

Supported values for oxf.xforms.hint.appearance:

  • full: hints show inline below the control (the default)

  • full minimal: hints show inline below the control, but for text, date, and time input fields only, hints show as an HTML placeholder within the field when the field is empty

  • tooltip: hints show as tooltips upon mouseover

  • tooltip minimal: hints show as tooltips upon mouseover, but for text, date, and time input fields only, hints show as an HTML placeholder within the field when the field is empty

When the global property includes minimal, it is possible to override the appearance on the control with appearance="full":

<xf:input ref=".">
    <xf:label appearance="full">Your name</xf:label>
    <xf:hint>Hint</xf:hint>
</xf:input>

<xf:input ref=".">
    <xf:label>Your name</xf:label>
    <xf:hint appearance="full">Hint</xf:hint>
</xf:input>

Appearance based on type and appearance

The way the XForms input control is rendered on the page depends on the type of the node it is bound to, and possibly the control's appearance:

Type
Appearance
Description

xs:string

standard input field

xs:string

character-counter

xs:boolean

single checkbox

xs:date

input field with date picker and date parsing and formatting

xs:date

dropdowns

maps to fr:dropdown-date

xs:date

fields

maps to fr:fields-date

xs:date

minimal

icon with date picker without an input field

xs:time

input field with time parsing and formatting

xs:dateTime

combined date and time fields

NOTE: The Boolean input is deprecated. Use the fr:checkbox-input component instead.

date, time, and dateTime types

Date picker configuration

NOTE: Make sure not to use the date picker inside an <xh:p>.

Smart date and time format

The date and time controls allow you to type a date and a time in a number of formats, as listed below. When the field loses the focus, the value you entered is parsed and, if recognized, stored and then formatted according to a configurable format.

Date formats:

Example
Note

today

tomorrow

yesterday

4th

The 4th of the current year and month

4th Jan

4th Jan 2003

Jan 4th

Jan 4th 2003

10/20/2000 ("US format") or 20/10/2000 ("European format")

10/20 ("US format") or 20/10 ("European format")

10202000 ("US format") or 20102000 ("European format")

[SINCE Orbeon Forms 2017.2]

2000-10-20

ISO or "Asian" format

In the table above, the "US format" applies the oxf.xforms.format.input.date property starts with [M, and the "European format" when that property starts with [D.

Two digits years

If you type in a date field a year with only two digits (say 5/20/10), the control will assume that you intended to type a year in the twentieth or twenty-first century, rather than a year in the first century. It will convert the two-digit year you typed into a four digits year by taking the corresponding year in either the twentieth or twenty first century based on which one is closest to the current year. So for instance, if the current year is 2020:

  • 10 is changed to 2010

  • 80 is changed to 1980

  • 60 is changed to 2060

Date picker internationalization

Date picker in scrollable area

If you are using the date picker in an area of your page which is scrollable (e.g. <div style="overflow: scroll">), if users scroll in that area while the date picker is open, you want the date picker to be anchored to the field it is related to and to scroll with the content of the scrollable area (versus being attached to the page, and only scrolling if the page is scrolled). For this to work, assuming you have the class scrollable-area on your scrollable area, you need to add the following CSS:

.scrollable-area { position: relative }

On iOS

On iOS (iPhone, iPad, iPod touch), inputs bound to nodes of type xs:date, xs:time, or xs:dateTime are rendered using the iOS 5 browser native date or time widgets, which iOS users are accustomed to, and which provides a better usability, especially on the smaller screen iPhone and iPod touch.

Limitations

  • If the time has a milliseconds part:

    • The time will be shown without the milliseconds part.

    • If users modify the time, the milliseconds part will be lost.

  • If the time has a timezone specification:

    • The date will be shown as if the time zone indication was not there.

    • If users modify the time the time zone will be lost.

Text input sanitization

[SINCE Orbeon Forms 4.0.1]

Input sanitization allows you to apply a filter on the data entered by the user, before the data is stored into instance data. One use of sanitization is to replace undesired characters. For example, the following will replace sign and double rounded quotes with straight quotes, several long dashes with regular dashes and ellipsis character with three dots:

<property as="xs:string" name="oxf.xforms.sanitize">
    {
        "&#x2018;": "&#039;",
        "&#x2019;": "&#039;",
        "&#x201c;": "\"",
        "&#x201d;": "\"",
        "&#x2013;": "&#045;",
        "&#x2014;": "&#045;",
        "&#x2219;": "&#045;",
        "&#x2022;": "&#045;",
        "&#x00BF;": "&#063;",
        "&#x2026;": "..."
    }
</property>

The configuration is a JSON map of string to string. The algorithm is as follows:

  • If the configuration is blank string, sanitization is turned off.

  • If not blank, then the JSON configuration is parsed and sanitization is turned on.

  • Each mapping contains a search string on the left, and a replacement string on the right.

  • For each mapping, all instances of the search string in the input data are replaced with the replacement string.

  • Each replacement is applied in the order in which it appears in the JSON map.

Although this would be probably useless, and is definitely not recommended, the following would replace all instances of "Hello!" with "Hi!":

<property as="xs:string" name="oxf.xforms.sanitize">
    {
        "Hello!": "Hi!"
    }
</property>

Input sanitization applies only to:

  • input fields bound to string data

  • text areas

You can also use the xxf:sanitize attribute on the XForms model to set a filter local to a given page.

See also

input field with

When using the date picker, you can choose whether you want 2 months to be displayed instead of one, and whether users should be able to quickly navigate to a specific year and month by setting the property.

For times, see .

By default, the months and days of the week are in English in the date picker (as shown in the screenshot above). You can change this by setting the value of the lang attribute on the element of the page. The value of the attribute two-letter . For instance with months and weekdays will be shown in French, for instance:

For more on which languages are supported localized out-of-the-box, see . Note that the changing the language also changes which day of the week is shown first in the calendar: in English, Sunday is shown first; with French and Spanish, Monday is shown first.

Blog post:

Time component
ISO 639-1 language code
supported languages
Use HTML5 placeholders, in XForms
character counter
Boolean input
Date picker
Date and time input variations
Localized date picker
iOS date picker
iOS time picker
oxf.xforms.datepicker.navigator