Creating CSS styles for HTML5 forms

Last update: June 24, 2024

Topics:
HTML5 Forms,Mobile Forms

CREATED FOR:

Admin
User
Developer

HTML5 rendition of a XFA-based form template consists of several HTML elements. These elements are arranged in an order. Every element has well-defined CSS classes. You can use these CSS class to select and change the appearance of an element.

NOTE

In the CSS classes, do not change value of the width, height, border-thickness, top, left, right, bottom, padding, margin, and other position and size attributes. Any change in the position and size attributes brings changes to the layout of the form.

CSS classes for elements

Every element contains well-defined CSS classes. You can modify these classes to change the appearance of an element. Every element, except the field and draw elements, has two CSS classes - Type class and Name class.

The Type class represents the type of the XFA field. You can override the type class to modify the styles of all elements of a particular type.
The Name class corresponds to the name of the XFA field. You can override the name class to modify and apply custom style to an element.

NOTE

Some XFA elements do not have a name. To change the styles of such components, modify all the components of that particular type.

For the pages not named in the AEM Forms Designer, pages in an HTML5 form are named in the increasing order of their number. For example, for an HTML5 form with two pages the pages are named Page1, Page2.

Field element

The field element contains two nested elements: widget and caption.

Widget element

The widget element contains the user interface element for interaction with users. It has three CSS classes:

Widget: Every widget has this class.
name: All the widgets shipped with AEM contain the widget name class. For custom widgets, the widget developer provides the Widget name class.
type: Every widget has a user interface element. This class defines the type of the user interface element.

<!--field with caption-->
<div class="field numericfield NumericField3 ">
     <div class="caption">
        caption content
     </div>
     <div class="widget numericfieldwidget numericInput">
       widget content
     </div>
</div>

<!--field without caption-->
<div class="widget numericfieldwidget numericInput">
   widget content
</div>

Besides the type and name class, the field component also contains an additional CSS class named subtype. A subtype identifies which type of field it is, for example, NumericField, DateField, TextField. You can override the subtype class to modify the styling of all the fields of type, subtype.

CSS classes for different components

Component

Type

Name

Page

page

User-defined name
or
Page<pageNumber> (default)

Content Area

contentarea

User-defined name

Subform

subform

User-defined name

Exclusion Group

exclgroup

User-defined name

Draw

draw

User-defined name

Field

field

User-defined name

Caption

caption

NA

Widget

widget

The widget developer defines it (For user-defined widgets see the table in the following section)

CSS classes for different Fields

The AEM Forms Designer supports different types of fields in a form like NumericField, DecimalField, and Date Field. All of these fields in HTML contain the above mentioned CSS classes. They also contain some extra classes depending on the type of field.

Every field has an associated widget representing the UI element. The classes of each field and the widgets associated with each field are listed below.

Field Type

Subtype

Widget Name

Widget Type

HTML UI Tag

Button

NA

xfaButton

buttonfieldwidget

input type=button

CheckButton

checkboxfield

XfaCheckBox

checkboxfieldwidget

input type=checkbox

DateField

datefield

dateField

datefieldwidget

input type=text

DateTimeField

textfield

textField

textfieldwidget

input type=text

DecimalField

numericfield

numericInput

numericfieldwidget

input type=text

DropDown

choicelist

dropDownListWidget

choicelistwidget

select

ListBox

choicelist

listBoxWidget

choicelistwidget

ol

NumericField

numericfield

numericInput

numericfieldwidget

input type=text

PasswordField

passwordfield

defaultWidget

passwordfieldwidget

input type=password

RadioButton

radiofield

XfaCheckBox

radiofieldwidget

input type=radio

TextField

textfield

textField

textfieldwidget

input type=text

TimeField

textfield

textField

textfieldwidget

input type=text

CSS classes for different Draw Elements

You can insert static draw elements like text, and images, using the AEM Forms Designer. For each draw element, a separate CSS class is associated with that element. The list of CSS classes for draw elements is listed below. Every draw element has a draw class associated with it.

Draw Type

CSS class

Text

text

Image

image

Rectangle

rectangle

Line

line

Styling other parts of the form

Besides the appearance of UI components in the HTML form, you can change the style of elements like Inline Errors, Inline Warnings, and fields with validation errors.

Styling Inline Errors

When the validation of a field results in an error, an inline error is displayed when the field in active. To change the style of inline errors, override the CSS ID error-msg.

Styling Inline Warnings

When the validation of a field results in a warning, an inline warning is displayed when the field is active. To change the style of these inline warnings, override the CSS ID warning-msg.

Styling Fields with Validation Errors

When validation for a field fails, the style of the widget changes. This style change is done by applying a CSS class widgetError on the widget component. To modify the default styling, override the widgetError class.

recommendation-more-help