CSS
Hover the classes to see matching element(s) in the example
InlineAlert matches a body that uses inline alerts
xfInput matches an Element that represents a XForms input element
xfAlert matches an Element that represents a XForms alert element
xfControl matches an Element that represents a XForms control
xfLabel matches the label part of an XForms control
xfValue matches the widget part of an XForms control
xfReadOnly matches a xforms control that is currently readonly
xfReadWrite matches a xforms control that is currently writable
xfRequired matches a xforms control that is currently required
xfOptional matches a xforms control that is currently optional
xfEnabled matches a xforms control that is currently relevant (enabled)
xfDisabled matches a xforms control that is currently disabled (can't be visualized here as the control gets hidden)
xfValid matches a xforms control that is currently valid
xfInvalid matches a xforms control that is currently invalid

# Default Alert Handler - inline alerts

This form shows the default alert handling which is choosen when you do not specify via some custom class (see other examples). This will show alert messages inline with their controls.

By default alerts are displayed to the right of the widget but this can be influenced by overwriting the xfAlert styles. It is the most common rendering of an input which is bound to a string value in the Instance.

| XForms 1.1 Links
Recommendation
Quick Reference

## Example

a compact group with inline inputs - no initial data Text Constraint Value is shorter than 6 characters (e.g. abcdef)at least 6 characters (e.g. abcdef)Help für Text Input Control Date Type Value is not a valid date (MM/DD/YYYY)Date format MM/DD/YYYY Help für Control Date Type control Integer Type Value is not an integer number (e.g. 5)Integer number (e.g. 5)This is a more detailed help for the integer type input control Time Type Value is not a valid time (HH:MM:SS)Time Format HH:MM:SS This is a more detailed help for the time type input control
readonly required relevant valid

## XForms Markup

    <xf:bind nodeset="grouped-data">
        <xf:bind nodeset="group">
            <xf:bind nodeset="a" constraint="string-length(.) > 5"></xf:bind>
            <xf:bind nodeset="b" type="xf:date"></xf:bind>
            <xf:bind nodeset="c" type="xf:integer"></xf:bind>
            <xf:bind nodeset="d" type="xf:time"></xf:bind>
        </xf:bind>
    </xf:bind>

    <xf:input id="input1" ref="a">
        <xf:label>Text Constraint</xf:label>
        <xf:alert id="input1-alert">Value is shorter than 6 characters (e.g. abcdef)</xf:alert>
        <xf:hint id="input1-hint">at least 6 characters (e.g. abcdef)</xf:hint>
        <xf:help id="input1-help">Help für Text Input Control</xf:help>
    </xf:input>

    <xf:input id="input2" ref="b">
        <xf:label>Date Type</xf:label>
        <xf:alert id="input2-alert">Value is not a valid date (MM/DD/YYYY)</xf:alert>
        <xf:hint id="input2-hint">Date format MM/DD/YYYY</xf:hint>
        <xf:help id="input2-help">Help für Control Date Type control</xf:help>
    </xf:input>

    <xf:input id="input3" ref="c">
        <xf:label>Integer Type</xf:label>
        <xf:alert id="input3-alert">Value is not an integer number (e.g. 5)</xf:alert>
        <xf:hint id="input3-hint">Integer number (e.g. 5)</xf:hint>
        <xf:help id="input3-help">This is a more detailed help for the integer type input control</xf:help>
    </xf:input>

    <xf:input id="input4" ref="d">
        <xf:label>Time Type</xf:label>
        <xf:alert id="input4-alert">Value is not a valid time (HH:MM:SS)</xf:alert>
        <xf:hint id="input4-hint">Time Format HH:MM:SS</xf:hint>
        <xf:help id="input4-help">This is a more detailed help for the time type input control</xf:help>
    </xf:input>