school Are you a developer in an agency in the UK, Indonesia or India? Find out more about our free 2 day Progressive Web Apps training .

Crea formularios asombrosos

Es complicado completar formularios desde el celular. Los mejores formularios son aquellos que poseen menos entradas. En los buenos formularios se proporcionan tipos de entradas semánticas. Las claves deben cambiar para que coincidan con los tipos de entradas de los usuarios; estos últimos eligen una fecha en un calendario. Mantén a tu usuario informado. Las herramientas de validación deben informar al usuario lo que debe hacer antes de enviar el formulario.

Diseña formularios eficaces

Para diseñar formularios eficaces, evita las acciones repetidas, solicita solo la información necesaria y orienta a los usuarios mostrándoles el punto en que se encuentren en los formularios de muchas partes.

TL;DR

  • Usa los datos existentes para completar previamente los campos y asegúrate de habilitar la función de autocompletar.
  • Utilice barras de progreso claramente etiquetadas para ayudar a los usuarios a avanzar en los formularios que tienen varias partes.
  • Proporciona un calendario visual para que los usuarios no deban abandonar tu sitio y consultar la app de calendario en sus smartphones.

Minimiza las acciones y los campos repetidos

Muestra el progreso en los formularios que tienen varias partes
En el sitio web Progressive.com, a los usuarios se les solicita primero su código postal, el cual se completa automáticamente en la próxima parte del formulario.

Asegúrate de que sus formularios no contengan acciones repetidas; solo incluye tantos campos como sea necesario y aprovecha la función autocompletar, de modo que los usuarios puedan completar fácilmente los formularios con los datos completados previamente.

Completa previamente la información que ya conozcas, o que se pueda anticipar, para que el usuario no tenga que ingresarla. Por ejemplo, completa previamente la dirección de envío con la última dirección de envío proporcionada por el usuario.

Muestra a los usuarios el punto en el que se encuentran

Muestra el progreso en los formularios que tienen varias partes
Usa barras de progreso claramente etiquetadas para ayudar a los usuarios a avanzar en los formularios que tienen varias partes.

En las barras de progreso y los menús, se debe indicar precisamente el progreso general de los formularios y procesos de varios pasos.

Si colocas un formulario de complejidad desproporcionada en uno de los primeros pasos, es más probable que los usuarios abandonen el sitio antes de completar el proceso.

Ofrece calendarios visuales para seleccionar fechas

Sitio web de un hotel con un calendario fácil de usar
Sitio web de reservas de un hotel con un widget de calendario fácil de usar para seleccionar las fechas.

A menudo, los usuarios necesitan más contexto cuando deben programar citas y fechas de viajes. Para facilitar esta tarea y evitar que abandonen tu sitio y consulten sus apps de calendario, proporciona un calendario visual con etiquetas claras para que puedan seleccionar las fechas de inicio y finalización.

Elige el mejor tipo de entrada

Optimiza el ingreso de información usando el tipo de entrada adecuado. A los usuarios les gustan los sitios web en los que se muestran automáticamente teclados numéricos para ingresar los números de teléfono, o en los que se anticipan automáticamente las respuestas de los campos a medida que se completan. Busca la manera de eliminar las pulsaciones innecesarias de tus formularios.

TL;DR

  • Elije el tipo de entrada más apropiado para tus datos a fin de simplificar la entrada.
  • Ofrece sugerencias a medida que el usuario escriba con el elemento datalist.

Tipos de entrada HTML5

En HTML5, se introdujeron diferentes tipos de entradas nuevas. Estos nuevos tipos de entrada, se proporcionan sugerencias al navegador sobre el tipo de diseño de teclado que se debe mostrar para los teclados en pantalla. Para los usuarios, será más simple ingresar la información requerida sin tener que cambiar su teclado y solo ver las teclas adecuadas para ese tipo de entrada.

