Introduction

This is a simple article for beginners for developing with HTML 5 that helps to understand how to set a color picker in a web application using HTML 5 tools. We know that HTML is the client-side scripting language that helps display the data in a browser. We know that HTML is an acronym for "HyperText Markup Language" used to display data in a browser. HTML 5 is the advanced version of HTML. HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. HTML 5 is the advanced version of HTML that is also used to develop a 3D or multimedia application.
Step 1: First open an HTML editor such as Visual Studio.
p.gif
Step 2: Add a Folder on Desktop.
p5.gif
Step 3: Open Visual Studio.
p3.gif
p2.gif
Step 4 : Add an HTML file on your web application.
p4.gif
p6.gif
Step 5: Set a style for the color picker application.
Code
  1. <style>
  2. body, input, textarea {
  3. font-family: "Algerian", arial, Algerian;
  4. }
  5. label {
  6. display: block;
  7. float: LEFT;
  8. clear: LEFT;
  9. text-align: RIGHT;
  10. width: 210px;
  11. margin-RIGHT: 10px;
  12. }
  13. input[type=range] {
  14. margin-RIGHT: 5px;
  15. }
  16. div { padding: 10px; }
  17. fieldset { border: 1px solid #ccc; margin-bottom: 20px; width: 500px; float: LEFT; background-color:#00FF99 ;
  18. color: white; }
  19. #preview { display: block; float: LEFT; height: 300px; width: 300px; background: #00FFFF(180, 0%, 0%); margin: 10px; }
  20. </style>
Step 6: Set the fieldset of a color picker application.
code
  1. <fieldset>
  2. <legend>Set a Color Picker</legend>
  3. <div>
  4. <label for="SET 0">SET 0</label>
  5. <input type="range" name="SET 0" value="0" min="0" max="360" id="SET 0" />Deg
  6. </div>
  7. <div>
  8. <label for="SET 1">SET 1</label>
  9. <input type="range" name="SET 1" value="100" min="0" max="100" id="SET 1" />Per
  10. </div>
  11. <div>
  12. <label for="SET 2">SET 2</label>
  13. <input type="range" name="SET 2" value="50" min="0" max="100" id="SET 2" />Per
  14. </div>
  15. <div>
  16. <label for="SET 3">SET 3</label>
  17. <input type="range" name="SET 3" value="100" min="0" max="100" id="SET 3" />0-10
  18. </div>
  19. <div>
  20. <label for="color"Total:</label>
  21. <output id="HSLA">0</output>
  22. </div>
  23. <div>
  24. <label>Red:</label>
  25. <output id="BGRA">0</output>
  26. </div>
  27. </fieldset>
Step 7 : The complete code of a color picker application is:
Code
  1. <html>
  2. <head>
  3. <title>Manish application</title>
  4. <style>
  5. body, input, textarea {
  6. font-family: "Algerian", arial, Algerian;
  7. }
  8. label {
  9. display: block;
  10. float: LEFT;
  11. clear: LEFT;
  12. text-align: RIGHT;
  13. width: 210px;
  14. margin-RIGHT: 10px;
  15. }
  16. input[type=range] {
  17. margin-RIGHT: 5px;
  18. }
  19. div { padding: 10px; }
  20. fieldset { border: 1px solid #ccc; margin-bottom: 20px; width: 500px; float: LEFT; background-color:#00FF99 ;
  21. color: white; }
  22. #preview { display: block; float: LEFT; height: 300px; width: 300px; background: #00FFFF(180, 0%, 0%); margin: 10px; }
  23. </style>
  24. </head>
  25. <body>
  26. <form>
  27. <fieldset>
  28. <legend>Set a Color Picker</legend>
  29. <div>
  30. <label for="SET 0">SET 0</label>
  31. <input type="range" name="SET 0" value="0" min="0" max="360" id="SET 0" />Deg
  32. </div>
  33. <div>
  34. <label for="SET 1">SET 1</label>
  35. <input type="range" name="SET 1" value="100" min="0" max="100" id="SET 1" />Per
  36. </div>
  37. <div>
  38. <label for="SET 2">SET 2</label>
  39. <input type="range" name="SET 2" value="50" min="0" max="100" id="SET 2" />Per
  40. </div>
  41. <div>
  42. <label for="SET 3">SET 3</label>
  43. <input type="range" name="SET 3" value="100" min="0" max="100" id="SET 3" />0-10
  44. </div>
  45. <div>
  46. <label for="color"Total:</label>
  47. <output id="HSLA">0</output>
  48. </div>
  49. <div>
  50. <label>Red:</label>
  51. <output id="BGRA">0</output>
  52. </div>
  53. </fieldset>
  54. </form>
  55. <div id="preview"></div>
  56. <script>
  57. var HSLA = document.getElementById('HSLA'),
  58. preview = document.getElementById('preview'),
  59. BGRA = document.getElementById('BGRA'),
  60. form = document.getElementsByTagName('form')[0];
  61. form.onforminput = function () {
  62. var man = this.length, values = [], value = 0;
  63. while (man--, value = this[man].value) {
  64. if (this[man].type == 'range') {
  65. switch (this[man].name) {
  66. case 'SET 3': values.push(value / 100); break;
  67. case 'SET 0': values.push(value); break;
  68. default: values.push(value + '%');
  69. }
  70. }
  71. }
  72. preview.style.backgroundColor = HSLA.value = 'HSLA(' + values.reverse().join(', ') + ')';
  73. BGRA.value = getComputedStyle(preview, null).backgroundColor;
  74. };
  75. form.onforminput();
  76. </script>
  77. </body>
  78. </html>
Step 8 : Run the application in the browser.
Output
3.gif
1.gif
2.gif
Resource