Construir un formulario

La estructura principal del formulario se organiza a partir de un contenedor que agrupa todos los elementos del formulario: campos de entrada, títulos, subtítulos y botones. Este contenedor se adapta al ancho máximo disponible según el dispositivo:

Organizá los campos en una sola columna, ubicándolos uno debajo del otro. Esta disposición respeta el flujo natural de lectura, facilita la comprensión del contenido y reduce la carga mental al permitir que la información se procese de forma secuencial.

El ancho de cada campo debe ser proporcional a la longitud del contenido esperado, ayudando a la persona usuaria a anticipar la cantidad y el tipo de información que debe ingresar.

Los campos del formulario que comparten un propósito común, como "Ciudad" y "Código postal", pueden agruparse de forma horizontal dentro de un contenedor para mejorar la comprensión visual y facilitar la navegación a las personas que utilizan tecnologías de asistencia.

Ejemplos de uso

close

Evitar agrupar más de tres campos en una misma línea. Un exceso de campos en disposición horizontal dificulta la lectura, genera desalineaciones y puede afectar negativamente la accesibilidad.

check

Mantener un número consistente de columnas a lo largo del formulario favorece la lectura y la previsibilidad visual. En la mayoría de los casos, se recomienda no superar los dos campos por fila para mantener una estructura clara y legible.

En formularios integrados en la página, donde no se requiere continuidad o navegación progresiva, las acciones principales se alinearan a la izquierda del cuerpo de la página y al final del formulario.

Podés consultar la documentación de Botones para conocer las combinaciones y alineaciones recomendadas en dispositivos desktop, tablet y mobile.

Para mantener una estructura clara, legible y alineada al sistema de grillas, recomendamos los siguientes espaciados entre campos para dispositivos desktop:

Para dispositivos mobile, la disposición de los campos es uno debajo de otro, y el valor de la separación entre campos es de 12px.

Para reforzar la comprensión del formulario es recomendado agrupar los temas relacionados en secciones con encabezados.

Es un indicador diseñado específicamente para los formularios que indica si un campo es opcional o requerido, y es el método más explícito y transparente para garantizar que las personas usuarias no tengan que hacer suposiciones.

Ejemplos de uso

close

Evitar mezclar etiquetas obligatorias y opcionales; utilice solo una.

check

Indicá únicamente las excepciones: si la mayoría de los campos son obligatorios, marcá como "opcional" aquellos que no lo son; si la mayoría son opcionales, marcá como "requerido" solo los campos obligatorios.

El componente de enlace está construido para ser reconocido por herramientas de asistencia como la navegación por teclado o lectores por voz.

Utilizando el tab la persona usuaria puede navegar a través de elementos de la interfaz. Además, con el enter, puede accionar los elementos sobre los que esté posicionada como botones, enlaces, entre otros.

Dependiendo del tipo de campo puede haber lineamientos adicionales.

Antes de comenzar un formulario, agregá instrucciones claras que ayuden a las personas a completarlo con éxito. Podés indicar qué campos son obligatorios, qué tipo de información se espera y cualquier otra indicación útil. Estas instrucciones deben ir antes del formulario para que cualquier persona, incluso quien usa lector de pantalla, pueda acceder a ellas desde el principio.

Para que el formulario funcione correctamente, todos los campos deben estar dentro de la etiqueta <form>. Esto permite que el sistema pueda enviar la información ingresada y ayudar a que las personas que usan lectores de pantalla entiendan mejor la estructura del formulario y puedan recorrerlo sin problemas.

    <form>
      <div class="form-label-container">
        <label for="fullname" class="form-label">
            ...
        </label>
        <span class="badge-forms badge-optional-forms">         
            ...
         </span>
      </div>
      <div class="row">
        <input type="text" class="form-control"
         id="fullname" name="fullname"/>    
      </div>
    </form>

La información, la estructura y las relaciones transmitidas a través de la presentación pueden determinarse mediante programación o están disponibles en el texto.

Cuando una sesión autenticada expira, la persona usuaria puede continuar la actividad sin pérdida de datos después de re-autenticarse.

Los encabezados y las etiquetas describen el tema o el propósito.

El cambio de la configuración de cualquier componente de la interfaz no provoca automáticamente un cambio de contexto a menos que la persona usuaria haya sido informada del comportamiento antes de utilizar el componente.

Se proporcionan etiquetas o instrucciones cuando el contenido requiere la entrada de la persona usuaria.

Para todos los componentes de la interfaz de usuario (incluidos, entre otros: elementos de formulario, enlaces y componentes generados por scripts), el nombre y la función se pueden determinar mediante programación; los estados, propiedades y valores que puede establecer el usuario se pueden configurar mediante programación; y la notificación de cambios en estos elementos está disponible para los agentes de usuario, incluidas las tecnologías de asistencia.

Antes de que se produzca el paso final que compromete la transacción, se proporcionan instrucciones para solicitar que la persona usuaria revise los datos ingresados y confirme. Una vez que la persona confirma, la transacción se completa.