Guía para la creación de formularios digitales

Criterios básicos

  • Se recomienda prescindir de formularios de más de una columna.
  • En el diseño responsivo, es deseable que las etiquetas cambien de lugar moviéndose de la izquierda hacia arriba del campo cuando la pantalla se vuelve muy angosta para mostrarlas correctamente. 
  • En los dispositivos móviles, los formularios deben hacer un uso inteligente del ancho de la pantalla, manejando con cuidado algunos recursos como márgenes, bordes, sangrías y anchos de campo. Utilizar la mayor parte del espacio para la interacción, en detrimento de la decoración.
  • Evitar el pedido fragmentado de información. Por ejemplo, no pedir por separado el código de país y el teléfono, salvo que sea estrictamente necesario.
  • Utilizar la semántica estándar de HTML para el armado del formulario. El uso correcto de las etiquetas permite agrupar campos y hacer más manejable la información (OPTGROUP, FIELDSET). 
  • Distinguir visualmente los campos deshabilitados en color gris claro.

    Ejemplo de campo deshabilitado.
     
  • En escritorio, evitar el desplazamiento horizontal en todos los casos. En móvil, evitarlo siempre que sea posible, ya que en algunos casos, sobre todo para datos opcionales o de poca relevancia, puede llegar a ser una alternativa.
  • Los campos obligatorios llevan un asterisco (*) al final de la etiqueta y en el mismo color del texto, nunca al lado del propio campo. Se debe aclarar en el comienzo o al pie del formulario que esta es la marca de obligatoriedad, pero no es imprescindible hacerlo en un lugar de destaque, ya que es un estándar de amplia difusión en la web. 
  • El HTML proporciona un conjunto de tipos de campo de calidad, con una funcionalidad sofisticada y accesibilidad garantida, que las personas conocen de forma universal. 
  • Para considerar reemplazarlos o modificarlos, debe existir un motivo importante y se debe garantizar que en el reemplazo no se pierda funcionalidad ni accesibilidad. Por ejemplo, son inaceptables los combos generados por JavaScript en los que no se puede escribir para elegir las opciones.

Etiquetas