Depende. Si deseas que las cajas de texto carguen con valores predeterminados, pues, solo tienes que establecerlos:
Pero si buscas que estas estén vacías, el usuario ingrese datos y luego de actualizar la página estos no se borren, podrías guardarlos en
cookies o
localmente y cuando la página cargue, verificas si hay datos almacenados y si es que los hay, los asignas a las respectivas cajas de texto.
Código Javascript
:
Ver original//Cuando haya cargado el documento, se ejecutarán las siguientes instrucciones
document.addEventListener("DOMContentLoaded", function(){
//Si hay datos almacenados, los recupero, si no, creo un JSON para almacenarlos
localStorage.datos = localStorage.datos || JSON.stringify({inputs: [], valores: []});
//Recupero los datos almacenados o al JSON, cualquiera de ambos como un objeto
var almacen = JSON.parse(localStorage.datos),
elem; //Esta variable será utilizada para almacenar al <input> afectado
//Cuando se escriban o borren datos en el documento, se ejecutará una función
document.addEventListener("input", function(event){
elem = event.target; //Tomo al <input> en el que se acaba de escribir/borrar datos
//Almaceno el nombre de la caja de texto y el valor que este posee
almacen.inputs.push(elem.name);
almacen.valores.push(elem.value);
localStorage.datos = JSON.stringify(almacen);
}, false);
//Cuando el documento haya cargado, verificamos si hay datos almacenados
if (almacen.valores.length){
//Si hay valores almacenados, procedemos a asignarlos a sus respectivos <input>
for (var i = 0, l = almacen.valores.length; i < l; i++){
document.querySelector("[name=" + almacen.inputs[i] + "]").value = almacen.valores[i];
}
}
//Cuando se envíen los datos del formulario, borramos los datos almacenados
document.querySelector("#id del form").addEventListener("submit", function(){
localStorage.datos = JSON.stringify({inputs: [], valores: []});
}, false);
}, false);
Saludos