Usa el type correcto en los inputs HTML
Los elementos HTML 🚧 de tipo input tienen un atributo especial llamado type que sirve para indicar al navegador el tipo de input. Seguramente si ya has hecho el típico formulario de login ya lo has usado, para indicar el tipo password y que el input renderice puntos en lugar de la contraseña, pero resulta que hay muchos más que igual no conoces.
Ventajas de los atributos type
Accesibilidad. Esto es lo principal. Un input con el type correcto indica mejor al usuario de qué tipo es el valor es el que tiene que introducir. Esto ya debería estar suficientemente claro mediante los labels, pero nunca está de más añadir el type correcto.
Experiencia para el usuario. Hay algunos types que incluso cambian el comportamiento del navegador a la hora de renderizarlo. Por ejemplo el type date muestra un selector de fechas, o el type password que cambia la forma de renderizar el texto, cambiándolo por puntos o asteriscos para que no se vea.
Autocompletado. Dependiendo del type que pongas, y del campo autocomplete, puede que el usuario disfrute de un mejor autocompletado de los campos. Por ejemplo muchos gestores de contraseñas buscan estos campos para autorellenarlos. Recuerda, Usa el campo autocomplete en los inputs 🚧.
Validaciones. Simplemente por poner el type bien, a la hora de que el usuario haga el submit, puede que tengas ya varias validaciones de base sin tener que hacerlo a mano usando Javascript. Va a haber validaciones que tengas que hacerlas con Javascript, pero todo lo que te quites y haga el navegador mejor que mejor.
Inputs types que deberías conocer
No voy a darte toda la lista pero te voy a poner los más interesantes para los formularios.
-
email: Para indicar que el campo contiene un email. En algunos navegadores, simplemente indicando este type, obtienes de gratis la validación del email sin que tengas que añadir nada de Javascript. Además, en dispositivos móviles cambia un poco el teclado para añadir de forma más cómoda el arroba y el .com
-
password. Mítico. Para indicar que es un campo de contraseña. Hace que el navegador no renderice la contraseña y en su lugar ponga puntos o asteriscos. Este es de los más importantes ya que las contraseñas son delicadas y no quieres que se muestren mientras los usuarios las escriben.
-
number. Esencial también, para añadir un input para números. Añade a la derecha del input un par de botones para que el usuario haciendo click pueda subir y bajar en unidades la cantidad introducida. Aunque el usuario puede escribir letras, el navegador ya se encarga al darle a submit de que el número sea válido. Por defecto solo va a permitir al usuario números enteros, si quieres admitir decimales tienes que añadir el atributo step="any". También para este input existen los atributos min y max para indicar valores mínimos y máximos.
-
checkbox. Muy conocido. Sirve para añadir un campo con una casilla para marcar o no. El típico valor true/false. Ojo, porque al crear un inputs de estos solo se crea la cajita para marcar, si quieres texto al lado tienes que usar un label
-
radio. También conocido. Es parecido al checkbox, para valores true/false. La diferencia con el anterior es que aquí solo se te permite seleccionar una de las opciones de una lista de posibles. No se puede desmarcar. Son los típicos elementos con un circulito al lado que cuando marcas uno se desmarca el que estaba seleccionado. Como con los checkbox, si quieres añadir texto necesitas un label.
-
tel. Indicar que el campo es de tipo telefónico. En móviles cambia el teclado para mostrar solo números. Ojo porque en ordenadores aunque pongas este type, el usuario puede escribir letras, por lo que vas a necesitar validación extra (usando el atributo pattern o mediante Javascript).
-
range. Para crear un range slider. Es la típica barra con un un elemento que puedes arrastrar hacia un lado o el otro para incrementar o decrementar su valor.
-
date. Habilita un selector de fechas. Esto varía mucho dependiendo del navegador. Lo normal es que salga un input y por defecto relleno con dd / mm / aaaa. Lo bueno es que este type si que obliga al usuario a tener que escribir números, por lo que ya te llevas esa validación de que el usuario solo puede meter fechas. También en desktop añade un icono para abrir un selector de fechas básico que también depende del navegador. Aquí mucha gente opta por descargar una librería de selectores de fechas hecho con Javascript, ya que te permite mayor control sobre cómo quieres mostrar el selector de fechas, y que además se verá igual en todos los navegadores. Yo para una primera versión recomiendo usar el type date, y si más adelante se necesita algo más personalizado mirar el tema de la librería.
-
month. Es una variante del tipo date, pero que está más restringida para que el usuario solo pueda seleccionar mes y año.
-
file. Para añadir el típico botón de examinar fichero para adjuntar. Este botón mucha gente lo personaliza porque por defecto es un botón normal. También te da la funcionalidad de arrastrar fichero para adjuntar, pero solo si lo sueltas en el input. Mucha gente lo que hace es crear un elemento contenedor y mediante Javascript añadir los eventos de arrastrar fichero para que al área para soltar ficheros sea más grande.
Si te ha gustado el artículo y no te quieres perder lo nuevo me puedes seguir:
Me puedes decir cualquier cosa por email ¡me encanta leer vuestros mensajes!
hola [arroba] diegologs.com