discontinued / server · Files

common-input-element-attributes.html 94.2 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 1299 1300 1301 1302 1303 1304 1305 1306 1307 1308 1309 1310 1311 1312 1313 1314 1315 1316 1317 1318 1319 1320 1321 1322 1323 1324 1325 1326 1327 1328 1329 1330 1331 1332 1333 1334 1335 1336 1337 1338 1339 1340 1341 1342 1343 1344 1345 1346 1347 1348 1349 1350 1351 1352 1353 1354 1355 1356 1357 1358 1359 1360 1361 1362 1363 1364 1365 1366 1367 1368 1369 1370 1371 1372 1373 1374 1375 1376 1377 1378 1379 1380 
<!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.7.2 Common input element attributes &#8212; 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="number-state.html" title="4.10.7.1.13 Number state" rel="prev">
  <link href="spec.html#contents" title="Table of contents" rel="index">
  <link href="the-button-element.html" title="4.10.8 The button 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="&#9587;&#8413;"></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="number-state.html" class="prev">4.10.7.1.13 Number state</a> &#8211;
   <a href="spec.html#contents">Table of contents</a> &#8211;
   <a href="the-button-element.html" class="next">4.10.8 The button element</a>
  <ol class="toc"><li><ol><li><ol><li><ol><li><a href="common-input-element-attributes.html#common-input-element-attributes"><span class="secno">4.10.7.2 </span>Common <code>input</code> element attributes</a>
        <ol><li><a href="common-input-element-attributes.html#the-autocomplete-attribute"><span class="secno">4.10.7.2.1 </span>The <code title="attr-input-autocomplete">autocomplete</code> attribute</a></li><li><a href="common-input-element-attributes.html#the-dirname-attribute"><span class="secno">4.10.7.2.2 </span>The <code title="attr-input-dirname">dirname</code> attribute</a></li><li><a href="common-input-element-attributes.html#the-list-attribute"><span class="secno">4.10.7.2.3 </span>The <code title="attr-input-list">list</code> attribute</a></li><li><a href="common-input-element-attributes.html#the-readonly-attribute"><span class="secno">4.10.7.2.4 </span>The <code title="attr-input-readonly">readonly</code> attribute</a></li><li><a href="common-input-element-attributes.html#the-size-attribute"><span class="secno">4.10.7.2.5 </span>The <code title="attr-input-size">size</code> attribute</a></li><li><a href="common-input-element-attributes.html#the-required-attribute"><span class="secno">4.10.7.2.6 </span>The <code title="attr-input-required">required</code> attribute</a></li><li><a href="common-input-element-attributes.html#the-multiple-attribute"><span class="secno">4.10.7.2.7 </span>The <code title="attr-input-multiple">multiple</code> attribute</a></li><li><a href="common-input-element-attributes.html#the-maxlength-attribute"><span class="secno">4.10.7.2.8 </span>The <code title="attr-input-maxlength">maxlength</code> attribute</a></li><li><a href="common-input-element-attributes.html#the-pattern-attribute"><span class="secno">4.10.7.2.9 </span>The <code title="attr-input-pattern">pattern</code> attribute</a></li><li><a href="common-input-element-attributes.html#the-min-and-max-attributes"><span class="secno">4.10.7.2.10 </span>The <code title="attr-input-min">min</code> and <code title="attr-input-max">max</code> attributes</a></li><li><a href="common-input-element-attributes.html#the-step-attribute"><span class="secno">4.10.7.2.11 </span>The <code title="attr-input-step">step</code> attribute</a></li><li><a href="common-input-element-attributes.html#the-placeholder-attribute"><span class="secno">4.10.7.2.12 </span>The <code title="attr-input-placeholder">placeholder</code> attribute</a></li></ol></li><li><a href="common-input-element-attributes.html#common-input-element-apis"><span class="secno">4.10.7.3 </span>Common <code>input</code> element APIs</a></li><li><a href="common-input-element-attributes.html#common-event-behaviors"><span class="secno">4.10.7.4 </span>Common event behaviors</a></li></ol></li></ol></li></ol></li></ol></div>

  <h5 id="common-input-element-attributes"><span class="secno">4.10.7.2 </span>Common <code><a href="the-input-element.html#the-input-element">input</a></code> element attributes</h5><div class="impl">

  <p>These attributes only apply to an <code><a href="the-input-element.html#the-input-element">input</a></code> element if
  its <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in a
  state whose definition declares that the attribute applies. When an
  attribute doesn't apply to an <code><a href="the-input-element.html#the-input-element">input</a></code> element, user
  agents must <a href="infrastructure.html#ignore">ignore</a> the attribute, regardless of the
  requirements and definitions below.</p>

  </div><h6 id="the-autocomplete-attribute"><span class="secno">4.10.7.2.1 </span>The <code title="attr-input-autocomplete"><a href="#attr-input-autocomplete">autocomplete</a></code> attribute</h6><p>User agents sometimes have features for helping users fill forms
  in, for example prefilling the user's address based on earlier user
  input.</p><p>The <dfn id="attr-input-autocomplete" title="attr-input-autocomplete"><code>autocomplete</code></dfn>
  attribute is an <a href="common-microsyntaxes.html#enumerated-attribute">enumerated attribute</a>. The attribute has
  three states. The <code title="attr-input-autocomplete-on">on</code>
  keyword maps to the <dfn id="attr-input-autocomplete-on-state" title="attr-input-autocomplete-on-state">on</dfn> state, and the
  <code title="attr-input-autocomplete-off">off</code> keyword maps to
  the <dfn id="attr-input-autocomplete-off-state" title="attr-input-autocomplete-off-state">off</dfn>
  state. The attribute may also be omitted. The <i>missing value
  default</i> is the <dfn id="attr-input-autocomplete-default-state" title="attr-input-autocomplete-default-state">default</dfn>
  state.</p><p>The <a href="#attr-input-autocomplete-off-state" title="attr-input-autocomplete-off-state">off</a>
  state indicates either that the control's input data is particularly
  sensitive (for example the activation code for a nuclear weapon); or
  that it is a value that will never be reused (for example a
  one-time-key for a bank login) and the user will therefore have to
  explicitly enter the data each time, instead of being able to rely
  on the UA to prefill the value for him; or that the document
  provides its own autocomplete mechanism and does not want the user
  agent to provide autocompletion values.</p><p>Conversely, the <a href="#attr-input-autocomplete-on-state" title="attr-input-autocomplete-on-state">on</a> state indicates
  that the value is not particularly sensitive and the user can expect
  to be able to rely on his user agent to remember values he has
  entered for that control.</p><p>The <a href="#attr-input-autocomplete-default-state" title="attr-input-autocomplete-default-state">default</a> state
  indicates that the user agent is to use the <code title="attr-form-autocomplete"><a href="forms.html#attr-form-autocomplete">autocomplete</a></code> attribute on the
  element's <a href="association-of-controls-and-forms.html#form-owner">form owner</a> instead. (By default, the <code title="attr-form-autocomplete"><a href="forms.html#attr-form-autocomplete">autocomplete</a></code> attribute of
  <code><a href="forms.html#the-form-element">form</a></code> elements is in the <a href="forms.html#attr-form-autocomplete-on-state" title="attr-form-autocomplete-on-state">on</a> state.)</p><div class="impl">

  <p>Each <code><a href="the-input-element.html#the-input-element">input</a></code> element has a <dfn id="resulting-autocompletion-state">resulting
  autocompletion state</dfn>, which is either <i title="">on</i> or <i title="">off</i>.</p>

  <p>When an <code><a href="the-input-element.html#the-input-element">input</a></code> element is in one of the following
  conditions, the <code><a href="the-input-element.html#the-input-element">input</a></code> element's <a href="#resulting-autocompletion-state">resulting
  autocompletion state</a> is <i title="">on</i>; otherwise, the
  <code><a href="the-input-element.html#the-input-element">input</a></code> element's <a href="#resulting-autocompletion-state">resulting autocompletion
  state</a> is <i title="">off</i>:</p>

  <ul class="brief"><li>Its <code title="attr-input-autocomplete"><a href="#attr-input-autocomplete">autocomplete</a></code>
   attribute is in the <a href="#attr-input-autocomplete-on-state" title="attr-input-autocomplete-on-state">on</a> state.</li>

   <li>Its <code title="attr-input-autocomplete"><a href="#attr-input-autocomplete">autocomplete</a></code>
   attribute is in the <a href="#attr-input-autocomplete-default-state" title="attr-input-autocomplete-default-state">default</a> state,
   and the element has no <a href="association-of-controls-and-forms.html#form-owner">form owner</a>.</li>

   <li>Its <code title="attr-input-autocomplete"><a href="#attr-input-autocomplete">autocomplete</a></code>
   attribute is in the <a href="#attr-input-autocomplete-default-state" title="attr-input-autocomplete-default-state">default</a> state,
   and the element's <a href="association-of-controls-and-forms.html#form-owner">form owner</a>'s <code title="attr-form-autocomplete"><a href="forms.html#attr-form-autocomplete">autocomplete</a></code> attribute is in
   the <a href="forms.html#attr-form-autocomplete-on-state" title="attr-form-autocomplete-on-state">on</a>
   state.</li>

  </ul><p>When an <code><a href="the-input-element.html#the-input-element">input</a></code> element's <a href="#resulting-autocompletion-state">resulting
  autocompletion state</a> is <i title="">on</i>, the user agent
  may store the value entered by the user so that if the user returns
  to the page, the UA can prefill the form. Otherwise, the user agent
  should not remember the control's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>, and should not offer past
  values to the user.</p>

  <p>In addition, if the <a href="#resulting-autocompletion-state">resulting autocompletion state</a>
  is <i title="">off</i>, <a href="history.html#history-autocomplete">values are
  reset</a> when <a href="history.html#traverse-the-history" title="traverse the history">traversing the
  history</a>.</p>

  <p>The autocompletion mechanism must be implemented by the user
  agent acting as if the user had modified the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>, and must be done at a time
  where the element is <i title="concept-input-mutable"><a href="the-input-element.html#concept-input-mutable">mutable</a></i>
  (e.g. just after the element has been inserted into the document, or
  when the user agent <a href="the-end.html#stop-parsing" title="stop parsing">stops
  parsing</a>).</p>

  </div><div class="example">

   <p>Banks frequently do not want UAs to prefill login
   information:</p>

   <pre>&lt;p&gt;&lt;label&gt;Account: &lt;input type="text" name="ac" autocomplete="off"&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;PIN: &lt;input type="password" name="pin" autocomplete="off"&gt;&lt;/label&gt;&lt;/p&gt;</pre>

  </div><div class="impl">

  <p>A user agent may allow the user to override the <a href="#resulting-autocompletion-state">resulting
  autocompletion state</a> and set it to always <i title="">on</i>,
  always allowing values to be remembered and prefilled), or always <i title="">off</i>, never remembering values. However, the ability to
  override the <a href="#resulting-autocompletion-state">resulting autocompletion state</a> to <i title="">on</i> should not be trivially accessible, as there are
  significant security implications for the user if all values are
  always remembered, regardless of the site's preferences.</p>

  </div><h6 id="the-dirname-attribute"><span class="secno">4.10.7.2.2 </span>The <code title="attr-input-dirname"><a href="#attr-input-dirname">dirname</a></code> attribute</h6><p>The <dfn id="attr-input-dirname" title="attr-input-dirname"><code>dirname</code></dfn>
  attribute, when it applies, is a <a href="association-of-controls-and-forms.html#form-control-dirname-attribute">form control <code title="">dirname</code> attribute</a>.</p><div class="example">

   <p>In this example, a form contains a text field and a submission
   button:</p>

   <pre>&lt;form action="addcomment.cgi" method=post&gt;
 &lt;p&gt;&lt;label&gt;Comment: &lt;input type=text name="comment" dirname="comment.dir" required&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;button name="mode" type=submit value="add"&gt;Post Comment&lt;/button&gt;&lt;/p&gt;
