Using HTML5 Widgets

The left panel of the demonstration shows some of the many types of input available in HTML5. The right panel shows a button and different ways of using the select tag. We made use of the Google Style Guide, but (for ease of reading) kept most JavaScript event-handling code within the HTML5 tags rather than calling separate functions.

Advice

While we believe in the value of "learning by doing", in this area from our experience it is better described as "learning the hard way". We offer the following points of guidance:

It can be difficult to trace errors (which may be in your CSS, HTML5 tags or JavaScript). It is very quick to test that the appearance is as intended, so test frequently.
Remember to press F12 and look at the JavaScript console to see if it reports any errors. It may provide you with a line number in the source but you still may need to examine that line very closely to spot your error.
Composite names are linked with a hyphen in CSS (e.g. border-radius) but are camel case in JavaScript (e.g. borderRadius).
Values within HTML5 tags must be between double quotes (e.g. color = "green") but in CSS values in quotes are ignored and the syntax is color: green;. For learners with a Pascal background, strings look better in HTML tags and numbers look better in CSS!
In most cases white space is beneficial for readability but you must not put a space between a value and its units (e.g. type 10px not 10 px).
In a JavaScript if-then-else statement within HTML tags, put braces round even a single statement to be executed when the condition is true (e.g. our checkbox onclick event-handler in the code below the demo).
You are likely to appreciate all the more what Smart Pascal does for you after some coding from scratch in HTML5/CSS/JavaScript!

Demonstration

If this demo does not work in your current browser, try another such as Chrome. If you see no display at school, the security system might have blocked it. You can try instead this direct link to the program running on its own page.

The Code

<!DOCTYPE html>
<style>

/* both panels */
div {
  border-radius: 10px; 
  float: left;
  padding: 10px;   
  width: 180px;  
}

/* left panel */
#main {
  background-color: yellow;
  margin-right: 10px;
}

#btn1 {
  border: 1px solid black;
  border-radius: 4px;
}

#resize {
  width: 100px;
}

#txt1 {
  width: 150px;   
}

textarea {
  border: 2px solid #aaa;
  border-radius: 8px;
  height: 60px;
  margin-bottom: 10px;
  margin-top: 20px;
  overflow: hidden;
  resize: none;
  width: 170px;
}

/* right panel */ 
#right {
  background-color: green;
}

#s2, 
#s3 {
  overflow: hidden;
}

#pnl, 
.bright {
  color: yellow;
}

  
</style>
<script>

  function getRadioVal(name) {
    // adapted from http://www.dyn-web.com/tutorials/forms/radio/get-selected.php
    var val;
    // get list of radio buttons with specified name
    var radios = document.getElementsByName(name);
    
    // loop through list of radio buttons
    for (var i = 0; i < radios.length; i++) {
      if ( radios[i].checked ) { // radio checked?
        val = radios[i].value; // if so, hold its value in val
        break; // and break out of for loop
      }
    }
    return val; // return value of checked radio or undefined if none checked
  }
  
  function multipleSelection() {
    var lb = document.getElementById('s3');
    var panel2 = document.getElementById('right');
    var title = document.getElementById('title2');
    if (lb.options[0].selected) 
      panel2.style.borderRadius = '0' 
    else 
      panel2.style.borderRadius = '10px';
    if (lb.options[1].selected) 
      panel2.style.border = '3px solid black'
    else 
      panel2.style.border = 'none';
    if (lb.options[2].selected) 
      title.style.visibility = 'hidden'
    else 
      title.style.visibility = 'visible';  
  }

</script>

