HTML5 incorpora novedades muy interesantes para la creación de formularios.
- Aumento de los tipos de controles (se añade un control para introducir una fecha o un correo electrónico)
- Nuevas características que se pueden configurar (se puede definir un patrón de entrada o un placeholder) el problema es que no todos los navegadores las aceptan por ahora.
Formularios en HTML5
Nuevos controles y funcionalidades para Formularios en HTML5
- url.
- tel.
- email.
- number.
- color.
- search.
- range.
- datetime.
- datetime-local.
- date.
- month.
- week.
- time.
Ahora con HTML5 se puede prescindir de JavaScript para realizar algunas validaciones de formulario del lado del cliente. Se dispone de controles avanzados nativos que facilitan mucho el trabajo del desarrollador, porque no se tiene que preocupar por problemas de compatibilidad entre distintos navegadores.
Además esto supone un ahorro de tiempo y de ancho de banda, ya que,
- Permite que el formulario NO sea enviado si no es válido
- Permite informar al usuario de que alguno de los valores introducidos no cumple los requisitos definidos.
De este modo, para los usuarios los formularios tienen un comportamiento más intuitivo porque se pueden introducir "pistas" de los que se debe introducir en cada campo de entrada del formulario. Por ejemplo se pueden introducir calendarios para que el usuario establezca una fecha o seleccionar un color desde una paleta de colores.
Nuevos atributos para la etiqueta TYPE del elemento <input>
url
Se usa en los campos que deban incluir una dirección web. El valor del campo “url” es automáticamente validado cuando el formulario es enviado.
<input type="url" name="url">
Si no se introduce correctamente una url, el sistema informa al usuario de que la url introducida no
tiene un formato correcto.
tel
Se usa para definir campos en los que hay que introducir números de teléfono. No impone un patrón o sintaxis determinado porque los formatos de teléfono varían de un país a otro. Para validarlo con un formato numérico determinado hay que usar pattern. Si el formato del número de teléfono introducido no se ajusta al formato, el sistema enviará aviso al usuario del error.
En el caso de los móviles, permite introducir un autocompletado o un acceso directo a la agenda del teléfono para seleccionar un número.
<input type="tel" name="telf" pattern="(+[0-9]{2}) [0-9]{9}"/>
email
Se usa para definir campos en los que haya que introducir una dirección de correo electrónico.
<input type="email" name="email" />
Igual que antes, si no es correcto el valor introducido por el usuario, el sistema enviará aviso del error.
number
Se usa para definir campos en los que haya que introducir un valor numérico. Puede contener atributos que realicen restricciones sobre el número, por ejemplo estableciendo un valor mínimo o máximo o un valor por defecto con value.
<input type="number" name="cantidad" min="1" max="5" value="2"/>
color
Se usa para definir campos en los que el usuario pueda seleccionar un color desde un paleta de colores. Si no se define un color previo toma por defecto el negro.
<input type="color" name="favcolor" value="#123456">
search
Se usa para definir campos de búsqueda en formato de texto, adquiriendo un aspecto gráfico más adecuado a su función. Al introducir texto en este campo, el navegador muestra una cruz a la derecha que permite al usuario borrar todo lo escrito hasta el momento.
<input type="search" name="buscador" />
range
Se usa para definir campos que deban incuir valores numéricos que estén dentro de un rango específico que definimos con los atributos min y max. También se puede usar el atributo value para darle un valor por defecto o el atributo step que define los rangos entre los que puede variar el valor (entre 1 y 10) por ejemplo.
<input type="range" name="puntos" min="1" max=10" />
datetime
Permite al usuario definir la hora completa así como el día y el mes, año y zona horaria.
<input type="datetime" name="fechahora" />
datatime-local
Igual que en el caso anterior pero no se incluye la zona horaria.
<input type="datatime-local" name="fechahora_usuario" />
date
Permite al usuario seleccionar una fecha concreta por mes, día y año
<input type="date" name="fecha" />
month
Permite al usuario seleccionar un mes de un año específico.
<input type="month" name="mes" />
week
Permite al usuario seleccionar una semana de un año específico.
<input type="week" name="semana" />
time
Permite al usuario seleccionar la hora en formato de horas y minutos.
<input type="time" name="hora" />
En los navegadores que no los soporten, estos type se comportarán como tipo text.
Para consultar compatibilidades, podemos acceder a las siguientes páginas,
Tipos de input dependiendo del disposito móvil
Dispositivos con pantalla táctil
- tel_Cuando estamos en un campo de este tipo, se mostrará en pantalla un teclado numérico.
- email_Cuando estamos en este tipo de campos, se mostrará en pantalla un teclado de texto (donde aparece la tecla de @ en el caso de iPhone).
- url_Igual que para email y en el caso de iPhone el teclado mostrará la tecla / y .com
Nuevos atributos de contenido de HTML5 para <input>
- Autocomplete
- Autofocus
- Min
- Max
- Step
- Pattern
- Placeholder
- Required
Estos nuevos atributos se emplean en los controlos de los formularios.
autocomplete
Se puede usar a parte de con el elemento <input>, también con el elemento <form>.
Nos permite especificar si un formulario completo o un campo de éste debe tener la opción de autocompletado activada o no. Cuando el autocompletado esté activado (es decir, cuando su valor sea “on”), el navegador completará automáticamente el campo con valores que el usuario haya introducido en ese campo en ocasiones anteriores. Si se desactiva (asignando el valor “off”) lo que se consigue es prevenir que un campo se autocomplete automáticamente, ya que en muchos casos este autocompletado puede causar problemas, incluso de seguridad.
Es posible tener el autocompletado a “on” en un formulario, y a “off” en uno o más campos dentro del mismo formulario (por ejemplo en el campo de contraseña), y viceversa.
Este atributo funciona con el elemento <form> y con los siguientes tipos de <input> : text, search, url, tel, email, datepickers, password, range, y color.
<form autocomplet="on">
<input type="email" name="email" autocomplete="off">
autofocus
Permite especificar en qué campo de entrada queremos que se coloque automáticamente el foco cuando se carga la página. Es un atributo de tipo booleano por lo que no se debe definir más de un elemento con este atributo en la misma página.
Este atributo puede suponer una ventaja en muchos casos, sobre todo a usuarios de teléfonos móviles, ya que permite al usuario comenzar a escribir de inmediato sin tener que hacer click en el campo, pero por otro lado, supone una desventaja para aquellos usuarios que utilizan la barra espaciadora para moverse hacia abajo por la página, ya que esto no sucederá si el foco está colocado automáticamente en un campo
Ya que el forzar la colocación del foco puede provocar problemas de accesibilidad y de usabilidad, en caso de usarse, se debe estar seguro de que el campo que lo contenga sea el campo que prácticamente la totalidad de los usuarios vayan a usar en primer lugar.
Por ejemplo, en la página principal de Google, lo más lógico es colocarlo en el campo de búsqueda, ya que en otro caso, estaríamos provocando problemas de usabilidad.
<input type="text" name="nombre" autofocus />
min / max
Sirven para delimitar un rango de valores numéricos, permitiendo especificar el valor máximo y mínimo para un campo de entrada. El campo no permitirá al usuario introducir un valor por encima del máximo ni por debajo del mínimo.
<input type="number" name="cantidad" min="2" max="14" > (entre 2 y 14)
Estos atributos funcionan con los tipos de <input>: number, range, date, datetime, datetimelocal, month, time y week.
Con date por ejemplo se puede establecer un mínimo o máximo
<input type="date" name="fecha" min="AAAA-MM-DD" max="AAAA-MM-DD">
step
Especifica los intervalos numéricos válidos para un elemento <input>. Este atributo puede ser usado junto con los atributos “max” y “min” para crear un rango cerrado de valores válidos de un campo.
En este ejemplo, donde “step” vale 2, y tenemos definido un valor por defecto (2), un máximo (14) y un mínimo (2), los valores válidos para el campo son 2, 4, 6, 8, 10, 12 y 14.
El atributo “step” funciona con los tipos de <input>: number, range, date, datetime
<input type="number" name="puntos" min="2" max="14" step="2" value="2" />
pattern
Permite validar un elemento <input> en base a una expresión regular (RegEx). Las expresiones regulares son modelos o patrones que describen las combinaciones de caracteres que se pueden introducir en el campo de texto (las que se tomarían como correctas).
Se puede usar el atributo global “title” para ayudar al usuario a comprender lo que debe escribir en el campo.
En el ejemplo podemos ver en primer lugar, el efecto de usar el atributo “title” mostrando un tooltip de ayuda, y a continuación, podemos ver cómo un campo que tiene una expresión regular definida avisa al usuario cuando el texto introducido no cumple dicha expresión regular.
El atributo “pattern” funciona con los tipos de <input>: text, search, url, tel, email, y password.
<input type="text" name="prefijo_pais" pattern=[A-Za-z]{3} title="Código de 3 letras" />
placeholder
Permite que se muestre una pista o ejemplo de lo que el usuario debe introducir en el campo de entrada, ya sea mediante un valor representativo o mediante una descripción corta del formato esperado en el campo. Esta pista se muestra en el campo mientras está vacío, y desaparece, bien cuando el campo recibe el foco (en Firefox por ejemplo) bien cuando se comienza a rellenar el campo (para el caso de Google Chrome).
El atributo “placeholder” funciona con los tipos de <input>: text, search, url, tel, email, y password.
<input type="text" name="nombre" placeholder="Juan García" />
required
Es un atributo booleano que, cuando está presente, especifica que el input que lo contiene debe ser rellenado por el usuario antes de enviar el formulario. Es el clásico campo obligatorio, que suele marcarse con un asterisco o con color rojo.
El atributo “required” funciona con los tipos de input: text, search, url, tel, email, date pickers,
password, number, checkbox, radio, y file.
<input type="text" name="nombre" required />
Modernizr y Polyfills
Modernizr es una librería Javascript que nos permite conocer la compatibilidad del navegador del usuario con las nuevas características de HTML5 y CSS3. Si se presenta alguna incompatibilidad, lo detecta y permite tomar medidas para solventarlo.
Estas medidas se basan en los Polyfills que son librerías de Javascript que permiten cubrir las necesidades de HTML5 y CSS3 que los navegadores no soportan.
Cambian el HTML5 por otras teconologías soportadas por el navegador del usuario (por ej. Javascript).
