Esta es una manera simple y práctica de hacer que las aplicaciones funcionen mejor en los dispositivos móviles: configure siempre los campos de entrada HTML con el type, inputmode, y autocomplete atributos Si bien estos tres atributos a menudo se analizan de forma aislada, tienen más sentido en el contexto de la experiencia del usuario móvil cuando se piensa en ellos como un equipo.
No hay duda de que los formularios en dispositivos móviles pueden llevar mucho tiempo y ser tediosos para completar, pero al configurar correctamente las entradas, podemos asegurarnos de que el proceso de ingreso de datos sea lo más fluido posible para nuestros usuarios. Echemos un vistazo a algunos ejemplos y mejores prácticas que podemos usar para crear mejores experiencias de usuario en dispositivos móviles.
Utilice esta demostración para experimentar por su cuenta, si lo desea.
Usar el tipo de entrada correcto
Esto es lo más fácil de hacer bien. Tipos de entrada, como email, tel, y url, son compatibles con todos los navegadores. Si bien el beneficio de usar un tipo, como tel sobre el más genérico text, puede ser difícil de ver en los navegadores de escritorio, es evidente de inmediato en los dispositivos móviles.
Elegir el tipo apropiado cambia el teclado que aparece en los dispositivos Android e iOS cuando un usuario enfoca el campo. Con muy poco esfuerzo, solo usando el tipo correcto, mostraremos teclados personalizados para correo electrónico, números de teléfono, direcciones URL e incluso entradas de búsqueda.
Tipo de entrada de texto en iOS (izquierda) y Android (derecha)
Tipo de entrada de correo electrónico en iOS (izquierda) y Android (derecha)
Tipo de entrada de URL en iOS (izquierda) y Android (derecha)
Tipo de entrada de búsqueda en iOS (izquierda) y Android (derecha)
Una cosa a tener en cuenta es que ambos input type="email" y input type="url" vienen con la funcionalidad de validación, y los navegadores modernos mostrarán una información sobre herramientas de error si sus valores no coinciden con los formatos esperados cuando el usuario envía el formulario. Si prefiere desactivar esta funcionalidad, simplemente puede agregar el novalidate atribuir al que contiene form.
Un desvío rápido a los tipos de fecha
Las entradas HTML comprenden mucho más que entradas de texto especializadas: también tiene botones de radio, casillas de verificación, etc. Sin embargo, a los efectos de esta discusión, me refiero principalmente a los más entradas basadas en texto.
Hay un tipo de entrada que se encuentra en el espacio liminal entre las entradas de texto de forma más libre y los widgets de entrada como los botones de opción: date. El date tipo de entrada viene en una variedad de sabores que son bien compatibles con dispositivos móviles, que incluyen date, time, datetime-local, y month. Estos widgets personalizados emergentes en iOS y Android cuando están enfocados. En lugar de activar un teclado especializado, muestran una interfaz de selección en iOS y varios tipos diferentes de widgets en Android (donde el date y time los selectores son particularmente hábiles).
Estaba emocionado de comenzar a usar los valores predeterminados nativos en dispositivos móviles, hasta que miré a mi alrededor y me di cuenta de que la mayoría de las principales aplicaciones y sitios web móviles usan selectores de fechas personalizados en lugar de tipos de entrada de fechas nativos. Podría haber un par de razones para esto. Primero, encuentro que el selector de fecha nativo de iOS es menos intuitivo que un widget de tipo calendario. En segundo lugar, incluso la implementación de Android bellamente diseñada es bastante limitada en comparación con los componentes personalizados; por ejemplo, no hay una manera fácil de ingresar un rango de fechas en lugar de una sola fecha.
Aún así, vale la pena revisar los tipos de entrada de fecha si el selector de fecha personalizado que está utilizando no funciona bien en dispositivos móviles. Si desea probar los widgets de entrada nativos en iOS y Android mientras se asegura de que los usuarios de escritorio vean un widget personalizado en lugar del menú desplegable predeterminado, este fragmento de CSS ocultará el menú desplegable del calendario para los navegadores de escritorio que lo implementen:
::-webkit-calendar-picker-indicator {
display: none;
}
Tipo de entrada de fecha en iOS (izquierda) y Android (derecha)
Tipo de entrada de tiempo en iOS (izquierda) y Android (derecha)
Una última cosa a tener en cuenta es que date los tipos no pueden ser anulados por el inputmode atributo, que discutiremos a continuación.
¿Por qué debería preocuparme por el modo de entrada?
El inputmode El atributo le permite anular el teclado móvil especificado por el tipo de entrada y declarar directamente el tipo de teclado que se muestra al usuario. Cuando me enteré por primera vez de este atributo, no me impresionó, ¿por qué no usar el atributo correcto? type ¿en primer lugar? Pero mientras inputmode a menudo es innecesario, hay algunos lugares donde el atributo puede ser extremadamente útil. El caso de uso más notable que he encontrado para inputmode está construyendo una mejor entrada de números.
Mientras que algunos tipos de entrada de HTML5, como url y email, son sencillos, input type="number" es un asunto diferente. Tiene algunos problemas de accesibilidad, así como una interfaz de usuario algo incómoda. Por ejemplo, los navegadores de escritorio, como Chrome, muestran pequeñas flechas de incremento que son fáciles de activar accidentalmente al desplazarse.
Así que aquí hay un patrón para memorizar y usar en el futuro. Para la mayoría de las entradas numéricas, en lugar de usar esto:
<input type="number" />… en realidad quieres usar esto:
<input type="text" inputmode="decimal" />Por qué no inputmode="numeric" en vez de inputmode="decimal" ?
El numeric y decimal los valores de los atributos producen teclados idénticos en Android. En iOS, sin embargo, numeric muestra un teclado que muestra números y puntuación, mientras que decimal muestra una cuadrícula enfocada de números que casi se ve exactamente como el tel tipo de entrada, solo sin opciones enfocadas en números de teléfono extraños. Es por eso que prefiero la mayoría de los tipos de entradas de números.
iOS numeric entrada (izquierda) y decimal entrada (derecha)
Androide numeric entrada (izquierda) y decimal entrada (derecha)
Christian Oliff ha escrito un excelente artículo dedicado exclusivamente al atributo inputmode.
No olvides autocompletar
Aún más importante que mostrar el teclado móvil correcto es mostrar sugerencias útiles de autocompletar. Eso puede contribuir en gran medida a crear una experiencia de usuario más rápida y menos frustrante en dispositivos móviles.
Si bien los navegadores tienen heurísticas para mostrar campos de autocompletar, no puede confiar en ellos y aún debe asegurarse de agregar el campo correcto. autocomplete atributo. Por ejemplo, en iOS Safari, descubrí que un input type="tel" solo mostraría opciones de autocompletar si agregara explícitamente un autocomplete="tel" atributo.
Usted puede pensar que está familiarizado con los conceptos básicos autocomplete opciones, como las que ayudan al usuario a completar números de tarjeta de crédito o campos de formulario de dirección, pero le insto a que los revise para asegurarse de que conoce todas las opciones. ¡La especificación enumera más de 50 valores! Sabía usted que autocomplete="one-time-code" ¿Puede hacer que un usuario de verificación telefónica fluya súper suave?
Hablando de autocompletar…
Me gustaría mencionar un elemento final que le permite crear su propia funcionalidad personalizada de autocompletar: datalist. Si bien crea una experiencia útil, aunque algo básica, de autocompletar en el escritorio Chrome y Safari, brilla en iOS al mostrar sugerencias en una fila conveniente justo encima del teclado, donde generalmente se encuentra la funcionalidad de autocompletar del sistema. Además, permite al usuario alternar entre texto y entradas de estilo seleccionado.
En Android, por otro lado, datalist crea un menú desplegable de autocompletar más típico, con el área sobre el teclado reservada para la funcionalidad de escritura anticipada propia del sistema. Una posible ventaja de este estilo es que la lista desplegable se puede desplazar fácilmente, creando un acceso inmediato a todas las opciones posibles tan pronto como se enfoca el campo. (En iOS, para ver más de las tres coincidencias principales, el usuario tendría que activar el selector de selección presionando el icono de flecha hacia abajo).
Puedes usar esta demostración para jugar con datalist:
Y puede explorar todas las opciones de autocompletar, así como la entrada type y inputmode valores, usando esta herramienta que hice para ayudarlo a obtener una vista previa rápida de varias configuraciones de entrada en dispositivos móviles.
En resumen
Cuando estoy creando un formulario, a menudo tengo la tentación de concentrarme en perfeccionar la experiencia de escritorio mientras trato la web móvil como una ocurrencia tardía. Pero si bien se necesita un poco de trabajo adicional para garantizar que los formularios funcionen bien en dispositivos móviles, no tiene por qué ser demasiado difícil. Con suerte, este artículo ha demostrado que con unos sencillos pasos, puede hacer que los formularios sean mucho más convenientes para sus usuarios en dispositivos móviles.