KOMPOOS.NL

color picker - html5

home » manuals » html5 » color-picker.html

sitemap


voorbeeld van een html5 color picker

uitleg over de html5 colorpicker

In alle moderne browsers kan je de kleur wijzigen met deze procedure. In sommige browsers moet je de kleurwaarde (f00 of ff0000 of #f00 of 'red' -- als voorbeeld voor een rode kleur...) in het input-veld invoeren. In een enkele browser moet je de kleur invullen en even een "klik" geven op het "kleur is nu" veld. Maar de perfecte browsers laten zien waar html5 voor bedoeld is. Een dropdown mogelijkheid om een kleur te kiezen, en wat nog belangrijker is: een vervolg-menu om een willekeurige mengkleur te kiezen. De laatste versies van Opera doen het uitstekend. En nu maar wachten tot alle browsers html5 volledig ondersteunen.

html code voor de colorpicker


<form name="colorpicker_">  
        <div>
                <label for="colorpicker"><small>Kies achtergrond kleur<br /></small></label>
                <input id="colorpicker" name="colorpicker" type="color" onchange="color_picker(colorpicker.value);">  
        </div>
        <div>
                <label for="geselecteerde_kleur"><small><br />De achtergrondkleur is nu<br /></small></label>
                <input id="geselecteerde_kleur" name="geselecteerde_kleur" value="default" type="text">  
        </div>
</form>  

javascript voor de color-picker


<script>  
function color_picker(kleur) {
    document.bgColor = kleur;
    document.colorpicker_.geselecteerde_kleur.value = kleur;
}
</script>
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.