Campos en formularios HTML5

Para poder visualizar correctamente es necesario un navegador que soporte HTML5. Prueba instalando Firefox, Chrome o Safari (recomendados) si tu navegador no es compatible.

En la entrada anterior vimos los nuevos atributos que podemos encontrar en los formularios HTML5. Pero, ¿en que etiquetas podemos aplicarlos? Sin más preámbulos, veámos cuales son las novedades al respecto.

Campos Principales

search

Según las estadísticas, la busqueda es la acción más realizada en la web todos los días. Normalmente para crear un formulario de búsqueda utilizamos un campo de texto. Ahora podemos especificar en el tipo de campo que va a referirse a una busqueda.

Además de ser más semántico, algunos navegadores añadiran una pequeña x a un lado del campo con la que podremos eliminar su contenido rápidamente. En navegadores móviles el teclado adquirirá unas sutiles diferencias respecto al original.

Los navegadores que no soporten la etiqueta tratarán el campo como un campo de texto normal, así que no perdemos nada por utilizarlo.

<input type="search" name="search">

email

Este campo es simplemente un atajo para un campo de texto con el atributo pattern necesario para comprobar si un correo electrónico es correcto. Al especificar este tipo de campo, el navegador se encargará de la expresión regular. Además, también cambiará el teclado añadiendo símbolos como @ o . y eliminando el espacio.

Funcionará en Opera 9.5+, Firefox 4+, Internet Explorer 10 y Chrome 5+. Para dar estilos al campo podemos utilizar las pseudoclases :valid y :invalid, tal como haciamos con :required.

input:valid {}
input[type=email]:invalid {}

Para dar estilo a la burbuja podemos hacer lo mismo que en el capítulo anterior (solo disponible en webkit).

::-webkit-validation-bubble {}
::-webkit-validation-bubble-arrow-clipper {}
::-webkit-validation-bubble-arrow {}
::-webkit-validation-bubble-message {}

url

Tal y como esperabamos, este campo se utiliza para introducir direcciones de internet. Puedes utilizar el atributo multiple para introducir más de una URL. Al igual que con type="email", el navegador llevará a cabo una pequeña validación (no olvidarse de hacer una comprobación del lado del servidor tal y como apuntamos en el capítulo anterior).

Los teléfonos adaptarán su teclado a la introducción de direcciones, añadiendo simbolos como por ejemplo /, . o terminaciones (.com, .net, etcétera).

<input type="url" name="url" required>

tel

Debido a que la sintáxis de los números de teléfono varia mucho entre países, este campo no hace ningún tipo de comprobación especial. La principal ventaja que obtendremos es que el teclado de los teléfonos pasará a ser numérico, lo que nos hará mucho más rápida la introducción de los datos.

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

number

Como podréis intuir, se utiliza para valores numéricos. Funcionará en todos los navegadores modernos, los cuales mostrarán un pequeño campo con dos flechas para cambiar el número.

Mediante los atributos min, max y step podremos definir en número mínimo, máximo y el salto entre números utilizando las flechas, respectivamente. El teclado cambiará a númerico al igual que con tel. Podéis verlo más claro con el siguiente ejemplo:

<input type="number" min="4" max="14" step="2" value="6">
<input type="number" min="5" max="50" step="0.5" value="9">

range

Es similar a number, pero más específico. ¿Por qué? Porque cuando usas range el valor específico no es lo importante. Esto permite a los navegadores ofrecer una vista más simple del campo. Podéis verlo con un ejemplo.

<input type="range" min="-100" max="100" step="1" value="0">

color

Permite a un usuario elegir un color mediante una pequeña paleta de colores, más o menos como se hace en PhotoShop. Lamentablemente solo está disponible en la versiones más recientes de los navegadores.

<input type="color" name="color">

Fechas y horas

Muchas veces habréis visto por internet campos en los que al hacer click nos salta una ventana con un pequeño calendario del que podemos elegir una fecha. Normalmente se hace con JavaScript, habiendo muchos plugins para frameworks como jQuery, Dojo… HTML5 también a implementado esta opción, con más simpleza en su uso pero menos retrocompatibilidad con navegadores.

<input type="date" min="2013-01-01" max="2014-01-01">

Como podéis apreciar, su uso es increíblemente simple, pudiendo incluso agregar fechas límite con los atributos min y max.

Dependiendo de nuestras necesidades podrémos centrarnos el diferentes tipos de contenido.

date

Se centrará en la fecha. El ejemplo anterior es un campo de este tipo.

month

Se centrará en el mes de nuestra selección. Puede usarse, por ejemplo, en la fecha de expiración de una tarjeta de crédito.

<input type="month" name="expiry" required>

week

Lo importante aquí será la semana. Podemos usarlo para elegir una semana de vacaciones.

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

time

Escojeremos una hora.

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

datetime y datetime-local

Estos dos campos son una combinación de fecha y hora. La diferencia entre ellos es que el segundo utilizará la fecha local como base.

Conclusión

Y aquí concluye este repaso rápido por los nuevos campos introducidos en HTML5. Hay algo información omitida ya que es un repaso general y básico, por lo que si queréis saber más es recomendable que investiguéis por vuestra cuenta.

No dudéis en comentar si os ha gustado y pedir algún tutorial que deseéis ver.

Nota: intentaré hacer estos dos tutoriales más completos con imágenes los próximos días para que no os haga falta abrir la página con un navegador diferente cada vez que queráis ver los ejemplos.