form element output (Interactive Example)

<!DOCTYPE html>
<title>My Example</title>


<script>
document.addEventListener("DOMContentLoaded", function(event) {
  var e = document.getElementById("myForm");
  e.addEventListener("input", function() {
    this.thisRate.value = this.rate.value;
    this.amount.value = (this.principal.valueAsNumber * this.rate.valueAsNumber) / 100;
  }, false);
});
</script>


<form id="myForm">
  <fieldset>  
  <legend>Interest Calculator</legend>
  <label for="principal">Amount to invest: $</label>
  <input type="number" min="0" id="principal" name="principal" value="1000">
  <p>
    <label for="rate">Interest Rate: </label>
    <input type="range" min="0" max="20" id="rate" name="rate" value="0">
    <output id="thisRate" name="thisRate" for="range">0</output><span>%</span>
  </p>
  <p>
    Interest Received: 
    <strong>$<output name="amount" for="principal rate">0</output></strong>
  </p>
  </fieldset>
</form>

<hr>
<p>The <code>output</code> element represents the result of a calculation or user action. This could include displaying the results of a calculation performed by a script, or it could display the output of a user's interaction with a form element.</p>
<p>More info: <a href="/html/tags/html_output_tag.cfm"><code>output</code></a>.</p>