htmlcinco

HTML 5, encontrá novedades, tutoriales y traducciones sobre este lenguaje.

Nuevos tipos de input en HTML5

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):

<input type=“search” name=“busqueda”>

Al ingresar texto en el campo, el navegador muestra una cruz a la derecha para borrar todo lo que hemos escrito.

El nuevo campo de búsqueda

En Chrome, el campo de búsqueda de htmlcinco.com

Teléfono (tel):

<input type=“tel” name=“telefono”>

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):

<input type=“url” name=“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”.

Teclado de iPhone para completar campos de tipo url.

El teclado del iPhone para completar un campo de tipo url.

Correo electrónico (email):

<input type=“email” name=“correo”>

Esta vez, el teclado del smartphone es qwerty pero también tenemos la tecla “@”.

Teclado del iPhone para escribir una dirección de correo electrónico.

Teclado para escribir una dirección de correo electrónico.

Fecha y hora (datetime):

<input type=datetimename=“fechahora”>

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

El campo de tipo fecha y hora en Opera

Fecha (date):

<input type="date" name="fecha">

Si estamos usando Opera, el calendario es el mismo que el de la imagen anterior.

Mes (month):

<input type="month" name="mes">

El calendario aquí permite seleccionar el número de mes.

Semana (week):

<input type="week" name="semana">

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.

El input de tipo week en Opera.

Hora (time):

<input type="time" name="hora">

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 hora

El input de tipo hora.

Número (number):

<input type="number" name="num" min="0" max="50">

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.

Teclado numérico del iPhone.

Rango (range):

<input type="range" name="rango" min="0" max="50">

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.

Input de tipo range.

Color (color):

<input type="color" name="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.

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:

Ventana avanzada para seleccionar color

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! :)

24 comentarios para “Nuevos tipos de input en HTML5”

  1. connie says:

    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…

  2. [...] 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 [...]

  3. Gabo says:

    Esto me sorprende cada vez más. El selector de color de Opera es genial.

  4. Dan H. says:

    Gabo, no solo el selector de color y los calendarioss?! Veo el futuro mucho mais fácil jejeje!!

  5. Feder says:

    Que bueno sería que todo el mundo usara Opera :)

  6. Mariela says:

    Para qué está la tecla de espacio en el teclado de rellenar emails?

  7. javont says:

    Mariela, buena pregunta! yo me pregunto lo mismo, no nos sería mucho más útil una tecla “.com”??

    Jaime V.

  8. Armando says:

    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

  9. [...] Aquí un artículo bastante completo que se publicó aquí hace unos meses: Nuevos tipos de inputs en HTML5. [...]

  10. javier says:

    :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

  11. gabo says:

    Gracias muy bueno

  12. Marcos says:

    Muy bueno, muchas gracias
    :)

  13. CESAR says:

    MUCHAS GRACIAS

  14. Elías Peña says:

    Me parece excelente, pero me gustaría saber si al INPUT del tipo NUMBER se le puede ocultar el SPINNER?

  15. Elías Peña says:

    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;
    }

  16. Sergi says:

    Genial ;)

  17. Héctor says:

    Muchas gracias por el post, y gracias a HTML5 por ahorrarnos la mitad del curso básico. Habrá que cambiar los programas de estudios.

  18. Dany says:

    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.

  19. Angel says:

    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

  20. Marcus says:

    He visto que las flechas para modificar el valor de number no aparecen en firefox, ¿existe alguna manera de hacer que aparezcan?

  21. saltapraus says:

    todos locos jajajajajaj

  22. Eborio Linárez says:

    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

  23. Lokillo says:

    Gracias por el aporte!!!!

Dejar un comentario