&lt;/form&gt;</pre>

   <p>When the user submits the form, the user agent includes three
   fields, one called "comment", one called "comment.dir", and one
   called "mode"; so if the user types "Hello", the submission body
   might be something like:</p>

   <pre>comment=Hello&amp;<strong>comment.dir=ltr</strong>&amp;mode=add</pre>

   <p>If the user manually switches to a right-to-left writing
   direction and enters "<span dir="rtl" lang="ar" title="">&#1605;&#1585;&#1581;&#1576;&#1611;&#1575;</span>", the
   submission body might be something like:</p>

   <pre>comment=%D9%85%D8%B1%D8%AD%D8%A8%D9%8B%D8%A7&amp;<strong>comment.dir=rtl</strong>&amp;mode=add</pre>

  </div><h6 id="the-list-attribute"><span class="secno">4.10.7.2.3 </span>The <code title="attr-input-list"><a href="#attr-input-list">list</a></code> attribute</h6><p>The <dfn id="attr-input-list" title="attr-input-list"><code>list</code></dfn>
  attribute is used to identify an element that lists predefined
  options suggested to the user.</p><p>If present, its value must be the <a href="elements.html#concept-id" title="concept-id">ID</a> of a <code><a href="the-button-element.html#the-datalist-element">datalist</a></code> element in
  the same document.</p><div class="impl">

  <p>The <dfn id="concept-input-list" title="concept-input-list">suggestions source
  element</dfn> is the first element in the document in <a href="infrastructure.html#tree-order">tree
  order</a> to have an <a href="elements.html#concept-id" title="concept-id">ID</a> equal to
  the value of the <code title="attr-input-list"><a href="#attr-input-list">list</a></code>
  attribute, if that element is a <code><a href="the-button-element.html#the-datalist-element">datalist</a></code> element. If
  there is no <code title="attr-input-list"><a href="#attr-input-list">list</a></code> attribute, or
  if there is no element with that <a href="elements.html#concept-id" title="concept-id">ID</a>,
  or if the first element with that <a href="elements.html#concept-id" title="concept-id">ID</a>
  is not a <code><a href="the-button-element.html#the-datalist-element">datalist</a></code> element, then there is no <a href="#concept-input-list" title="concept-input-list">suggestions source element</a>.</p>

  <p>If there is a <a href="#concept-input-list" title="concept-input-list">suggestions source
  element</a>, then, when the user agent is allowing the user to
  edit the <code><a href="the-input-element.html#the-input-element">input</a></code> element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>, the user agent should offer
  the suggestions represented by the <a href="#concept-input-list" title="concept-input-list">suggestions source element</a> to the
  user in a manner suitable for the type of control used. The user
  agent may use the suggestion's <a href="the-button-element.html#concept-option-label" title="concept-option-label">label</a> to identify the suggestion
  if appropriate.</p>

  <p>How user selections of suggestions are handled depends on whether
  the element is a control accepting a single value only, or whether
  it accepts multiple values:</p>

  <dl class="switch"><dt>If the element does not have a <code title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code> attribute specified or
   if the <code title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code> attribute
   does not apply</dt>

   <dd>

    <p>When the user selects a suggestion, the <code><a href="the-input-element.html#the-input-element">input</a></code>
    element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> must be set
    to the selected suggestion's <a href="the-button-element.html#concept-option-value" title="concept-option-value">value</a>, as if the user had
    written that value himself.</p>

   </dd>

   <dt>If the element <em>does</em> have a <code title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code> attribute specified,
   and the <code title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code> attribute
   does apply</dt>

   <dd>

    <p>When the user selects a suggestion, the user agent must either
    add a new entry to the <code><a href="the-input-element.html#the-input-element">input</a></code> element's <a href="association-of-controls-and-forms.html#concept-fe-values" title="concept-fe-values">value<em>s</em></a>, whose value is
    the selected suggestion's <a href="the-button-element.html#concept-option-value" title="concept-option-value">value</a>, or change an existing
    entry in the <code><a href="the-input-element.html#the-input-element">input</a></code> element's <a href="association-of-controls-and-forms.html#concept-fe-values" title="concept-fe-values">value<em>s</em></a> to have the value
    given by the selected suggestion's <a href="the-button-element.html#concept-option-value" title="concept-option-value">value</a>, as if the user had
    himself added an entry with that value, or edited an existing
    entry to be that value. Which behavior is to be applied depends on
    the user interface in a user-agent-defined manner.</p>

   </dd>

  </dl><hr><p>If the <code title="attr-input-list"><a href="#attr-input-list">list</a></code> attribute does
  not apply, there is no <a href="#concept-input-list" title="concept-input-list">suggestions
  source element</a>.</p>

  </div><div class="example">

   <p>This URL field offers some suggestions.</p>

   <pre>&lt;label&gt;Homepage: &lt;input name=hp type=url list=hpurls&gt;&lt;/label&gt;
