Uso
Cuándo usar
- Para crear una cuenta o iniciar sesión.
- Para registrarse en un servicio, programa o beneficio.
- Para solicitar turnos o inscribirse en actividades.
- Para completar una transacción.
- Para configurar o modificar preferencias y datos de perfil.
- Para responder encuestas de feedback.
Buenas prácticas
Antes de construir un formulario, es fundamental comprender quiénes lo van a usar. Para eso, se recomienda realizar investigaciones UX, como entrevistas, encuestas, análisis de soluciones similares y testeos con personas usuarias.
Seguir los lineamientos de diseño y desarrollo ayuda a garantizar formularios usables y accesibles. Además, muchos recopilan datos sensibles, por lo que es clave respetar las normas de privacidad y seguridad.
- Sólo campos necesarios: formularios breves facilitan la carga y reducen errores.
- Protección de datos: los formularios deben cumplir con las normativas vigentes de privacidad y protección de datos personales.
- Sin redundancias: no pedir información que ya haya sido proporcionada. Si el dato está disponible en el sistema, puede mostrarse en modo solo lectura (read-only).
- Autocompletado:cuando sea posible, ciertos campos pueden completarse automáticamente. Por ejemplo, cargar el código postal tras ingresar el domicilio.
- Tipo de campo adecuado: elegir el formato correcto según el tipo de dato.
- Orden lógico: disponer los campos de forma coherente. Por ejemplo, país antes que ciudad.
Elementos que componen un formulario
- Título del formulario y bajada descriptiva.
- Campos de entrada (Inputs).
- Accionables.
Título del formulario y bajada descriptiva
Título del formulario
Identifica al formulario y brinda información sobre la acción a realizar.
Evitar el uso de tecnicismos o siglas internas que las personas desconocen.
Indicar la acción que están realizando las personas al completar el formulario.
Bajada descriptiva
Aporta contexto y brinda instrucciones claras, ayudando a que las personas sepan qué información necesitan y cuánto tiempo estimado les llevará completar el formulario.
La bajada no orienta, ni anticipa qué se necesita o cuánto tiempo tomará.
La bajada aporta contexto, requisitos y duración estimada, usando un lenguaje claro y cercano.
Tipos de Input
Cada tipo de input tiene una funcionalidad específica. Es importante elegir el indicado según el dato que se requiera.
Inputs de texto
Para conocer más sobre usos, especificaciones de código y accesibilidad, consultar la ficha de Inputs de texto.
Text
Permite ingresar una línea de texto de pocas palabras.
Text Area
Permite ingresar múltiples líneas de texto.
Password
Permite ingresar contraseñas y datos sensibles.
Permite ingresar un correo electrónico.
Number
Permite ingresar números.
Tel
Permite ingresar un número telefónico.
Date
Permite ingresar una fecha.
Time
Permite ingresar un horario.
Input de búsqueda
Para conocer más sobre usos, especificaciones de diseño y código, y accesibilidad, consultar la ficha de Search.
Search
Permite buscar información.
Inputs de selección
Para conocer más sobre usos, especificaciones de diseño y código, y accesibilidad, consultar las fichas de Select, Radio y Checkbox.
Select
Permite seleccionar un valor único o múltiples valores dentro de una lista desplegable de opciones.
Radio
Permite seleccionar un único valor dentro de un número limitado de opciones.
Checkbox
Permite seleccionar cero o múltiples valores dentro de un número limitado de opciones.
Input de carga de archivo
Para conocer más sobre usos, especificaciones de diseño y código, y accesibilidad, consultar la ficha de File.
File
Permite cargar uno o múltiples archivos.
Accionables
Se colocan al final del formulario y sirven para enviar la información ingresada, guardar, avanzar o retroceder. Para más lineamientos consultar la ficha de Botones.
Evitar términos ambiguos como "Enviar" o "Aceptar".
Relacionar el texto de los accionables con el contenido del formulario para mayor claridad.
Evitar términos vagos como "Volver" y "Continuar" para avanzar o retroceder en un formulario multi-página.
El texto de los botones debe indicar claramente que se avanza o retrocede en un mismo formulario.