Nuevos tipos de input en HTML5
Dentro de la gran cantidad de novedades que nos ofrece el HTML5, una muy interesante son los nuevos valores para el atributo type del elemento input.
Estos nuevos tipos de campos hacen que los navegadores adopten distintos comportamientos que, sin dudas, nos van a hacer la vida más fácil a los desarrolladores de sitios web.
Así como actualmente tenemos el conocido password que oculta la contraseña con asteriscos o círculos (dependiendo del navegador); ahora contamos con el nuevo search que presenta una pequeña cruz para poder borrar su contenido; o también el nuevo campo numérico number que muestra dos flechas (hacia arriba y hacia abajo) para aumentar o disminuir el valor del número.
Algo muy importante a tener en cuenta es que si bien estos elementos todavía no son soportados por todos los navegadores modernos, el uso de los mismos no afectará de ningún modo en los navegadores que no los soporten, actuarán simplemente como si fuesen del tipo text.
Ejemplos de los nuevos atributos
A continuación los distintos valores, recuerda que solo verás los nuevos comportamientos si estás utilizando algún navegador moderno (últimas versiones de Chrome, Firefox, Safari, Opera o IE).
Búsqueda (search):
Al ingresar texto en el campo, el navegador muestra una cruz a la derecha para borrar todo lo que hemos escrito.
En Chrome, el campo de búsqueda de htmlcinco.com
Teléfono (tel):
A la hora de completar un input de tipo tel, un smartphone como el iPhone convierte su teclado a números de teléfono.
El teclado del iPhone se adapta para completar un input de tipo tel.
Dirección url (url):
En este campo, el teclado del iPhone es qwerty pero en modo “url”, ya que ofrece teclas fundamentales para escribir una dirección web como son el punto, la barra «/» o la tecla “.com”.
El teclado del iPhone para completar un campo de tipo url.
Correo electrónico (email):
Esta vez, el teclado del smartphone es qwerty pero también tenemos la tecla “@”.
Teclado para escribir una dirección de correo electrónico.
Fecha y hora (datetime):
Si estás viendo esta página con la última versión de Opera, al cliquear en el campo verás un calendario muy completo que el navegador dispone de forma totalmente nativa.
El campo de tipo fecha y hora en Opera
Fecha (date):
Si estamos usando Opera, el calendario es el mismo que el de la imagen anterior.
Mes (month):
El calendario aquí permite seleccionar el número de mes.
Semana (week):
El calendario que nos muestra Opera para el campo de semana, nos permite elegir el número de semana del año.
El input de tipo week en Opera.
Hora (time):
Aquí el input está con el formato de hora, con los dos puntos «:» correspondientes y las flechas para subir o bajar el horario.
El input de tipo hora.
Número (number):
Para este input tenemos los atributos min y max para establecer el máximo y el mínimo que acepta el campo.
En un smartphone vemos el teclado numérico:
Teclado numérico del iPhone.
Rango (range):
El input de tipo range se presenta como un control para arrastrar con el mouse (o con el dedo en un móvil con pantalla táctil). Este campo también acepta los atributos min y max.
Input de tipo range.
Color (color):
Si estás viendo este campo con la última versión de Opera te vas a sorprender, porque el navegador presenta de forma nativa un selector de color… otra funcionalidad que comunmente tendríamos que hacer con javascript.
Primer ventana para seleccionar un color en Opera.
Pero algo que sorprende aún más, es que al cliquear en «otros…» de la ventana anterior, Opera muestra una ventana con un selector de color mucho más avanzado como el de la siguiente captura de pantalla:
Un opción más avanzada para seleccionar color en Opera.
Conclusión
No hay nada que nos detenga de utilizar estos campos en la actualidad, como dije anteriormente, si el usuario está usando un navegador que no soporte dichos valores, se interpretarán los mismos como un input de tipo text. En htmlcinco.com ya estamos usando los mismos en el cuadro de búsqueda y en los campos del formulario de comentarios. Así que ahora es tu turno! 🙂
Bitcoin
Ethereum
Bitcoin cash
Tether
Stellar
Bitcoin!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Bitcoin. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Bitcoin
Ethereum!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Ethereum. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Ethereum
Bitcoin cash!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Bitcoin cash. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Bitcoin cash
Tether!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Tether. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Tether
Stellar!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Stellar. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Stellar
No sabía que los teclados del iphone dependían de eso, pensé que el iphone de alguna manera «mágica» los detectaba, je
Muy interesante el post… cuánto faltará para que Chrome o Firefox muestren funcionalidades nuevas como Opera para las fechas y colores?!?! Por ie ni pregunto…
[…] Nuevos tipos de input en HTML5 Dentro de la gran cantidad de novedades que nos ofrece el HTML5, una muy interesante son los nuevos valores para el atributo type del elemento input. Source: http://www.htmlcinco.com […]
Esto me sorprende cada vez más. El selector de color de Opera es genial.
Gabo, no solo el selector de color y los calendarioss?! Veo el futuro mucho mais fácil jejeje!!
Que bueno sería que todo el mundo usara Opera 🙂
Para qué está la tecla de espacio en el teclado de rellenar emails?
Mariela, buena pregunta! yo me pregunto lo mismo, no nos sería mucho más útil una tecla «.com»??
Jaime V.
Excelente aporte justo en el momento que veo esto me encuetro desarrollando una aplicación web para smartphone y esto me a sido de gran ayuda
[…] Aquí un artículo bastante completo que se publicó aquí hace unos meses: Nuevos tipos de inputs en HTML5. […]
:O
lo malo es que el explorador tiene que estar actualizado en la ultima versión.. por ejemplo yo quiero usar el tipo date en chrome genial pero en firefox no lo reconoce a pesar que esta en la version 14 que es la ultima.. en chrome y safari funcionan muy bien
Gracias muy bueno
[…] Ejemplos de INPUTS […]
Muy bueno, muchas gracias
🙂
MUCHAS GRACIAS
Me parece excelente, pero me gustaría saber si al INPUT del tipo NUMBER se le puede ocultar el SPINNER?
Ya conseguí la manera de hacerlo, la comparto…
Hay que hacerlo a través de los estilos CSS
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{
-webkit-appearance: none;
margin: 0px;
}
Genial 😉
Muchas gracias por el post, y gracias a HTML5 por ahorrarnos la mitad del curso básico. Habrá que cambiar los programas de estudios.
Gracias a html5 se nos ha facilitado todo. El post es muy bueno. Ahora los diseños web pueden ser espectaculares, solo depende de la creativida.
Hola,
Buenos días
He implementado en el formulario de mi pág la etiqueta imput type=»date» y el problema está en que no sé cómo recibir la información de esta entrada,, para procesar el formulario uso un .PHP y los demás campos me llegan a un correo sin problemas,, uso la misma sintaxis que uso en las demás entradas para intentar recibir los datos del «type=date» pero sin ningún resultado satisfactorio, quisiera que por favor me orienten en el correcto uso de este atributo.
Un saludo
Angel
He visto que las flechas para modificar el valor de number no aparecen en firefox, ¿existe alguna manera de hacer que aparezcan?
todos locos jajajajajaj
Hace mucho utilizo los nuevos tipos de inputs que posee HTML5, pero justo hasta este artículo pude saber para que servían los campos URL y NUMBER
Gracias por el aporte!!!!
me gustaria que el formulario de input type=tel funcione exactamente solo para numeros de celulares y telefonos y ademas el input type=text acepte solo texto afabetico o que haya otro type.
gracias esperare su ayuda
Hola German,
Esto seguramente te pueda servir: http://www.htmlcinco.com/el-atributo-pattern-expresiones-regulares-sin-javascript/
Saludos.
Necesito saber si existe una manera de hacer un select que pueda elegir opciones y que a la vez si no está la opción necesaria yo la ingrese y la elija a la vez. Por ejemplo si deseo aumentar en porcentaje un valor como 10 al 55%, pero en el select tengo 25, 50, 75 y 100%, de pronto no requiero y quiero que sea el valor que yo desee, en el mismo select es posible escribir ese valor en línea??
[…] el artículo “Nuevos tipos de input en HTML5″ de htmlcinco.com podéis repasar, de forma rápida e introductoria, ejemplos de visualización de los diferentes […]
mi pregunta como puedo aplicar a algo el …
digamos quiero aplicarlo al
como puedo hacerlo
o a cualquier otra parte del documento???
perdon creo q no se entendio
era
como puedo aplicar a algo el input type color
digamos q quiero aplicarlo al titulo
copmo puedo hacerlo o cualquier otra parte de documento???
disculpas por no explicarme bien
estoy usando dreamwevwer cs6 y no me funcionan se ven como tipo texto.
algounas sugerencias por favor
Todo funciona a la perfección, si queremos un teclado numerico lo hacemos asi:
Magnifique, millon de gracias por la aportación.
Quisiera poder incluir en un formulario un elemento que me cargue los años, como si fuera un combo box y poder elegir el año de ahí, ejemplo 2018, 2107, 2019, etc pero poder elegirlo con un click, si alguien me puede ayudar, le agradezco
deberían implementar el input para porcentajes seria una excelente opción.