Con el tel input HTMl5 se pueden validar fácilmente los campos de formularios en los que se vayan a introducir números de teléfono.
Ya no van a hacer falta numerosas líneas de código para hacer revisiones con jQuery o PHP y así asegurarnos que el valor introducido es válido.
Este nuevo input HTML5 resulta muy últil para los dispositivos móviles actuales.
El dispositivo detecta el input y al pulsar en él automáticamente sale el teclado telefónico del movil para teclear el número en cuestión. Os el pantallazo superior capturado en mi iPhone.
<input type="tel" name="telefono">
Como veis es muy fácil insertar el nuevo input tel en el formulario un formulario.
He realizado la siguiente demo de ejemplo donde podréis probar con vuestros dispositivos móviles el funcionamiento, el código es el siguiente:
<form name="ejemplo1" action="15-html5-tel-input.php" method="POST"> Introduce tu TELEFONO: <input type="tel" name="telefono"> <input type="submit" value="Enviar"> </form> <?php if ($_POST['telefono']) echo "tu teléfono es: " .$_POST['telefono']; ?>
Explico el código del ejemplo:
Os pongo un segundo ejemplo usando el atributo pattern, esta mejora consiste en que se metan obligatoriamente los 9 dígitos de los números de teléfono que se usan en España.
<form name="ejemplo1" action="15-html5-tel-input-demo2.php" method="POST"> Introduce tu TELEFONO con los 9 dígitos: <input type="tel" name="telefono" pattern="[0-9]{9}"> <input type="submit" value="Enviar"> </form>
En el código superior podemos ver como en el atributo pattern hemos metido una expresión regular en la que condicionamos la entrada de 9 números del 0 al 9.
Siempre se ha de cumplir esa condición, en caso contrario nos hará una validacón automática como la que pongo en la siguiente imagen.
Voy a listaros los atributos válidos para este input según la W3C.
En esta url tenéis el listado completo de los nuevos input de HTML5.
En esta otra url tenéis todos los nuevos atributos HTML5 para inputs y formularios.