HTML5 Input type touch friendly, nuevos campos de entrada con sus diferentes teclados

Este tutorial está orientado a la programación con HTML5 de formularios. Cada formulario estár compuesto por diferentes campos donde el usuarios deberá introducir algunos datos como son el nombre, dirección, teléfono o cuenta de correo entre otros.

Gracias a HTML5 y a sus nuevos ‘Input types’ o ‘tipos de entrada’ facilitaremos a los usuarios la tarea de rellenar dichos campos.

¿Qué ventajas tiene utilizar tipos de entrada?

Cuando se define un tipo de entrada para un campo, cuando el usuario vaya a introducir los datos en él, su terminal le mostrará en pantalla el teclado con las teclas que le faciliten la entrada de datos. Por ejemplo, si queremos escribir una dirección de correo, sería de utilidad que en el teclado ya apereciese por defecto el carácter ‘@’ y ‘.com’ ya que son carácteres comunes en toda cuenta de correo.

Listado de tipos de entrada definidos en HTML5

A continuación mostraremos capturas de pantallas de un terminal Android con los diferentes teclados. Como iréis viendo algunos tienen un color distinto. Esto es debido a que no todos los tipos de entrada de datos son compatibles con todos los navegadores. Para ver las compatibilidades consultar la tabla que añadimos al final del tutorial.

Número

Este código creará un campo de entrada de datos que sólo permitirá introducir números:

1
Edad: <input type="number" name="edad" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el teclado que le aparecerá para introducir su edad:

Tipo de entrada – Número
Tipo de entrada – Número

Email

Para crear un campo de entrada para dirección de correo se debe añadir la siguiente línea:

1
Correo electónico: <input type="email" name="email" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el teclado que le aparecerá para introducir la dirección de correo:

HTML5-email-input-type
Tipo de entrada – Email

Teléfono

Para crear un campo donde solicitar un teléfono se debe añadir la siguiente línea:

1
Correo electónico: <input type="tel" name="telefono" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el teclado que le aparecerá para introducir un número de teléfono:

Tipo de entrada – Teléfono
Tipo de entrada – Teléfono

Búsqueda

Para crear un campo de búsqueda se debe añadir la siguiente línea:

1
Buscar: <input type="search" name="buscador" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el teclado que le aparecerá para introducir los datos a buscar:

Tipo de entrada – Búsqueda
Tipo de entrada – Búsqueda

URL

Para crear un campo donde solicitar una URL se debe añadir la siguiente línea:

1
Correo electónico: <input type="url" name="web" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el teclado que le aparecerá para introducir los datos a buscar:

HTML5-email-input-type
Tipo de entrada – Url

Fecha

Para crear un campo donde solicitar una fecha se debe añadir la siguiente línea:

1
Correo electónico: <input type="date" name="fecha" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el teclado que le aparecerá para introducir la fecha:

Tipo de entrada – Fecha
Tipo de entrada – Fecha

Hora

Para crear un campo donde solicitar una hora se debe añadir la siguiente línea:

1
Correo electónico: <input type="time" name="hora" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el teclado que le aparecerá para introducir la hora:

Tipo de entrada – Hora
Tipo de entrada – Hora

Mes

Para crear un campo donde solicitar un mes se debe añadir la siguiente línea:

1
Correo electónico: <input type="month" name="mes" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el teclado que le aparecerá para introducir el mes:

Tipo de entrada – Mes
Tipo de entrada – Mes

Semana

Para crear un campo donde solicitar una semana se debe añadir la siguiente línea:

1
Correo electónico: <input type="week" name="semana" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el teclado que le aparecerá para introducir la semana:

Tipo de entrada – Semana
Tipo de entrada – Semana

Rango numérico

Crea un selector de número comprendido entre cierto rango, para ello utlizar esta línea:

1
Puntuación[0-10]: <input type="range" name="puntuación" min="1" max="10" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el selector que le aparezca para elegir la puntuación entre 0 y 10:

Tipo de entrada – Range
Tipo de entrada – Range

Color

Para crear un campo donde solicitar un color se debe añadir la siguiente línea:

1
Color favorito: <input type="color" name="color" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el teclado que le aparecerá para seleccionar el color. Las imagenes a continuación muestran el selector de color para dos navegadores diferentes:

Tipo de entrada – Color
Tipo de entrada – Color
Tipo de entrada – Color
Tipo de entrada – Color

Ejemplo de un formulario completo

Edad:

Correo electónico:

Buscar:

Página web:

Teléfono:

Fecha:

Hora:

Mes:

Semana:

Puntuación[0-10]:

Color favorito:

Share Button
David Otero

Sobre 

David Otero es uno de los creadores y desarrolladores que componen Developando. Puedes contactar con él en León, Zamora o Madrid.
Conoce a en Google+.

    Find more about me on:
  • facebook
  • googleplus
  • linkedin
  • twitter

Deja tu comentario

Loading Disqus Comments ...
Loading Facebook Comments ...