Elementos de agrupación de componentes

Aunque en general, las pestañas no están recomendadas para la agrupación de componentes en un formulario, se permite su utilización cuando las pantallas de modificación se reutilizan para la consulta de las entidades. En este caso, los formularios con muchos componentes y elementos distintos, presentados de una sola vez al usuario, no permiten una interacción cómoda con la pantalla y dificultan identificar datos individuales. En tal caso, se deberá utilizar pestañas ya que permiten agrupar información relacionada y presentarla a medida que el usuario la vaya requiriendo bajo petición (pulsando en la pestaña correspondiente).

Si bien la pestaña no se corresponde con una etiqueta html específica, existen librerías de componentes en diferentes tecnologías que realizan implementaciones de este componente. En todos los casos, se utilizará la renderización html del componente generado deberá utilizar etiqueta div para definir la capa que contenga los componentes incluidos en la pestaña.

En la siguiente imagen puede observarse un conjunto de pestañas que agrupan datos de un formulario. Mediante la utilización de estilos e imágenes es posible simular el efecto de pestaña seleccionada y pestaña desactivada:

Componente pestaña

La forma más eficiente de presentar un gran número de elementos que comparten atributos y de los que se requiere relativa poca información, es mediante la utilización de tablas de resultados.

Si bien las tablas (etiqueta <table>) no están permitidas para la maquetación de los elementos de una pantalla, son necesarias para la visualización de listados.

Las tablas deberán incluir el atributo summary para informar al usuario del propósito de la misma por motivos de accesibilidad. Las direccionalidad de una tabla (por defecto de izquierda a derecha) puede podifirse mediante el atributo dir, aunque no se recomienda: <table dir="RTL">

Característica que debe cumplir todo componente tabla:

• Siempre debe incluir una ordenación por defecto que debe denotarse mediante algún mecanismo en la columna correspondiente.
• Se permitirá ordenar por cualquier de sus columnas de forma ascendente o descendente pulsando en la cabecera de la columna.
• Admitirá selección simple o múltiple (o ninguna) según las circunstancias.
• Incluirá una paginación de elementos  a partir de un cierto número de filas configurable.
• Permitirá acceder a una página concreta de elementos.

La combinación de diferentes etiquetas html y de eventos gestionados tanto en cliente como en servidor, permiten implementar estas funcionalidades para el componente tabla de datos.

El componente de interfaz Separador permitirá separar apartados dentro de un mismo formulario mediante la visualización de una barra o línea separadora.

En htlm existe la etiqueta <hr> que permite realizar esta labor, aunque mediante la utilización de CSS es posible implementar un Separador.

Para agrupar y contener componentes de un formulario web en una pantalla se utilizará el componente Panel. Este componente está disponible en múltiples librerías de componentes en distintas tecnologías. El renderizado en html del Panel deberá ser una capa basada en la etiqueta <div>.