HTML5 FORMS
.....Y una breve introducción a javascript con localStorage
#DHR4/JUN/13/2015
WEB FORMS
Recolectan información del usuario
- Cuando te registras a un sitio web
- Búsqueda o filtros
- Foros de discusión
- Hasta un "like" de facebook
LA ETIQUETA <form>
Contenedor de una colección de etiquetas <input>
Atributos requeridos:
- action = Url al script del servidor (php, perl, python,nodejs)
- method = GET o POST, metodos estadares para comunicación con el servidor.
LA ETIQUETA <input>
Atributos requeridos:
- type
- name
- value
... Otros opcionales:
- placeholder, autofocus
- required tittle, pattern
- min, max
Un formulario de HTML envía al servidor una colección de:
Pares llave-valor
~ name: value
y el responsable de que eso pase es...
El señor botón
<input type="submit" value="Enviar">
Tipos de formularios
- checkbox
- radio
- select/ option
- text, textfield
- number,range
- date, time
- color
- search
- file
- password
- BETA: audio
Nuevos en HTML5, nada más que:
trece(13)!!
Hagamos ejercicios de calentamiento !!
Un formulario para registrar un perrito:
- Nombre
- Genero
- Fecha nacimiento
- Color
- Raza
- Un codigo que debe ser validado
Ahora.. ¿ Como o donde guardamos los datos de un formulario?
- Usando un Backend
- Guardando en localStorage (otros usos)
Probemos localStorage
LocalStorage
- Solo guarda strings
- Debemos usar Javascript
Si, Javascript
Aprendamos Javascript practicando.
y ahorremos tiempo usando JQuery..
Debemos guardar el formulario en localStorage.
Pasos logicos:
- Tener el formulario con id's
- Crear un estrutura de datos en js para la db
- Consultarle al señor DOM los datos de los "inputs" al momento del envio
- Crear las funciones en js
- Utilizar JQuery si no quieres hardcodear vainillajs
Más especifico
- Esperar por el submit del formulario, pasar un callback
- Tomar los "value" de los inputs, ej $("#id-input").val()
- Pasar los pares llave-valor a un objeto JSON
- Guardarlos en un array de Javascript
- Tomar ese array y hacerle un "stringify"
- -------------------
- Para consultar en el local storage, hacer reversa
- Tomar la instancia del local storage y hacer "parse"
- Iterar en los objetos y hacer "append" para mostrarlos
HTLM5 forms & localStorage
By Julio César