Entrada type
url
Para ingresar una URL. Debe comenzar con un esquema de URI válido; por ejemplo, http://, ftp:// o mailto:.
tel
Para ingresar números telefónicos. Aquí no se exige el uso de una sintaxis en particular para la validación, por lo que, si deseas garantizar el uso de un formato en especial, puedes usar patrones.
email
Para ingresar direcciones de correo electrónico y sugerencias de que el signo @ se debe mostrar en el teclado de forma predeterminada. Puedes agregar el atributo múltiple si se proporciona más de una dirección de correo electrónico.
search
Campo de ingreso de texto con estilo coherente con el campo de búsqueda de la plataforma.
number
En el caso de las entradas numéricas, puede ser cualquier número racional o entero, o valor de flotación.
range
Para entradas de números. Sin embargo, a diferencia del tipo de entrada de número, el valor es menos importante. Se muestra al usuario como un control deslizante.
datetime-local
Para ingresar un valor de fecha y hora. La zona horaria proporcionada es la local.
date
Para ingresar una fecha (solamente), aunque sin la zona horaria.
time
Para ingresar una hora (solamente), aunque sin la zona horaria.
week
Para ingresar una semana (solamente), aunque sin la zona horaria.
month
Para ingresar un mes (solamente), aunque sin la zona horaria.
color
Para seleccionar un color.

Usa datalist para ofrecer sugerencias durante la entrada

El elemento datalist no es un tipo de entrada, sino más bien una lista de valores de entrada sugeridos para asociar con un campo del formulario. De este modo, el navegador puede sugerir opciones de autocompletar a medida que el usuario escribe. A diferencia de los elementos de selección, en cuyo caso los usuarios deben recorrer largas listas para encontrar el valor que buscan y limitarse solo a estas, el elemento datalist proporciona sugerencias a medida que el usuario escribe.

<label for="frmFavChocolate">Favorite Type of Chocolate</label>
<input type="text" name="fav-choc" id="frmFavChocolate" list="chocType">
<datalist id="chocType">
  <option value="white">
  <option value="milk">
  <option value="dark">
</datalist>

Pruébalo

Etiqueta y nombra las entradas correctamente

Es complicado completar formularios desde el celular. Los mejores formularios son aquellos que poseen menos entradas. En los buenos formularios se proporcionan tipos de entradas semánticas. Las claves deben cambiar para que coincidan con los tipos de entradas de los usuarios; estos últimos eligen una fecha en un calendario. Mantén a tu usuario informado. Las herramientas de validación deben informar al usuario lo que debe hacer antes de enviar el formulario.

TL;DR

  • Usa siempre las label en las entradas de los formularios y asegúrate de que sean visibles cuando el campo esté en foco.
  • Usa los placeholder para proporcionar orientación sobre lo que esperas.
  • Con el fin de ayudar a que el navegador complete el formulario automáticamente, usa los atributos name establecidos para los elementos e incluye el atributo autocomplete.

La importancia de las etiquetas

A través del elemento label, se proporcionan instrucciones al usuario sobre la información que se necesita en el elemento de un formulario. Cada label se asocia con un elemento de entrada mediante su colocación dentro del elemento label o el uso del atributo “for” . Si se aplican etiquetas a los elementos del formulario, también es posible mejorar el tamaño del objetivo táctil: el usuario puede tocar tanto la etiqueta como la entrada para enfocar el elemento de entrada.

<label for="frmAddressS">Address</label>
<input type="text" name="ship-address" required id="frmAddressS"
  placeholder="123 Any Street" autocomplete="shipping street-address">

Pruébalo

Ajuste del tamaño y disposición y de las etiquetas

Las etiquetas y las entradas deben ser suficientemente grandes como para que puedan seleccionarse fácilmente. En las ventanas de visualización verticales, las etiquetas de los campos se deben colocar sobre los elementos de entrada, y junto a ellos en las ventanas de visualización horizontales. Asegúrate de que las etiquetas de los campos y los cuadros de entrada correspondientes sean visibles al mismo tiempo. Ten precaución con los controladores de desplazamiento personalizados que pueden desplazar los elementos de entrada hacia la parte superior de la página y ocultar la etiqueta, o las etiquetas que se colocan debajo de los elementos de entrada que podrían estar cubiertas con el teclado virtual.

Uso de marcadores de posición

