forms.html
88 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
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283
1284
1285
1286
1287
1288
1289
1290
1291
1292
1293
1294
1295
1296
1297
1298
<!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.10 Forms — 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="tabular-data.html" title="4.9 Tabular data" rel="prev">
<link href="spec.html#contents" title="Table of contents" rel="index">
<link href="the-input-element.html" title="4.10.7 The input element" 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="tabular-data.html" class="prev">4.9 Tabular data</a> –
<a href="spec.html#contents">Table of contents</a> –
<a href="the-input-element.html" class="next">4.10.7 The input element</a>
<ol class="toc"><li><ol><li><a href="forms.html#forms"><span class="secno">4.10 </span>Forms</a>
<ol><li><a href="forms.html#introduction-1"><span class="secno">4.10.1 </span>Introduction</a>
<ol><li><a href="forms.html#writing-a-form-s-user-interface"><span class="secno">4.10.1.1 </span>Writing a form's user interface</a></li><li><a href="forms.html#implementing-the-server-side-processing-for-a-form"><span class="secno">4.10.1.2 </span>Implementing the server-side processing for a form</a></li><li><a href="forms.html#configuring-a-form-to-communicate-with-a-server"><span class="secno">4.10.1.3 </span>Configuring a form to communicate with a server</a></li><li><a href="forms.html#client-side-form-validation"><span class="secno">4.10.1.4 </span>Client-side form validation</a></li></ol></li><li><a href="forms.html#categories"><span class="secno">4.10.2 </span>Categories</a></li><li><a href="forms.html#the-form-element"><span class="secno">4.10.3 </span>The <code>form</code> element</a></li><li><a href="forms.html#the-fieldset-element"><span class="secno">4.10.4 </span>The <code>fieldset</code> element</a></li><li><a href="forms.html#the-legend-element"><span class="secno">4.10.5 </span>The <code>legend</code> element</a></li><li><a href="forms.html#the-label-element"><span class="secno">4.10.6 </span>The <code>label</code> element</a></li></ol></li></ol></li></ol></div>
<h3 id="forms"><span class="secno">4.10 </span>Forms</h3><h4 id="introduction-1"><span class="secno">4.10.1 </span>Introduction</h4><p><i>This section is non-normative.</i></p><p>A form is a component of a Web page that has form controls, such
as text fields, buttons, checkboxes, range controls, or color
pickers. A user can interact with such a form, providing data that
can then be sent to the server for further processing (e.g.
returning the results of a search or calculation). No client-side
scripting is needed in many cases, though an API is available so
that scripts can augment the user experience or use forms for
purposes other than submitting data to a server.</p><p>Writing a form consists of several steps, which can be performed
in any order: writing the user interface, implementing the
server-side processing, and configuring the user interface to
communicate with the server.</p><h5 id="writing-a-form-s-user-interface"><span class="secno">4.10.1.1 </span>Writing a form's user interface</h5><p><i>This section is non-normative.</i></p><p>For the purposes of this brief introduction, we will create a
pizza ordering form.</p><p>Any form starts with a <code><a href="#the-form-element">form</a></code> element, inside which
are placed the controls. Most controls are represented by the
<code><a href="the-input-element.html#the-input-element">input</a></code> element, which by default provides a one-line
text field. To label a control, the <code><a href="#the-label-element">label</a></code> element is
used; the label text and the control itself go inside the
<code><a href="#the-label-element">label</a></code> element. Each part of a form is considered a
<a href="content-models.html#paragraph">paragraph</a>, and is typically separated from other parts
using <code><a href="grouping-content.html#the-p-element">p</a></code> elements. Putting this together, here is how
one might ask for the customer's name:</p><pre><strong><form>
<p><label>Customer name: <input></label></p>
</form></strong></pre><p>To let the user select the size of the pizza, we can use a set of
radio buttons. Radio buttons also use the <code><a href="the-input-element.html#the-input-element">input</a></code>
element, this time with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code>
attribute with the value <code title="attr-input-type-radio"><a href="number-state.html#radio-button-state">radio</a></code>. To make the radio
buttons work as a group, they are given a common name using the
<code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code> attribute. To group a batch
of controls together, such as, in this case, the radio buttons, one
can use the <code><a href="#the-fieldset-element">fieldset</a></code> element. The title of such a group
of controls is given by the first element in the
<code><a href="#the-fieldset-element">fieldset</a></code>, which has to be a <code><a href="#the-legend-element">legend</a></code>
element.</p><pre><form>
<p><label>Customer name: <input></label></p>
<strong> <fieldset>
<legend> Pizza Size </legend>
<p><label> <input type=radio name=size> Small </label></p>
<p><label> <input type=radio name=size> Medium </label></p>
<p><label> <input type=radio name=size> Large </label></p>
</fieldset></strong>
</form></pre><p class="note">Changes from the previous step are highlighted.</p><p>To pick toppings, we can use checkboxes. These use the
<code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute with the value <code title="attr-input-type-checkbox"><a href="number-state.html#checkbox-state">checkbox</a></code>:</p><pre><form>
<p><label>Customer name: <input></label></p>
<fieldset>
<legend> Pizza Size </legend>
<p><label> <input type=radio name=size> Small </label></p>
<p><label> <input type=radio name=size> Medium </label></p>
<p><label> <input type=radio name=size> Large </label></p>
</fieldset>
<strong> <fieldset>
<legend> Pizza Toppings </legend>
<p><label> <input type=checkbox> Bacon </label></p>
<p><label> <input type=checkbox> Extra Cheese </label></p>
<p><label> <input type=checkbox> Onion </label></p>
<p><label> <input type=checkbox> Mushroom </label></p>
</fieldset></strong>
</form></pre><p>The pizzeria for which this form is being written is always
making mistakes, so it needs a way to contact the customer. For this
purpose, we can use form controls specifically for telephone numbers
(<code><a href="the-input-element.html#the-input-element">input</a></code> elements with their <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute set to <code title="attr-input-type-tel"><a href="states-of-the-type-attribute.html#telephone-state">tel</a></code>) and e-mail addresses
(<code><a href="the-input-element.html#the-input-element">input</a></code> elements with their <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute set to <code title="attr-input-type-email"><a href="states-of-the-type-attribute.html#e-mail-state">email</a></code>):</p><pre><form>
<p><label>Customer name: <input></label></p>
<strong> <p><label>Telephone: <input type=tel></label></p>
<p><label>E-mail address: <input type=email></label></p></strong>
<fieldset>
<legend> Pizza Size </legend>
<p><label> <input type=radio name=size> Small </label></p>
<p><label> <input type=radio name=size> Medium </label></p>
<p><label> <input type=radio name=size> Large </label></p>
</fieldset>
<fieldset>
<legend> Pizza Toppings </legend>
<p><label> <input type=checkbox> Bacon </label></p>
<p><label> <input type=checkbox> Extra Cheese </label></p>
<p><label> <input type=checkbox> Onion </label></p>
<p><label> <input type=checkbox> Mushroom </label></p>
</fieldset>
</form></pre><p>We can use an <code><a href="the-input-element.html#the-input-element">input</a></code> element with its <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute set to <code title="attr-input-type-time"><a href="states-of-the-type-attribute.html#time-state">time</a></code> to ask for a delivery
time. Many of these form controls have attributes to control exactly
what values can be specified; in this case, three attributes of
particular interest are <code title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>,
<code title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>, and <code title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code>. These set the minimum time, the
maximum time, and the interval between allowed values (in
seconds). This pizzeria only delivers between 11am and 9pm, and
doesn't promise anything better than 15 minute increments, which we
can mark up as follows:</p><pre><form>
<p><label>Customer name: <input></label></p>
<p><label>Telephone: <input type=tel></label></p>
<p><label>E-mail address: <input type=email></label></p>
<fieldset>
<legend> Pizza Size </legend>
<p><label> <input type=radio name=size> Small </label></p>
<p><label> <input type=radio name=size> Medium </label></p>
<p><label> <input type=radio name=size> Large </label></p>
</fieldset>
<fieldset>
<legend> Pizza Toppings </legend>
<p><label> <input type=checkbox> Bacon </label></p>
<p><label> <input type=checkbox> Extra Cheese </label></p>
<p><label> <input type=checkbox> Onion </label></p>
<p><label> <input type=checkbox> Mushroom </label></p>
</fieldset>
<strong> <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p></strong>
</form></pre><p>The <code><a href="the-button-element.html#the-textarea-element">textarea</a></code> element can be used to provide a
free-form text field. In this instance, we are going to use it to
provide a space for the customer to give delivery instructions:</p><pre><form>
<p><label>Customer name: <input></label></p>
<p><label>Telephone: <input type=tel></label></p>
<p><label>E-mail address: <input type=email></label></p>
<fieldset>
<legend> Pizza Size </legend>
<p><label> <input type=radio name=size> Small </label></p>
<p><label> <input type=radio name=size> Medium </label></p>
<p><label> <input type=radio name=size> Large </label></p>
</fieldset>
<fieldset>
<legend> Pizza Toppings </legend>
<p><label> <input type=checkbox> Bacon </label></p>
<p><label> <input type=checkbox> Extra Cheese </label></p>
<p><label> <input type=checkbox> Onion </label></p>
<p><label> <input type=checkbox> Mushroom </label></p>
</fieldset>
<p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p>
<strong> <p><label>Delivery instructions: <textarea></textarea></label></p></strong>
</form></pre><p>Finally, to make the form submittable we use the
<code><a href="the-button-element.html#the-button-element">button</a></code> element:</p><pre><form>
<p><label>Customer name: <input></label></p>
<p><label>Telephone: <input type=tel></label></p>
<p><label>E-mail address: <input type=email></label></p>
<fieldset>
<legend> Pizza Size </legend>
<p><label> <input type=radio name=size> Small </label></p>
<p><label> <input type=radio name=size> Medium </label></p>
<p><label> <input type=radio name=size> Large </label></p>
</fieldset>
<fieldset>
<legend> Pizza Toppings </legend>
<p><label> <input type=checkbox> Bacon </label></p>
<p><label> <input type=checkbox> Extra Cheese </label></p>
<p><label> <input type=checkbox> Onion </label></p>
<p><label> <input type=checkbox> Mushroom </label></p>
</fieldset>
<p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p>
<p><label>Delivery instructions: <textarea></textarea></label></p>
<strong> <p><button>Submit order</button></p></strong>
</form></pre><h5 id="implementing-the-server-side-processing-for-a-form"><span class="secno">4.10.1.2 </span>Implementing the server-side processing for a form</h5><p><i>This section is non-normative.</i></p><p>The exact details for writing a server-side processor are out of
scope for this specification. For the purposes of this introduction,
we will assume that the script at <code title="">https://pizza.example.com/order.cgi</code> is configured to
accept submissions using the <code title="attr-fs-enctype-urlencoded"><a href="association-of-controls-and-forms.html#attr-fs-enctype-urlencoded">application/x-www-form-urlencoded</a></code>
format, expecting the following parameters sent in an HTTP POST
body:</p><dl><dt><code title="">custname</code></dt>
<dd>Customer's name</dd>
<dt><code title="">custtel</code></dt>
<dd>Customer's telephone number</dd>
<dt><code title="">custemail</code></dt>
<dd>Customer's e-mail address</dd>
<dt><code title="">size</code></dt>
<dd>The pizza size, either <code title="">small</code>, <code title="">medium</code>, or <code title="">large</code></dd>
<dt><code title="">toppings</code></dt>
<dd>The topping, specified once for each selected topping, with the allowed values being <code title="">bacon</code>, <code title="">cheese</code>, <code title="">onion</code>, and <code title="">mushroom</code></dd>
<dt><code title="">delivery</code></dt>
<dd>The requested delivery time</dd>
<dt><code title="">comments</code></dt>
<dd>The delivery instructions</dd>
</dl><h5 id="configuring-a-form-to-communicate-with-a-server"><span class="secno">4.10.1.3 </span>Configuring a form to communicate with a server</h5><p><i>This section is non-normative.</i></p><p>Form submissions are exposed to servers in a variety of ways,
most commonly as HTTP GET or POST requests. To specify the exact
method used, the <code title="attr-fs-method"><a href="association-of-controls-and-forms.html#attr-fs-method">method</a></code>
attribute is specified on the <code><a href="#the-form-element">form</a></code> element. This
doesn't specify how the form data is encoded, though; to specify
that, you use the <code title="attr-fs-enctype"><a href="association-of-controls-and-forms.html#attr-fs-enctype">enctype</a></code>
attribute. You also have to specify the <a href="urls.html#url">URL</a> of the
service that will handle the submitted data, using the <code title="attr-fs-action"><a href="association-of-controls-and-forms.html#attr-fs-action">action</a></code> attribute.</p><p>For each form control you want submitted, you then have to give a
name that will be used to refer to the data in the submission. We
already specified the name for the group of radio buttons; the same
attribute (<code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code>) also specifies
the submission name. Radio buttons can be distinguished from each
other in the submission by giving them different values, using the
<code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute.</p><p>Multiple controls can have the same name; for example, here we
give all the checkboxes the same name, and the server distinguishes
which checkbox was checked by seeing which values are submitted with
that name — like the radio buttons, they are also given unique
values with the <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code>
attribute.</p><p>Given the settings in the previous section, this all becomes:</p><pre><form<strong> method="post"
enctype="application/x-www-form-urlencoded"
action="https://pizza.example.com/order.cgi"</strong>>
<p><label>Customer name: <input<strong> name="custname"</strong>></label></p>
<p><label>Telephone: <input type=tel<strong> name="custtel"</strong>></label></p>
<p><label>E-mail address: <input type=email<strong> name="custemail"</strong>></label></p>
<fieldset>
<legend> Pizza Size </legend>
<p><label> <input type=radio name=size<strong> value="small"</strong>> Small </label></p>
<p><label> <input type=radio name=size<strong> value="medium"</strong>> Medium </label></p>
<p><label> <input type=radio name=size<strong> value="large"</strong>> Large </label></p>
</fieldset>
<fieldset>
<legend> Pizza Toppings </legend>
<p><label> <input type=checkbox<strong> name="topping" value="bacon"</strong>> Bacon </label></p>
<p><label> <input type=checkbox<strong> name="topping" value="cheese"</strong>> Extra Cheese </label></p>
<p><label> <input type=checkbox<strong> name="topping" value="onion"</strong>> Onion </label></p>
<p><label> <input type=checkbox<strong> name="topping" value="mushroom"</strong>> Mushroom </label></p>
</fieldset>
<p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"<strong> name="delivery"</strong>></label></p>
<p><label>Delivery instructions: <textarea<strong> name="comments"</strong>></textarea></label></p>
<p><button>Submit order</button><p>
</form></pre><p>For example, if the customer entered "Denise Lawrence" as their
name, "555-321-8642" as their telephone number, did not specify an
e-mail address, asked for a medium-sized pizza, selected the Extra
Cheese and Mushroom toppings, entered a delivery time of 7pm, and
left the delivery instructions text field blank, the user agent
would submit the following to the online Web service:</p><pre>custname=Denise+Lawrence&custtel=555-321-8624&custemail=&size=medium&topping=cheese&topping=mushroom&delivery=19%3A00&comments=</pre><h5 id="client-side-form-validation"><span class="secno">4.10.1.4 </span>Client-side form validation</h5><p><i>This section is non-normative.</i></p><p>Forms can be annotated in such a way that the user agent will
check the user's input before the form is submitted. The server
still has to verify the input is valid (since hostile users can
easily bypass the form validation), but it allows the user to avoid
the wait incurred by having the server be the sole checker of the
user's input.</p><p>The simplest annotation is the <code title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code> attribute, which can be
specified on <code><a href="the-input-element.html#the-input-element">input</a></code> elements to indicate that the form
is not to be submitted until a value is given. By adding this
attribute to the customer name and delivery time fields, we allow
the user agent to notify the user when the user submits the form
without filling in those fields:</p><pre><form method="post"
enctype="application/x-www-form-urlencoded"
action="https://pizza.example.com/order.cgi">
<p><label>Customer name: <input name="custname"<strong> required</strong>></label></p>
<p><label>Telephone: <input type=tel name="custtel"></label></p>
<p><label>E-mail address: <input type=email name="custemail"></label></p>
<fieldset>
<legend> Pizza Size </legend>
<p><label> <input type=radio name=size value="small"> Small </label></p>
<p><label> <input type=radio name=size value="medium"> Medium </label></p>
<p><label> <input type=radio name=size value="large"> Large </label></p>
</fieldset>
<fieldset>
<legend> Pizza Toppings </legend>
<p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
<p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
<p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
<p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
</fieldset>
<p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery"<strong> required</strong>></label></p>
<p><label>Delivery instructions: <textarea name="comments"></textarea></label></p>
<p><button>Submit order</button><p>
</form></pre><p>It is also possible to limit the length of the input, using the
<code title="attr-fe-maxlength"><a href="association-of-controls-and-forms.html#attr-fe-maxlength">maxlength</a></code> attribute. By
adding this to the <code><a href="the-button-element.html#the-textarea-element">textarea</a></code> element, we can limit users
to 1000 characters, preventing them from writing huge essays to the
busy delivery drivers instead of staying focused and to the
point:</p><pre><form method="post"
enctype="application/x-www-form-urlencoded"
action="https://pizza.example.com/order.cgi">
<p><label>Customer name: <input name="custname" required></label></p>
<p><label>Telephone: <input type=tel name="custtel"></label></p>
<p><label>E-mail address: <input type=email name="custemail"></label></p>
<fieldset>
<legend> Pizza Size </legend>
<p><label> <input type=radio name=size value="small"> Small </label></p>
<p><label> <input type=radio name=size value="medium"> Medium </label></p>
<p><label> <input type=radio name=size value="large"> Large </label></p>
</fieldset>
<fieldset>
<legend> Pizza Toppings </legend>
<p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
<p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
<p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
<p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
</fieldset>
<p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery" required></label></p>
<p><label>Delivery instructions: <textarea name="comments"<strong> maxlength=1000</strong>></textarea></label></p>
<p><button>Submit order</button><p>
</form></pre><h4 id="categories"><span class="secno">4.10.2 </span>Categories</h4><p>Mostly for historical reasons, elements in this section fall into
several overlapping (but subtly different) categories in addition to
the usual ones like <a href="content-models.html#flow-content">flow content</a>, <a href="content-models.html#phrasing-content">phrasing
content</a>, and <a href="content-models.html#interactive-content">interactive content</a>.</p><p>A number of the elements are <dfn id="form-associated-element" title="form-associated
element">form-associated elements</dfn>, which means they can have a
<a href="association-of-controls-and-forms.html#form-owner">form owner</a> and, to expose this, have a <code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code> content attribute with a matching
<code title="dom-fae-form"><a href="association-of-controls-and-forms.html#dom-fae-form">form</a></code> IDL attribute.</p><ul class="brief category-list"><li><code><a href="the-button-element.html#the-button-element">button</a></code></li>
<li><code><a href="#the-fieldset-element">fieldset</a></code></li>
<li><code><a href="the-input-element.html#the-input-element">input</a></code></li>
<li><code><a href="the-button-element.html#the-keygen-element">keygen</a></code></li>
<li><code><a href="#the-label-element">label</a></code></li>
<li><code><a href="the-button-element.html#the-meter-element">meter</a></code></li>
<li><code><a href="the-iframe-element.html#the-object-element">object</a></code></li>
<li><code><a href="the-button-element.html#the-output-element">output</a></code></li>
<li><code><a href="the-button-element.html#the-progress-element">progress</a></code></li>
<li><code><a href="the-button-element.html#the-select-element">select</a></code></li>
<li><code><a href="the-button-element.html#the-textarea-element">textarea</a></code></li>
</ul><p>The <a href="#form-associated-element" title="form-associated element">form-associated
elements</a> fall into several subcategories:</p><dl><dt><dfn id="category-listed" title="category-listed">Listed elements</dfn></dt>
<dd>
<p>Denotes elements that are listed in the <code title="dom-form-elements"><a href="#dom-form-elements"><var title="">form</var>.elements</a></code>
and <code title="dom-fieldset-elements"><a href="#dom-fieldset-elements"><var title="">fieldset</var>.elements</a></code> APIs.</p>
<ul class="brief category-list"><li><code><a href="the-button-element.html#the-button-element">button</a></code></li>
<li><code><a href="#the-fieldset-element">fieldset</a></code></li>
<li><code><a href="the-input-element.html#the-input-element">input</a></code></li>
<li><code><a href="the-button-element.html#the-keygen-element">keygen</a></code></li>
<li><code><a href="the-iframe-element.html#the-object-element">object</a></code></li>
<li><code><a href="the-button-element.html#the-output-element">output</a></code></li>
<li><code><a href="the-button-element.html#the-select-element">select</a></code></li>
<li><code><a href="the-button-element.html#the-textarea-element">textarea</a></code></li>
</ul></dd>
<dt><dfn id="category-label" title="category-label">Labelable elements</dfn></dt>
<dd>
<p>Denotes elements that can be associated with <code><a href="#the-label-element">label</a></code>
elements.</p>
<ul class="brief category-list"><li><code><a href="the-button-element.html#the-button-element">button</a></code></li>
<li><code><a href="the-input-element.html#the-input-element">input</a></code> (if the <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is <em>not</em> in the <a href="states-of-the-type-attribute.html#hidden-state" title="attr-input-type-hidden">Hidden</a> state)</li>
<li><code><a href="the-button-element.html#the-keygen-element">keygen</a></code></li>
<li><code><a href="the-button-element.html#the-meter-element">meter</a></code></li>
<li><code><a href="the-button-element.html#the-output-element">output</a></code></li>
<li><code><a href="the-button-element.html#the-progress-element">progress</a></code></li>
<li><code><a href="the-button-element.html#the-select-element">select</a></code></li>
<li><code><a href="the-button-element.html#the-textarea-element">textarea</a></code></li>
</ul></dd>
<dt><dfn id="category-submit" title="category-submit">Submittable elements</dfn></dt>
<dd>
<p>Denotes elements that can be used for <a href="association-of-controls-and-forms.html#constructing-form-data-set">constructing the form data
set</a> when a <code><a href="#the-form-element">form</a></code> element is <a href="association-of-controls-and-forms.html#concept-form-submit" title="concept-form-submit">submitted</a>.</p>
<ul class="brief category-list"><li><code><a href="the-button-element.html#the-button-element">button</a></code></li>
<li><code><a href="the-input-element.html#the-input-element">input</a></code></li>
<li><code><a href="the-button-element.html#the-keygen-element">keygen</a></code></li>
<li><code><a href="the-iframe-element.html#the-object-element">object</a></code></li>
<li><code><a href="the-button-element.html#the-select-element">select</a></code></li>
<li><code><a href="the-button-element.html#the-textarea-element">textarea</a></code></li>
</ul></dd>
<dt><dfn id="category-reset" title="category-reset">Resettable elements</dfn></dt>
<dd>
<p>Denotes elements that can be affected when a <code><a href="#the-form-element">form</a></code>
element is <a href="association-of-controls-and-forms.html#concept-form-reset" title="concept-form-reset">reset</a>.</p>
<ul class="brief category-list"><li><code><a href="the-input-element.html#the-input-element">input</a></code></li>
<li><code><a href="the-button-element.html#the-keygen-element">keygen</a></code></li>
<li><code><a href="the-button-element.html#the-output-element">output</a></code></li>
<li><code><a href="the-button-element.html#the-select-element">select</a></code></li>
<li><code><a href="the-button-element.html#the-textarea-element">textarea</a></code></li>
</ul></dd>
</dl><p>In addition, some <a href="#category-submit" title="category-submit">submittable
elements</a> can be, depending on their attributes, <dfn id="concept-button" title="concept-button">buttons</dfn>. The prose below defines when
an element is a button. Some buttons are specifically <dfn id="concept-submit-button" title="concept-submit-button">submit buttons</dfn>.</p><p class="note">The <code><a href="the-iframe-element.html#the-object-element">object</a></code> element is also a
<a href="#form-associated-element">form-associated element</a> and can, with the use of a
suitable <a href="infrastructure.html#plugin">plugin</a>, partake in <a href="association-of-controls-and-forms.html#form-submission">form
submission</a>.</p><h4 id="the-form-element"><span class="secno">4.10.3 </span>The <dfn><code>form</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
<dt>Contexts in which this element can be used:</dt>
<dd>Where <a href="content-models.html#flow-content">flow content</a> is expected.</dd>
<dt>Content model:</dt>
<dd><a href="content-models.html#flow-content">Flow content</a>, but with no <code><a href="#the-form-element">form</a></code> element descendants.</dd>
<dt>Content attributes:</dt>
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
<dd><code title="attr-form-accept-charset"><a href="#attr-form-accept-charset">accept-charset</a></code></dd>
<dd><code title="attr-fs-action"><a href="association-of-controls-and-forms.html#attr-fs-action">action</a></code></dd>
<dd><code title="attr-form-autocomplete"><a href="#attr-form-autocomplete">autocomplete</a></code></dd>
<dd><code title="attr-fs-enctype"><a href="association-of-controls-and-forms.html#attr-fs-enctype">enctype</a></code></dd>
<dd><code title="attr-fs-method"><a href="association-of-controls-and-forms.html#attr-fs-method">method</a></code></dd>
<dd><code title="attr-form-name"><a href="#attr-form-name">name</a></code></dd>
<dd><code title="attr-fs-novalidate"><a href="association-of-controls-and-forms.html#attr-fs-novalidate">novalidate</a></code></dd>
<dd><code title="attr-fs-target"><a href="association-of-controls-and-forms.html#attr-fs-target">target</a></code></dd>
<dt>DOM interface:</dt>
<dd>
<pre class="idl">[OverrideBuiltins]
interface <dfn id="htmlformelement">HTMLFormElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
attribute DOMString <a href="#dom-form-acceptcharset" title="dom-form-acceptCharset">acceptCharset</a>;
attribute DOMString <a href="association-of-controls-and-forms.html#dom-fs-action" title="dom-fs-action">action</a>;
attribute DOMString <a href="#dom-form-autocomplete" title="dom-form-autocomplete">autocomplete</a>;
attribute DOMString <a href="association-of-controls-and-forms.html#dom-fs-enctype" title="dom-fs-enctype">enctype</a>;
attribute DOMString <a href="association-of-controls-and-forms.html#dom-fs-encoding" title="dom-fs-encoding">encoding</a>;
attribute DOMString <a href="association-of-controls-and-forms.html#dom-fs-method" title="dom-fs-method">method</a>;
attribute DOMString <a href="#dom-form-name" title="dom-form-name">name</a>;
attribute boolean <a href="association-of-controls-and-forms.html#dom-fs-novalidate" title="dom-fs-noValidate">noValidate</a>;
attribute DOMString <a href="association-of-controls-and-forms.html#dom-fs-target" title="dom-fs-target">target</a>;
readonly attribute <a href="common-dom-interfaces.html#htmlformcontrolscollection">HTMLFormControlsCollection</a> <a href="#dom-form-elements" title="dom-form-elements">elements</a>;
readonly attribute long <a href="#dom-form-length" title="dom-form-length">length</a>;
caller <a href="#dom-form-item" title="dom-form-item">getter</a> any (in unsigned long index);
caller <a href="#dom-form-nameditem" title="dom-form-namedItem">getter</a> any (in DOMString name);
void <a href="#dom-form-submit" title="dom-form-submit">submit</a>();
void <a href="#dom-form-reset" title="dom-form-reset">reset</a>();
boolean <a href="#dom-form-checkvalidity" title="dom-form-checkValidity">checkValidity</a>();
};</pre>
</dd>
</dl><p>The <code><a href="#the-form-element">form</a></code> element <a href="rendering.html#represents">represents</a> a
collection of <a href="#form-associated-element" title="form-associated element">form-associated
elements</a>, some of which can represent editable values that
can be submitted to a server for processing.</p><p>The <dfn id="attr-form-accept-charset" title="attr-form-accept-charset"><code>accept-charset</code></dfn>
attribute gives the character encodings that are to be used for the
submission. If specified, the value must be an <a href="common-microsyntaxes.html#ordered-set-of-unique-space-separated-tokens">ordered set of
unique space-separated tokens</a> that are <a href="infrastructure.html#ascii-case-insensitive">ASCII
case-insensitive</a>, and each token must be an <a href="infrastructure.html#ascii-case-insensitive">ASCII
case-insensitive</a> match for the <a href="infrastructure.html#preferred-mime-name">preferred MIME
name</a> of an <a href="infrastructure.html#ascii-compatible-character-encoding">ASCII-compatible character encoding</a>.
<a href="references.html#refsIANACHARSET">[IANACHARSET]</a></p><p>The <dfn id="attr-form-name" title="attr-form-name"><code>name</code></dfn> attribute
represents the <code><a href="#the-form-element">form</a></code>'s name within the <code title="dom-document-forms"><a href="dom.html#dom-document-forms">forms</a></code> collection. The value must
not be the empty string, and the value must be unique amongst the
<code><a href="#the-form-element">form</a></code> elements in the <code title="dom-document-forms"><a href="dom.html#dom-document-forms">forms</a></code> collection that it is in, if
any.</p><p>The <dfn id="attr-form-autocomplete" title="attr-form-autocomplete"><code>autocomplete</code></dfn>
attribute is an <a href="common-microsyntaxes.html#enumerated-attribute">enumerated attribute</a>. The attribute has
two states. The <code title="attr-form-autocomplete-on">on</code>
keyword maps to the <dfn id="attr-form-autocomplete-on-state" title="attr-form-autocomplete-on-state">on</dfn> state, and the
<code title="attr-form-autocomplete-off">off</code> keyword maps to
the <dfn id="attr-form-autocomplete-off-state" title="attr-form-autocomplete-off-state">off</dfn>
state. The attribute may also be omitted. The <i>missing value
default</i> is the <a href="#attr-form-autocomplete-on-state" title="attr-form-autocomplete-on-state">on</a> state. The <a href="#attr-form-autocomplete-off-state" title="attr-form-autocomplete-off-state">off</a> state indicates
that by default, <code><a href="the-input-element.html#the-input-element">input</a></code> elements in the form will have
their <a href="common-input-element-attributes.html#resulting-autocompletion-state">resulting autocompletion state</a> set to <i title="">off</i>; the <a href="#attr-form-autocomplete-on-state" title="attr-form-autocomplete-on-state">on</a> state indicates
that by default, <code><a href="the-input-element.html#the-input-element">input</a></code> elements in the form will have
their <a href="common-input-element-attributes.html#resulting-autocompletion-state">resulting autocompletion state</a> set to <i title="">on</i>.</p><p>The <code title="attr-fs-action"><a href="association-of-controls-and-forms.html#attr-fs-action">action</a></code>, <code title="attr-fs-enctype"><a href="association-of-controls-and-forms.html#attr-fs-enctype">enctype</a></code>, <code title="attr-fs-method"><a href="association-of-controls-and-forms.html#attr-fs-method">method</a></code>, <code title="attr-fs-novalidate"><a href="association-of-controls-and-forms.html#attr-fs-novalidate">novalidate</a></code>, and <code title="attr-fs-target"><a href="association-of-controls-and-forms.html#attr-fs-target">target</a></code> attributes are <a href="association-of-controls-and-forms.html#attributes-for-form-submission">attributes
for form submission</a>.</p><dl class="domintro"><dt><var title="">form</var> . <code title="dom-form-elements"><a href="#dom-form-elements">elements</a></code></dt>
<dd>
<p>Returns an <code><a href="common-dom-interfaces.html#htmlcollection">HTMLCollection</a></code> of the form controls in
the form (excluding image buttons for historical reasons).</p>
</dd>
<dt><var title="">form</var> . <code title="dom-form-length"><a href="#dom-form-length">length</a></code></dt>
<dd>
<p>Returns the number of form controls in the form (excluding
image buttons for historical reasons).</p>
</dd>
<dt><var title="">form</var>[<var title="">index</var>]</dt>
<dt><var title="">form</var>(<var title="">index</var>)</dt>
<dd>
<p>Returns the <var title="">index</var>th element in the form
(excluding image buttons for historical reasons).</p>
</dd>
<dt><var title="">form</var>[<var title="">name</var>]</dt>
<dt><var title="">form</var>(<var title="">name</var>)</dt>
<dd>
<p>Returns the form control in the form with the given <a href="elements.html#concept-id" title="concept-id">ID</a> or <code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code> (excluding image buttons for
historical reasons).</p>
<p>Once an element has been referenced using a particular name,
that name will continue being available as a way to reference that
element in this method, even if the element's actual <a href="elements.html#concept-id" title="concept-id">ID</a> or <code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code> changes, for as long as the
element remains in the <code><a href="infrastructure.html#document">Document</a></code>.</p>
<p>If there are multiple matching items, then a
<code><a href="infrastructure.html#nodelist">NodeList</a></code> object containing all those elements is
returned.</p>
<p>Returns null if no element with that <a href="elements.html#concept-id" title="concept-id">ID</a> or <code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code> could be found.</p>
</dd>
<dt><var title="">form</var> . <code title="dom-form-submit"><a href="#dom-form-submit">submit</a></code>()</dt>
<dd>
<p>Submits the form.</p>
</dd>
<dt><var title="">form</var> . <code title="dom-form-reset"><a href="#dom-form-reset">reset</a></code>()</dt>
<dd>
<p>Resets the form.</p>
</dd>
<dt><var title="">form</var> . <code title="dom-form-checkValidity"><a href="#dom-form-checkvalidity">checkValidity</a></code>()</dt>
<dd>
<p>Returns true if the form's controls are all valid; otherwise,
returns false.</p>
</dd>
</dl><div class="impl">
<p>The <dfn id="dom-form-autocomplete" title="dom-form-autocomplete"><code>autocomplete</code></dfn> IDL
attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the
same name, <a href="common-dom-interfaces.html#limited-to-only-known-values">limited to only known values</a>.</p>
<p>The <dfn id="dom-form-name" title="dom-form-name"><code>name</code></dfn> IDL
attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the
same name.</p>
<p>The <dfn id="dom-form-acceptcharset" title="dom-form-acceptCharset"><code>acceptCharset</code></dfn> IDL
attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-form-accept-charset"><a href="#attr-form-accept-charset">accept-charset</a></code> content
attribute.</p>
<hr><p>The <dfn id="dom-form-elements" title="dom-form-elements"><code>elements</code></dfn>
IDL attribute must return an <code><a href="common-dom-interfaces.html#htmlformcontrolscollection">HTMLFormControlsCollection</a></code>
rooted at the <code><a href="infrastructure.html#document">Document</a></code> node, whose filter matches <a href="#category-listed" title="category-listed">listed elements</a> whose <a href="association-of-controls-and-forms.html#form-owner">form
owner</a> is the <code><a href="#the-form-element">form</a></code> element, with the exception of
<code><a href="the-input-element.html#the-input-element">input</a></code> elements whose <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, which must,
for historical reasons, be excluded from this particular
collection.</p>
<p>The <dfn id="dom-form-length" title="dom-form-length"><code>length</code></dfn> IDL
attribute must return the number of nodes <a href="common-dom-interfaces.html#represented-by-the-collection" title="represented
by the collection">represented</a> by the <code title="dom-form-elements"><a href="#dom-form-elements">elements</a></code> collection.</p>
<p>The <a href="infrastructure.html#supported-property-indices">supported property indices</a> at any instant are
the indices supported by the object returned by the <code title="dom-form-elements"><a href="#dom-form-elements">elements</a></code> attribute at that
instant.</p>
<p>When a <code><a href="#the-form-element">form</a></code> element is <dfn id="dom-form-item" title="dom-form-item">indexed for indexed property retrieval</dfn>,
the user agent must return the value returned by the <code title="dom-HTMLFormControlsCollection-item">item</code> method on
the <code title="dom-form-elements"><a href="#dom-form-elements">elements</a></code> collection, when
invoked with the given index as its argument.</p>
<p>Each <code><a href="#the-form-element">form</a></code> element has a mapping of names to elements
called the <dfn id="past-names-map">past names map</dfn>. It is used to persist names of
controls even when they change names.</p>
<p>The <a href="infrastructure.html#supported-property-names">supported property names</a> are the union of the
names currently supported by the object returned by the <code title="dom-form-elements"><a href="#dom-form-elements">elements</a></code> attribute, and the names
currently in the <a href="#past-names-map">past names map</a>.</p>
<p>When a <code><a href="#the-form-element">form</a></code> element is <dfn id="dom-form-nameditem" title="dom-form-namedItem">indexed for named property
retrieval</dfn>, the user agent must run the following steps:</p>
<ol><li>
<p>If <var title="">name</var> is one of the <a href="infrastructure.html#supported-property-names">supported
property names</a> of the object returned by the <code title="dom-form-elements"><a href="#dom-form-elements">elements</a></code> attribute, then run
these substeps:</p>
<ol><li><p>Let <var title="">candidate</var> be the object returned
by the <code title="dom-HTMLFormControlsCollection-namedItem"><a href="common-dom-interfaces.html#dom-htmlformcontrolscollection-nameditem">namedItem()</a></code>
method on the object returned by the <code title="dom-form-elements"><a href="#dom-form-elements">elements</a></code> attribute when passed
the <var title="">name</var> argument.</p></li>
<li><p>If <var title="">candidate</var> is an element, then add a
mapping from <var title="">name</var> to <var title="">candidate</var> in the <code><a href="#the-form-element">form</a></code> element's
<a href="#past-names-map">past names map</a>, replacing the previous entry with
the same name, if any.</p></li>
<li><p>Return <var title="">candidate</var> and abort these
steps.</p></li>
</ol></li>
<li><p>Otherwise, <var title="">name</var> is the name of one of
the entries in the <code><a href="#the-form-element">form</a></code> element's <a href="#past-names-map">past names
map</a>: return the object associated with <var title="">name</var> in that map.</p></li>
</ol><p>If an element listed in the <code><a href="#the-form-element">form</a></code> element's <a href="#past-names-map">past
names map</a> is removed from the <code><a href="infrastructure.html#document">Document</a></code>, then its
entries must be removed from the map.</p>
<hr><p>The <dfn id="dom-form-submit" title="dom-form-submit"><code>submit()</code></dfn>
method, when invoked, must <a href="association-of-controls-and-forms.html#concept-form-submit" title="concept-form-submit">submit</a> the <code><a href="#the-form-element">form</a></code>
element from the <code><a href="#the-form-element">form</a></code> element itself, with the <var title="">scripted-submit</var> flag set.</p>
<p>The <dfn id="dom-form-reset" title="dom-form-reset"><code>reset()</code></dfn>
method, when invoked, must run the following steps:</p>
<ol><li><p>If the <code><a href="#the-form-element">form</a></code> element is marked as <i><a href="#locked-for-reset">locked for
reset</a></i>, then abort these steps.</p></li>
<li><p>Mark the <code><a href="#the-form-element">form</a></code> element as <dfn id="locked-for-reset">locked for
reset</dfn>.</p></li>
<li><p><a href="association-of-controls-and-forms.html#concept-form-reset" title="concept-form-reset">Reset</a> the
<code><a href="#the-form-element">form</a></code> element.</p></li>
<li><p>Unmark the <code><a href="#the-form-element">form</a></code> element as <i><a href="#locked-for-reset">locked for
reset</a></i>.</p></li>
</ol><p>If the <dfn id="dom-form-checkvalidity" title="dom-form-checkValidity"><code>checkValidity()</code></dfn>
method is invoked, the user agent must <a href="association-of-controls-and-forms.html#statically-validate-the-constraints">statically validate the
constraints</a> of the <code><a href="#the-form-element">form</a></code> element, and return true
if the constraint validation return a <i>positive</i> result, and
false if it returned a <i>negative</i> result.</p>
</div><div class="example">
<p>This example shows two search forms:</p>
<pre><form action="http://www.google.com/search" method="get">
<label>Google: <input type="search" name="q"></label> <input type="submit" value="Search...">
</form>
<form action="http://www.bing.com/search" method="get">
<label>Bing: <input type="search" name="q"></label> <input type="submit" value="Search...">
</form></pre>
</div><h4 id="the-fieldset-element"><span class="secno">4.10.4 </span>The <dfn><code>fieldset</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
<dd><a href="sections.html#sectioning-root">Sectioning root</a>.</dd>
<dd><a href="#category-listed" title="category-listed">Listed</a> <a href="#form-associated-element">form-associated element</a>.</dd>
<dt>Contexts in which this element can be used:</dt>
<dd>Where <a href="content-models.html#flow-content">flow content</a> is expected.</dd>
<dt>Content model:</dt>
<dd>Optionally a <code><a href="#the-legend-element">legend</a></code> element, followed by <a href="content-models.html#flow-content">flow content</a>.</dd>
<dt>Content attributes:</dt>
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
<dd><code title="attr-fieldset-disabled"><a href="#attr-fieldset-disabled">disabled</a></code></dd>
<dd><code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code></dd>
<dd><code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code></dd>
<dt>DOM interface:</dt>
<dd>
<pre class="idl">interface <dfn id="htmlfieldsetelement">HTMLFieldSetElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
attribute boolean <a href="#dom-fieldset-disabled" title="dom-fieldset-disabled">disabled</a>;
readonly attribute <a href="#htmlformelement">HTMLFormElement</a> <a href="association-of-controls-and-forms.html#dom-fae-form" title="dom-fae-form">form</a>;
attribute DOMString <a href="association-of-controls-and-forms.html#dom-fe-name" title="dom-fe-name">name</a>;
readonly attribute DOMString <a href="#dom-fieldset-type" title="dom-fieldset-type">type</a>;
readonly attribute <a href="common-dom-interfaces.html#htmlformcontrolscollection">HTMLFormControlsCollection</a> <a href="#dom-fieldset-elements" title="dom-fieldset-elements">elements</a>;
readonly attribute boolean <a href="association-of-controls-and-forms.html#dom-cva-willvalidate" title="dom-cva-willValidate">willValidate</a>;
readonly attribute <a href="association-of-controls-and-forms.html#validitystate">ValidityState</a> <a href="association-of-controls-and-forms.html#dom-cva-validity" title="dom-cva-validity">validity</a>;
readonly attribute DOMString <a href="association-of-controls-and-forms.html#dom-cva-validationmessage" title="dom-cva-validationMessage">validationMessage</a>;
boolean <a href="association-of-controls-and-forms.html#dom-cva-checkvalidatity" title="dom-cva-checkValidatity">checkValidity</a>();
void <a href="association-of-controls-and-forms.html#dom-cva-setcustomvalidity" title="dom-cva-setCustomValidity">setCustomValidity</a>(in DOMString error);
};</pre>
</dd>
</dl><p>The <code><a href="#the-fieldset-element">fieldset</a></code> element <a href="rendering.html#represents">represents</a> a set
of form controls optionally grouped under a common name.</p><p>The name of the group is given by the first <code><a href="#the-legend-element">legend</a></code>
element that is a child of the <code><a href="#the-fieldset-element">fieldset</a></code> element, if
any. The remainder of the descendants form the group.</p><p>The <dfn id="attr-fieldset-disabled" title="attr-fieldset-disabled"><code>disabled</code></dfn>
attribute, when specified, causes all the form control descendants
of the <code><a href="#the-fieldset-element">fieldset</a></code> element, excluding those that are
descendants of the <code><a href="#the-fieldset-element">fieldset</a></code> element's first
<code><a href="#the-legend-element">legend</a></code> element child, if any, to be <a href="association-of-controls-and-forms.html#concept-fe-disabled" title="concept-fe-disabled">disabled</a>.</p><p>The <code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code> attribute is used to
explicitly associate the <code><a href="#the-fieldset-element">fieldset</a></code> element with its
<a href="association-of-controls-and-forms.html#form-owner">form owner</a>. The <code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code>
attribute represents the element's name.</p><dl class="domintro"><dt><var title="">fieldset</var> . <code title="dom-fieldset-type"><a href="#dom-fieldset-type">type</a></code></dt>
<dd>
<p>Returns the string "fieldset".</p>
</dd>
<dt><var title="">fieldset</var> . <code title="dom-form-elements"><a href="#dom-form-elements">elements</a></code></dt>
<dd>
<p>Returns an <code><a href="common-dom-interfaces.html#htmlformcontrolscollection">HTMLFormControlsCollection</a></code> of the form
controls in the element.</p>
</dd>
</dl><div class="impl">
<p>The <dfn id="dom-fieldset-disabled" title="dom-fieldset-disabled"><code>disabled</code></dfn> IDL
attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the
same name.</p>
<p>The <dfn id="dom-fieldset-type" title="dom-fieldset-type"><code>type</code></dfn> IDL
attribute must return the string "<code title="">fieldset</code>".</p>
<p>The <dfn id="dom-fieldset-elements" title="dom-fieldset-elements"><code>elements</code></dfn> IDL
attribute must return an <code><a href="common-dom-interfaces.html#htmlformcontrolscollection">HTMLFormControlsCollection</a></code>
rooted at the <code><a href="#the-fieldset-element">fieldset</a></code> element, whose filter matches
<a href="#category-listed" title="category-listed">listed elements</a>.</p>
<p>The <code title="dom-cva-willValidate"><a href="association-of-controls-and-forms.html#dom-cva-willvalidate">willValidate</a></code>, <code title="dom-cva-validity"><a href="association-of-controls-and-forms.html#dom-cva-validity">validity</a></code>, and <code title="dom-cva-validationMessage"><a href="association-of-controls-and-forms.html#dom-cva-validationmessage">validationMessage</a></code>
attributes, and the <code title="dom-cva-checkValidatity"><a href="association-of-controls-and-forms.html#dom-cva-checkvalidatity">checkValidity()</a></code> and <code title="dom-cva-setCustomValidity"><a href="association-of-controls-and-forms.html#dom-cva-setcustomvalidity">setCustomValidity()</a></code>
methods, are part of the <a href="association-of-controls-and-forms.html#the-constraint-validation-api">constraint validation API</a>. The
<code title="dom-fae-form"><a href="association-of-controls-and-forms.html#dom-fae-form">form</a></code> and <code title="dom-fe-name"><a href="association-of-controls-and-forms.html#dom-fe-name">name</a></code> IDL attributes are part of the
element's forms API.</p>
<p><strong>Constraint validation</strong>: <code><a href="#the-fieldset-element">fieldset</a></code>
elements are always <a href="association-of-controls-and-forms.html#barred-from-constraint-validation">barred from constraint
validation</a>.</p>
</div><div class="example">
<p>The following snippet shows a fieldset with a checkbox in the
legend that controls whether or not the fieldset is enabled. The
contents of the fieldset consist of two required text fields and an
optional year/month control.</p>
<pre><fieldset name="clubfields" disabled>
<legend> <label>
<input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
Use Club Card
</label> </legend>
<p><label>Name on card: <input name=clubname required></label></p>
<p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p>
<p><label>Expiry date: <input name=clubexp type=month></label></p>
</fieldset></pre>
</div><div class="example">
<p>You can also nest <code><a href="#the-fieldset-element">fieldset</a></code> elements. Here is an
example expanding on the previous one that does so:</p>
<pre><fieldset name="clubfields" disabled>
<legend> <label>
<input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
Use Club Card
</label> </legend>
<p><label>Name on card: <input name=clubname required></label></p>
<fieldset name="numfields">
<legend> <label>
<input type=radio checked name=clubtype onchange="form.numfields.disabled = !checked">
My card has numbers on it
</label> </legend>
<p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p>
</fieldset>
<fieldset name="letfields" disabled>
<legend> <label>
<input type=radio name=clubtype onchange="form.letfields.disabled = !checked">
My card has letters on it
</label> </legend>
<p><label>Card code: <input name=clublet required pattern="[A-Za-z]+"></label></p>
</fieldset>
</fieldset></pre>
<p>In this example, if the outer "Use Club Card" checkbox is not
checked, everything inside the outer <code><a href="#the-fieldset-element">fieldset</a></code>,
including the two radio buttons in the legends of the two nested
<code><a href="#the-fieldset-element">fieldset</a></code>s, will be disabled. However, if the checkbox
is checked, then the radio buttons will both be enabled and will
let you select which of the two inner <code><a href="#the-fieldset-element">fieldset</a></code>s is to
be enabled.</p>
</div><h4 id="the-legend-element"><span class="secno">4.10.5 </span>The <dfn><code>legend</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
<dd>None.</dd>
<dt>Contexts in which this element can be used:</dt>
<dd>As the first child of a <code><a href="#the-fieldset-element">fieldset</a></code> element.</dd>
<dt>Content model:</dt>
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
<dt>Content attributes:</dt>
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
<dt>DOM interface:</dt>
<dd>
<pre class="idl">interface <dfn id="htmllegendelement">HTMLLegendElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
readonly attribute <a href="#htmlformelement">HTMLFormElement</a> <a href="#dom-legend-form" title="dom-legend-form">form</a>;
};</pre>
</dd>
</dl><p>The <code><a href="#the-legend-element">legend</a></code> element <a href="rendering.html#represents">represents</a> a caption
for the rest of the contents of the <code><a href="#the-legend-element">legend</a></code> element's
parent <code><a href="#the-fieldset-element">fieldset</a></code> element<span class="impl">, if
any</span>.</p><dl class="domintro"><dt><var title="">legend</var> . <code title="dom-legend-form"><a href="#dom-legend-form">form</a></code></dt>
<dd>
<p>Returns the element's <code><a href="#the-form-element">form</a></code> element, if any, or
null otherwise.</p>
</dd>
</dl><div class="impl">
<p>The <dfn id="dom-legend-form" title="dom-legend-form"><code>form</code></dfn> IDL
attribute's behavior depends on whether the <code><a href="#the-legend-element">legend</a></code>
element is in a <code><a href="#the-fieldset-element">fieldset</a></code> element or not. If the
<code><a href="#the-legend-element">legend</a></code> has a <code><a href="#the-fieldset-element">fieldset</a></code> element as its
parent, then the <code title="dom-legend-form"><a href="#dom-legend-form">form</a></code> IDL
attribute must return the same value as the <code title="dom-fae-form"><a href="association-of-controls-and-forms.html#dom-fae-form">form</a></code> IDL attribute on that
<code><a href="#the-fieldset-element">fieldset</a></code> element. Otherwise, it must return null.</p>
</div><h4 id="the-label-element"><span class="secno">4.10.6 </span>The <dfn><code>label</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
<dd><a href="content-models.html#interactive-content">Interactive content</a>.</dd>
<dd><a href="#form-associated-element">Form-associated element</a>.</dd>
<dt>Contexts in which this element can be used:</dt>
<dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
<dt>Content model:</dt>
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>, but with no descendant <a href="#category-label" title="category-label">labelable form-associated elements</a> unless it is the element's <a href="#labeled-control">labeled control</a>, and no descendant <code><a href="#the-label-element">label</a></code> elements.</dd>
<dt>Content attributes:</dt>
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
<dd><code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code></dd>
<dd><code title="attr-label-for"><a href="#attr-label-for">for</a></code></dd>
<dt>DOM interface:</dt>
<dd>
<pre class="idl">interface <dfn id="htmllabelelement">HTMLLabelElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
readonly attribute <a href="#htmlformelement">HTMLFormElement</a> <a href="association-of-controls-and-forms.html#dom-fae-form" title="dom-fae-form">form</a>;
attribute DOMString <a href="#dom-label-htmlfor" title="dom-label-htmlFor">htmlFor</a>;
readonly attribute <a href="elements.html#htmlelement">HTMLElement</a> <a href="#dom-label-control" title="dom-label-control">control</a>;
};</pre>
</dd>
</dl><p>The <code><a href="#the-label-element">label</a></code> <a href="rendering.html#represents">represents</a> a caption in a
user interface. The caption can be associated with a specific form
control<span class="impl">, known as the <code><a href="#the-label-element">label</a></code>
element's <dfn id="labeled-control">labeled control</dfn></span>, either using <code title="attr-label-for"><a href="#attr-label-for">for</a></code> attribute, or by putting the form
control inside the <code><a href="#the-label-element">label</a></code> element itself.</p><div class="impl">
<p>Except where otherwise specified by the following rules, a
<code><a href="#the-label-element">label</a></code> element has no <a href="#labeled-control">labeled control</a>.</p>
</div><p>The <dfn id="attr-label-for" title="attr-label-for"><code>for</code></dfn> attribute
may be specified to indicate a form control with which the caption
is to be associated. If the attribute is specified, the attribute's
value must be the <a href="elements.html#concept-id" title="concept-id">ID</a> of a <a href="#category-label" title="category-label">labelable
form-associated element</a> in the same <code><a href="infrastructure.html#document">Document</a></code> as
the <code><a href="#the-label-element">label</a></code> element. <span class="impl">If the attribute
is specified and there is an element in the <code><a href="infrastructure.html#document">Document</a></code>
whose <a href="elements.html#concept-id" title="concept-id">ID</a> is equal to the value of the <code title="attr-label-for"><a href="#attr-label-for">for</a></code> attribute, and the first such
element is a <a href="#category-label" title="category-label">labelable form-associated
element</a>, then that element is the <code><a href="#the-label-element">label</a></code>
element's <a href="#labeled-control">labeled control</a>.</span></p><div class="impl">
<p>If the <code title="attr-label-for"><a href="#attr-label-for">for</a></code> attribute is not
specified, but the <code><a href="#the-label-element">label</a></code> element has a <a href="#category-label" title="category-label">labelable form-associated element</a>
descendant, then the first such descendant in <a href="infrastructure.html#tree-order">tree
order</a> is the <code><a href="#the-label-element">label</a></code> element's <a href="#labeled-control">labeled
control</a>.</p>
<p>The <code><a href="#the-label-element">label</a></code> element's exact default presentation and
behavior, in particular what its <a href="content-models.html#activation-behavior">activation behavior</a>
might be, if anything, should match the platform's label
behavior.</p>
<div class="example">
<p>For example, on platforms where clicking a checkbox label checks
the checkbox, clicking the <code><a href="#the-label-element">label</a></code> in the following
snippet could trigger the user agent to <a href="content-models.html#run-synthetic-click-activation-steps">run synthetic click
activation steps</a> on the <code><a href="the-input-element.html#the-input-element">input</a></code> element, as if
the element itself had been triggered by the user:</p>
<pre><label><input type=checkbox name=lost> Lost</label></pre>
<p>On other platforms, the behavior might be just to focus the
control, or do nothing.</p>
</div>
</div><dl class="domintro"><dt><var title="">label</var> . <code title="dom-label-control"><a href="#dom-label-control">control</a></code></dt>
<dd>
<p>Returns the form control that is associated with this element.</p>
</dd>
</dl><p>The <code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code> attribute is used to
explicitly associate the <code><a href="#the-label-element">label</a></code> element with its
<a href="association-of-controls-and-forms.html#form-owner">form owner</a>.</p><div class="impl">
<p>The <dfn id="dom-label-htmlfor" title="dom-label-htmlFor"><code>htmlFor</code></dfn> IDL
attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-label-for"><a href="#attr-label-for">for</a></code> content attribute.</p>
<p>The <dfn id="dom-label-control" title="dom-label-control"><code>control</code></dfn> IDL
attribute must return the <code><a href="#the-label-element">label</a></code> element's <a href="#labeled-control">labeled
control</a>, if any, or null if there isn't one.</p>
</div><hr><dl class="domintro"><dt><var title="">control</var> . <code title="dom-lfe-labels"><a href="#dom-lfe-labels">labels</a></code></dt>
<dd>
<p>Returns a <code><a href="infrastructure.html#nodelist">NodeList</a></code> of all the <code><a href="#the-label-element">label</a></code>
elements that the form control is associated with.</p>
</dd>
</dl><div class="impl">
<p><a href="#category-label" title="category-label">Labelable form-associated
elements</a> have a <code><a href="infrastructure.html#nodelist">NodeList</a></code> object associated with
them that represents the list of <code><a href="#the-label-element">label</a></code> elements, in
<a href="infrastructure.html#tree-order">tree order</a>, whose <a href="#labeled-control">labeled control</a> is the
element in question. The <dfn id="dom-lfe-labels" title="dom-lfe-labels"><code>labels</code></dfn> IDL attribute of
<a href="#category-label" title="category-label">labelable form-associated
elements</a>, on getting, must return that <code><a href="infrastructure.html#nodelist">NodeList</a></code>
object.</p>
<p>The <code title="dom-fae-form"><a href="association-of-controls-and-forms.html#dom-fae-form">form</a></code> IDL attribute is part
of the element's forms API.</p>
</div><div class="example">
<p>The following example shows three form controls each with a
label, two of which have small text showing the right format for
users to use.</p>
<pre><p><label>Full name: <input name=fn> <small>Format: First Last</small></label></p>
<p><label>Age: <input name=age type=number min=0></label></p>
<p><label>Post code: <input name=pc> <small>Format: AB12 3CD</small></label></p></pre>
</div></body></html>