&lt;datalist id=hpurls&gt;
 &lt;option value="http://www.google.com/" label="Google"&gt;
 &lt;option value="http://www.reddit.com/" label="Reddit"&gt;
&lt;/datalist&gt;</pre>

   <p>Other URLs from the user's history might show also; this is up
   to the user agent.</p>

  </div><div class="example">

   <p>This example demonstrates how to design a form that uses the
   autocompletion list feature while still degrading usefully in
   legacy user agents.</p>

   <p>If the autocompletion list is merely an aid, and is not
   important to the content, then simply using a <code><a href="the-button-element.html#the-datalist-element">datalist</a></code>
   element with children <code><a href="the-button-element.html#the-option-element">option</a></code> elements is enough. To
   prevent the values from being rendered in legacy user agents, they
   should be placed inside the <code title="attr-option-value"><a href="the-button-element.html#attr-option-value">value</a></code> attribute instead of
   inline.</p>

   <pre>&lt;p&gt;
 &lt;label&gt;
  Enter a breed:
  &lt;input type="text" name="breed" list="breeds"&gt;
  &lt;datalist id="breeds"&gt;
   &lt;option value="Abyssinian"&gt;
   &lt;option value="Alpaca"&gt;
   &lt;!-- ... --&gt;
  &lt;/datalist&gt;
 &lt;/label&gt;
&lt;/p&gt;</pre>

   <p>However, if the values need to be shown in legacy UAs, then
   fallback content can be placed inside the <code><a href="the-button-element.html#the-datalist-element">datalist</a></code>
   element, as follows:</p>

   <pre>&lt;p&gt;
 &lt;label&gt;
  Enter a breed:
  &lt;input type="text" name="breed" list="breeds"&gt;
 &lt;/label&gt;
 &lt;datalist id="breeds"&gt;
  &lt;label&gt;
   or select one from the list:
   &lt;select name="breed"&gt;
    &lt;option value=""&gt; (none selected)
    &lt;option&gt;Abyssinian
    &lt;option&gt;Alpaca
    &lt;!-- ... --&gt;
   &lt;/select&gt;
  &lt;/label&gt;
 &lt;/datalist&gt;
&lt;/p&gt;
</pre>

   <p>The fallback content will only be shown in UAs that don't
   support <code><a href="the-button-element.html#the-datalist-element">datalist</a></code>. The options, on the other hand, will
   be detected by all UAs, even though they are not direct children of
   the <code><a href="the-button-element.html#the-datalist-element">datalist</a></code> element.</p>

   <p>Note that if an <code><a href="the-button-element.html#the-option-element">option</a></code> element used in a
   <code><a href="the-button-element.html#the-datalist-element">datalist</a></code> is <code title="attr-option-selected"><a href="the-button-element.html#attr-option-selected">selected</a></code>, it will be selected
   by default by legacy UAs (because it affects the
   <code><a href="the-button-element.html#the-select-element">select</a></code>), but it will not have any effect on the
   <code><a href="the-input-element.html#the-input-element">input</a></code> element in UAs that support
   <code><a href="the-button-element.html#the-datalist-element">datalist</a></code>.</p>

  </div><h6 id="the-readonly-attribute"><span class="secno">4.10.7.2.4 </span>The <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code> attribute</h6><p>The <dfn id="attr-input-readonly" title="attr-input-readonly"><code>readonly</code></dfn>
  attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a> that controls whether
  or not the user can edit the form control. <span class="impl">When
  specified, the element is <i title="concept-input-immutable"><a href="the-input-element.html#concept-input-immutable">immutable</a></i>.</span></p><div class="impl">

  <p><strong>Constraint validation</strong>: If the <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code> attribute is specified
  on an <code><a href="the-input-element.html#the-input-element">input</a></code> element, the element is <a href="association-of-controls-and-forms.html#barred-from-constraint-validation">barred from
  constraint validation</a>.</p>

  </div><div class="example">

   <p>In the following example, the existing product identifiers
   cannot be modified, but they are still displayed as part of the
   form, for consistency with the row representing a new product
   (where the identifier is not yet filled in).</p>

   <pre>&lt;form action="products.cgi" method=post enctype="multipart/form-data"&gt;
 &lt;table&gt;
  &lt;tr&gt; &lt;th&gt; Product ID &lt;th&gt; Product name &lt;th&gt; Price &lt;th&gt; Action
  &lt;tr&gt;
   &lt;td&gt; &lt;input readonly name="1.pid" value="H412"&gt;
   &lt;td&gt; &lt;input required name="1.pname" value="Floor lamp Ulke"&gt;
   &lt;td&gt; $&lt;input required type=number min=0 step=0.01 name="1.pprice" value="49.99"&gt;
   &lt;td&gt; &lt;button formnovalidate name="action" value="delete:1"&gt;Delete&lt;/button&gt;
  &lt;tr&gt;
   &lt;td&gt; &lt;input readonly name="2.pid" value="FG28"&gt;
   &lt;td&gt; &lt;input required name="2.pname" value="Table lamp Ulke"&gt;
   &lt;td&gt; $&lt;input required type=number min=0 step=0.01 name="2.pprice" value="24.99"&gt;
   &lt;td&gt; &lt;button formnovalidate name="action" value="delete:2"&gt;Delete&lt;/button&gt;
  &lt;tr&gt;
   &lt;td&gt; &lt;input required name="3.pid" value="" pattern="[A-Z0-9]+"&gt;
   &lt;td&gt; &lt;input required name="3.pname" value=""&gt;
   &lt;td&gt; $&lt;input required type=number min=0 step=0.01 name="3.pprice" value=""&gt;
   &lt;td&gt; &lt;button formnovalidate name="action" value="delete:3"&gt;Delete&lt;/button&gt;
 &lt;/table&gt;
 &lt;p&gt; &lt;button formnovalidate name="action" value="add"&gt;Add&lt;/button&gt; &lt;/p&gt;
 &lt;p&gt; &lt;button name="action" value="update"&gt;Save&lt;/button&gt; &lt;/p&gt;
&lt;/form&gt;</pre>

  </div><h6 id="the-size-attribute"><span class="secno">4.10.7.2.5 </span>The <code title="attr-input-size"><a href="#attr-input-size">size</a></code> attribute</h6><p>The <dfn id="attr-input-size" title="attr-input-size"><code>size</code></dfn>
  attribute gives the number of characters that, in a visual
  rendering, the user agent is to allow the user to see while editing
  the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>.</p><p>The <code title="attr-input-size"><a href="#attr-input-size">size</a></code> attribute, if
  specified, must have a value that is a <a href="common-microsyntaxes.html#valid-non-negative-integer">valid non-negative
  integer</a> greater than zero.</p><div class="impl">

  <p>If the attribute is present, then its value must be parsed using
  the <a href="common-microsyntaxes.html#rules-for-parsing-non-negative-integers">rules for parsing non-negative integers</a>, and if the
  result is a number greater than zero, then the user agent should
  ensure that at least that many characters are visible.</p>

  <p>The <code title="dom-input-size"><a href="the-input-element.html#dom-input-size">size</a></code> IDL attribute is
  <a href="common-dom-interfaces.html#limited-to-only-non-negative-numbers-greater-than-zero">limited to only non-negative numbers greater than
  zero</a> and has a default value of 20.</p>

  </div><h6 id="the-required-attribute"><span class="secno">4.10.7.2.6 </span>The <code title="attr-input-required"><a href="#attr-input-required">required</a></code> attribute</h6><p>The <dfn id="attr-input-required" title="attr-input-required"><code>required</code></dfn>
  attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>. When specified, the
  element is <dfn id="concept-input-required" title="concept-input-required"><i>required</i></dfn>.</p><div class="impl">

  <p><strong>Constraint validation</strong>: If the element is <i title="concept-input-required"><a href="#concept-input-required">required</a></i>, and its <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute applies and is in
  the mode <a href="#dom-input-value-value" title="dom-input-value-value">value</a>, and the
  element is <i title="concept-input-mutable"><a href="the-input-element.html#concept-input-mutable">mutable</a></i>, and the
  element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> is the empty
  string, then the element is <a href="association-of-controls-and-forms.html#suffering-from-being-missing">suffering from being
  missing</a>.</p>

  </div><div class="example">

   <p>The following form has two required fields, one for an e-mail
   address and one for a password. It also has a third field that is
   only considerd valid if the user types the same password in the
   password field and this third field.</p>

   <pre>&lt;h1&gt;Create new account&lt;/h1&gt;
