xxf:maxlength
xxf:pattern
xxf:autocomplete
xxf:size
xxf:title
<xf:input>
may have the minimal
appearance:minimal
appearance, the label wins.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
.xxf:placeholder
appearance is deprecated. It has the same effect as the minimal
appearance. The latter is standardized in XForms 2.0.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.full
: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 emptyoxf.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 emptytooltip
: hints show as tooltips upon mouseovertooltip 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 emptyminimal
, it is possible to override the appearance on the control with appearance="full"
:xs:string
xs:boolean
xs:date
xs:date
dropdowns
fr:dropdown-date
xs:date
fields
fr:fields-date
xs:date
minimal
xs:time
xs:dateTime
fr:checkbox-input
component instead.oxf.xforms.datepicker.navigator
property.<xh:p>
.oxf.xforms.format.input.date
and oxf.xforms.format.input.time
properties.^tod
^tom
^yes
^(d{1,2})(st|nd|rd|th)?$
^(d{1,2})(?:st|nd|rd|th)? (w+)$
^(d{1,2})(?:st|nd|rd|th)? (w+),? (d{2,4})$
^(w+) (d{1,2})(?:st|nd|rd|th)?$
^(w+) (d{1,2})(?:st|nd|rd|th)?,? (d{2,4})$
^(\d{1,2})[./\-\s]?(\d{1,2})[./\-\s]?(\d{2,4})$
^(\d{1,2})[./\-\s](\d{1,2})$
^(\d{2})(\d{2})(\d{4})$
(^d{4})-(d{1,2})-(d{1,2})(Z|([+-]d{2}:d{2}))?$
oxf.xforms.format.input.date
property starts with [M
, and the "European format" when that property starts with [D
.<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: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.xxf:sanitize
attribute on the XForms model to set a filter local to a given page.