Hosting Solutions
mobile_logo Table of Contents

Color Picker Input Tutorial

Learn to program the color picker interface into your HTML web documents and tie it to JavaScript for processing. <!DOCTYPE html> <html> <head> <script> function processData(c1,c2) { var cv1 = document.getElementById(c1).value; var cv2 = document.getElementById(c2).value; alert(cv1+"\n"+cv2); // Use Ajax-PHP to send the values to server storage // Ajax-PHP Video Tutorial - } </script> </head> <body> <h2>HTML5 Color Picker + Javascript Tutorial</h2> Choose Color 1: <input type="color" name="color1" id="color1"><br /><br /> Choose Color 2: <input type="color" name="color2" id="color2"><br /><br /> <input type="button" onClick="processData('color1','color2')" value="Submit" /> </body> </html> open in code editor

HTML Videos

Form Components

Color Picker Input TutorialSlider Tutorial Javascript Function ProgrammingNumeric Stepper Form Input TutorialDate Time Form Input Type TutorialProgress Bar Progressive Javascript Events ProcessingAutocomplete Text Input Datalist List Attribute TutorialAutofocus Form Input Attribute TutorialPlaceholder Form Field Input Attribute TutorialRequired Form Field Input Attribute Tutorialfieldset and legend Elements Form Area Containers TutorialCustom HTML Form Input Programming Tutorial