<div id = "main">
  <h4>Input Types Text, Button, Number, Range, Checkbox and Radio</h4>
  <p>Please enter your forename.</p>
  <input id = "txt1" type = "text" />
  <p id = "greeting">&nbsp;</p>
  <input type = "button" id = "btn1"  title = "input with type button" 
         onclick = "document.getElementById('greeting').innerHTML = 'Hello, ' +   document.getElementById('txt1').value + '!'"
         value = "Show greeting" />
  <p>Use spinner to change width of its box</p>  
  <input id = "resize" title = "Change the width" type = "number" min = "60" max = "180" step = "20" value = "100" 
         onchange = "if ((value >= 60) && (value <= 180)) document.getElementById('resize').style.width = value + 'px'" />
  <textarea readonly 
            id = "ta">Slider controls border radius of this read-only textarea. Checking the box enables vertical resizing.</textarea>
  <input type = "range" min = "0" max = "20" value = "8" 
         onclick = "document.getElementById('rng').value = value; document.getElementById('ta').style.borderRadius = value + 'px'" />
  <output id = "rng">8</output><br>
  <input type = "checkbox" 
         onclick = "if (checked) {getElementById('ta').style.resize = 'vertical'} 
                    else {getElementById('ta').style.resize = 'none'}">Resizeable textarea</input><br>
  <input type = "radio" name = "colours" value = "yellow" checked = "true" 
         onclick = "document.getElementById('main').style.backgroundColor = getRadioVal('colours')">Yellow panel</input><br>
  <input type = "radio" name = "colours" value = "green" 
         onclick = "document.getElementById('main').style.backgroundColor = getRadioVal('colours')">Green panel</input><br>
  <input type = "radio" name = "colours" value = "blue" 
         onclick = "document.getElementById('main').style.backgroundColor = getRadioVal('colours')">Blue panel</input>
</div>

<div id = "right">
  <h4 class = "bright" id = "title2">Button, ComboBox and ListBoxes (with Tooltips)</h4>  
  <p class = "bright">Click button to see JavaScript alert</p>  
  <button id = "btn2" color = "green" title = "Button with type button" 
          onclick = "alert('This is a button not an input with type button.')">More Info</button><br><br>   
  <p class = "bright">Change panel colour</p>  
  <select title = "Colour of form" 
          onchange = "document.getElementById('right').style.backgroundColor = value">
    <option value = "green">Green</option>
    <option value = "red">Red</option>
    <option value = "orange">Orange</option>  
  </select><br><br>    
  <p class = "bright">Change button text colour</p>  
  <select id = "s2" size = "3" title= "Colour of button text" 
          onchange = "document.getElementById('btn2').style.color = value">
    <option value = "green">Green</option>
    <option value = "red">Red</option>
    <option value = "orange">Orange</option>  
  </select>  
  <p class = "bright">Multiple selections with ctrl+click</p>
  <select multiple id = "s3" size = "3" title = "Miscellaneous" onchange = "multipleSelection()">
    <option>Traditional corners</option>
    <option>Black border</option>
    <option>Invisible title</option>  
  </select>  
</div>

Displaying Widgets using JavaScript

Append the following JavaScript code to the HTML file above and delete all of the HTML code for the div with id = "main", including the opening and closing div tags. (The process of copying, deleting and appending worked for us using Notepad++ but with Notepad the JavaScript-coded panel failed to appear). The JavaScript code provides the same functionality for the left panel, at least when viewed in the Chrome browser. See also our lightweight Smart Pascal application for displaying the same panel.