A través del atributo de marcadores de posición, se proporcionan sugerencias al usuario sobre la información que debe introducir en la entrada, generalmente mostrando el valor como texto de color claro hasta que el usuario comienza a escribir en el elemento.

<input type="text" placeholder="MM-YYYY" ...>

Uso de metadatos para habilitar la función de autocompletar

A los usuarios les encanta que los sitios web les ahorren tiempo mediante la compleción automática de campos comunes, como nombres, direcciones de correo electrónico y otros de uso frecuente. Además, de este modo es posible reducir los posibles errores de entrada, especialmente en teclados virtuales y dispositivos pequeños.

En los navegadores se usa mucho la heurística para determinar los campos que se pueden completar de forma automática teniendo en cuenta los datos especificados anteriormente por el usuario, y puedes proporcionar sugerencias al navegador brindando los atributos name y autocomplete en cada elemento de entrada.

Por ejemplo, para indicar al navegador que debe completar automáticamente el formulario con los nombres, las direcciones de correo electrónico y el número telefónico de los usuarios, debes usar lo siguiente:

<label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA"
  placeholder="Full name" required autocomplete="name">

<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA"
  placeholder="name@example.com" required autocomplete="email">

<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
  placeholder="name@example.com" required autocomplete="email">

<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
  placeholder="+1-555-555-1212" required autocomplete="tel">

Pruébalo

Valores de los atributos name y autocomplete de entrada recomendados

Los valores del atributo autocomplete son una parte del HTML estándar de WHATWG actual. A continuación, se muestran los atributos autocomplete de uso más común.

Los atributos autocomplete pueden ir acompañados por el nombre de una sección, como shippinggiven-name o billingstreet-address. En el navegador, las diferentes secciones se completarán automáticamente por separado, y no de forma continua.

Atributo Atributo
Tipo de contenidonameautocomplete
Nombre name fname mname lname
  • name (nombre completo)
  • given-name (nombre)
  • additional-name (segundo nombre)
  • family-name (apellido)
Correo electrónico email email
Dirección address city region province state zip zip2 postal country
  • Para una entrada de una dirección:
    • street-address
  • Para entradas de dos direcciones:
    • address-line1
    • address-line2
  • address-level1 (estado o provincia)
  • address-level2 (ciudad)
  • postal-code (código postal)
  • country
Teléfono phone mobile country-code area-code exchange suffix ext tel
Tarjeta de crédito ccname cardnumber cvc ccmonth ccyear exp-date card-type
  • cc-name
  • cc-number
  • cc-csc
  • cc-exp-month
  • cc-exp-year
  • cc-exp
  • cc-type
Nombres de usuario username
  • username
Contraseña password
  • current-password (para formularios de inicio de sesión)
  • new-password (para formularios de inicio de sesión y cambio de contraseña)

El atributo autofocus

En algunos formularios (como la página de inicio de Google), en los cuales lo único que deseas es que el usuario complete un campo específico, puedes agregar el atributo autofocus. Cuando se configuran, los navegadores de escritorio centran inmediatamente la atención en el campo de entrada. Esto hace que para los usuarios resulte más fácil comenzar a usar el formulario rápidamente. Los navegadores móviles ignoran el atributo autofocus, a fin de evitar que el teclado aparezca de forma aleatoria.

Ten precaución al usar el atributo autofocus, ya que quitará el foco del teclado y probablemente evite uso del carácter de retroceso para la navegación.

<input type="text" autofocus ...>

Proporciona validación en tiempo real

La validación de datos en tiempo real no solo te permite mantener tus datos limpios, sino que también lo ayuda a mejorar la experiencia del usuario. Los navegadores modernos poseen varias herramientas incorporadas que permiten realizar la validación de datos en tiempo real y pueden evitar que el usuario envíe un formulario no válido. Se deben utilizar indicaciones visuales para mostrar si un formulario se completó correctamente.

TL;DR

  • Aprovecha los atributos de validación incorporados del navegador, como pattern, required, min, max, etc.
  • Usa JavaScript y la Constraints Validation API para los requisitos de validación más complejos.
  • Muestra los errores de validación en tiempo real y, si el usuario intenta enviar un formulario no válido, indícale todos los campos que debe corregir.