&lt;form action="/newaccount" method=post
      oninput="up2.setCustomValidity(up2.value != up.value ? 'Passwords do not match.' : '')"&gt;
 &lt;p&gt;
  &lt;label for="username"&gt;E-mail address:&lt;/label&gt;
  &lt;input id="username" type=email required name=un&gt;
 &lt;p&gt;
  &lt;label for="password1"&gt;Password:&lt;/label&gt;
  &lt;input id="password1" type=password required name=up&gt;
 &lt;p&gt;
  &lt;label for="password2"&gt;Confirm password:&lt;/label&gt;
  &lt;input id="password2" type=password name=up2&gt;
 &lt;p&gt;
  &lt;input type=submit value="Create account"&gt;
&lt;/form&gt;</pre>

  </div><h6 id="the-multiple-attribute"><span class="secno">4.10.7.2.7 </span>The <code title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code> attribute</h6><p>The <dfn id="attr-input-multiple" title="attr-input-multiple"><code>multiple</code></dfn>
  attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a> that indicates whether
  the user is to be allowed to specify more than one value.</p><div class="example">

   <p>The following extract shows how an e-mail client's "Cc" field
   could accept multiple e-mail addresses.</p>

   <pre>&lt;label&gt;Cc: &lt;input type=email multiple name=cc&gt;&lt;/label&gt;</pre>

   <p>If the user had, amongst many friends in his user contacts
   database, two friends "Arthur Dent" (with address
   "art@example.net") and "Adam Josh" (with address
   "adamjosh@example.net"), then, after the user has typed "a", the
   user agent might suggest these two e-mail addresses to the
   user.</p>

   <p><img alt="" height="140" src="sample-email-1.png" width="500"></p>

   <p>The page could also link in the user's contacts database from the site:</p>

   <pre>&lt;label&gt;Cc: &lt;input type=email multiple name=cc list=contacts&gt;&lt;/label&gt;
...
&lt;datalist id="contacts"&gt;
 &lt;option value="hedral@damowmow.com"&gt;
 &lt;option value="pillar@example.com"&gt;
 &lt;option value="astrophy@cute.example"&gt;
 &lt;option value="astronomy@science.example.org"&gt;
&lt;/datalist&gt;</pre>

   <p>Suppose the user had entered "bob@example.net" into this text
   field, and then started typing a second e-mail address starting
   with "a". The user agent might show both the two friends mentioned
   earlier, as well as the "astrophy" and "astronomy" values given in
   the <code><a href="the-button-element.html#the-datalist-element">datalist</a></code> element.</p>

   <p><img alt="" height="171" src="sample-email-2.png" width="500"></p>

  </div><div class="example">

   <p>The following extract shows how an e-mail client's "Attachments"
   field could accept multiple files for upload.</p>

   <pre>&lt;label&gt;Attachments: &lt;input type=file multiple name=att&gt;&lt;/label&gt;</pre>

  </div><h6 id="the-maxlength-attribute"><span class="secno">4.10.7.2.8 </span>The <code title="attr-input-maxlength"><a href="#attr-input-maxlength">maxlength</a></code> attribute</h6><p>The <dfn id="attr-input-maxlength" title="attr-input-maxlength"><code>maxlength</code></dfn>
  attribute<span class="impl">, when it applies,</span> is a <a href="association-of-controls-and-forms.html#attr-fe-maxlength" title="attr-fe-maxlength">form control <code title="">maxlength</code> attribute</a><span class="impl">
  controlled by the <code><a href="the-input-element.html#the-input-element">input</a></code> element's <a href="the-input-element.html#concept-input-value-dirty-flag" title="concept-input-value-dirty-flag">dirty value
  flag</a></span>.</p><p>If the <code><a href="the-input-element.html#the-input-element">input</a></code> element has a <a href="association-of-controls-and-forms.html#maximum-allowed-value-length">maximum allowed
  value length</a>, then the <a href="common-microsyntaxes.html#code-point-length">code-point length</a> of the
  value of the element's <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code>
  attribute must be equal to or less than the element's <a href="association-of-controls-and-forms.html#maximum-allowed-value-length">maximum
  allowed value length</a>.</p><div class="example">

   <p>The following extract shows how a messaging client's text entry
   could be arbitrarily restricted to a fixed number of characters,
   thus forcing any conversation through this medium to be terse and
   discouraging intelligent discourse.</p>

   <pre>What are you doing? &lt;input name=status maxlength=140&gt;</pre>

  </div><h6 id="the-pattern-attribute"><span class="secno">4.10.7.2.9 </span>The <code title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code> attribute</h6><p>The <dfn id="attr-input-pattern" title="attr-input-pattern"><code>pattern</code></dfn>
  attribute specifies a regular expression against which the control's
  <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>, or, when the <code title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code> attribute applies and is
  set, the control's <a href="association-of-controls-and-forms.html#concept-fe-values" title="concept-fe-values">value<em>s</em></a>, are to be
  checked.</p><p>If specified, the attribute's value must match the JavaScript <i title="">Pattern</i> production. <a href="references.html#refsECMA262">[ECMA262]</a></p><div class="impl">

  <p>If an <code><a href="the-input-element.html#the-input-element">input</a></code> element has a <code title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code> attribute specified, and
  the attribute's value, when compiled as a JavaScript regular
  expression with the <code title="">global</code>, <code title="">ignoreCase</code>, and <code title="">multiline</code>
  flags <em>disabled</em> (see ECMA262 Edition 5, sections 15.10.7.2
  through 15.10.7.4), compiles successfully, then the resulting
  regular expression is the element's <dfn id="compiled-pattern-regular-expression">compiled pattern regular
  expression</dfn>. If the element has no such attribute, or if the
  value doesn't compile successfully, then the element has no
  <a href="#compiled-pattern-regular-expression">compiled pattern regular expression</a>. <a href="references.html#refsECMA262">[ECMA262]</a></p>

  <p><strong>Constraint validation</strong>: If the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> is not the empty string, and
  either the element's <code title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code> attribute is not
  specified or it does not apply to the <code><a href="the-input-element.html#the-input-element">input</a></code> element
  given its <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute's
  current state, and the element has a <a href="#compiled-pattern-regular-expression">compiled pattern regular
  expression</a> but that regular expression does not match the
  entirety of the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>, then the element is
  <a href="association-of-controls-and-forms.html#suffering-from-a-pattern-mismatch">suffering from a pattern mismatch</a>.</p>

  <p><strong>Constraint validation</strong>: If the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> is not the empty string, and
  the element's <code title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code>
  attribute is specified and applies to the <code><a href="the-input-element.html#the-input-element">input</a></code>
  element, and the element has a <a href="#compiled-pattern-regular-expression">compiled pattern regular
  expression</a> but that regular expression does not match the
  entirety of each of the element's <a href="association-of-controls-and-forms.html#concept-fe-values" title="concept-fe-values">value<em>s</em></a>, then the element
  is <a href="association-of-controls-and-forms.html#suffering-from-a-pattern-mismatch">suffering from a pattern mismatch</a>.</p>

  <p class="note">This implies that the regular expression language
  used for this attribute is the same as that used in JavaScript,
  except that the <code title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code>
  attribute must match the entire value, not just any subset (somewhat
  as if it implied a <code title="">^(?:</code> at the start of the
  pattern and a <code title="">)$</code> at the end).</p>

  </div><p>When an <code><a href="the-input-element.html#the-input-element">input</a></code> element has a <code title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code> attribute specified,
  authors should include a <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code>
  attribute to give a description of the pattern. User agents may use
  the contents of this attribute, if it is present, when informing the
  user that the pattern is not matched, or at any other suitable time,
  such as in a tooltip or read out by assistive technology when the
  control gains focus.</p><div class="example">
   <p>For example, the following snippet:</p>
   <pre>&lt;label&gt; Part number:
 &lt;input pattern="[0-9][A-Z]{3}" name="part"
        title="A part number is a digit followed by three uppercase letters."/&gt;
