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
  • email
  • 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?


  1. Usando un Backend
  2. 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:

  1. Tener el  formulario con id's
  2. Crear un estrutura de datos en js para la db
  3. Consultarle al señor DOM los datos de los "inputs" al momento del envio
  4. Crear las funciones en js
  5. 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 






Made with Slides.com