Before I begin Opera 11 is the only browser as of this writing that supports the <input type="color" />. In-order to add a color picker using HTML5 you will need to add the <input> element with the type attribute with the value of color which will add a color well and allow the user to choose a color which will then return the color's hexadecimal value.
When the <input type="color" />
is used, there is always a color picked, and there is no way to set the
value to the empty string. In Mac and Windows systems, the <input type="color" /> integrates with the users systems native color picker. For Linux users, it drops down a basic color picker for the user.
Here is how to code the <input type="color" /> in HTML5 below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome To HTML5</title>
</head>
<body>
<form>
<input type="color">
</form>
</body>
</html>
Here is how to code the <input type="color" /> in XHTML below.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta charset="UTF-8" />
<title>Welcome To XHTML5</title>
</head>
<body>
<form>
<input type="color" />
</form>
</body>
</html>
If the value
attribute, is specified, you must have a value that is a valid simple
color. A valid simple color if it is exactly seven characters long,
starts with the U+0023 NUMBER SIGN character also known as the hash sign
(#), which is required, followed by the six digit hexadecimal number
that represents the red, green, and blue (RGB) components of the color.
What I mean is that the first two digits in the hexadecimal number will
represent the color red, and the next two digits will represent the
color green, and the last two digits will represent the color blue. The
six digit hexadecimal number are all in the range from U+0030 DIGIT ZERO
(0) to U+0039 DIGIT NINE (9), U+0041 LATIN CAPITAL LETTER A to U+0046
LATIN CAPITAL LETTER F, U+0061 LATIN SMALL LETTER A to U+0066 LATIN
SMALL LETTER F, in other words in the range from 0-9 and a-f (lowercase)
or A-F (uppercase).
If the value
attribute, has a valid simple color value and it doesn't use any
characters in the range from U+0041 LATIN CAPITAL LETTER A to U+0046
LATIN CAPITAL LETTER F which are the capital letters A-F, its considered
a valid lowercase simple color.
The value attribute sets the default color for the color well which by default is #000000 (black).
Here is how to code the <input> elements value attribute below with the hexadecimal color value of #ffa500 which is the color orange.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome To HTML5</title>
</head>
<body>
<form>
<input type="color" value="#ffa500">
</form>
</body>
</html>
And here is how to code the value attribute for XHTML5.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta charset="UTF-8" />
<title>Welcome To XHTML5</title>
</head>
<body>
<form>
<input type="color" value="#ffa500" />
</form>
</body>
</html>
0 comments:
Post a Comment