Crear estilos CSS para formularios HTML5 creating-css-styles-for-html-forms

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  css-classes-nbsp-for-elements-nbsp

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

Para las páginas no nombradas en AEM Forms Designer, 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 denominarán Página1, Página2.

Elemento de campo field-element

El elemento de campo contiene dos elementos anidados: widget y pie de ilustración.

Elemento Widget

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

<!--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 las clases Tipo y Nombre, el componente de campo también contiene una clase CSS adicional denominada subtipo. Un subtipo identifica qué tipo de campo es, por ejemplo, NumericField, DateField, TextField. Puede anular la clase subtipo para modificar el estilo de todos los campos de este tipo.

Clases CSS para diferentes componentes css-classes-for-different-components

Clases CSS para diferentes campos css-classes-for-different-fields

AEM Forms Designer admite distintos tipos de campos en un formulario, como NumericField, DecimalField y Date Field. Todos estos campos del 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 de la IU. A continuación se enumeran las clases de cada campo y los widgets asociados a ellos.

Clases CSS para diferentes elementos de dibujo css-classes-for-different-draw-elements

Puede insertar elementos de dibujo estáticos, como texto e imágenes, mediante AEM Forms Designer. Para cada elemento de dibujo, se asocia una clase CSS distinta a ese elemento. La lista de clases CSS para los elementos de dibujo es la siguiente. Cada elemento de dibujo tiene una clase de dibujo asociada.

Aplicar estilo a otras partes del formulario styling-other-parts-of-the-form

Además de la apariencia de los componentes de la interfaz de usuario del formulario HTML, puede cambiar el estilo de elementos como los errores y las advertencias dentro de la línea y los campos con errores de validación.

Styling Inline Errors

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

Styling Inline Warnings

Cuando la validación de un campo da lugar a una advertencia, se muestra una advertencia dentro de la línea cuando el campo está activo. Para cambiar el estilo de las advertencias de dentro de la línea, anule el CSS ID warning-msg

Styling Fields with Validation Errors

Cuando la validación de un campo falle, el estilo del widget cambiará. Este cambio de estilo se realiza al aplicar una clase CSS widgetError en el componente Widget. Para modificar el estilo predeterminado, anule la clase widgetError.