Creación de estilos CSS para formularios HTML5

La representación HTML5 de una plantilla de formulario basada en XFA consta de varios elementos HTML. Estos elementos se organizan en un orden. Cada elemento tiene clases CSS bien definidas. Puede utilizar estas clases CSS para seleccionar y cambiar el aspecto de un elemento.

Clases CSS  para elementos 

Cada elemento contiene clases CSS bien definidas. Puede modificar estas clases para cambiar el aspecto de un elemento. Todos los elementos, excepto los elementos de campo y dibujo, tienen dos clases CSS: clase Type y clase Name.

• La clase Type representa el tipo del campo XFA. Puede anular la clase type para modificar los estilos de todos los elementos de un tipo concreto.

• La Name class corresponde al nombre del campo XFA. Puede anular la clase name para modificar y aplicar estilo personalizado a un elemento.

Para las páginas no nombradas en el Diseñador de AEM Forms, las páginas de un formulario HTML5 reciben un nombre en el orden creciente de su número. Por ejemplo, para un formulario HTML5 con dos páginas, las páginas se denominan Página1, Página2.

Elemento de campo

El elemento de campo contiene dos elementos anidados: widget y rótulo.

Elemento Widget

El elemento widget contiene el elemento de interfaz de usuario para la interacción con los usuarios. Tiene tres clases CSS:

• Utilidad: Cada utilidad tiene esta clase.
• nombre: Todos los widgets enviados con AEM contienen la clase de nombre del widget. Para las utilidades personalizadas, el desarrollador de utilidades proporciona la clase Widget name .
• tipo: Cada utilidad tiene un elemento de interfaz de usuario. Esta clase define el tipo del elemento de interfaz de usuario.

<!--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>

Además de la clase type y name , el componente de campo también contiene una clase CSS adicional denominada subtype. Un subtipo identifica qué tipo de campo es, por ejemplo, NumericField, DateField, TextField. Puede anular la clase subtype para modificar el estilo de todos los campos de tipo subtype.

Clases CSS para diferentes componentes

Clases CSS para diferentes campos

AEM Forms Designer admite distintos tipos de campos en un formulario, como NumericField, DecimalField y Date Field. Todos estos campos en HTML contienen las clases CSS mencionadas anteriormente. También contienen algunas clases adicionales según el tipo de campo.

Cada campo tiene un widget asociado que representa el elemento UI. A continuación se enumeran las clases de cada campo y las utilidades asociadas a cada campo.

Clases CSS para diferentes elementos de dibujo

Con AEM Forms Designer, se pueden insertar elementos estáticos de dibujo como texto e imágenes. Para cada elemento de dibujo, se asocia una clase CSS independiente a ese elemento. A continuación se muestra la lista de clases CSS para elementos de dibujo. Cada elemento de dibujo tiene una clase de dibujo asociada a él.

Estilo de otras partes del formulario

Además del aspecto de los componentes de la interfaz de usuario en el formulario HTML, puede cambiar el estilo de elementos como Errores en línea, Advertencias en línea y campos con errores de validación.

Styling Inline Errors

Cuando la validación de un campo genera un error, se muestra un error en línea cuando el campo está activo. Para cambiar el estilo de los errores en línea, anule el ID de CSS error-msg.

Styling Inline Warnings

Cuando la validación de un campo genera una advertencia, se muestra una advertencia en línea cuando el campo está activo. Para cambiar el estilo de estas advertencias en línea, anule el identificador CSS warning-msg.

Styling Fields with Validation Errors

Cuando falla la validación de un campo, cambia el estilo del widget. Este cambio de estilo se realiza aplicando una clase CSS widgetError en el componente widget. Para modificar el estilo predeterminado, anule la clase widgetError.