Para aumentar la usabilidad de un formulario a la hora de que el usuario utilice un dispositivo móvil, hay distintas formas, pero en esta ocasión vamos a ver cómo lo puedes hacer con los atributos inputmode y enterkeyhint de HTML.
En el siguiente vídeo, nuestro profesor del bootcamp, Sergio Jiménez, explica cómo se puede conseguir que el teclado del dispositivo móvil, o similar, cambie en función del tipo de campo que se va a completar y mejorar la usabilidad de dicho teclado.
Aceptar el consentimiento para ver esto
Como puedes comprobar, Sergio hace un repaso de los distintos tipos de teclados virtuales que aparecen en dispositivos móviles, dependiendo del tipo de campo que se vaya a completar dentro de un formulario.
Se puede apreciar que tan solo con el atributo type es suficiente para que aparezca el tipo de teclado que se desea, pero esto también se puede forzar con el atributo inputmode, para forzar un tipo de teclado. De esta forma, quedaría un código similar al del siguiente ejemplo:
<label>
Nombre
<input type="text" inputmode="numeric"/>
</label>
Otro caso de mejora de usabilidad de la web puede ser el de la tecla «intro» del teclado del dispositivo móvil. Esta tecla se puede cambiar para que aparezca con otro nombre mediante el atributo enterkeyhint. Utilizando este atributo para que la tecla marcara «siguiente» y fuera al siguiente campo, quedaría un código como el del ejemplo siguiente:
<label>
Nombre
<input type="text" enterkeyhint="next"/>
</label>
Esto último se puede forzar también mediante JavaScript, para que el uso de la tecla «intro» sea el que se requiere y no otro.
Si quieres aprender más de HTML, además de los atributos inputmode y enterkeyhint, y otras muchas tecnologías relacionadas con el desarrollo web, échale un vistazo a nuestro Bootcamp Full Stack Web Developer y conviértete en profesional de la programación.
