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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
Sobre David Otero
David Otero es uno de los creadores y desarrolladores que componen Developando. Puedes contactar con él en León, Zamora o Madrid.
Conoce a David Otero en Google+.
- Find more about me on:
Deja tu comentario