&lt;/label&gt;</pre>
   <p>...could cause the UA to display an alert such as:</p>
   <pre><samp>A part number is a digit followed by three uppercase letters.
You cannot submit this form when the field is incorrect.</samp></pre>
  </div><p>When a control has a <code title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code> attribute, the <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute, if used, must describe
  the pattern.  Additional information could also be included, so long
  as it assists the user in filling in the control. Otherwise,
  assistive technology would be impaired.</p><p class="example">For instance, if the title attribute contained
  the caption of the control, assistive technology could end up saying
  something like <samp>The text you have entered does not match the
  required pattern. Birthday</samp>, which is not useful.</p><p>UAs may still show the <code><a href="semantics.html#the-title-element">title</a></code> in non-error situations
  (for example, as a tooltip when hovering over the control), so
  authors should be careful not to word <code><a href="semantics.html#the-title-element">title</a></code>s as if an
  error has necessarily occurred.</p><h6 id="the-min-and-max-attributes"><span class="secno">4.10.7.2.10 </span>The <code title="attr-input-min"><a href="#attr-input-min">min</a></code> and <code title="attr-input-max"><a href="#attr-input-max">max</a></code> attributes</h6><p>The <dfn id="attr-input-min" title="attr-input-min"><code>min</code></dfn> and <dfn id="attr-input-max" title="attr-input-max"><code>max</code></dfn> attributes indicate
  the allowed range of values for the element.</p><div class="impl">

  <p>Their syntax is defined by the section that defines the <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute's current state.</p>

  <p>If the element has a <code title="attr-input-min"><a href="#attr-input-min">min</a></code>
  attribute, and the result of applying the <a href="the-input-element.html#concept-input-value-string-number" title="concept-input-value-string-number">algorithm to convert a
  string to a number</a> to the value of the <code title="attr-input-min"><a href="#attr-input-min">min</a></code> attribute is a number, then that
  number is the element's <dfn id="concept-input-min" title="concept-input-min">minimum</dfn>; otherwise, if the <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute's current state
  defines a <dfn id="concept-input-min-default" title="concept-input-min-default">default
  minimum</dfn>, then that is the <a href="#concept-input-min" title="concept-input-min">minimum</a>; otherwise, the element has
  no <a href="#concept-input-min" title="concept-input-min">minimum</a>.</p>

  <p><strong>Constraint validation</strong>: When the element has a
  <a href="#attr-input-min" title="attr-input-min">minimum</a>, and the result of
  applying the <a href="the-input-element.html#concept-input-value-string-number" title="concept-input-value-string-number">algorithm to convert a
  string to a number</a> to the string given by the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> is a number, and the number
  obtained from that algorithm is less than the <a href="#attr-input-min" title="attr-input-min">minimum</a>, the element is
  <a href="association-of-controls-and-forms.html#suffering-from-an-underflow">suffering from an underflow</a>.</p>

  <p>The <code title="attr-input-min"><a href="#attr-input-min">min</a></code> attribute also
  defines the <a href="#concept-input-min-zero" title="concept-input-min-zero">step
  base</a>.</p>

  <p>If the element has a <code title="attr-input-max"><a href="#attr-input-max">max</a></code>
  attribute, and the result of applying the <a href="the-input-element.html#concept-input-value-string-number" title="concept-input-value-string-number">algorithm to convert a
  string to a number</a> to the value of the <code title="attr-input-max"><a href="#attr-input-max">max</a></code> attribute is a number, then that
  number is the element's <dfn id="concept-input-max" title="concept-input-max">maximum</dfn>; otherwise, if the <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute's current state
  defines a <dfn id="concept-input-max-default" title="concept-input-max-default">default
  maximum</dfn>, then that is the <a href="#concept-input-max" title="concept-input-max">maximum</a>; otherwise, the element has
  no <a href="#concept-input-max" title="concept-input-max">maximum</a>.</p>

  <p><strong>Constraint validation</strong>: When the element has a
  <a href="#attr-input-max" title="attr-input-max">maximum</a>, and the result of
  applying the <a href="the-input-element.html#concept-input-value-string-number" title="concept-input-value-string-number">algorithm to convert a
  string to a number</a> to the string given by the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> is a number, and the number
  obtained from that algorithm is more than the <a href="#attr-input-max" title="attr-input-max">maximum</a>, the element is
  <a href="association-of-controls-and-forms.html#suffering-from-an-overflow">suffering from an overflow</a>.</p>

  </div><p>The <code title="attr-input-max"><a href="#attr-input-max">max</a></code> attribute's value
  (the <a href="#concept-input-max" title="concept-input-max">maximum</a>) must not be
  less than the <code title="attr-input-min"><a href="#attr-input-min">min</a></code> attribute's
  value (its <a href="#concept-input-min" title="concept-input-min">minimum</a>).</p><div class="impl">

  <p class="note">If an element has a <a href="#attr-input-max" title="attr-input-max">maximum</a> that is less than its <a href="#attr-input-min" title="attr-input-min">minimum</a>, then so long as the element
  has a <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>, it will either be
  <a href="association-of-controls-and-forms.html#suffering-from-an-underflow">suffering from an underflow</a> or <a href="association-of-controls-and-forms.html#suffering-from-an-overflow">suffering from an
  overflow</a>.</p>

  </div><p>An element <dfn id="have-range-limitations" title="have range limitations">has range
  limitations</dfn> if it has a defined <a href="#concept-input-min" title="concept-input-min">minimum</a> or a defined <a href="#concept-input-max" title="concept-input-max">maximum</a>.</p><div class="example">

   <p>The following date control limits input to dates that are before
   the 1980s:</p>

   <pre>&lt;input name=bday type=date max="1979-12-31"&gt;</pre>

  </div><div class="example">

   <p>The following number control limits input to whole numbers
   greater than zero:</p>

   <pre>&lt;input name=quantity required type=number min=1 value=1&gt;</pre>

  </div><h6 id="the-step-attribute"><span class="secno">4.10.7.2.11 </span>The <code title="attr-input-step"><a href="#attr-input-step">step</a></code> attribute</h6><p>The <dfn id="attr-input-step" title="attr-input-step"><code>step</code></dfn>
  attribute indicates the granularity that is expected (and required)
  of the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>, by limiting the
  allowed values. <span class="impl">The section that defines the
  <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute's current state
  also defines the <dfn id="concept-input-step-default" title="concept-input-step-default">default
  step</dfn>, the <dfn id="concept-input-step-scale" title="concept-input-step-scale">step scale
  factor</dfn>, and in some cases the <dfn id="concept-input-step-default-base" title="concept-input-step-default-base">default step base</dfn>,
  which are used in processing the attribute as described
  below.</span></p><p>The <code title="attr-input-step"><a href="#attr-input-step">step</a></code> attribute, if
  specified, must either have a value that is a <a href="common-microsyntaxes.html#valid-floating-point-number">valid floating
  point number</a> that <a href="common-microsyntaxes.html#rules-for-parsing-floating-point-number-values" title="rules for parsing floating
  point number values">parses</a> to a number that is greater than
  zero, or must have a value that is an <a href="infrastructure.html#ascii-case-insensitive">ASCII
  case-insensitive</a> match for the string "<code title="">any</code>".</p><div class="impl">

  <p>The attribute provides the <dfn id="concept-input-step" title="concept-input-step">allowed value step</dfn> for the element,
  as follows:</p>

  <ol><li>If the attribute is absent, then the <a href="#concept-input-step" title="concept-input-step">allowed value step</a> is the <a href="#concept-input-step-default" title="concept-input-step-default">default step</a> multiplied
   by the <a href="#concept-input-step-scale" title="concept-input-step-scale">step scale
   factor</a>.</li>

   <li>Otherwise, if the attribute's value is an <a href="infrastructure.html#ascii-case-insensitive">ASCII
   case-insensitive</a> match for the string "<code title="">any</code>", then there is no <a href="#concept-input-step" title="concept-input-step">allowed value step</a>.</li>

   <li>Otherwise, if the <a href="common-microsyntaxes.html#rules-for-parsing-floating-point-number-values">rules for parsing floating point number
   values</a>, when they are applied to the attribute's value,
   return an error, zero, or a number less than zero, then the <a href="#concept-input-step" title="concept-input-step">allowed value step</a> is the <a href="#concept-input-step-default" title="concept-input-step-default">default step</a> multiplied
   by the <a href="#concept-input-step-scale" title="concept-input-step-scale">step scale
   factor</a>.</li>

   <li>Otherwise, the <a href="#concept-input-step" title="concept-input-step">allowed value
   step</a> is the number returned by the <a href="common-microsyntaxes.html#rules-for-parsing-floating-point-number-values">rules for parsing
   floating point number values</a> when they are applied to the
   attribute's value, multiplied by the <a href="#concept-input-step-scale" title="concept-input-step-scale">step scale factor</a>.</li>

  </ol><p>The <dfn id="concept-input-min-zero" title="concept-input-min-zero">step base</dfn> is the
  result of applying the <a href="the-input-element.html#concept-input-value-string-number" title="concept-input-value-string-number">algorithm to convert a
  string to a number</a> to the value of the <code title="attr-input-min"><a href="#attr-input-min">min</a></code> attribute, unless the element does
  not have a <code title="attr-input-min"><a href="#attr-input-min">min</a></code> attribute
  specified or the result of applying that algorithm is an error, in
  which case the <a href="#concept-input-min-zero" title="concept-input-min-zero">step base</a>
  is the <a href="#concept-input-step-default-base" title="concept-input-step-default-base">default step
  base</a>, if one is defined, or zero, if not.</p>

  <p><strong>Constraint validation</strong>: When the element has an
  <a href="#concept-input-step" title="concept-input-step">allowed value step</a>, and the
  result of applying the <a href="the-input-element.html#concept-input-value-string-number" title="concept-input-value-string-number">algorithm to convert a
  string to a number</a> to the string given by the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> is a number, and that
  number subtracted from the <a href="#concept-input-min-zero" title="concept-input-min-zero">step
  base</a> is not an integral multiple of the <a href="#concept-input-step" title="concept-input-step">allowed value step</a>, the element is
  <a href="association-of-controls-and-forms.html#suffering-from-a-step-mismatch">suffering from a step mismatch</a>.</p>

  </div><div class="example">

   <p>The following range control only accepts values in the range
   0..1, and allows 256 steps in that range:</p>

   <pre>&lt;input name=opacity type=range min=0 max=1 step=0.00392156863&gt;</pre>

  </div><div class="example">

   <p>The following control allows any time in the day to be selected,
   with any accuracy (e.g. thousandth-of-a-second accuracy or
   more):</p>

   <pre>&lt;input name=favtime type=time step=any&gt;</pre>

   <p>Normally, time controls are limited to an accuracy of one
   minute.</p>

  </div><h6 id="the-placeholder-attribute"><span class="secno">4.10.7.2.12 </span>The <code title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code> attribute</h6><p>The <dfn id="attr-input-placeholder" title="attr-input-placeholder"><code>placeholder</code></dfn>
  attribute represents a <em>short</em> hint (a word or short phrase)
  intended to aid the user with data entry. A hint could be a sample
  value or a brief description of the expected format. The attribute,
  if specified, must have a value that contains no U+000A LINE FEED
  (LF) or U+000D CARRIAGE RETURN (CR) characters.</p><p class="note">For a longer hint or other advisory text, the <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute is more appropriate.</p><p>The <code title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code>
  attribute should not be used as an alternative to a
  <code><a href="forms.html#the-label-element">label</a></code>.</p><div class="impl">

  <p>User agents should present this hint to the user, after having
  <a href="common-microsyntaxes.html#strip-line-breaks" title="strip line breaks">stripped line breaks</a> from it,
  when the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> is
  the empty string and the control is not focused (e.g. by displaying
  it inside a blank unfocused control).</p>

  </div><div class="example">

   <p>Here is an example of a mail configuration user interface that
   uses the <code title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code>
   attribute:</p>

   <pre>&lt;fieldset&gt;
 &lt;legend&gt;Mail Account&lt;/legend&gt;
 &lt;p&gt;&lt;label&gt;Name: &lt;input type="text" name="fullname" placeholder="John Ratzenberger"&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Address: &lt;input type="email" name="address" placeholder="john@example.net"&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Password: &lt;input type="password" name="password"&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Description: &lt;input type="text" name="desc" placeholder="My Email Account"&gt;&lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;</pre>

  </div><h5 id="common-input-element-apis"><span class="secno">4.10.7.3 </span>Common <code><a href="the-input-element.html#the-input-element">input</a></code> element APIs</h5><dl class="domintro"><dt><var title="">input</var> . <code title="dom-input-value"><a href="#dom-input-value">value</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the current <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>
    of the form control.</p>

    <p>Can be set, to change the value.</p>

    <p>Throws an <code><a href="common-dom-interfaces.html#invalid_state_err">INVALID_STATE_ERR</a></code> exception if it is
    set to any value other than the empty string when the control is a
    file upload control.</p>

   </dd>

   <dt><var title="">input</var> . <code title="dom-input-checked"><a href="#dom-input-checked">checked</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the current <a href="association-of-controls-and-forms.html#concept-fe-checked" title="concept-fe-checked">checkedness</a> of the form
    control.</p>

    <p>Can be set, to change the <a href="association-of-controls-and-forms.html#concept-fe-checked" title="concept-fe-checked">checkedness</a>.</p>

   </dd>

   <dt><var title="">input</var> . <code title="dom-input-files"><a href="#dom-input-files">files</a></code></dt>

   <dd>

    <p>Returns a <code><a href="infrastructure.html#filelist">FileList</a></code> object listing the <a href="number-state.html#concept-input-type-file-selected" title="concept-input-type-file-selected">selected files</a> of
    the form control.</p>

    <p>Returns null if the control isn't a file control.</p>

   </dd>

   <dt><var title="">input</var> . <code title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns a <code>Date</code> object representing the form
    control's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>, if
    applicable; otherwise, returns null.</p>

    <p>Can be set, to change the value.</p>

    <p>Throws an <code><a href="common-dom-interfaces.html#invalid_state_err">INVALID_STATE_ERR</a></code> exception if the
    control isn't date- or time-based.</p>

   </dd>

   <dt><var title="">input</var> . <code title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns a number representing the form control's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>, if applicable; otherwise,
    returns null.</p>

    <p>Can be set, to change the value.</p>

    <p>Throws an <code><a href="common-dom-interfaces.html#invalid_state_err">INVALID_STATE_ERR</a></code> exception if the
    control is neither date- or time-based nor numeric.</p>

   </dd>

   <dt><var title="">input</var> . <code title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp</a></code>( [ <var title="">n</var> ] )</dt>
   <dt><var title="">input</var> . <code title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown</a></code>( [ <var title="">n</var> ] )</dt>

   <dd>

    <p>Changes the form control's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> by the value given in the
    <code title="attr-input-step"><a href="#attr-input-step">step</a></code> attribute, multiplied by
    <var title="">n</var>. The default value for <var title="">n</var>
    is 1.</p>

    <p>Throws <code><a href="common-dom-interfaces.html#invalid_state_err">INVALID_STATE_ERR</a></code> exception if the control
    is neither date- or time-based nor numeric, if the <code title="attr-input-step"><a href="#attr-input-step">step</a></code> attribute's value is "<code title="">any</code>", if the current <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> could not be parsed, or if
    stepping in the given direction by the given amount would take the
    value out of range.</p>

   </dd>

   <dt><var title="">input</var> . <code title="dom-input-list"><a href="#dom-input-list">list</a></code></dt>

   <dd>

    <p>Returns the <code><a href="the-button-element.html#the-datalist-element">datalist</a></code> element indicated by the
    <code title="attr-input-list"><a href="#attr-input-list">list</a></code> attribute.</p>

   </dd>

   <dt><var title="">input</var> . <code title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code></dt>

   <dd>

    <p>Returns the <code><a href="the-button-element.html#the-option-element">option</a></code> element from the
    <code><a href="the-button-element.html#the-datalist-element">datalist</a></code> element indicated by the <code title="attr-input-list"><a href="#attr-input-list">list</a></code> attribute that matches the
    form control's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>.</p>

   </dd>

  </dl><div class="impl">

  <p>The <dfn id="dom-input-value" title="dom-input-value"><code>value</code></dfn> IDL
  attribute allows scripts to manipulate the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> of an <code><a href="the-input-element.html#the-input-element">input</a></code>
  element. The attribute is in one of the following modes, which
  define its behavior:</p>

  <dl><dt><dfn id="dom-input-value-value" title="dom-input-value-value">value</dfn>

   </dt><dd>

    <p>On getting, it must return the current <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> of the element. On setting,
    it must set the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to the new value, set the
    element's <a href="the-input-element.html#concept-input-value-dirty-flag" title="concept-input-value-dirty-flag">dirty value
    flag</a> to true, and then invoke the <a href="the-input-element.html#value-sanitization-algorithm">value sanitization
    algorithm</a>, if the element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute's current state
    defines one.</p>

   </dd>

   <dt><dfn id="dom-input-value-default" title="dom-input-value-default">default</dfn>

   </dt><dd>

    <p>On getting, if the element has a <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute, it must return
    that attribute's value; otherwise, it must return the empty
    string. On setting, it must set the element's <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute to the new
    value.</p>

   </dd>

   <dt><dfn id="dom-input-value-default-on" title="dom-input-value-default-on">default/on</dfn>

   </dt><dd>

    <p>On getting, if the element has a <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute, it must return
    that attribute's value; otherwise, it must return the string
    "<code title="">on</code>". On setting, it must set the element's
    <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute to the new
    value.</p>

   </dd>

   <dt><dfn id="dom-input-value-filename" title="dom-input-value-filename">filename</dfn>

   </dt><dd id="fakepath-orly">

    <p>On getting, it must return the string "<code title="">C:\fakepath\</code>" followed by the filename of the
    first file in the list of <a href="number-state.html#concept-input-type-file-selected" title="concept-input-type-file-selected">selected files</a>, if
    any, or the empty string if the list is empty. On setting, if the
    new value is the empty string, it must empty the list of <a href="number-state.html#concept-input-type-file-selected" title="concept-input-type-file-selected">selected files</a>;
    otherwise, it must throw an <code><a href="common-dom-interfaces.html#invalid_state_err">INVALID_STATE_ERR</a></code>
    exception.</p>

    <p class="note">This "fakepath" requirement is a sad accident of
    history. See <a href="number-state.html#fakepath-srsly">the example in the File
    Upload state section</a> for more information.</p>

   </dd>

  </dl><hr><p>The <dfn id="dom-input-checked" title="dom-input-checked"><code>checked</code></dfn> IDL
  attribute allows scripts to manipulate the <a href="association-of-controls-and-forms.html#concept-fe-checked" title="concept-fe-checked">checkedness</a> of an
  <code><a href="the-input-element.html#the-input-element">input</a></code> element. On getting, it must return the current
  <a href="association-of-controls-and-forms.html#concept-fe-checked" title="concept-fe-checked">checkedness</a> of the element;
  and on setting, it must set the element's <a href="association-of-controls-and-forms.html#concept-fe-checked" title="concept-fe-checked">checkedness</a> to the new value and
  set the element's <a href="the-input-element.html#concept-input-checked-dirty-flag" title="concept-input-checked-dirty-flag">dirty checkedness
  flag</a> to true.</p>

  <hr><p>The <dfn id="dom-input-files" title="dom-input-files"><code>files</code></dfn> IDL
  attribute allows scripts to access the element's <a href="number-state.html#concept-input-type-file-selected" title="concept-input-type-file-selected">selected files</a>. On
  getting, if the IDL attribute applies, it must return a
  <code><a href="infrastructure.html#filelist">FileList</a></code> object that represents the current <a href="number-state.html#concept-input-type-file-selected" title="concept-input-type-file-selected">selected files</a>. The
  same object must be returned until the list of <a href="number-state.html#concept-input-type-file-selected" title="concept-input-type-file-selected">selected files</a>
  changes. If the IDL attribute does not apply, then it must instead
  return null. <a href="references.html#refsFILEAPI">[FILEAPI]</a></p>

  <hr><p>The <dfn id="dom-input-valueasdate" title="dom-input-valueAsDate"><code>valueAsDate</code></dfn> IDL
  attribute represents the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> of the element, interpreted
  as a date.</p>

  <p>On getting, if the <code title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code> attribute does not
  apply, as defined for the <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute's current state, then
  return null. Otherwise, run the <a href="the-input-element.html#concept-input-value-string-date" title="concept-input-value-string-date">algorithm to convert a
  string to a <code>Date</code> object</a> defined for that state;
  if the algorithm returned a <code>Date</code> object, then return
  it, otherwise, return null.</p>

  <p>On setting, if the <code title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code> attribute does not
  apply, as defined for the <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute's current state, then
  throw an <code><a href="common-dom-interfaces.html#invalid_state_err">INVALID_STATE_ERR</a></code> exception; otherwise, if
  the new value is null, then set the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> of the element to the empty
  string; otherwise, run the <a href="the-input-element.html#concept-input-value-date-string" title="concept-input-value-date-string">algorithm to convert a
  <code>Date</code> object to a string</a>, as defined for that
  state, on the new value, and set the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> of the element to resulting
  string.</p>

  <hr><p>The <dfn id="dom-input-valueasnumber" title="dom-input-valueAsNumber"><code>valueAsNumber</code></dfn> IDL
  attribute represents the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>
  of the element, interpreted as a number.</p>

  <p>On getting, if the <code title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code> attribute does
  not apply, as defined for the <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute's current state, then
  return a Not-a-Number (NaN) value. Otherwise, if the <code title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAs<em>Date</em></a></code>
  attribute applies, run the <a href="the-input-element.html#concept-input-value-string-date" title="concept-input-value-string-date">algorithm to convert a
  string to a <code>Date</code> object</a> defined for that state;
  if the algorithm returned a <code>Date</code> object, then return
  the <i>time value</i> of the object (the number of milliseconds from
  midnight UTC the morning of 1970-01-01 to the time represented by
  the <code>Date</code> object), otherwise, return a Not-a-Number
  (NaN) value. Otherwise, run the <a href="the-input-element.html#concept-input-value-string-number" title="concept-input-value-string-number">algorithm to convert a
  string to a number</a> defined for that state; if the algorithm
  returned a number, then return it, otherwise, return a Not-a-Number
  (NaN) value.</p>

  <p>On setting, if the <code title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code> attribute does
  not apply, as defined for the <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute's current state, then
  throw an <code><a href="common-dom-interfaces.html#invalid_state_err">INVALID_STATE_ERR</a></code> exception. Otherwise, if
  the <code title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAs<em>Date</em></a></code>
  attribute applies, run the <a href="the-input-element.html#concept-input-value-date-string" title="concept-input-value-date-string">algorithm to convert a
  <code>Date</code> object to a string</a> defined for that state,
  passing it a <code>Date</code> object whose <i>time value</i> is the
  new value, and set the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>
  of the element to resulting string. Otherwise, run the <a href="the-input-element.html#concept-input-value-number-string" title="concept-input-value-number-string">algorithm to convert a
  number to a string</a>, as defined for that state, on the new
  value, and set the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> of
  the element to resulting string.</p>

  <hr><p>The <dfn id="dom-input-stepdown" title="dom-input-stepDown"><code>stepDown(<var title="">n</var>)</code></dfn> and <dfn id="dom-input-stepup" title="dom-input-stepUp"><code>stepUp(<var title="">n</var>)</code></dfn> methods, when invoked, must run the
  following algorithm:</p>

  <ol><li><p>If the <code title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code> and
   <code title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods do not
   apply, as defined for the <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute's current state, then
   throw an <code><a href="common-dom-interfaces.html#invalid_state_err">INVALID_STATE_ERR</a></code> exception, and abort these
   steps.</p></li>

   <li><p>If the element has no <a href="#concept-input-step" title="concept-input-step">allowed value step</a>, then throw an
   <code><a href="common-dom-interfaces.html#invalid_state_err">INVALID_STATE_ERR</a></code> exception, and abort these
   steps.</p></li>

   <li><p>If applying the <a href="the-input-element.html#concept-input-value-string-number" title="concept-input-value-string-number">algorithm to convert a
   string to a number</a> to the string given by the element's
   <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> results in an error,
   then throw an <code><a href="common-dom-interfaces.html#invalid_state_err">INVALID_STATE_ERR</a></code> exception, and abort
   these steps; otherwise, let <var title="">value</var> be the result
   of that algorithm.</p></li>

   <li><p>Let <var title="">n</var> be the argument, or 1 if the
   argument was omitted.</p></li>

   <li><p>Let <var title="">delta</var> be the <a href="#concept-input-step" title="concept-input-step">allowed value step</a> multiplied by
   <var title="">n</var>.</p></li>

   <li><p>If the method invoked was the <code title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code> method, negate <var title="">delta</var>.</p></li>

   <li><p>Let <var title="">value</var> be the result of adding <var title="">delta</var> to <var title="">value</var>.</p></li>
   <li><p>If the element has a <a href="#concept-input-min" title="concept-input-min">minimum</a>, and the <var title="">value</var> is less than that <a href="#concept-input-min" title="concept-input-min">minimum</a>, then throw a
   <code><a href="common-dom-interfaces.html#invalid_state_err">INVALID_STATE_ERR</a></code> exception.</p></li>

   <li><p>If the element has a <a href="#concept-input-max" title="concept-input-max">maximum</a>, and the <var title="">value</var> is greater than that <a href="#concept-input-max" title="concept-input-max">maximum</a>, then throw a
   <code><a href="common-dom-interfaces.html#invalid_state_err">INVALID_STATE_ERR</a></code> exception.</p></li>

   <li><p>Let <var title="">value as string</var> be the result of
   running the <a href="the-input-element.html#concept-input-value-number-string" title="concept-input-value-number-string">algorithm to convert a
   number to a string</a>, as defined for the <code><a href="the-input-element.html#the-input-element">input</a></code>
   element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute's
   current state, on <var title="">value</var>.</p></li>

   <li><p>Set the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> of the
   element to <var title="">value as string</var>.</p></li>

  </ol><hr><p>The <dfn id="dom-input-list" title="dom-input-list"><code>list</code></dfn> IDL
  attribute must return the current <a href="#concept-input-list" title="concept-input-list">suggestions source element</a>, if
  any, or null otherwise.</p>

  <p>The <dfn id="dom-input-selectedoption" title="dom-input-selectedOption"><code>selectedOption</code></dfn>
  IDL attribute must return the value determined by the following
  steps:</p>

  <ol><li><p>If there is no <a href="#concept-input-list" title="concept-input-list">suggestions
   source element</a> (e.g. because the <code title="attr-input-list"><a href="#attr-input-list">list</a></code> attribute doesn't apply or is
   not specified), then return null and abort these steps.</p></li>

   <li><p>If the <code title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code>
   attribute is specified and applies, then return null and abort
   these steps. (The <code title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code> IDL
   attribute doesn't apply.)</p></li>

   <li><p>Return the first <code><a href="the-button-element.html#the-option-element">option</a></code> element, in <a href="infrastructure.html#tree-order">tree
   order</a>, to be a child of the <a href="#concept-input-list" title="concept-input-list">suggestions source element</a> and
   whose <a href="the-button-element.html#concept-option-value" title="concept-option-value">value</a> matches the
   <code><a href="the-input-element.html#the-input-element">input</a></code> element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>, if any. If the <a href="#concept-input-list" title="concept-input-list">suggestions source element</a>
   contains no matching <code><a href="the-button-element.html#the-option-element">option</a></code> element, then return null
   instead.</p></li>

  </ol></div><div class="impl">

  <h5 id="common-event-behaviors"><span class="secno">4.10.7.4 </span>Common event behaviors</h5>

  <p>When the <dfn id="event-input-input" title="event-input-input"><code>input</code></dfn>
  event applies, any time the user causes the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to change, the user agent must
  <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> that
  bubbles named <code title="event-input">input</code> at the
  <code><a href="the-input-element.html#the-input-element">input</a></code> element. User agents may wait for a suitable
  break in the user's interaction before queuing the task; for
  example, a user agent could wait for the user to have not hit a key
  for 100ms, so as to only fire the event when the user pauses,
  instead of continuously for each keystroke.</p> 
  <p class="example">Examples of a user changing the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> would include the user typing
  into a text field, pasting a new value into the field, or undoing an
  edit in that field. Some user interactions do not cause changes to
  the value, e.g. hitting the "delete" key in an empty text field, or
  replacing some text in the field with text from the clipboard that
  happens to be exactly the same text.</p>

  <p>When the <dfn id="event-input-change" title="event-input-change"><code>change</code></dfn> event applies,
  if the element does not have an <a href="content-models.html#activation-behavior">activation behavior</a>
  defined but uses a user interface that involves an explicit commit
  action, then any time the user commits a change to the element's
  <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> or list of <a href="number-state.html#concept-input-type-file-selected" title="concept-input-type-file-selected">selected files</a>, the
  user agent must <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple
  event</a> that bubbles named <code title="event-change">change</code> at the <code><a href="the-input-element.html#the-input-element">input</a></code>
  element.</p>

  <p class="example">An example of a user interface with a commit
  action would be a <a href="number-state.html#file-upload-state" title="attr-input-type-file">File
  Upload</a> control that consists of a single button that brings
  up a file selection dialog: when the dialog is closed, if that the
  <a href="number-state.html#concept-input-type-file-selected" title="concept-input-type-file-selected">file selection</a>
  changed as a result, then the user has committed a new <a href="number-state.html#concept-input-type-file-selected" title="concept-input-type-file-selected">file selection</a>.</p>

  <p class="example">Another example of a user interface with a commit
  action would be a <a href="states-of-the-type-attribute.html#date-state" title="attr-input-type-date">Date</a>
  control that allows both text-based user input and user selection
  from a drop-down calendar: while text input might not have an
  explicit commit step, selecting a date from the drop down calendar
  and then dismissing the drop down would be a commit action.</p>

  <p>When the user agent changes the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> on behalf of the user (e.g. as
  part of a form prefilling feature), the user agent must follow these
  steps:</p>

  <ol><li>If the <code title="event-input-input"><a href="#event-input-input">input</a></code> event
   applies, <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple
   event</a> that bubbles named <code title="event-input">input</code> at the <code><a href="the-input-element.html#the-input-element">input</a></code>
   element.</li>

   <li>If the <code title="event-input-change"><a href="#event-input-change">change</a></code> event
   applies, <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple
   event</a> that bubbles named <code title="event-change">change</code> at the <code><a href="the-input-element.html#the-input-element">input</a></code>
   element.</li>

  </ol><p class="note">In addition, when the <code title="event-input-change"><a href="#event-input-change">change</a></code> event applies, <code title="event-change">change</code> events can also be fired as part
  of the element's <a href="content-models.html#activation-behavior">activation behavior</a> and as part of the
  <a href="editing.html#unfocusing-steps">unfocusing steps</a>.</p>

  <p>The <a href="webappapis.html#task-source">task source</a> for these <a href="webappapis.html#concept-task" title="concept-task">tasks</a> is the <a href="webappapis.html#user-interaction-task-source">user interaction task
  source</a>.</p>

  </div></body></html>