<script>

  var h4 = document.createElement("h4");
  h4.innerHTML = "Input Types Text, Button, Number, Range, Checkbox and Radio";
 
  var para1 = document.createElement("p");
  para1.innerHTML = "Please enter your forename.";

  var para2 = document.createElement("p");
  para2.innerHTML = "&nbsp;";
  para2.id = "greeting";

  var para3 = document.createElement("p");
  para3.innerHTML = "Use spinner to change width of its box";

  var input = document.createElement("input");
  input.id = "txt1";

  var btn = document.createElement("input");
  btn.type = "button";
  btn.id = "btn1";
  btn.title = "input with type button";
  btn.setAttribute("onclick", "document.getElementById('greeting').innerHTML = 'Hello, '" +
                   "document.getElementById('txt1').value + '!'");
  btn.setAttribute("value", "Show greeting"); 

  var spinner = document.createElement("input");
  spinner.type = "number";
  spinner.id = "resize";
  spinner.title = "Change the width";
  spinner.value = 100;
  spinner.min = 60;
  spinner.max = 180;
  spinner.step = 20;
  spinner.setAttribute("onchange", "if ((value >= 60) && (value <= 180))" +
                       "document.getElementById('resize').style.width = value + 'px'");

  var text_area = document.createElement("textarea");
  text_area.innerHTML = "Slider controls border radius of this read-only textarea." + 
                        "Checking the box enables vertical resizing."
  text_area.id = "ta";
  text_area.setAttribute("readonly", "true");
 
  var range = document.createElement("input");
  range.setAttribute("type", "range");
  range.setAttribute("min", "0");
  range.setAttribute("max", "20");
  range.setAttribute("value", "8");
  range.setAttribute("onclick", "document.getElementById('rng').value = value;" + 
                                "document.getElementById('ta').style.borderRadius = value + 'px'");

  var output = document.createElement("output");
  output.id = "rng";
  output.value = 8;

  var checkbox = document.createElement("input");
  checkbox.type = "checkbox";
  checkbox.id = "cb";
  var lbl1 = document.createElement("label");
  lbl1.innerHTML = "Resizeable textarea";
  checkbox.setAttribute("onclick", "if (checked) {getElementById('ta').style.resize = 'vertical'}" +
                        "else {getElementById('ta').style.resize = 'none'}");
  // Radio buttons       
  var rb1 = document.createElement("input");
  rb1.type = "radio";
  rb1.id = "rbtn1";
  rb1.name = "colours"; 
  rb1.value = "yellow";  
  rb1.checked = true;
  rb1.setAttribute("onclick", "document.getElementById('main').style.backgroundColor = 'yellow'");
  var lbl2 = document.createElement("label");
  lbl2.innerHTML = "Yellow panel";

  var rb2 = document.createElement("input");
  rb2.type = "radio";
  rb2.id = "rbtn2";
  rb2.name = "colours"; 
  rb2.value = "green"; 
  rb2.checked = false;
  rb2.setAttribute("onclick", "document.getElementById('main').style.backgroundColor = 'green'");
  var lbl3 = document.createElement("label");
  lbl3.innerHTML = "Green panel";

  var rb3 = document.createElement("input");
  rb3.type = "radio";
  rb3.id = "rbtn3";
  rb3.name = "colours"; 
  rb3.value = "blue"; 
  rb3.checked = false;
  rb3.setAttribute("onclick", "document.getElementById('main').style.backgroundColor = 'blue'");
  var lbl4 = document.createElement("label");
  lbl4.innerHTML = "Blue panel";
  // Create and populate the left panel
  var left_panel = document.createElement("div");
  left_panel.id = "main";
  left_panel.appendChild(h4);
  left_panel.appendChild(para1);
  left_panel.appendChild(input);
  left_panel.appendChild(para2);
  left_panel.appendChild(btn);
  left_panel.appendChild(para3);
  left_panel.appendChild(spinner);
  left_panel.appendChild(text_area);
  left_panel.appendChild(range);
  left_panel.appendChild(output);

  var br1 = document.createElement("br");
  left_panel.appendChild(br1);
  left_panel.appendChild(checkbox);
  left_panel.appendChild(lbl1);

  var br2 = document.createElement("br");
  left_panel.appendChild(br2);
  left_panel.appendChild(rb1);
  left_panel.appendChild(lbl2);

  var br3 = document.createElement("br");
  left_panel.appendChild(br3);
  left_panel.appendChild(rb2);
  left_panel.appendChild(lbl3);

  var br4 = document.createElement("br");
  left_panel.appendChild(br4);
  left_panel.appendChild(rb3);
  left_panel.appendChild(lbl4);

  var right = document.getElementById("right");
  document.body.insertBefore(left_panel, right);

</script>