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.

NOTA

En las clases CSS, no cambie el valor de los atributos width, height, border-thickness, top, left, right, bottom, padding, margin y other position and size . Cualquier cambio en los atributos de posición y tamaño produce cambios en la presentación del formulario.

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.

NOTA

Algunos elementos XFA no tienen nombre. Para cambiar los estilos de dichos componentes, modifique todos los componentes de ese tipo concreto.

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

Componente Tipo Nombre
Página page Nombre definido por el usuario
o
Página<pageNumber> (predeterminado)
Área de contenido contentarea Nombre definido por el usuario
Subformulario subform Nombre definido por el usuario
Grupo de exclusión exclgroup Nombre definido por el usuario
Draw draw Nombre definido por el usuario
Campo field Nombre definido por el usuario
Pie de ilustración caption ND
Widget widget El desarrollador de utilidades lo define (para widgets definidos por el usuario, consulte la tabla en la siguiente sección)

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.

Tipo de campo Subtipo Nombre de la utilidad Tipo de utilidad Etiqueta de IU HTML
Botón
ND xfaButton
widget
input type=button
CheckButton
checkboxfield
XfaCheckBox
checkboxfieldwidget
input type=check
DateField
datefield
dateField
datefieldwidget
input type=text
DateTimeField
textfield
textField
textfieldwidget input type=text
Campo decimal
Numericfield
numericInput
numericfieldwidget
input type=text
DropDown
lista de opciones
dropDownListWidget
choicelistwidget
select
ListBox
lista de opciones
listBoxWidget
choicelistwidget
ol
NumericField
Numericfield
numericInput
numericfieldwidget
input type=text
Campo de contraseña
campo de contraseña
defaultWidget
passwordfieldwidget
input type=password
RadioButton
radiocampo
XfaCheckBox
utilidad de radiocampo
input type=radio
TextField
textfield
textField
textfieldwidget
input type=text
TimeField
textfield
textField
textfieldwidget
input type=text

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.

Dibujar tipo Clase de CSS
Texto text
Imagen image
Rectángulo rectangle
Línea line

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.

En esta página