A menudo nos encontramos con formularios que tienen múltiples campos, como un número de teléfono o un número de tarjeta de crédito. esto puede plantear algunos problemas de usabilidad.
Es posible que se haya encontrado campos para números de teléfono y números de tarjetas de crédito que son cuatro campos de texto.
Un problema puede surgir con este estilo de diseño cuando no todos los campos están correctamente etiquetados. El código para un campo de número de teléfono podría verse así:
<label for="phone">Phone number</label>
<input type="text" id="phone">
<input type="text">
<input type="text">
Los lectores de pantalla anunciarán el primer campo en ese ejemplo como "número de teléfono, editar texto", pero los siguientes dos campos se anunciarán como "en blanco, editar texto" porque no hay ninguna etiqueta asociada a ninguno de ellos. Una forma de solucionarlo sería agregar etiquetas para los otros dos campos junto con a legendy fieldset:
<fieldset>
<legend>Phone number </legend>
<label for="area">Area code </label>
<input type="text" id="area">
<label for="phone-first">Middle three digits </label>
<input type="text" id="phone-first">
<label for="phone-last">Last four digits </label>
<input type="text" id="phone-last">
</fieldset>
Pero eso es bastante código para un simple número de teléfono.
Veamos un ejemplo con un solo campo de formulario. En ese caso, puede indicar a los navegadores que el campo es para ingresar un número de teléfono configurando la entrada typeentel. El resultado es algo como:
<label for="phone">Phone number</label>
<input type="tel" id="phone">
Un solo campo de texto con un número de teléfono completado
En los dispositivos con un teclado virtual, como un teléfono inteligente, al enfocar ese campo aparece el teclado de los números de teléfono.
Otro beneficio del uso de un solo campo continuo es que es más adecuado para los números de teléfono internacionales
Números de tarjetas de crédito
Los números de las tarjetas de crédito también suelen estar sujetos al tratamiento de campo de texto múltiple. Quizás esto se deba a que están separados visualmente en la mayoría de las tarjetas de crédito o porque puede ser más fácil para los humanos ingresar números largos en partes.
Tal forma podría verse algo como esto:
<fieldset>
<legend>Credit card number</legend>
<label>
First four digits
<input type="number" maxlength="4">
</label>
<label>
Second set of four digits
<input type="number" maxlength="4">
</label>
<label>
Third set of four digits
<input type="number" maxlength="4">
</label>
<label>
Last four digits
<input type="number" maxlength="4">
</label>
</fieldset>
Código reducido
<label for="credit-card">Credit card number</label>
<input type="number" id="credit-card">
De nuevo, esto resulta en mucho menos código que la versión de varios campos. En cuanto a una separación visual de los números, hay algunas maneras de resolver eso. Una de ellas sería permitir que los usuarios agreguen sus propios separadores, ya sean guiones, barras, puntos, espacios o algo más.
Fechas
Hay muchas maneras de permitir que los usuarios elijan una fecha: cuadros seleccionados, input con un tipo de date, tres campos separados o un calendario (entre otros).
A menudo vemos el mismo problema de etiquetado independientemente de si se utilizan select elementos o input campos. Veamos un ejemplo con tres campos separados. Este código es muy similar al otro código de número de teléfono dudoso anterior:
<label for="birthday">Birthday</label>
<input type="number" placeholder="DD" id="birthday">
<input type="number" placeholder="MM">
<input type="number" placeholder="YYY">
En este ejemplo, el placeholder le dice a los usuarios qué campo contiene cada parte de la fecha, pero los placeholder tienen un par de problemas relacionados con la accesibilidad, como no tener suficiente contraste de color y desaparecer cuando los usuarios ingresan texto.
Una mejor manera de etiquetar los campos sería usar a fieldset, a legendy a label para cada campo, como en el ejemplo del número de teléfono:
<fieldset>
<legend>Birthday</legend>
<label for="day">Day</label>
<input type="number" placeholder="DD" id="day">
<label for="month">Month</label>
<input type="number" placeholder="MM" id="month">
<label for="year">Year
<input type="number" placeholder="YYYY" id="year">
</fieldset>
El placeholder ahora proporciona el formato esperado para cada campo, mientras que las etiquetas informan a los usuarios qué datos se solicitan.
Tres campos de texto para ingresar una fecha de nacimiento. Los campos de texto tienen texto de marcador de posición para indicar su formato esperado: 'DD' para el día, 'MM' para el mes y 'YYYY' para el año.
Vale la pena mencionar que los marcadores de posición no están disponibles para todos los usuarios; por ejemplo: no se muestran en versiones realmente antiguas de Internet Explorer como IE8 e IE9. Los marcadores de posición también desaparecen cuando los usuarios ingresan datos, lo que los deja sin una forma de verificar el formato. Por lo tanto, podría ser mejor incluir el formato en texto sin formato si es realmente importante:
<fieldset>
<legend>Birthday</legend>
<p>The format for these fields is two digits for day,
two digits for month, and four digits for year.</p>
<label for="day">Day</label>
…
</fieldset>
Formatos de fecha
Diferentes formatos de fecha se utilizan en diferentes partes del mundo. Pero los formatos de fecha más comunes se pueden resumir como:
De la mayoría a la menos específica: de día a mes a año.
comenzando con el mes seguido del día y terminando con el año.
Debido a estos formatos variables, sería bastante difícil solicitar una fecha en un solo campo de texto si necesita admitir varias configuraciones regionales. En el futuro, podrás resolver esto configurando el atributo input del elemento type en date. Cuando type se implemente esto, los navegadores podrán resolver estos problemas presentando a los usuarios el formato de fecha que utiliza su sistema.
A veces es posible que tenga que admitir navegadores o sistemas operativos que no admiten el tipo de entrada date; en esos casos, probablemente sea mejor pedir fechas en campos de entrada separados. Si tiene que solicitar la fecha en un solo campo de entrada, incluya instrucciones sobre el formato solicitado.
Validación
La validación es una parte importante de los formularios en línea; debemos asegurarnos de que podemos usar los datos ingresados en el back-end de nuestras aplicaciones. Pero descargamos esta carga a los usuarios con demasiada frecuencia. Les pedimos que usen ciertos separadores, formatos y caracteres. Esto no facilita el llenado de un formulario para los usuarios; eso simplemente hace que sea más fácil para los desarrolladores manejar los datos ingresados.
Conclusión
En la mayoría de los casos, es más fácil para los usuarios ingresar un número de teléfono o un número de tarjeta de crédito en un solo campo. Pero si necesita tener varios campos, asegúrese de que estén correctamente etiquetados.
