En el anterior tutorial inicabamos con las novedades de HTML5 en el manejo de datos de formularios. Continuaremos expicando algunas otras funcionalidades que nos permitiran ahorrar mucho tiempo de desarrollo.
El atributo required:
El atributo required o requerido en un elemento se establecerá en un <input>, y automáticamente hace que el usuario se vea obligado a llenar el campo para continuar, es decir el navegador no permitirá que se envié la forma sin que el input con este atributo este vacío.
<form action="demo.php"> Nombre: <input type="text" name="name" required="required" /> <input type="submit" /> </form>
El atributo requerido trabaja con los tipos de entrada: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.
Se puede combinar con jquery.validate.js para poder configurar mensajes de respuesta y eventos a ejecutar. Podemos ver un ejemplo en el tutorial Validar formulario con Jquery
Uno de los mayores problemas de HTML5 es que no todos lo elementos son compatible con los navegadores actuales por ello deberemos chequear cuales son compatible y cuales no antes de hacer nuestro desarrollo y no vernos sorprendidos de que lo que queremos utilizar luego no funcione.
Desde el siguiente enlace podemos chequear la compatibilidad de HTML5 con navegadores, podremos ver un completo gráfico para determinar si lo que queremos utilizar funciona o no. Según el elemento o etiqueta a utilizar
Almacenamiento de datos o webstorage con HTML5
Con HTML5 las páginas web pueden almacenar datos localmente en el navegador del usuario.
Antes, esto se hacía con las cookies. Sin embargo, de almacenamiento Web es más seguro y más rápido. Los datos no se incluye con cada petición del servidor, pero es usado solamente cuando se le pide. También es posible almacenar grandes cantidades de datos, sin afectar el rendimiento de la página web.
Una de las grandes ventajas de este metodo de almacenamiento, es que permite tener datos seguros y entre otras cosas nos da grandes posibilidades de trabajo con páginas y aplicaciones trabajando offline, sin acceso a Internet.
Los datos se almacenan en pares nombre > valor, y una página web puede acceder a los datos almacenados sólo por sí mismo.
A diferencia de las cookies, el límite de almacenamiento es mucho mayor, funciona como una base de datos local.
Se pueden tener 2 tipos de almacenamiento
- Almacenamiento Local: Los datos almacenados no tienen fecha de caducidad, permanecerán indefinidamente disponibles (se utiliza el objeto localStorage)
- Almacenamiento en Sesion: Los datos almacenados sólo estarán disponibles durante la sesión de navegación, cuando se cierre, desaparecerán (se utiliza el objeto sessionStorage)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es">
<title>Almacenamiento de datos</title>
<script>
function guardardatos() {
var local = document.getElementById("local").value;
var sesion = document.getElementById("sesion").value;
localStorage.lData = local;
sessionStorage.sData = session;
}
function leerdatos() {
var local = localStorage.lData;
var sesion = sessionStorage.sData;
if (local) {
document.getElementById("local").value = local;
}
if (sesion) {
document.getElementById("sesion").value = sesion;
}
}
</script>
</head>
<body>
<fieldset>
<legend>Web Storage</legend>
Se guardará en local:<input id="local"></input><br>
Se guardará en una sesion :<input id="sesion"></input>
</fieldset>
<div>
<button onclick="guardardatos()">Guardar</button>
<button onclick="leerdatos()">Recuperar</button>
</div>
</body>
</html>
