User Interface Reference

<input type="button" value="Start" onclick="myFunction();">
<script>
  function myFunction() { /* code to execute when button is pressed */ }
</script>

<input type="checkbox" id="myCheck" onchange="myFunction();">Label
<script>
  var myCheck = document.getElementById("myCheck");
  if (myCheck.checked) { /* code to execute if box is checked */ }
</script>

<input type="radio" id="radio1" name="groupName">Label1
<input type="radio" id="radio2" name="groupName">Label2
<script>
  var radio1 = document.getElementById("radio1");
  if (radio1.checked) { /* code to execute if first button selected */ } 
    else { /* code to execute if second button selected */ }
</script>

<select id="myMenu" onchange="myFunction()">
  <option>Option 0</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>
<script>
  var myMenu = document.getElementById("myMenu");
  var myIndex = myMenu.selectedIndex;  // 0, 1, 2, etc.
</script>

<input type="range" id="mySlider" min="0" max="10" step="0.1" value="5"
    onchange="myFunction()" oninput="myFunction()">
Value = <span id="myReadout">5.0</span>
<script>
  var mySlider = document.getElementById("mySlider");
  var myReadout = document.getElementById("myReadout");
  var myVariable = Number(mySlider.value);
  function myFunction() {
    myReadout.innerHTML = Number(mySlider.value).toFixed(1);
  }
</script>

<textarea id="dataArea" rows="10" style="width:500px;">
  Content
</textarea>
<script>
  var dataArea = document.getElementById("dataArea");
  dataArea.innerHTML = "New content";
</script>

myCanvas.addEventListener("mousedown", function1, false);
myCanvas.addEventListener("touchstart", function2, false);
document.addEventListener("mousemove", function3, false);
    // and similarly for mouseup, touchmove, touchend
function function1(e) {                     // e is an event object
  e.preventDefault();                       // cancel browser response
  canvasX = e.pageX - myCanvas.offsetLeft;  // location relative to
  canvasY = e.pageY - myCanvas.offsetTop;   // canvas upper-left corner
}   // use e.targetTouches[0].pageX (and Y) for touch events
// (Sometimes you also need to subtract offsets of enclosing divs, etc.)