HTML - ¿Como cargar informacion preguardada en un cuadro de texto?

<form id="frm1" action="javascript:">

  Cuadro de texto 1: <input type="text" size="48" value="<h1>HOLA SOY EL TITULO</h1>"><br>

  Cuadro de texto 2: <input type="text" size="48" value="<h1>Y YO EL SUBTITULO</h1>"><br><br>

  Cuadro de texto 3: <input type="text" size="48" value="<h3>La dirección de la foto.</h3>"><br>

  Cuadro de texto 4: <input type="text" size="48" value="<h3>Aquí el párrafo con toda la información.</h3>"><br><br>

</form>

  <input type="button" value="Test" onclick="test()">

<p id="demo"></p>

<script>

function test() {

  var x = document.getElementById("frm1");

  var text = "";

  var i;

  for (i = 0; i < x.length ;i++) {

  text += x.elements[i].value + "";

  }

  document.getElementById("demo").innerHTML = text;

}

</script>

<form id="frm1" action="javascript:">

  Cuadro de texto 1: <textarea  type="text" size="500" value=""></textarea>

<input type="text" size="48" value="VALORPrecargado" style="visibility:hidden"><br>

  Cuadro de texto 2: <input type="text" size="48" value=""><br><br>

  Cuadro de texto 3: <input type="text" size="48" value=""><br>

  Cuadro de texto 4: <input type="text" size="48" value=""><br><br>

</form>

  <input type="button" value="Test" onclick="test()">

<textarea id="demo"></textarea>

<script>

function test() {

  var x = document.getElementById("frm1");

  var text = "";

  var i;

  for (i = 0; i < x.length ;i++) {

  text += x.elements[i].value + "";

  }

  document.getElementById("demo").innerHTML = text;

}

</script>

<script>

function test() {

  var x = document.getElementById("frm1");

  var text = "";

  var i;

  for (i = 0; i < x.length ;i++) {

  text += x.elements[i].value + "\n";

  }

  document.getElementById("demo").innerHTML = text;

}

</script>