Show Menu
TEMAS×

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 orden. Cada elemento tiene clases CSS bien definidas. Puede utilizar esta clase CSS para seleccionar y cambiar el aspecto de un elemento.
En las clases CSS, no cambie el valor de los atributos width, height, border-thickness, top, left, right, bottom, padding, margin y otros atributos de 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

Cada elemento contiene clases CSS bien definidas. Puede modificar estas clases para cambiar el aspecto de un elemento. Cada elemento, excepto los elementos field y draw, tiene dos clases CSS: clase Type y clase Name.
  • La clase ​Type representa el tipo del campo XFA. Puede anular la type clase para modificar los estilos de todos los elementos de un tipo concreto.
  • La clase ​Name corresponde al nombre del campo XFA. Puede anular la name clase para modificar y aplicar un estilo personalizado a un elemento.
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 sin nombre en AEM Forms Designer, los nombres de las páginas de un formulario HTML5 se asignan 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 Campo

El elemento field contiene dos elementos anidados: y rótulo.
Elemento de utilidad
El elemento widget contiene el elemento de interfaz de usuario para interactuar con los usuarios. Tiene tres clases CSS:
  • Utilidad : Cada utilidad tiene esta clase.
  • name : Todos los widgets enviados con AEM contienen la clase de nombre de la utilidad. Para widgets personalizados, el desarrollador de utilidades proporciona la clase Widget name.
  • type : 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 field 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 de subtipo para modificar el estilo de todos los campos de tipo subtipo.

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 las utilidades definidas 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 en función del tipo de campo.
Cada campo tiene una utilidad asociada que representa el elemento UI. A continuación se enumeran las clases de cada campo y las utilidades asociadas con cada campo.
Tipo de campo Subtipo Nombre de utilidad Tipo de utilidad Etiqueta de IU HTML
Botón ND xfaButton utilidad de campo de botón 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 widget de campo numérico input type=text
DropDown choicelist dropDownListWidget choicelistwidget select
CuadroLista choicelist listBoxWidget choicelistwidget ol
NumericField Numericfield numericInput widget de campo numérico input type=text
Campo de contraseña campo de contraseña defaultWidget widget de campo de contraseña input type=password
RadioButton radiocampo XfaCheckBox utilidad de campo radioactivo input type=radio
TextField textfield textField textfieldwidget input type=text
TimeField textfield textField textfieldwidget input type=text

Clases CSS para diferentes elementos de dibujo

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 independiente a ese elemento. La lista de clases CSS para elementos de dibujo se muestra a continuación. Cada elemento de dibujo tiene una clase de dibujo asociada.
Dibujar tipo
Clase de CSS
Texto
text
Imagen
imagen
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 da como resultado un error, se muestra un error en línea cuando el campo está activo. Para cambiar el estilo de los errores en línea, sobrescriba el ID de CSS error-msg .
Styling Inline Warnings
Cuando la validación de un campo da como resultado una advertencia, se muestra una advertencia en línea cuando el campo está activo. Para cambiar el estilo de estas advertencias en línea, sobrescriba el ID de CSS warning-msg .
Styling Fields with Validation Errors
Cuando falla la validación de un campo, cambia el estilo de la utilidad. Este cambio de estilo se realiza aplicando un widgetError de clase CSS en el componente de la utilidad. Para modificar el estilo predeterminado, anule la clase widgetError .