This repository has been archived by the owner on Jan 25, 2019. It is now read-only.
/
input.color.html
295 lines (279 loc) · 21.8 KB
/
input.color.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
<!doctype html>
<html id="input.color">
<head>
<meta charset=utf-8>
<link rel="stylesheet" href="http://www.w3.org/StyleSheets/TR/W3C-WD" type="text/css">
<title> input type=color – color-well control (NEW) - HTML5</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="prev" href="input.tel.html" title="input type=tel">
<link rel="next" href="ins.html" title="ins">
<link rel="section" href="Overview.html">
<link rel="contents" href="Overview.html#toc">
<link rel="index" href="index-of-terms.html">
</head>
<body class="chunk" onload="initDfn()">
<div id="jump-indexes" class="no-number no-toc"><div id="jumpIndexA-button" role="button" aria-haspopup="true" tabindex="0">jump</div></div>
<h2 class="chunkpagetitle"><a href="Overview.html#toc">HTML: The Markup Language (an HTML language reference)</a></h2>
<div class="nav">
<span class="nav-prev"><a href="input.tel.html">« input type=tel</a></span>
<span class="nav-next"><a href="ins.html">ins »</a></span>
</div>
<div class="no-number elementpage section">
<h2 class="element-head">
<span class="spec-link"><a title="Read about the input element in the HTML5 spec" href="http://dev.w3.org/html5/spec/states-of-the-type-attribute.html#color-state-(type=color)">ⓘ</a></span> <span class="element">input</span> <span class="elem-qualifier"> <span class="attribute-name">type</span>=<span class="equals-value">color</span></span> – <span class="shortdesc">color-well control</span> <span class="new-feature" title="This markup feature is newly added in HTML5.">NEW</span> <a class="hash" href="#input.color">#</a> <a class="toc-bak" href="Overview.html#input.color-toc">T</a>
</h2>
<div id="input.color-longdesc" class="longdesc">
<p>The
<span class="element">input</span>
element
with a <span class="attribute">type</span> attribute whose
value is "<code>color</code>" represents
a color-well control, for setting the element’s value to a
string representing a simple color.</p>
</div>
<div class="no-number no-toc" id="input.color-content-model">
<h2 class="element-subhead">Permitted contents <a class="hash" href="#input.color-content-model">#</a>
</h2>
<div class="content-models">
<div id="input.color-mdls">
<p class="elem-mdl"><span>empty (<span><a href="syntax.html#void-element" id="void-element_xref69">void element</a></span>)</span></p>
</div>
</div>
</div>
<div class="no-number no-toc" id="input.color-attributes">
<h2 class="element-subhead">Permitted attributes <a class="hash" href="#input.color-attributes">#</a>
</h2>
<div class="attr-content-models">
<p><span class="pattern" id="input.color.attrs"><a class="ref" href="global-attributes.html">global attributes</a>
<span class="postfix intermixed">&</span> <a class="#common-form.attrs.name" title="input.color.attrs.name" href="input.color.html#input.color.attrs.name">name</a>
<span class="postfix intermixed">&</span> <a class="#common-form.attrs.disabled" title="input.color.attrs.disabled" href="input.color.html#input.color.attrs.disabled">disabled</a>
<span class="postfix intermixed">&</span> <a class="#common-form.attrs.form" title="input.color.attrs.form" href="input.color.html#input.color.attrs.form">form</a>
<span class="postfix intermixed">&</span> <a class="ref" href="input.color.html#input.color.attrs.type" title="input.color.attrs.type">type</a><span class="postfix required" title="REQUIRED">★</span>
<span class="postfix intermixed">&</span> <a class="#input.attrs.autocomplete" title="input.color.attrs.autocomplete" href="input.color.html#input.color.attrs.autocomplete">autocomplete</a>
<span class="postfix intermixed">&</span> <a class="#shared-form.attrs.autofocus" title="input.color.attrs.autofocus" href="input.color.html#input.color.attrs.autofocus">autofocus</a>
<span class="postfix intermixed">&</span> <a class="#input.attrs.list" title="input.color.attrs.list" href="input.color.html#input.color.attrs.list">list</a>
<span class="postfix intermixed">&</span> <a class="ref" href="input.color.html#input.color.attrs.value" title="input.color.attrs.value">value</a> </span></p>
</div>
<dl class="attr-defs">
<dt>
<a class="spec-link" title="Read about this attribute in the HTML5 spec" href="http://dev.w3.org/html5/spec/global-attributes.html#global-attributes">ⓘ</a>
<a class="attribute-name" title="global-attributes" href="global-attributes.html">global attributes</a>
</dt>
<dd>Any attributes permitted globally.</dd>
<dt id="input.color.attrs.name" title="input.color.attrs.name">
<a class="spec-link" title="Read about this attribute in the HTML5 spec" href="http://dev.w3.org/html5/spec/attributes-common-to-form-controls.html#attr-fe-name">ⓘ</a>
<span class="attribute-name">name</span> = <span class="attr-values"><a href="datatypes.html#data-string" id="data-string_xref50">string</a></span>
<a class="hash" href="input.color.html#input.color.attrs.name">#</a>
</dt>
<dd>The name part of the name/value pair associated with this
element for the purposes of form submission.</dd>
<dt id="input.color.attrs.disabled" title="input.color.attrs.disabled">
<a class="spec-link" title="Read about this attribute in the HTML5 spec" href="http://dev.w3.org/html5/spec/attributes-common-to-form-controls.html#attr-fe-disabled">ⓘ</a>
<span class="attribute-name">disabled</span> = <span class="attr-values">
"disabled"
<span class="postfix or">or</span> "" <span class="attr-qualifier">(empty string)</span> <span class="postfix or">or</span> <a href="syntax.html#syntax-attr-empty" id="syntax-attr-empty_xref104">empty</a>
</span>
<a class="hash" href="input.color.html#input.color.attrs.disabled">#</a>
</dt>
<dd>Specifies that the element represents a disabled
control.</dd>
<dt id="input.color.attrs.form" title="input.color.attrs.form">
<a class="spec-link" title="Read about this attribute in the HTML5 spec" href="http://dev.w3.org/html5/spec/association-of-controls-and-forms.html#attr-fae-form">ⓘ</a>
<span class="attribute-name">form</span> = <span class="attr-values">
<a href="datatypes.html#common.data.idref" id="common.data.idref_xref40">ID reference</a>
</span> <span class="new-feature" title="This markup feature is newly added in HTML5.">NEW</span>
<a class="hash" href="input.color.html#input.color.attrs.form">#</a>
</dt>
<dd>The value of the
<span class="attribute">id</span>
attribute on the
<a href="form.html#form">form</a>
with which to associate the element.</dd>
<dt id="input.color.attrs.type" title="input.color.attrs.type">
<span class="attribute-name">type</span> = <span class="attr-values"> "color" </span>
<a class="hash" href="input.color.html#input.color.attrs.type">#</a>
</dt>
<dd>Specifies that its
<span class="element">input</span>
element is
a color-well control, for setting the element’s value to a
string representing a simple color.</dd>
<dt id="input.color.attrs.autocomplete" title="input.color.attrs.autocomplete">
<a class="spec-link" title="Read about this attribute in the HTML5 spec" href="http://dev.w3.org/html5/spec/common-input-element-attributes.html#attr-input-autocomplete">ⓘ</a>
<span class="attribute-name">autocomplete</span> = <span class="attr-values">
"on" <span class="postfix or">or</span> "off"
</span> <span class="new-feature" title="This markup feature is newly added in HTML5.">NEW</span>
<a class="hash" href="input.color.html#input.color.attrs.autocomplete">#</a>
</dt>
<dd>Specifies whether the element represents an input
control for which a UA is meant to store the value entered
by the user (so that the UA can prefill the form
later).</dd>
<dt id="input.color.attrs.autofocus" title="input.color.attrs.autofocus">
<a class="spec-link" title="Read about this attribute in the HTML5 spec" href="http://dev.w3.org/html5/spec/attributes-common-to-form-controls.html#attr-fe-autofocus">ⓘ</a>
<span class="attribute-name">autofocus</span> = <span class="attr-values">
"autofocus"
<span class="postfix or">or</span> "" <span class="attr-qualifier">(empty string)</span> <span class="postfix or">or</span> <a href="syntax.html#syntax-attr-empty" id="syntax-attr-empty_xref105">empty</a>
</span> <span class="new-feature" title="This markup feature is newly added in HTML5.">NEW</span>
<a class="hash" href="input.color.html#input.color.attrs.autofocus">#</a>
</dt>
<dd>Specifies that the element represents a control to which
a UA is meant to give focus as soon as the document is
loaded.</dd>
<dt id="input.color.attrs.list" title="input.color.attrs.list">
<a class="spec-link" title="Read about this attribute in the HTML5 spec" href="http://dev.w3.org/html5/spec/common-input-element-attributes.html#attr-input-list">ⓘ</a>
<span class="attribute-name">list</span> = <span class="attr-values">
<a href="datatypes.html#common.data.idref" id="common.data.idref_xref41">ID reference</a>
</span> <span class="new-feature" title="This markup feature is newly added in HTML5.">NEW</span>
<a class="hash" href="input.color.html#input.color.attrs.list">#</a>
</dt>
<dd>The value of the
<span class="attribute">id</span>
attribute on the
<a href="datalist.html#datalist" class="element">datalist</a>
with which to associate the element.</dd>
<dt id="input.color.attrs.value" title="input.color.attrs.value">
<span class="attribute-name">value</span> = <span class="attr-values">
<a href="datatypes.html#form.data.color" id="form.data.color_xref1">simple color</a>
</span>
<a class="hash" href="input.color.html#input.color.attrs.value">#</a>
</dt>
<dd>An string representing a color.</dd>
<dd>
<div class="datatype-desc">A string exactly seven
characters long, consisting of the following parts, in
exactly the following order:
<ol>
<li>A
"<code title="U+0023 NUMBER SIGN">#</code>"
character.</li>
<li>Six characters in the range
<code title="U+0030 DIGIT ZERO–U+0039 DIGIT NINE">0–9</code>,
<code title="U+0061 LATIN SMALL LETTER A–U+0066 LATIN SMALL LETTER F">a–f</code>,
and
<code title="U+0041 LATIN CAPITAL LETTER A–U+0046 LATIN CAPITAL LETTER F">A–F</code>.</li>
</ol>
</div>
<div class="note">
<p>Color keywords (for example, strings such as “red” or “green”)
are not allowed.</p>
</div>
</dd>
</dl>
</div>
<div class="no-number no-toc" id="input.color-constraints">
<h2 class="element-subhead">Additional constraints and admonitions <a class="hash" href="#input.color-constraints">#</a>
</h2>
<ul class="assertions">
<li><span>
The interactive element <span class="element">input</span> must not
appear as a descendant of the <span class="element">a</span> element.
</span></li>
<li><span>
The interactive element <span class="element">input</span> must not
appear as a descendant of the <span class="element">button</span> element.
</span></li>
<li><span>
Any <span class="element">input</span> element descendant of a <span class="element">label</span> element
with a <span class="attribute">for</span> attribute must have an
ID value that matches that <span class="attribute">for</span> attribute.
</span></li>
<li><span>
The <span class="attribute">list</span> attribute of the <span class="element">input</span> element must refer to a <span class="element">datalist</span> element.
</span></li>
<li><span>
Element <span class="element">input</span> with attribute <span class="attribute">type</span>
whose value is “button” must have non-empty attribute <span class="attribute">value</span>.
</span></li>
<li><span>
The <span class="attribute">usemap</span> attribute on the <span class="element">input</span> element is obsolete.
Use the <span class="element">img</span> element instead of the <span class="element">input</span> element for image maps.
</span></li>
<li><span>
The <span class="attribute">align</span> attribute on the <span class="element">input</span> element is obsolete.
<a href="http://wiki.whatwg.org/wiki/Presentational_elements_and_attributes">Use CSS instead</a>.
</span></li>
</ul>
</div>
<div class="no-number no-toc tag-omission" id="input.color-tags">
<h2 class="element-subhead">Tag omission <a class="hash" href="#input.color-tags">#</a>
</h2>
<p>The
<span class="element">input</span>
element is a <a href="syntax.html#void-element" id="void-element_xref70">void element</a>.
An <span class="element">input</span>
element must have a
<span title="syntax-start-tag">start tag</span>
but must not have an
<span title="syntax-end-tag">end tag</span>.</p>
</div>
<div class="no-number no-toc" id="input.color-context">
<h2 class="element-subhead">Permitted parent elements <a class="hash" href="#input.color-context">#</a>
</h2>
<p class="permitted-parents"><span class="context-mdl"><span>any element that can contain
<a href="common-models.html#common.elem.phrasing">phrasing elements</a></span></span></p>
</div>
<div class="no-number no-toc interface" id="input.color-interface">
<h2 class="element-subhead">DOM interface <a class="hash" href="#input.color-interface">#</a>
</h2>
<pre class="idl">interface <b>HTMLInputElement</b> : <a href="http://dev.w3.org/html5/spec/elements.html#htmlelement" title="">HTMLElement</a> {
attribute DOMString <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-accept" title="dom-input-accept">accept</a>;
attribute DOMString <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-alt" title="dom-input-alt">alt</a>;
attribute DOMString <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-autocomplete" title="dom-input-autocomplete">autocomplete</a>;
attribute boolean <a href="http://dev.w3.org/html5/spec/attributes-common-to-form-controls.html#dom-fe-autofocus" title="dom-fe-autofocus">autofocus</a>;
attribute boolean <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-defaultchecked" title="dom-input-defaultChecked">defaultChecked</a>;
attribute boolean <a href="http://dev.w3.org/html5/spec/common-input-element-apis.html#dom-input-checked" title="dom-input-checked">checked</a>;
attribute DOMString <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-dirname" title="dom-input-dirName">dirName</a>;
attribute boolean <a href="http://dev.w3.org/html5/spec/attributes-common-to-form-controls.html#dom-fe-disabled" title="dom-fe-disabled">disabled</a>;
readonly attribute <a href="http://dev.w3.org/html5/spec/the-form-element.html#htmlformelement" title="">HTMLFormElement</a>? <a href="http://dev.w3.org/html5/spec/association-of-controls-and-forms.html#dom-fae-form" title="dom-fae-form">form</a>;
readonly attribute <a href="http://dev.w3.org/html5/spec/infrastructure.html#filelist" title="">FileList</a>? <a href="http://dev.w3.org/html5/spec/common-input-element-apis.html#dom-input-files" title="dom-input-files">files</a>;
attribute DOMString <a href="http://dev.w3.org/html5/spec/form-submission.html#dom-fs-formaction" title="dom-fs-formAction">formAction</a>;
attribute DOMString <a href="http://dev.w3.org/html5/spec/form-submission.html#dom-fs-formenctype" title="dom-fs-formEnctype">formEnctype</a>;
attribute DOMString <a href="http://dev.w3.org/html5/spec/form-submission.html#dom-fs-formmethod" title="dom-fs-formMethod">formMethod</a>;
attribute boolean <a href="http://dev.w3.org/html5/spec/form-submission.html#dom-fs-formnovalidate" title="dom-fs-formNoValidate">formNoValidate</a>;
attribute DOMString <a href="http://dev.w3.org/html5/spec/form-submission.html#dom-fs-formtarget" title="dom-fs-formTarget">formTarget</a>;
attribute unsigned long <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-height" title="dom-input-height">height</a>;
attribute boolean <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-indeterminate" title="dom-input-indeterminate">indeterminate</a>;
readonly attribute <a href="http://dev.w3.org/html5/spec/elements.html#htmlelement" title="">HTMLElement</a>? <a href="http://dev.w3.org/html5/spec/common-input-element-apis.html#dom-input-list" title="dom-input-list">list</a>;
attribute DOMString <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-max" title="dom-input-max">max</a>;
attribute long <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-maxlength" title="dom-input-maxLength">maxLength</a>;
attribute DOMString <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-min" title="dom-input-min">min</a>;
attribute boolean <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-multiple" title="dom-input-multiple">multiple</a>;
attribute DOMString <a href="http://dev.w3.org/html5/spec/attributes-common-to-form-controls.html#dom-fe-name" title="dom-fe-name">name</a>;
attribute DOMString <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-pattern" title="dom-input-pattern">pattern</a>;
attribute DOMString <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-placeholder" title="dom-input-placeholder">placeholder</a>;
attribute boolean <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-readonly" title="dom-input-readOnly">readOnly</a>;
attribute boolean <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-required" title="dom-input-required">required</a>;
attribute unsigned long <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-size" title="dom-input-size">size</a>;
attribute DOMString <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-src" title="dom-input-src">src</a>;
attribute DOMString <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-step" title="dom-input-step">step</a>;
attribute DOMString <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-type" title="dom-input-type">type</a>;
attribute DOMString <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-defaultvalue" title="dom-input-defaultValue">defaultValue</a>;
attribute DOMString <a href="http://dev.w3.org/html5/spec/common-input-element-apis.html#dom-input-value" title="dom-input-value">value</a>;
attribute <span>Date</span>? <a href="http://dev.w3.org/html5/spec/common-input-element-apis.html#dom-input-valueasdate" title="dom-input-valueAsDate">valueAsDate</a>;
attribute unrestricted double <a href="http://dev.w3.org/html5/spec/common-input-element-apis.html#dom-input-valueasnumber" title="dom-input-valueAsNumber">valueAsNumber</a>;
attribute unsigned long <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-width" title="dom-input-width">width</a>;
void <a href="http://dev.w3.org/html5/spec/common-input-element-apis.html#dom-input-stepup" title="dom-input-stepUp">stepUp</a>(optional long n);
void <a href="http://dev.w3.org/html5/spec/common-input-element-apis.html#dom-input-stepdown" title="dom-input-stepDown">stepDown</a>(optional long n);
readonly attribute boolean <a href="http://dev.w3.org/html5/spec/constraints.html#dom-cva-willvalidate" title="dom-cva-willValidate">willValidate</a>;
readonly attribute <a href="http://dev.w3.org/html5/spec/constraints.html#validitystate" title="">ValidityState</a> <a href="http://dev.w3.org/html5/spec/constraints.html#dom-cva-validity" title="dom-cva-validity">validity</a>;
readonly attribute DOMString <a href="http://dev.w3.org/html5/spec/constraints.html#dom-cva-validationmessage" title="dom-cva-validationMessage">validationMessage</a>;
boolean <a href="http://dev.w3.org/html5/spec/constraints.html#dom-cva-checkvalidity" title="dom-cva-checkValidity">checkValidity</a>();
void <a href="http://dev.w3.org/html5/spec/constraints.html#dom-cva-setcustomvalidity" title="dom-cva-setCustomValidity">setCustomValidity</a>(DOMString error);
readonly attribute <a href="http://dev.w3.org/html5/spec/infrastructure.html#nodelist" title="">NodeList</a> <a href="http://dev.w3.org/html5/spec/the-label-element.html#dom-lfe-labels" title="dom-lfe-labels">labels</a>;
void <span title="dom-textarea/input-select">select</span>();
attribute unsigned long <span title="dom-textarea/input-selectionStart">selectionStart</span>;
attribute unsigned long <span title="dom-textarea/input-selectionEnd">selectionEnd</span>;
attribute DOMString <span title="dom-textarea/input-selectionDirection">selectionDirection</span>;
void <span title="dom-textarea/input-setSelectionRange">setSelectionRange</span>(unsigned long start, unsigned long end, optional DOMString direction);
};</pre>
</div>
</div>
<hr class="footerbreak">
<div class="nav">
<span class="nav-prev"><a href="input.tel.html">« input type=tel</a></span>
<span class="nav-next"><a href="ins.html">ins »</a></span>
</div>
<script src="js/jump-indexes.js" type="text/javascript"></script><script src="js/dfn.js" type="text/javascript"></script>
</body>
</html>