Predefined color list in form

by Simon Hi

HTML

<label>Color : <input id="colorPicker" name="mycolor" value="#ff0000" type="color" list="myPredefinedColors">
    <datalist id="myPredefinedColors">
      <option value="#ff0000" />
      <option value="#00ff00" />
      <option value="#0000ff" />
      <option value="#ffff00" />
      <option value="#ff00ff" />
      <option value="#00ffff" />
    </datalist>
  </label>
  <button onclick="showColorValue()" type="button">OK</button>
  <div id="show">
  </div>

JavaScript

function showColorValue() {
  let v = document.getElementById('colorPicker').value;
  document.getElementById('show').innerHTML = "The selected color is "+v;
}