Uso de atributos para validar la entrada

El atributo pattern

El atributo pattern, especifica una expresión regular que se usa para validar un campo de entrada. Por ejemplo, para validar un código postal de EE. UU. (5 dígitos, a veces seguidos por un guion y 4 dígitos adicionales), se debe configurar el pattern de la siguiente manera:

<input type="text" pattern="^\d{5,6}(?:[-\s]\d{4})?$" ...>
Patrones de expresión regulares comunes
Expresión regular
Dirección postal [a-zA-Z\d\s\-\,\#\.\+]+
Código postal (EE. UU.) ^\d{5,6}(?:[-\s]\d{4})?$
Dirección IP (IPv4) ^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$
Dirección IP (IPv6) ^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$
Dirección IP (ambas) ^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)|(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$
Número de tarjeta de crédito ^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|6(?:011|5[0-9]{2})[0-9]{12}|(?:2131|1800|35\d{3})\d{11})$
Número de identificación personal ^\d{3}-\d{2}-\d{4}$
Número telefónico de América del Norte ^(?:(?:\+?1\s*(?:[.-]\s*)?)?(?:\(\s*([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9])\s*\)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\s*(?:[.-]\s*)?)?([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2})\s*(?:[.-]\s*)?([0-9]{4})(?:\s*(?:#|x\.?|ext\.?|extension)\s*(\d+))?$

El atributo required

Si el atributo required está presente, el campo debe contener un valor antes de que se pueda enviar el formulario. Por ejemplo, para crear el código postal requerido, simplemente agregamos el atributo requerido:

<input type="text" required pattern="^\d{5,6}(?:[-\s]\d{4})?$" ...>

Los atributos min, max y step

En el caso de los tipos de entradas numéricas, como números o rangos, así como también las entradas de fecha y hora, puedes especificar los valores mínimos y máximos, así como también la cantidad que debe aumentar o reducirse cada valor cuando se ajusta mediante el control deslizante o el control de número. Por ejemplo, una entrada de tamaño de calzado establecería un tamaño mínimo de 1 y un tamaño máximo de 13, con un valor intermedio de 0,5.

<input type="number" min="1" max="13" step="0.5" ...>

El atributo maxlength

El atributo maxlength se puede usar para especificar la extensión máxima de una entrada o un cuadro de texto, y resulta útil cuando deseas limitar la extensión de la información que puede proporcionar el usuario. Por ejemplo, si deseas limitar el nombre de un archivo a 12 caracteres, puedes usar lo siguiente.

<input type="text" id="83filename" maxlength="12" ...>

El atributo minlength

El atributo minlength se puede usar para especificar la extensión mínima de una entrada o un cuadro de texto, y resulta útil cuando deseas especificar la longitud mínima que debe proporcionar el usuario. Por ejemplo, si deseas especificar que el nombre de un archivo debe tener 8 caracteres como mínimo, puedes usar lo siguiente.

<input type="text" id="83filename" minlength="8" ...>

El atributo novalidate

En algunos casos, puedes permitirle al usuario que presente el formulario, incluso si contiene una entrada no válida. Para hacerlo, agregue el atributo novalidate al elemento del formulario, o bien campos de entrada individuales. En este caso, a través de las seudoclases y las JavaScript API también podrás verificar si el formulario se valida.

<form role="form" novalidate>
  <label for="inpEmail">Email address</label>
  <input type="email" ...>
</form>

Uso de JavaScript para validación más compleja en tiempo real

Cuando la validación integrada y las expresiones regulares no son suficientes, puedes usar la API de validación de restricciones, una herramienta eficiente para ejecutar la validación personalizada. La API le permite llevar a cabo acciones como configurar un error personalizado, verificar si un elemento es válido y determinar el motivo por el que un elemento no es válido:

Validación de restricciones
setCustomValidity() Configura un mensaje de validación personalizado y la propiedad customError del objeto ValidityState para true.
validationMessage Se proporciona una cadena con el motivo por el cual la entrada no aprobó la prueba de validación.
checkValidity() Se obtiene la respuesta true si el elemento cumple con todas sus restricciones y false si sucede lo contrario. La decisión sobre la manera en que la página responde si en la verificación se obtiene la respuesta false depende del desarrollador.
reportValidity() Se obtiene la respuesta true si el elemento cumple con todas sus restricciones y false si sucede lo contrario. Cuando en la página se obtiene la respuesta false, los problemas de restricciones se informan al usuario.
validity Se proporciona un objeto ValidityState que representa los estados de validación del elemento.

Configuración de mensajes de validación personalizados

Si un campo no se valida, usa setCustomValidity() para marcar el campo como no válido y explica el motivo por el cual no se validó. Por ejemplo, en un formulario de registro se puede solicitar al usuario que confirme la dirección de correo electrónico ingresándola dos veces. Usa el evento de desenfoque en la segunda entrada para validar las dos entradas y configurar la respuesta correspondiente. Por ejemplo:

if (input.value != primaryEmail) {
  // the provided value doesn't match the primary email address
  input.setCustomValidity('The two email addresses must match.');
  console.log("E-mail addresses do not match", primaryEmail, input.value);
} else {
  // input is valid -- reset the error message
  input.setCustomValidity('');
}

Pruébalo

Evita el envío de formularios no válidos

Debido a que no se evitará en todos los navegadores que el usuario envíe el formulario si existen datos no válidos, debes filtrar el evento de envío y usar checkValidity() en el elemento del formulario para determinar si este último es válido. Por ejemplo:

form.addEventListener("submit", function(evt) {
  if (form.checkValidity() === false) {
    evt.preventDefault();
    alert("Form is invalid - submission prevented!");
    return false;
  } else {
    // To prevent data from being sent, we've prevented submission
    // here, but normally this code block would not exist.
    evt.preventDefault();
    alert("Form is valid - submission prevented to protect privacy.");
    return false;
  }
});

Pruébalo

Muestra comentarios en tiempo real

Resulta útil proporcionar una indicación visual en cada campo para mostrar si el usuario completó el formulario correctamente antes de enviarlo. En HTML5 también se presenta una serie de seudoclases que se pueden usar para dar estilo a las entradas según su valor o sus atributos.

Comentarios en tiempo real
:valid Se configura, explícitamente, el estilo de una entrada para que se use cuando el valor cumpla con todos los requisitos de validación.
:invalid Configura explícitamente el estilo de una entrada para que se use cuando el valor no cumpla con todos los requisitos de validación.
:required Configura explícitamente el estilo del elemento de una entrada que tiene configurado el atributo requerido.
:optional Configura explícitamente el estilo de un elemento de entrada que no tiene configurado el atributo obligatorio establecido.
:in-range Configura explícitamente el estilo del elemento de una entrada numérica cuando el valor se encuentra dentro del rango.
:out-of-range Configura explícitamente el estilo del elemento de una entrada numérica cuando el valor se encuentra fuera del rango.

La validación se realiza inmediatamente. Esto significa que, cuando la página se carga, los campos pueden estar marcados como no válidos, incluso si el usuario aún no haya tenido la oportunidad de completarlos. Esto también significa que probablemente el usuario vea el estilo no válido mientras escribe. Para evitar esto, puedes combinar la CSS con JavaScript para mostrar solo los estilos no válidos cuando el usuario haya visitado el campo.

input.dirty:not(:focus):invalid {
  background-color: #FFD9D9;
}
input.dirty:not(:focus):valid {
  background-color: #D9FFD9;
}
var inputs = document.getElementsByTagName("input");
var inputs_len = inputs.length;
var addDirtyClass = function(evt) {
  sampleCompleted("Forms-order-dirty");
  evt.srcElement.classList.toggle("dirty", true);
};
for (var i = 0; i < inputs_len; i++) {
  var input = inputs[i];
  input.addEventListener("blur", addDirtyClass);
  input.addEventListener("invalid", addDirtyClass);
  input.addEventListener("valid", addDirtyClass);
}

Pruébalo