tel input HTML5: Campo de formulario para números de teléfono

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.

Sintaxis de tel input HTML5

<input type="tel" name="telefono">

1	<input type="tel" name="telefono">

Como veis es muy fácil insertar el nuevo input tel en el formulario un formulario.

Ejemplo de tel input HTML5

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'];
?>

Introduce tu TELEFONO: <input type="tel" name="telefono">

</form>

<?php

if ($_POST['telefono'])

echo "tu teléfono es: " .$_POST['telefono'];

Explico el código del ejemplo:

He creado un sencillo formulario con método POST con un campo de tipo ‘tel’.
Tras enviar el formulario saco por pantalla con PHP el valor del número de teléfono.

Ejemplo de uso del atributo pattern en el tel input HTML5

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>

Introduce tu TELEFONO con los 9 dígitos: <input type="tel" name="telefono" pattern="[0-9]{9}">

</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.

Atributos válidos en tel input HTML5

Voy a listaros los atributos válidos para este input según la W3C.

name: Nombre del input (name=»nombre del input»).
disabled: Atributo que determina si está desactivado el input para la introducción de datos (disable=»disabled»), por defecto activado.
type: tipo de input, en este caso es ‘tel’
form: Con este atributo se asocia el id del form al que pertenece el input (form=»id del form»).
autocomplete: Con autocomplete activado el input se autorrellenará con contenidos anteriormente enviados por él mismo (autocomplete=»off», autocomplete=»on»).
autofocus: Este atributo hace que el cursor se situe en en input (autofocus=»autofocus»).
list: Asocia mediante id una lista de valores predefinidos (list=»nombre lista»).
maxlength: Longitud máxima en caracteres del número introducido.
readonly: Con el valor activado el input no podrá variar de valor, no se podrá editar (readonly=»readonly»).
required: Determina si el input tiene que ser rellenado obligatoriamente (required=»required»).
size: Anchura del input en el form.
pattern: Expresión regular que a de cumplir el número de teléfono.
placeholder: Permite al usuario ver una leyenda en el input de entrada de datos. Cuando el usuario clicke sobre el input esta leyenda desaparecerá (placeholder=»leyenda, texto explicativo»).
value: Valor por defecto del input.
novalidate: Hace que el input no se valide al enviarse el formulario.