commands.html
61.1 KB
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
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en-US-x-Hixie" ><head><title>4.11.5 Commands — HTML5 </title><style type="text/css">
pre { margin-left: 2em; white-space: pre-wrap; }
h2 { margin: 3em 0 1em 0; }
h3 { margin: 2.5em 0 1em 0; }
h4 { margin: 2.5em 0 0.75em 0; }
h5, h6 { margin: 2.5em 0 1em; }
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
p { margin: 1em 0; }
hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
dl, dd { margin-top: 0; margin-bottom: 0; }
dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
dt + dt { margin-top: 0; }
dd dt { margin-top: 0.25em; margin-bottom: 0; }
dd p { margin-top: 0; }
dd dl + p { margin-top: 1em; }
dd table + p { margin-top: 1em; }
p + * > li, dd li { margin: 1em 0; }
dt, dfn { font-weight: bold; font-style: normal; }
dt dfn { font-style: italic; }
pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
pre em { font-weight: bolder; font-style: normal; }
@media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
table { border-collapse: collapse; border-style: hidden hidden none hidden; }
table thead, table tbody { border-bottom: solid; }
table tbody th:first-child { border-left: solid; }
table tbody th { text-align: left; }
table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
.bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
.toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
img.extra { float: right; }
pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
pre.css:first-line { color: #AAAA50; }
dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #DDFFDD; }
hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
dl.domintro dd p { margin: 0.5em 0; }
dl.switch { padding-left: 2em; }
dl.switch > dt { text-indent: -1.5em; }
dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
dl.triple { padding: 0 0 0 1em; }
dl.triple dt, dl.triple dd { margin: 0; display: inline }
dl.triple dt:after { content: ':'; }
dl.triple dd:after { content: '\A'; white-space: pre; }
.diff-old { text-decoration: line-through; color: silver; background: transparent; }
.diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
a .diff-new { border-bottom: 1px blue solid; }
h2 { page-break-before: always; }
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
h1 + h2, hr + h2.no-toc { page-break-before: auto; }
p > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]),
li > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]), { border-bottom: solid #9999CC; }
div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
div.head p { margin: 0; }
div.head h1 { margin: 0; }
div.head .logo { float: right; margin: 0 1em; }
div.head .logo img { border: none } /* remove border from top image */
div.head dl { margin: 1em 0; }
div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }
body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
body > .toc > li > * { margin-bottom: 0.5em; }
body > .toc > li > * > li > * { margin-bottom: 0.25em; }
.toc, .toc li { list-style: none; }
.brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
.brief li { margin: 0; padding: 0; }
.brief li p { margin: 0; padding: 0; }
.category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
.category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
.category-list li { display: inline; }
.category-list li:not(:last-child)::after { content: ', '; }
.category-list li > span, .category-list li > a { text-transform: lowercase; }
.category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */
.XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
.XXX > :first-child { margin-top: 0; }
p .XXX { line-height: 3em; }
.annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
.annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
.annotation :link, .annotation :visited { color: inherit; }
.annotation :link:hover, .annotation :visited:hover { background: transparent; }
.annotation span { border: none ! important; }
.note { color: green; background: transparent; font-family: sans-serif; }
.warning { color: red; background: transparent; }
.note, .warning { font-weight: bolder; font-style: italic; }
p.note, div.note { padding: 0.5em 2em; }
span.note { padding: 0 2em; }
.note p:first-child, .warning p:first-child { margin-top: 0; }
.note p:last-child, .warning p:last-child { margin-bottom: 0; }
.warning:before { font-style: normal; }
p.note:before { content: 'Note: '; }
p.warning:before { content: '\26A0 Warning! '; }
.bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
.bookkeeping { font-size: 0.8em; margin: 2em 0; }
.bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
.bookkeeping dt { margin: 0.5em 2em 0; }
.bookkeeping dd { margin: 0 3em 0.5em; }
h4 { position: relative; z-index: 3; }
h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
.element {
background: #EEEEFF;
color: black;
margin: 0 0 1em 0.15em;
padding: 0 1em 0.25em 0.75em;
border-left: solid #9999FF 0.25em;
position: relative;
z-index: 1;
}
.element:before {
position: absolute;
z-index: 2;
top: 0;
left: -1.15em;
height: 2em;
width: 0.9em;
background: #EEEEFF;
content: ' ';
border-style: none none solid solid;
border-color: #9999FF;
border-width: 0.25em;
}
.example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
td > .example:only-child { margin: 0 0 0 0.1em; }
ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
ul.domTree li li { list-style: none; }
ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree span { font-style: italic; font-family: serif; }
ul.domTree .t1 code { color: purple; font-weight: bold; }
ul.domTree .t2 { font-style: normal; font-family: monospace; }
ul.domTree .t2 .name { color: black; font-weight: bold; }
ul.domTree .t2 .value { color: blue; font-weight: normal; }
ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
ul.domTree .t7 code, .domTree .t8 code { color: green; }
ul.domTree .t10 code { color: teal; }
body.dfnEnabled dfn { cursor: pointer; }
.dfnPanel {
display: inline;
position: absolute;
z-index: 10;
height: auto;
width: auto;
padding: 0.5em 0.75em;
font: small sans-serif, Droid Sans Fallback;
background: #DDDDDD;
color: black;
border: outset 0.2em;
}
.dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; }
.dfnPanel :link, .dfnPanel :visited { color: black; }
.dfnPanel p { font-weight: bolder; }
.dfnPanel * + p { margin-top: 0.25em; }
.dfnPanel li { list-style-position: inside; }
#configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
#configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
#configUI p label { display: block; }
#configUI #updateUI, #configUI .loginUI { text-align: center; }
#configUI input[type=button] { display: block; margin: auto; }
fieldset { margin: 1em; padding: 0.5em 1em; }
fieldset > legend + * { margin-top: 0; }
fieldset > :last-child { margin-bottom: 0; }
fieldset p { margin: 0.5em 0; }
.stability {
position: fixed;
bottom: 0;
left: 0; right: 0;
margin: 0 auto 0 auto !important;
z-index: 1000;
width: 50%;
background: maroon; color: yellow;
-webkit-border-radius: 1em 1em 0 0;
-moz-border-radius: 1em 1em 0 0;
border-radius: 1em 1em 0 0;
-moz-box-shadow: 0 0 1em #500;
-webkit-box-shadow: 0 0 1em #500;
box-shadow: 0 0 1em red;
padding: 0.5em 1em;
text-align: center;
}
.stability strong {
display: block;
}
.stability input {
appearance: none; margin: 0; border: 0; padding: 0.25em 0.5em; background: transparent; color: black;
position: absolute; top: -0.5em; right: 0; font: 1.25em sans-serif; text-align: center;
}
.stability input:hover {
color: white;
text-shadow: 0 0 2px black;
}
.stability input:active {
padding: 0.3em 0.45em 0.2em 0.55em;
}
.stability :link, .stability :visited,
.stability :link:hover, .stability :visited:hover {
background: transparent;
color: white;
}
</style><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation
requirements"><link href="http://www.w3.org/StyleSheets/TR/W3C-WD" rel="stylesheet" type="text/css"><style type="text/css">
.applies thead th > * { display: block; }
.applies thead code { display: block; }
.applies tbody th { whitespace: nowrap; }
.applies td { text-align: center; }
.applies .yes { background: yellow; }
.matrix, .matrix td { border: hidden; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
td.eg { border-width: thin; text-align: center; }
#table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
#table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
#table-example-1 caption { padding-bottom: 0.5em; }
#table-example-1 thead, #table-example-1 tbody { border: none; }
#table-example-1 th, #table-example-1 td { border: solid thin; }
#table-example-1 th { font-weight: normal; }
#table-example-1 td { border-style: none solid; vertical-align: top; }
#table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
#table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
#table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
#table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
#table-example-1 tbody td:first-child::after { content: leader(". "); }
#table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
#table-example-1 tbody td:first-child + td { width: 10em; }
#table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
#table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }
.apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
.apple-table-examples * { font-family: "Times", serif; }
.apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
.apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
.apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
.apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
.apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
.apple-table-examples td { text-align: right; vertical-align: top; }
.apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
.apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
.apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
.apple-table-examples sup { line-height: 0; }
.details-example img { vertical-align: top; }
#base64-table {
white-space: nowrap;
font-size: 0.6em;
column-width: 6em;
column-count: 5;
column-gap: 1em;
-moz-column-width: 6em;
-moz-column-count: 5;
-moz-column-gap: 1em;
-webkit-column-width: 6em;
-webkit-column-count: 5;
-webkit-column-gap: 1em;
}
#base64-table thead { display: none; }
#base64-table * { border: none; }
#base64-table tbody td:first-child:after { content: ':'; }
#base64-table tbody td:last-child { text-align: right; }
#named-character-references-table {
white-space: nowrap;
font-size: 0.6em;
column-width: 30em;
column-gap: 1em;
-moz-column-width: 30em;
-moz-column-gap: 1em;
-webkit-column-width: 30em;
-webkit-column-gap: 1em;
}
#named-character-references-table > table > tbody > tr > td:first-child + td,
#named-character-references-table > table > tbody > tr > td:last-child { text-align: center; }
#named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; }
#named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; }
.glyph.control { color: red; }
@font-face {
font-family: 'Essays1743';
src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf');
}
@font-face {
font-family: 'Essays1743';
font-weight: bold;
src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf');
}
@font-face {
font-family: 'Essays1743';
font-style: italic;
src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf');
}
@font-face {
font-family: 'Essays1743';
font-style: italic;
font-weight: bold;
src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf');
}
</style><style type="text/css">
.domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: black; font-style: italic; border: solid 2px; background: white; padding: 0 0.25em; }
</style><script type="text/javascript">
function getCookie(name) {
var params = location.search.substr(1).split("&");
for (var index = 0; index < params.length; index++) {
if (params[index] == name)
return "1";
var data = params[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
var cookies = document.cookie.split("; ");
for (var index = 0; index < cookies.length; index++) {
var data = cookies[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
return null;
}
</script>
<script src="link-fixup.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet"><link href="interactive-elements.html" title="4.11 Interactive elements" rel="prev">
<link href="spec.html#contents" title="Table of contents" rel="index">
<link href="links.html" title="4.12 Links" rel="next">
</head><body><div class="head" id="head">
<div id="multipage-common">
<p class="stability" id="wip"><strong>This is a work in
progress!</strong> For the latest updates from the HTML WG, possibly
including important bug fixes, please look at the <a href="http://dev.w3.org/html5/spec/Overview.html">editor's draft</a> instead.
There may also be a more
<a href="http://www.w3.org/TR/html5">up-to-date Working Draft</a>
with changes based on resolution of Last Call issues.
<input onclick="closeWarning(this.parentNode)" type="button" value="╳⃝"></p>
<script type="text/javascript">
function closeWarning(element) {
element.parentNode.removeChild(element);
var date = new Date();
date.setDate(date.getDate()+4);
document.cookie = 'hide-obsolescence-warning=1; expires=' + date.toGMTString();
}
if (getCookie('hide-obsolescence-warning') == '1')
setTimeout(function () { document.getElementById('wip').parentNode.removeChild(document.getElementById('wip')); }, 2000);
</script></div>
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
</div><div>
<a href="interactive-elements.html" class="prev">4.11 Interactive elements</a> –
<a href="spec.html#contents">Table of contents</a> –
<a href="links.html" class="next">4.12 Links</a>
<ol class="toc"><li><ol><li><ol><li><a href="commands.html#commands"><span class="secno">4.11.5 </span>Commands</a>
<ol><li><a href="commands.html#using-the-a-element-to-define-a-command"><span class="secno">4.11.5.1 </span>Using the <code>a</code> element to define a command</a></li><li><a href="commands.html#using-the-button-element-to-define-a-command"><span class="secno">4.11.5.2 </span>Using the <code>button</code> element to define a command</a></li><li><a href="commands.html#using-the-input-element-to-define-a-command"><span class="secno">4.11.5.3 </span>Using the <code>input</code> element to define a command</a></li><li><a href="commands.html#using-the-option-element-to-define-a-command"><span class="secno">4.11.5.4 </span>Using the <code>option</code> element to define a command</a></li><li><a href="commands.html#using-the-command-element-to-define-a-command"><span class="secno">4.11.5.5 </span>Using the <code>command</code> element to define
a command</a></li><li><a href="commands.html#using-the-accesskey-attribute-on-a-label-element-to-define-a-command"><span class="secno">4.11.5.6 </span>Using the <code title="attr-accesskey">accesskey</code> attribute on a <code>label</code> element to define a command</a></li><li><a href="commands.html#using-the-accesskey-attribute-on-a-legend-element-to-define-a-command"><span class="secno">4.11.5.7 </span>Using the <code title="attr-accesskey">accesskey</code> attribute on a <code>legend</code> element to define a command</a></li><li><a href="commands.html#using-the-accesskey-attribute-to-define-a-command-on-other-elements"><span class="secno">4.11.5.8 </span>Using the <code title="attr-accesskey">accesskey</code> attribute to define a command on other elements</a></li></ol></li></ol></li></ol></li></ol></div>
<h4 id="commands"><span class="secno">4.11.5 </span>Commands</h4><p>A <dfn id="concept-command" title="concept-command">command</dfn> is the abstraction
behind menu items, buttons, and links.</p><p id="facets">Commands are defined to have the following
<dfn id="concept-facet" title="concept-facet">facets</dfn>:</p><dl><dt><dfn id="command-facet-type" title="command-facet-Type">Type</dfn></dt>
<dd>The kind of command: "command", meaning it is a normal command;
"radio", meaning that triggering the command will, amongst other
things, set the <a href="#command-facet-checkedstate" title="command-facet-CheckedState">Checked
State</a> to true (and probably uncheck some other commands); or
"checkbox", meaning that triggering the command will, amongst other
things, toggle the value of the <a href="#command-facet-checkedstate" title="command-facet-CheckedState">Checked State</a>.</dd>
<dt><dfn id="command-facet-id" title="command-facet-ID">ID</dfn></dt>
<dd>The name of the command, for referring to the command from the
markup or from script. If a command has no ID, it is an
<dfn id="anonymous-command">anonymous command</dfn>.</dd>
<dt><dfn id="command-facet-label" title="command-facet-Label">Label</dfn></dt>
<dd>The name of the command as seen by the user.</dd>
<dt><dfn id="command-facet-hint" title="command-facet-Hint">Hint</dfn></dt>
<dd>A helpful or descriptive string that can be shown to the
user.</dd>
<dt><dfn id="command-facet-icon" title="command-facet-Icon">Icon</dfn></dt>
<dd>An <a href="urls.html#absolute-url">absolute URL</a> identifying a graphical image that
represents the action. A command might not have an Icon.</dd>
<dt><dfn id="command-facet-accesskey" title="command-facet-AccessKey">Access Key</dfn></dt>
<dd>A key combination selected by the user agent that triggers the
command. A command might not have an Access Key.</dd>
<dt><dfn id="command-facet-hiddenstate" title="command-facet-HiddenState">Hidden State</dfn></dt>
<dd>Whether the command is hidden or not (basically, whether it
should be shown in menus).</dd>
<dt><dfn id="command-facet-disabledstate" title="command-facet-DisabledState">Disabled State</dfn></dt>
<dd>Whether the command is relevant and can be triggered or not.</dd>
<dt><dfn id="command-facet-checkedstate" title="command-facet-CheckedState">Checked State</dfn></dt>
<dd>Whether the command is checked or not.</dd>
<dt><dfn id="command-facet-action" title="command-facet-Action">Action</dfn></dt>
<dd>The actual effect that triggering the command will have. This
could be a scripted event handler, a <a href="urls.html#url">URL</a> to which to
<a href="history.html#navigate">navigate</a>, or a form submission.</dd>
</dl><p>These facets are exposed on elements using the <dfn id="command-api">command
API</dfn>:</p><dl class="domintro"><dt><var title="">element</var> . <code title="dom-command-ro-commandType"><a href="#dom-command-ro-commandtype">commandType</a></code></dt>
<dd>
<p>Exposes the <a href="#command-facet-type" title="command-facet-Type">Type</a> facet of the command.</p>
</dd>
<dt><var title="">element</var> . <code title="dom-id"><a href="elements.html#dom-id">id</a></code></dt>
<dd>
<p>Exposes the <a href="#command-facet-id" title="command-facet-ID">ID</a> facet of the command.</p>
</dd>
<dt><var title="">element</var> . <code title="dom-command-ro-label"><a href="#dom-command-ro-label">label</a></code></dt>
<dd>
<p>Exposes the <a href="#command-facet-label" title="command-facet-Label">Label</a> facet of the command.</p>
</dd>
<dt><var title="">element</var> . <code title="dom-title"><a href="elements.html#dom-title">title</a></code></dt>
<dd>
<p>Exposes the <a href="#command-facet-hint" title="command-facet-Hint">Hint</a> facet of the command.</p>
</dd>
<dt><var title="">element</var> . <code title="dom-command-ro-icon"><a href="#dom-command-ro-icon">icon</a></code></dt>
<dd>
<p>Exposes the <a href="#command-facet-icon" title="command-facet-Icon">Icon</a> facet of the command.</p>
</dd>
<dt><var title="">element</var> . <code title="dom-accessKeyLabel"><a href="editing.html#dom-accesskeylabel">accessKeyLabel</a></code></dt>
<dd>
<p>Exposes the <a href="#command-facet-accesskey" title="command-facet-AccessKey">Access Key</a> facet of the command.</p>
</dd>
<dt><var title="">element</var> . <code title="dom-hidden"><a href="editing.html#dom-hidden">hidden</a></code></dt>
<dd>
<p>Exposes the state of the element's <code title="attr-hidden"><a href="editing.html#the-hidden-attribute">hidden</a></code> attribute, which is generally
equivalent to the <a href="#command-facet-hiddenstate" title="command-facet-HiddenState">Hidden
State</a> facet of the command. For <code><a href="forms.html#the-label-element">label</a></code> and
<code><a href="forms.html#the-legend-element">legend</a></code> elements (used in conjunction with the <code title="attr-accesskey"><a href="editing.html#the-accesskey-attribute">accesskey</a></code> attribute), the <a href="#command-facet-hiddenstate" title="command-facet-HiddenState">Hidden State</a> facet is
derived from another element (the one that the <a href="editing.html#assigned-access-key">assigned
access key</a> will trigger), and cannot be directly accessed
from the element.</p>
</dd>
<dt><var title="">element</var> . <code title="dom-command-ro-disabled"><a href="#dom-command-ro-disabled">disabled</a></code></dt>
<dd>
<p>Exposes the <a href="#command-facet-disabledstate" title="command-facet-DisabledState">Disabled State</a> facet of the command.</p>
</dd>
<dt><var title="">element</var> . <code title="dom-command-ro-checked"><a href="#dom-command-ro-checked">checked</a></code></dt>
<dd>
<p>Exposes the <a href="#command-facet-checkedstate" title="command-facet-CheckedState">Checked State</a> facet of the command.</p>
</dd>
<dt><var title="">element</var> . <code title="dom-click"><a href="editing.html#dom-click">click</a></code>()</dt>
<dd>
<p>Triggers the <a href="#command-facet-action" title="command-facet-Action">Action</a> of the command.</p>
</dd>
</dl><div class="impl">
<p>The <dfn id="dom-command-ro-commandtype" title="dom-command-ro-commandType"><code>commandType</code></dfn>
attribute must return a string whose value is either "<code title="">command</code>", "<code title="">radio</code>", or "<code title="">checkbox</code>", depending on whether the <a href="#command-facet-type" title="command-facet-Type">Type</a> of the command defined by the
element is "command", "radio", or "checkbox" respectively. If the
element does not define a command, it must return null.</p>
<p>The <dfn id="dom-command-ro-label" title="dom-command-ro-label"><code>label</code></dfn>
attribute must return the command's <a href="#command-facet-label" title="command-facet-Label">Label</a>, or null if the element
does not define a command or does not specify a <a href="#command-facet-label" title="command-facet-Label">Label</a>. This attribute will be
shadowed by the <code title="">label</code> IDL attribute on
various elements.</p>
<p>The <dfn id="dom-command-ro-icon" title="dom-command-ro-icon"><code>icon</code></dfn>
attribute must return the <a href="urls.html#absolute-url">absolute URL</a> of the command's
<a href="#command-facet-icon" title="command-facet-Icon">Icon</a>. If the element does
not specify an icon, or if the element does not define a command,
then the attribute must return null. This attribute will be shadowed
by the <code title="dom-command-icon"><a href="interactive-elements.html#dom-command-icon">icon</a></code> IDL attribute on
<code><a href="interactive-elements.html#the-command-element">command</a></code> elements.</p>
<p>The <dfn id="dom-command-ro-disabled" title="dom-command-ro-disabled"><code>disabled</code></dfn>
attribute must return true if the command's <a href="#command-facet-disabledstate" title="command-facet-DisabledState">Disabled State</a> is that
the command is disabled, and false if the command is not
disabled. This attribute is not affected by the command's <a href="#command-facet-hiddenstate" title="command-facet-HiddenState">Hidden State</a>. If the
element does not define a command, the attribute must return
false. This attribute will be shadowed by the <code title="">disabled</code> IDL attribute on various elements.</p>
<p>The <dfn id="dom-command-ro-checked" title="dom-command-ro-checked"><code>checked</code></dfn> attribute
must return true if the command's <a href="#command-facet-checkedstate" title="command-facet-CheckedState">Checked State</a> is that the
command is checked, and false if it is that the command is not
checked. If the element does not define a command, the attribute
must return false. This attribute will be shadowed by the <code title="">checked</code> IDL attribute on <code><a href="the-input-element.html#the-input-element">input</a></code> and
<code><a href="interactive-elements.html#the-command-element">command</a></code> elements.</p>
<p class="note">The <a href="#command-facet-id" title="command-facet-ID">ID</a> facet
is exposed by the <code title="dom-id"><a href="elements.html#dom-id">id</a></code> IDL attribute,
the <a href="#command-facet-hint" title="command-facet-Hint">Hint</a> facet is exposed by
the <code title="dom-title"><a href="elements.html#dom-title">title</a></code> IDL attribute, the <a href="#command-facet-accesskey" title="command-facet-AccessKey">AccessKey</a> facet is exposed by
the <code title="dom-accessKeyLabel"><a href="editing.html#dom-accesskeylabel">accessKeyLabel</a></code> IDL
attribute, and the <a href="#command-facet-hiddenstate" title="command-facet-HiddenState">Hidden
State</a> facet is exposed by the <code title="dom-hidden"><a href="editing.html#dom-hidden">hidden</a></code> IDL attribute.</p>
</div><hr><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-commands"><a href="#dom-document-commands">commands</a></code></dt>
<dd>
<p>Returns an <code><a href="common-dom-interfaces.html#htmlcollection">HTMLCollection</a></code> of the elements in the
<code><a href="infrastructure.html#document">Document</a></code> that define commands and have IDs.</p>
</dd>
</dl><div class="impl">
<p>The <dfn id="dom-document-commands" title="dom-document-commands"><code>commands</code></dfn> attribute
of the document's <code><a href="dom.html#htmldocument">HTMLDocument</a></code> interface must return an
<code><a href="common-dom-interfaces.html#htmlcollection">HTMLCollection</a></code> rooted at the <code><a href="infrastructure.html#document">Document</a></code>
node, whose filter matches only elements that <a href="#concept-command" title="concept-command">define commands</a> and have <a href="#command-facet-id" title="command-facet-ID">IDs</a>.</p>
</div><hr><p>User agents may expose the <a href="#concept-command" title="concept-command">commands</a> whose <a href="#command-facet-hiddenstate" title="command-facet-HiddenState">Hidden State</a> facet is false
(visible), e.g. in the user agent's menu bar. User agents are
encouraged to do this especially for commands that have <a href="#command-facet-accesskey" title="command-facet-AccessKey">Access Keys</a>, as a way to
advertise those keys to the user.</p><div class="impl">
<h5 id="using-the-a-element-to-define-a-command"><span class="secno">4.11.5.1 </span><dfn title="a-command">Using the <code>a</code> element to define a command</dfn></h5>
<p>An <code><a href="text-level-semantics.html#the-a-element">a</a></code> element with an <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code> attribute <a href="#concept-command" title="concept-command">defines a command</a>.</p>
<p>The <a href="#command-facet-type" title="command-facet-Type">Type</a> of the command
is "command".</p>
<p>The <a href="#command-facet-id" title="command-facet-ID">ID</a> of the command is
the value of the <code title="attr-id"><a href="elements.html#the-id-attribute">id</a></code> attribute of the
element, if the attribute is present and not empty. Otherwise the
command is an <a href="#anonymous-command">anonymous command</a>.</p>
<p>The <a href="#command-facet-label" title="command-facet-Label">Label</a> of the command
is the string given by the element's <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL
attribute.</p>
<p>The <a href="#command-facet-hint" title="command-facet-Hint">Hint</a> of the command
is the value of the <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute
of the element. If the attribute is not present, the <a href="#command-facet-hint" title="command-facet-Hint">Hint</a> is the empty string.</p>
<p>The <a href="#command-facet-icon" title="command-facet-Icon">Icon</a> of the command
is the <a href="urls.html#absolute-url">absolute URL</a> obtained from <a href="urls.html#resolve-a-url" title="resolve
a url">resolving</a> the value of the <code title="attr-img-src"><a href="embedded-content-1.html#attr-img-src">src</a></code> attribute of the first
<code><a href="embedded-content-1.html#the-img-element">img</a></code> element descendant of the element, relative to that
element, if there is such an element and resolving its attribute is
successful. Otherwise, there is no <a href="#command-facet-icon" title="command-facet-Icon">Icon</a> for the command.</p>
<p>The <a href="#command-facet-accesskey" title="command-facet-AccessKey">AccessKey</a> of the
command is the element's <a href="editing.html#assigned-access-key">assigned access key</a>, if
any.</p>
<p>The <a href="#command-facet-hiddenstate" title="command-facet-HiddenState">Hidden State</a>
of the command is true (hidden) if the element has a <code title="attr-hidden"><a href="editing.html#the-hidden-attribute">hidden</a></code> attribute, and false
otherwise.</p>
<p>The <a href="#command-facet-disabledstate" title="command-facet-DisabledState">Disabled
State</a> facet of the command is always false. (The command is
always enabled.)</p>
<p>The <a href="#command-facet-checkedstate" title="command-facet-CheckedState">Checked State</a>
of the command is always false. (The command is never checked.)</p>
<p>The <a href="#command-facet-action" title="command-facet-Action">Action</a> of the
command is to <a href="webappapis.html#fire-a-click-event" title="fire a click event">fire a <code title="event-click">click</code> event</a> at the element.</p>
<h5 id="using-the-button-element-to-define-a-command"><span class="secno">4.11.5.2 </span><dfn title="button-command">Using the <code>button</code> element to define a command</dfn></h5>
<p>A <code><a href="the-button-element.html#the-button-element">button</a></code> element always <a href="#concept-command" title="concept-command">defines a command</a>.</p>
<p>The <a href="#command-facet-type" title="command-facet-Type">Type</a>, <a href="#command-facet-id" title="command-facet-ID">ID</a>, <a href="#command-facet-label" title="command-facet-Label">Label</a>, <a href="#command-facet-hint" title="command-facet-Hint">Hint</a>, <a href="#command-facet-icon" title="command-facet-Icon">Icon</a>, <a href="#command-facet-accesskey" title="command-facet-AccessKey">Access Key</a>, <a href="#command-facet-hiddenstate" title="command-facet-HiddenState">Hidden State</a>, <a href="#command-facet-checkedstate" title="command-facet-CheckedState">Checked State</a>, and <a href="#command-facet-action" title="command-facet-Action">Action</a> facets of the command are
determined <a href="#using-the-a-element-to-define-a-command" title="a-command">as for <code>a</code>
elements</a> (see the previous section).</p>
<p>The <a href="#command-facet-disabledstate" title="command-facet-DisabledState">Disabled
State</a> of the command mirrors the <a href="association-of-controls-and-forms.html#concept-fe-disabled" title="concept-fe-disabled">disabled</a> state of the button.</p>
<h5 id="using-the-input-element-to-define-a-command"><span class="secno">4.11.5.3 </span><dfn title="input-command">Using the <code>input</code> element to define a command</dfn></h5>
<p>An <code><a href="the-input-element.html#the-input-element">input</a></code> element whose <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in one of the <a href="number-state.html#submit-button-state" title="attr-input-type-submit">Submit Button</a>, <a href="number-state.html#reset-button-state" title="attr-input-type-reset">Reset Button</a>, <a href="number-state.html#image-button-state" title="attr-input-type-image">Image Button</a>, <a href="number-state.html#button-state" title="attr-input-type-button">Button</a>, <a href="number-state.html#radio-button-state" title="attr-input-type-radio">Radio Button</a>, or <a href="number-state.html#checkbox-state" title="attr-input-type-checkbox">Checkbox</a> states <a href="#concept-command" title="concept-command">defines a command</a>.</p>
<p>The <a href="#command-facet-type" title="command-facet-Type">Type</a> of the command
is "radio" if the <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code>
attribute is in the <code title="attr-input-type-radio"><a href="number-state.html#radio-button-state">Radio
Button</a></code> state, "checkbox" if the <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <code title="attr-input-type-checkbox"><a href="number-state.html#checkbox-state">Checkbox</a></code> state, and
"command" otherwise.</p>
<p>The <a href="#command-facet-id" title="command-facet-ID">ID</a> of the command is
the value of the <code title="attr-id"><a href="elements.html#the-id-attribute">id</a></code> attribute of the
element, if the attribute is present and not empty. Otherwise the
command is an <a href="#anonymous-command">anonymous command</a>.</p>
<p>The <a href="#command-facet-label" title="command-facet-Label">Label</a> of the command
depends on the Type of the command:</p>
<p>If the <a href="#command-facet-type" title="command-facet-Type">Type</a> is "command",
then it is the string given by the <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute, if any, and a
UA-dependent, locale-dependent value that the UA uses to label the
button itself if the attribute is absent.</p>
<p>Otherwise, the <a href="#command-facet-type" title="command-facet-Type">Type</a> is
"radio" or "checkbox". If the element is a <a href="forms.html#labeled-control">labeled
control</a>, the <code><a href="infrastructure.html#textcontent">textContent</a></code> of the first
<code><a href="forms.html#the-label-element">label</a></code> element in <a href="infrastructure.html#tree-order">tree order</a> whose
<a href="forms.html#labeled-control">labeled control</a> is the element in question is the <a href="#command-facet-label" title="command-facet-Label">Label</a> (in DOM terms, this is the
string given by <code><var title="">element</var>.labels[0].textContent</code>). Otherwise,
the value of the <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code>
attribute, if present, is the <a href="#command-facet-label" title="command-facet-Label">Label</a>. Otherwise, the <a href="#command-facet-label" title="command-facet-Label">Label</a> is the empty string.</p>
<p>The <a href="#command-facet-hint" title="command-facet-Hint">Hint</a> of the command
is the value of the <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute
of the <code><a href="the-input-element.html#the-input-element">input</a></code> element. If the attribute is not present, the
<a href="#command-facet-hint" title="command-facet-Hint">Hint</a> is the empty
string.</p>
<p>If the element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code>
attribute is in the <a href="number-state.html#image-button-state" title="attr-input-type-image">Image
Button</a> state, and the element has a <code title="attr-img-src"><a href="embedded-content-1.html#attr-img-src">src</a></code> attribute, and that attribute's
value can be successfully <a href="urls.html#resolve-a-url" title="resolve a
url">resolved</a> relative to the element, then the <a href="#command-facet-icon" title="command-facet-Icon">Icon</a> of the command is the
<a href="urls.html#absolute-url">absolute URL</a> obtained from resolving that attribute
that way. Otherwise, there is no <a href="#command-facet-icon" title="command-facet-Icon">Icon</a> for the command.</p>
<p>The <a href="#command-facet-accesskey" title="command-facet-AccessKey">AccessKey</a> of the
command is the element's <a href="editing.html#assigned-access-key">assigned access key</a>, if
any.</p>
<p>The <a href="#command-facet-hiddenstate" title="command-facet-HiddenState">Hidden State</a>
of the command is true (hidden) if the element has a <code title="attr-hidden"><a href="editing.html#the-hidden-attribute">hidden</a></code> attribute, and false
otherwise.</p>
<p>The <a href="#command-facet-disabledstate" title="command-facet-DisabledState">Disabled
State</a> of the command mirrors the <a href="association-of-controls-and-forms.html#concept-fe-disabled" title="concept-fe-disabled">disabled</a> state of the
control.</p>
<p>The <a href="#command-facet-checkedstate" title="command-facet-CheckedState">Checked State</a>
of the command is true if the command is of <a href="#command-facet-type" title="command-facet-Type">Type</a> "radio" or "checkbox" and the
element is <a href="association-of-controls-and-forms.html#concept-fe-checked" title="concept-fe-checked">checked</a>
attribute, and false otherwise.</p>
<p>The <a href="#command-facet-action" title="command-facet-Action">Action</a> of the
command, if the element has a defined <a href="content-models.html#activation-behavior">activation
behavior</a>, is to <a href="content-models.html#run-synthetic-click-activation-steps">run synthetic click activation
steps</a> on the element. Otherwise, it is just to <a href="webappapis.html#fire-a-click-event">fire a
<code title="event-click">click</code> event</a> at the
element.</p>
<h5 id="using-the-option-element-to-define-a-command"><span class="secno">4.11.5.4 </span><dfn title="option-command">Using the <code>option</code> element to define a command</dfn></h5>
<p>An <code><a href="the-button-element.html#the-option-element">option</a></code> element with an ancestor
<code><a href="the-button-element.html#the-select-element">select</a></code> element and either no <code title="attr-option-value"><a href="the-button-element.html#attr-option-value">value</a></code> attribute or a <code title="attr-option-value"><a href="the-button-element.html#attr-option-value">value</a></code> attribute that is not the
empty string <a href="#concept-command" title="concept-command">defines a
command</a>.</p>
<p>The <a href="#command-facet-type" title="command-facet-Type">Type</a> of the command
is "radio" if the <code><a href="the-button-element.html#the-option-element">option</a></code>'s nearest ancestor
<code><a href="the-button-element.html#the-select-element">select</a></code> element has no <code title="attr-select-multiple"><a href="the-button-element.html#attr-select-multiple">multiple</a></code> attribute, and
"checkbox" if it does.</p>
<p>The <a href="#command-facet-id" title="command-facet-ID">ID</a> of the command is
the value of the <code title="attr-id"><a href="elements.html#the-id-attribute">id</a></code> attribute of the
element, if the attribute is present and not empty. Otherwise the
command is an <a href="#anonymous-command">anonymous command</a>.</p>
<p>The <a href="#command-facet-label" title="command-facet-Label">Label</a> of the command
is the value of the <code><a href="the-button-element.html#the-option-element">option</a></code> element's <code title="attr-option-label"><a href="the-button-element.html#attr-option-label">label</a></code> attribute, if there is one,
or the value of the <code><a href="the-button-element.html#the-option-element">option</a></code> element's
<code><a href="infrastructure.html#textcontent">textContent</a></code> IDL attribute if there isn't.</p>
<p>The <a href="#command-facet-hint" title="command-facet-Hint">Hint</a> of the command
is the string given by the element's <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute, if any, and the empty
string if the attribute is absent.</p>
<p>There is no <a href="#command-facet-icon" title="command-facet-Icon">Icon</a> for the
command.</p>
<p>The <a href="#command-facet-accesskey" title="command-facet-AccessKey">AccessKey</a> of the
command is the element's <a href="editing.html#assigned-access-key">assigned access key</a>, if
any.</p>
<p>The <a href="#command-facet-hiddenstate" title="command-facet-HiddenState">Hidden State</a>
of the command is true (hidden) if the element has a <code title="attr-hidden"><a href="editing.html#the-hidden-attribute">hidden</a></code> attribute, and false
otherwise.</p>
<p>The <a href="#command-facet-disabledstate" title="command-facet-DisabledState">Disabled
State</a> of the command is true (disabled) if the element is
<a href="the-button-element.html#concept-option-disabled" title="concept-option-disabled">disabled</a> or if its
nearest ancestor <code><a href="the-button-element.html#the-select-element">select</a></code> element is <a href="association-of-controls-and-forms.html#concept-fe-disabled" title="concept-fe-disabled">disabled</a>, and false
otherwise.</p>
<p>The <a href="#command-facet-checkedstate" title="command-facet-CheckedState">Checked State</a>
of the command is true (checked) if the element's <a href="the-button-element.html#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> is true, and
false otherwise.</p>
<p>The <a href="#command-facet-action" title="command-facet-Action">Action</a> of the
command depends on its <a href="#command-facet-type" title="command-facet-Type">Type</a>. If the command is of <a href="#command-facet-type" title="command-facet-Type">Type</a> "radio" then it must <a href="the-button-element.html#concept-select-pick" title="concept-select-pick">pick</a> the <code><a href="the-button-element.html#the-option-element">option</a></code>
element. Otherwise, it must <a href="the-button-element.html#concept-select-toggle" title="concept-select-toggle">toggle</a> the <code><a href="the-button-element.html#the-option-element">option</a></code>
element.</p>
<h5 id="using-the-command-element-to-define-a-command"><span class="secno">4.11.5.5 </span>Using the <dfn title="command-element"><code>command</code></dfn> element to define
a command</h5>
<p>A <code><a href="interactive-elements.html#the-command-element">command</a></code> element <a href="#concept-command" title="concept-command">defines a command</a>.</p>
<p>The <a href="#command-facet-type" title="command-facet-Type">Type</a> of the command
is "radio" if the <code><a href="interactive-elements.html#the-command-element">command</a></code>'s <code title="attr-command-type"><a href="interactive-elements.html#attr-command-type">type</a></code> attribute is
"<code>radio</code>", "checkbox" if the attribute's value is
"<code>checkbox</code>", and "command" otherwise.</p>
<p>The <a href="#command-facet-id" title="command-facet-ID">ID</a> of the command is
the value of the <code title="attr-id"><a href="elements.html#the-id-attribute">id</a></code> attribute of the
element, if the attribute is present and not empty. Otherwise the
command is an <a href="#anonymous-command">anonymous command</a>.</p>
<p>The <a href="#command-facet-label" title="command-facet-Label">Label</a> of the command
is the value of the element's <code title="attr-command-label"><a href="interactive-elements.html#attr-command-label">label</a></code> attribute, if there is one,
or the empty string if it doesn't.</p>
<p>The <a href="#command-facet-hint" title="command-facet-Hint">Hint</a> of the command
is the string given by the element's <code title="attr-command-title"><a href="interactive-elements.html#attr-command-title">title</a></code> attribute, if any, and the
empty string if the attribute is absent.</p>
<p>The <a href="#command-facet-icon" title="command-facet-Icon">Icon</a> for the command
is the <a href="urls.html#absolute-url">absolute URL</a> obtained from <a href="urls.html#resolve-a-url" title="resolve
a url">resolving</a> the value of the element's <code title="attr-command-icon"><a href="interactive-elements.html#attr-command-icon">icon</a></code> attribute, relative to the
element, if it has such an attribute and resolving it is
successful. Otherwise, there is no <a href="#command-facet-icon" title="command-facet-Icon">Icon</a> for the command.</p>
<p>The <a href="#command-facet-accesskey" title="command-facet-AccessKey">AccessKey</a> of the
command is the element's <a href="editing.html#assigned-access-key">assigned access key</a>, if
any.</p>
<p>The <a href="#command-facet-hiddenstate" title="command-facet-HiddenState">Hidden State</a>
of the command is true (hidden) if the element has a <code title="attr-hidden"><a href="editing.html#the-hidden-attribute">hidden</a></code> attribute, and false
otherwise.</p>
<p>The <a href="#command-facet-disabledstate" title="command-facet-DisabledState">Disabled
State</a> of the command is true (disabled) if the element has a
<code title="attr-command-disabled"><a href="interactive-elements.html#attr-command-disabled">disabled</a></code> attribute, and
false otherwise.</p>
<p>The <a href="#command-facet-checkedstate" title="command-facet-CheckedState">Checked State</a>
of the command is true (checked) if the element has a <code title="attr-command-checked"><a href="interactive-elements.html#attr-command-checked">checked</a></code> attribute, and false
otherwise.</p>
<p>The <a href="#command-facet-action" title="command-facet-Action">Action</a> of the
command, if the element has a defined <a href="content-models.html#activation-behavior">activation
behavior</a>, is to <a href="content-models.html#run-synthetic-click-activation-steps">run synthetic click activation
steps</a> on the element. Otherwise, it is just to <a href="webappapis.html#fire-a-click-event">fire a
<code title="event-click">click</code> event</a> at the
element.</p>
<h5 id="using-the-accesskey-attribute-on-a-label-element-to-define-a-command"><span class="secno">4.11.5.6 </span><dfn title="label-command">Using the <code title="attr-accesskey">accesskey</code> attribute on a <code>label</code> element to define a command</dfn></h5>
<p>A <code><a href="forms.html#the-label-element">label</a></code> element that has an <a href="editing.html#assigned-access-key">assigned access
key</a> and a <a href="forms.html#labeled-control">labeled control</a> and whose
<a href="forms.html#labeled-control">labeled control</a> <a href="#concept-command" title="concept-command">defines a
command</a>, itself <a href="#concept-command" title="concept-command">defines a
command</a>.</p>
<p>The <a href="#command-facet-type" title="command-facet-Type">Type</a> of the command
is "command".</p>
<p>The <a href="#command-facet-id" title="command-facet-ID">ID</a> of the command is
the value of the <code title="attr-id"><a href="elements.html#the-id-attribute">id</a></code> attribute of the
element, if the attribute is present and not empty. Otherwise the
command is an <a href="#anonymous-command">anonymous command</a>.</p>
<p>The <a href="#command-facet-label" title="command-facet-Label">Label</a> of the command
is the string given by the element's <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL
attribute.</p>
<p>The <a href="#command-facet-hint" title="command-facet-Hint">Hint</a> of the command
is the value of the <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute
of the element.</p>
<p>There is no <a href="#command-facet-icon" title="command-facet-Icon">Icon</a> for the
command.</p>
<p>The <a href="#command-facet-accesskey" title="command-facet-AccessKey">AccessKey</a> of the
command is the element's <a href="editing.html#assigned-access-key">assigned access key</a>.</p>
<p>The <a href="#command-facet-hiddenstate" title="command-facet-HiddenState">Hidden State</a>,
<a href="#command-facet-disabledstate" title="command-facet-DisabledState">Disabled State</a>, and
<a href="#command-facet-action" title="command-facet-Action">Action</a> facets of the
command are the same as the respective facets of the element's
<a href="forms.html#labeled-control">labeled control</a>.</p>
<p>The <a href="#command-facet-checkedstate" title="command-facet-CheckedState">Checked State</a>
of the command is always false. (The command is never checked.)</p>
<h5 id="using-the-accesskey-attribute-on-a-legend-element-to-define-a-command"><span class="secno">4.11.5.7 </span><dfn title="legend-command">Using the <code title="attr-accesskey">accesskey</code> attribute on a <code>legend</code> element to define a command</dfn></h5>
<p>A <code><a href="forms.html#the-legend-element">legend</a></code> element that has an <a href="editing.html#assigned-access-key">assigned access
key</a> and is a child of a <code><a href="forms.html#the-fieldset-element">fieldset</a></code> element that
has a descendant that is not a descendant of the <code><a href="forms.html#the-legend-element">legend</a></code>
element and is neither a <code><a href="forms.html#the-label-element">label</a></code> element nor a
<code><a href="forms.html#the-legend-element">legend</a></code> element but that <a href="#concept-command" title="concept-command">defines a command</a>, itself <a href="#concept-command" title="concept-command">defines a command</a>.</p>
<p>The <a href="#command-facet-type" title="command-facet-Type">Type</a> of the command
is "command".</p>
<p>The <a href="#command-facet-id" title="command-facet-ID">ID</a> of the command is
the value of the <code title="attr-id"><a href="elements.html#the-id-attribute">id</a></code> attribute of the
element, if the attribute is present and not empty. Otherwise the
command is an <a href="#anonymous-command">anonymous command</a>.</p>
<p>The <a href="#command-facet-label" title="command-facet-Label">Label</a> of the command
is the string given by the element's <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL
attribute.</p>
<p>The <a href="#command-facet-hint" title="command-facet-Hint">Hint</a> of the command
is the value of the <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute
of the element.</p>
<p>There is no <a href="#command-facet-icon" title="command-facet-Icon">Icon</a> for the
command.</p>
<p>The <a href="#command-facet-accesskey" title="command-facet-AccessKey">AccessKey</a> of the
command is the element's <a href="editing.html#assigned-access-key">assigned access key</a>.</p>
<p>The <a href="#command-facet-hiddenstate" title="command-facet-HiddenState">Hidden State</a>,
<a href="#command-facet-disabledstate" title="command-facet-DisabledState">Disabled State</a>, and
<a href="#command-facet-action" title="command-facet-Action">Action</a> facets of the
command are the same as the respective facets of the first element
in <a href="infrastructure.html#tree-order">tree order</a> that is a descendant of the parent of the
<code><a href="forms.html#the-legend-element">legend</a></code> element that <a href="#concept-command" title="concept-command">defines a command</a> but is not a
descendant of the <code><a href="forms.html#the-legend-element">legend</a></code> element and is neither a
<code><a href="forms.html#the-label-element">label</a></code> nor a <code><a href="forms.html#the-legend-element">legend</a></code> element.</p>
<p>The <a href="#command-facet-checkedstate" title="command-facet-CheckedState">Checked State</a>
of the command is always false. (The command is never checked.)</p>
<h5 id="using-the-accesskey-attribute-to-define-a-command-on-other-elements"><span class="secno">4.11.5.8 </span><dfn title="accesskey-command">Using the <code title="attr-accesskey">accesskey</code> attribute to define a command on other elements</dfn></h5>
<p>An element that has an <a href="editing.html#assigned-access-key">assigned access key</a> <a href="#concept-command" title="concept-command">defines a command</a>.</p>
<p>If one of the other sections that define elements that <a href="#concept-command" title="concept-command">define commands</a> define that this
element <a href="#concept-command" title="concept-command">defines a command</a>, then
that section applies to this element, and this section does
not. Otherwise, this section applies to that element.</p>
<p>The <a href="#command-facet-type" title="command-facet-Type">Type</a> of the command
is "command".</p>
<p>The <a href="#command-facet-id" title="command-facet-ID">ID</a> of the command is
the value of the <code title="attr-id"><a href="elements.html#the-id-attribute">id</a></code> attribute of the
element, if the attribute is present and not empty. Otherwise the
command is an <a href="#anonymous-command">anonymous command</a>.</p>
<p>The <a href="#command-facet-label" title="command-facet-Label">Label</a> of the command
depends on the element. If the element is a <a href="forms.html#labeled-control">labeled
control</a>, the <code><a href="infrastructure.html#textcontent">textContent</a></code> of the first
<code><a href="forms.html#the-label-element">label</a></code> element in <a href="infrastructure.html#tree-order">tree order</a> whose
<a href="forms.html#labeled-control">labeled control</a> is the element in question is the <a href="#command-facet-label" title="command-facet-Label">Label</a> (in DOM terms, this is the
string given by <code><var title="">element</var>.labels[0].textContent</code>). Otherwise, the
<a href="#command-facet-label" title="command-facet-Label">Label</a> is the
<code><a href="infrastructure.html#textcontent">textContent</a></code> of the element itself.</p>
<p>The <a href="#command-facet-hint" title="command-facet-Hint">Hint</a> of the command
is the value of the <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute
of the element. If the attribute is not present, the <a href="#command-facet-hint" title="command-facet-Hint">Hint</a> is the empty string.</p>
<p>There is no <a href="#command-facet-icon" title="command-facet-Icon">Icon</a> for the
command.</p>
<p>The <a href="#command-facet-accesskey" title="command-facet-AccessKey">AccessKey</a> of the
command is the element's <a href="editing.html#assigned-access-key">assigned access key</a>.</p>
<p>The <a href="#command-facet-hiddenstate" title="command-facet-HiddenState">Hidden State</a>
of the command is true (hidden) if the element has a <code title="attr-hidden"><a href="editing.html#the-hidden-attribute">hidden</a></code> attribute, and false
otherwise.</p>
<p>The <a href="#command-facet-disabledstate" title="command-facet-DisabledState">Disabled
State</a> facet of the command is always false. (The command is
always enabled.)</p>
<p>The <a href="#command-facet-checkedstate" title="command-facet-CheckedState">Checked State</a>
of the command is always false. (The command is never checked.)</p>
<p>The <a href="#command-facet-action" title="command-facet-Action">Action</a> of the
command is to run the following steps:</p>
<ol><li>If the element is <a href="editing.html#focusable">focusable</a>, run the
<a href="editing.html#focusing-steps">focusing steps</a> for the element.</li>
<li>If the element has a defined <a href="content-models.html#activation-behavior">activation behavior</a>,
<a href="content-models.html#run-synthetic-click-activation-steps">run synthetic click activation steps</a> on the
element.</li>
<li>Otherwise, if the element does not have a defined
<a href="content-models.html#activation-behavior">activation behavior</a>, <a href="webappapis.html#fire-a-click-event">fire a <code title="event-click">click</code> event</a> at the element.</li>
</ol></div></body></html>