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

CAUTION
AEM 6.4 ha llegado al final de la compatibilidad ampliada y esta documentación ya no se actualiza. Para obtener más información, consulte nuestra períodos de asistencia técnica. Buscar las versiones compatibles here.

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.

NOTE
En las clases CSS, no cambie el valor de los atributos anchura, altura, grosor del borde, arriba, izquierda, derecha, abajo, relleno, margen y otra posición y tamaño. Cualquier cambio en los atributos de posición y tamaño produce cambios en la presentación del formulario.

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.

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

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

NOTE
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 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:

  • Widget: cada widget tiene esta clase.
  • Nombre: todos los widgets enviados con AEM contienen la clase de widget Nombre. Para los widgets personalizados, el desarrollador de widgets proporciona la clase de widget Nombre.
  • Tipo: cada widget 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 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

Componente
Tipo
Nombre
Página
página
Usuario
o
Página<pageNumber> definidos por el usuario (predeterminado)
Área de contenido
contentArea
Nombre definido por el usuario
Subformulario
subformulario
Nombre definido por el usuario
Grupo de exclusión
exclGroup
Nombre definido por el usuario
Dibujar
draw
Nombre definido por el usuario
Campo
field
Nombre definido por el usuario
Pie de ilustración
caption
ND
Widget
widget
Lo define el desarrollador de widgets (para widgets definidos por el usuario, consulte la tabla en la siguiente sección)

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.

Tipo de campo
Subtipo
Nombre del widget
Tipo de widget
Etiqueta de la interfaz de usuario del HTML
Botón
ND
xfaButton
buttonfieldwidget
input type=button
CheckButton
checkboxfield
XfaCheckBox
checkboxfieldwidget
input type=checkbox
DateField
datefield
dateField
datefieldwidget
inputtype = text
DateTimeField
textfield
textField
textfieldwidget
inputtype = text
DecimalField
numericfield
numericInput
numericfieldwidget
inputtype = text
DropDown
choicelist
dropDownListWidget
choicelistwidget
select
ListBox
choicelist
listBoxWidget
choicelistwidget
ol
NumericField
numericfield
numericInput
numericfieldwidget
inputtype = text
PasswordField
passwordfield
defaultWidget
passwordfieldwidget
input type=password
RadioButton
radiofield
XfaCheckBox
radiofieldwidget
input type=radio
TextField
textfield
textField
textfieldwidget
inputtype = text
TimeField
textfield
textField
textfieldwidget
inputtype = text

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.

Tipo de dibujo
Clase de CSS
Texto
text
Imagen
image
Rectángulo
rectangle
Línea
line

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.

recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da