Knowledge (XXG)

HTML form

Source 📝

543: 1121:
applications (CGIs). In fact, Perl is such a common way to write CGIs that the two are often confused. CGIs may be written in other languages than Perl (compatibility with multiple languages is a design goal of the CGI protocol) and there are other ways to make Perl scripts interoperate with a
359:
input type can be represented as an input text simply checking the value entered is a correct hexadecimal representation of a color, according to the specification, or a color picker widget (the latter being the solution used in most browsers which support this attribute).
346:
when the web page containing the form is loaded, and placeholder text that is displayed within the field but is not user input (such as the 'Search' text displayed in many search input fields before a search term is entered). These tasks used to be handled with
1041:
function to sanitize the user's input before inserting it onto the page. Simply printing (echoing) user input to the browser without checking it first is something that should be avoided in secure forms processors: if a user entered the JavaScript code
325:
attribute. This allows labels to stay with their elements when a window is resized and to allow more desktop-like functionality (e.g. clicking a radio button or checkbox's label will activate the associated input element).
1286:
companies provide templates to their clients as an add-on service. Other form hosting services offer free contact forms that a user can install on their own website by pasting the service's code into the site's HTML.
329:
HTML 5 introduces a number of input tags that can be represented by other interface elements. Some are based upon text input fields and are intended to input and validate specific common data. These include
299:. In both cases, a server-side process is responsible for processing the information, while JavaScript handles the user-interaction. Implementations of these interface elements are available through 531:
ways. In addition, processing forms on a server often results in increased security if server-side execution is designed not to trust the data supplied by the client and includes such techniques as
1262:, however, and many of the most popular form-to-email scripts in use are vulnerable to hijacking for the purpose of sending spam emails. One of the most popular scripts of this type was 1447:
as the form action, was proposed in RFC 1867 section 5.6, during the HTML 3.2 era. Various web browsers implemented it by invoking a separate email program, using their own rudimentary
1258:
Among the simplest and most commonly needed types of server-side script is that which simply emails the contents of a submitted form. This kind of script is frequently exploited by
1282:. Usually, these companies give some kind of visual editor, reporting tools and infrastructure to create and host the forms, that can be embedded into webpages. 503:
Server-side code can do a vast assortment of tasks to create dynamic web sites that, for technical or security reasons, client-side code cannot — from
523:. A significant advantage to server-side over client-side execution is the concentration of functionality onto the server rather than relying on different 91: 368:
When data that has been entered into HTML forms is submitted, the names and values in the form elements are encoded and sent to the server in an
1270:. Today, this script is no longer widely used in new development due to lack of updates, security concerns, and difficulty of configuration. 314:
tag, which is intended to represent a caption in a user interface, and can be associated with a specific form control by specifying the
1586: 539:—server side processing for all users occurs on the server, while client side processing occurs on individual client computers. 1149:. However, many web hosts today effectively only support PHP, and developers of web applications often seek compatibility with them. 389: 1459:. Although sometimes unreliable, it was briefly popular as a simple way to transmit form data without involving a web server or 1564: 443:
handling functionality than programming languages such as C, and also have automatic memory management which helps to prevent
588: 483:
of the form data and/or to prepare the form data to send to a server-side program. This usage is being replaced, however, by
435:
Although any programming language can be used on the server to process a form's data, the most commonly used languages are
1448: 564: 606:
is one very common language used for server-side "programming" and is one of the few languages created specifically for
584: 568: 373: 542: 178:, it is used for security purposes, in which the characters typed in are invisible or replaced by symbols such as * 291:
with each cell containing a text input element. A tree view could also be mimicked through nested tables or, more
1440: 342:
for numeric values. There are additional attributes to specify required fields, fields that should have keyboard
1460: 1444: 1118: 273: 134: 1267: 207:
that, when activated, tells the browser to restore the values of the current form, to their initial values.
1559: 633:
attribute used in the form. Here is a basic form handler PHP script that will display the contents of the
110: 1569: 1279: 469: 461: 617:
attribute of the form tag. The target PHP file then accesses the data passed by the form through PHP's
479:
While client-side languages used in conjunction with forms are limited, they often can serve to do pre-
556: 440: 421: 1520: 1099: 436: 409: 1591: 1135: 425: 300: 214: 47: 1080:
page, just as if it had been coded by the developer; malicious code could be executed this way.
1152:
A modern Perl 5 CGI using the CGI module with a form similar to the one above might look like:
532: 456: 343: 1502: 1131: 580: 576: 393: 355:
input type displays a calendar from which the user can select a date or date range. And the
1146: 1114: 607: 480: 51: 1362: 864:// requesting the value of the external variable "first_name" and filtering it. 1452: 504: 444: 318: 256: 238: 1596: 1580: 528: 516: 79: 63: 1414: 432:. The most popular languages include both client-side and/or server-side languages. 217:
that tells the browser to take action on the form (typically to send it to a server)
1487: 1456: 473: 296: 288: 204: 185: 114: 1549: 1283: 536: 524: 476:
that allows dynamic creation and modification of a web page within the browser.
377: 351:, but had become so common that support for them was added to the standard. The 194: 75: 67: 1123: 465: 348: 95: 90: 1263: 613:
To use PHP with an HTML form, the URL of the PHP script is specified in the
385: 281: 277: 78:
data to order a product, or can be used to retrieve search results from a
17: 1313: 1296: 1139: 512: 429: 145: 71: 59: 55: 43: 1388: 1343: 276:(GUI) elements, but not all. For example, there are no equivalents to a 1308: 1259: 1127: 1089:
was introduced in PHP 5.2. Users of earlier PHP versions could use the
592: 397: 1318: 520: 304: 546:
Registration form of PHP-based e-commerce web-shop software ZenCart
412:, is also available and is common for POST-based file submissions. 541: 508: 484: 381: 252:
a pair of radio buttons asking you to choose between gender values
559:
commonly used to design interactive forms in web development are
1323: 1110: 572: 369: 292: 103: 287:
A grid view, however, can be mimicked by using a standard HTML
113:
the data entered into the form should be submitted to, and the
1553: 603: 560: 420:
Forms are usually combined with programs written in various
245:
The sample image on the right shows most of these elements:
1102:
to sanitize the user input before doing anything with it.
268:
a submit button to send current form values to the server
231:
allows for multiple rows of data to be shown and entered
1473: 392:, is based on a very early version of the general URI 262:
a pair of check boxes to click on if they apply to you
583:
and some of the compiled languages commonly used are
241:
that displays a list of items a user can select from
1090: 1081: 1076:field, the browser would execute the script on the 1043: 1033: 624: 618: 408:". Another possible encoding, Internet media type 158:that requires a partially validated email address 58:forms because web users fill out the forms using 1145:Perl CGIs were once a very common way to write 527:to implement various functions in consistent, 396:rules, with a number of modifications such as 259:giving you a list of eye colors to choose from 46:allows a user to enter data that is sent to a 272:These basic elements provide the most common 265:a text area to describe your athletic ability 8: 148:that allows input of a single line of text. 70:. For example, forms can be used to enter 1565:Wikibooks: HyperText Markup Language/Forms 535:. One disadvantage to server side code is 1503:"Intro to Online Forms and Form Builders" 1295:HTML forms were first implemented by the 1117:. Perl scripts are traditionally used as 629:variables, depending on the value of the 400:normalization and replacing spaces with " 109:element. This HTML element specifies the 94:Sample form. The form is enclosed in an 89: 1415:"input type=color – color-well control" 1335: 511:, to retrieving and storing data in a 384:transport was also used. The default 7: 1439:User-agent support for email based 1363:"Better Web Forms with HTML5 Forms" 1113:is another language often used for 50:for processing. Forms can resemble 1443:form submission, using a 'mailto' 1032:The sample code above uses PHP's 321:of the control in the label tag's 25: 1556:'s spec page for forms in HTML 4. 1361:Satrom, Brandon (November 2011). 390:application/x-www-form-urlencoded 133:Forms can be made up of standard 1278:Some companies offer forms as a 386:MIME type (internet media type) 249:a text box asking for your name 439:, which tend to have stronger 416:Use with programming languages 1: 1474:"PHP: Hypertext Preprocessor" 1451:capabilities, or by becoming 472:(DOM) leads to the method of 728:"form_handler.php" 197:control for uploading a file 1613: 1239:"Hello, $ name!" 468:. Using JavaScript on the 464:language for web sites is 334:to enter email addresses, 102:Forms are enclosed in the 27:Input fields on a Web page 1587:User interface techniques 1560:HTML5 forms specification 1106:Perl programming language 637:input field on the page: 1570:Try out HTML properties. 1161: 1126:than using CGI (such as 1119:Common Gateway Interface 997:/* printing the value */ 855: 646: 274:graphical user interface 135:graphical user interface 117:of submitting the data, 1550:Forms in HTML documents 1455:by implementing entire 338:for telephone numbers, 1203:"first_name" 891:FILTER_SANITIZE_STRING 885:"first_name" 762:"first_name" 547: 372:request message using 310:HTML 4 introduced the 295:appropriately, nested 227:input field except a 168:that requires a number 111:communication endpoint 99: 1389:"Forms – HTML5" 1344:"HTML/Elements/label" 1268:Matt's Script Archive 1254:Form-to-email scripts 858:<!DOCTYPE html> 649:<!DOCTYPE html> 557:interpreted languages 551:Interpreted languages 545: 499:Server-side execution 470:Document Object Model 462:client-side scripting 93: 422:programming language 301:JavaScript libraries 1527:. Web Design Museum 1525:webdesignmuseum.org 1164:#!/usr/bin/env perl 1100:regular expressions 437:scripting languages 410:multipart/form-data 380:. Historically, an 1488:"Encyclopedia Web" 798:"submit" 548: 428:to create dynamic 100: 98:for visual layout. 533:HTML sanitization 223:— much like the 16:(Redirected from 1604: 1537: 1536: 1534: 1532: 1517: 1511: 1510: 1501:Garofalo, Josh. 1498: 1492: 1491: 1484: 1478: 1477: 1470: 1464: 1437: 1431: 1430: 1428: 1426: 1411: 1405: 1404: 1402: 1400: 1385: 1379: 1378: 1376: 1374: 1358: 1352: 1351: 1340: 1249: 1246: 1243: 1240: 1237: 1234: 1231: 1228: 1225: 1222: 1219: 1216: 1213: 1210: 1207: 1204: 1201: 1198: 1195: 1192: 1189: 1186: 1183: 1180: 1177: 1174: 1171: 1168: 1165: 1158: 1147:web applications 1097: 1096: 1093: 1092:htmlspecialchars 1088: 1087: 1084: 1079: 1078:form_handler.php 1075: 1071: 1070: 1067: 1064: 1061: 1058: 1055: 1052: 1049: 1046: 1040: 1039: 1036: 1028: 1025: 1022: 1019: 1016: 1013: 1010: 1007: 1004: 1001: 998: 995: 992: 989: 986: 983: 980: 977: 974: 971: 968: 965: 962: 959: 956: 953: 950: 947: 944: 941: 938: 934: 931: 928: 925: 922: 919: 916: 913: 910: 907: 904: 901: 898: 895: 892: 889: 886: 883: 880: 877: 874: 871: 868: 865: 862: 859: 852: 851:form_handler.php 845: 842: 839: 836: 833: 830: 827: 824: 821: 818: 815: 812: 809: 806: 802: 799: 796: 793: 790: 787: 784: 781: 778: 775: 772: 769: 766: 763: 760: 757: 754: 751: 747: 744: 741: 738: 735: 732: 729: 726: 723: 720: 717: 714: 711: 708: 705: 702: 699: 696: 693: 690: 686: 683: 680: 677: 674: 671: 668: 665: 662: 659: 656: 653: 650: 643: 636: 632: 628: 627: 622: 621: 616: 581:Adobe ColdFusion 494: 491:field types and 490: 407: 403: 394:percent-encoding 358: 354: 341: 337: 333: 324: 317: 313: 236: 230: 229:<textarea> 226: 222: 221:<textarea> 212: 202: 192: 183: 177: 173: 172:<password> 167: 163: 157: 153: 143: 124: 120: 108: 21: 1612: 1611: 1607: 1606: 1605: 1603: 1602: 1601: 1577: 1576: 1546: 1541: 1540: 1530: 1528: 1519: 1518: 1514: 1500: 1499: 1495: 1486: 1485: 1481: 1472: 1471: 1467: 1453:Internet suites 1438: 1434: 1424: 1422: 1413: 1412: 1408: 1398: 1396: 1387: 1386: 1382: 1372: 1370: 1360: 1359: 1355: 1342: 1341: 1337: 1332: 1305: 1293: 1276: 1256: 1251: 1250: 1247: 1244: 1241: 1238: 1235: 1232: 1229: 1226: 1223: 1220: 1217: 1214: 1211: 1208: 1205: 1202: 1199: 1196: 1193: 1190: 1187: 1184: 1181: 1178: 1175: 1172: 1169: 1166: 1163: 1157:form_handler.pl 1156: 1115:web development 1108: 1094: 1091: 1085: 1082: 1077: 1073: 1068: 1065: 1062: 1059: 1056: 1053: 1050: 1047: 1044: 1037: 1034: 1030: 1029: 1026: 1023: 1020: 1017: 1014: 1011: 1008: 1005: 1002: 999: 996: 993: 990: 987: 984: 981: 978: 975: 972: 969: 966: 963: 960: 957: 954: 951: 948: 945: 942: 939: 936: 932: 929: 926: 923: 920: 917: 914: 911: 908: 905: 902: 899: 896: 893: 890: 887: 884: 881: 878: 875: 872: 869: 866: 863: 860: 857: 850: 847: 846: 843: 840: 837: 834: 831: 828: 825: 822: 819: 816: 813: 810: 807: 804: 800: 797: 794: 791: 788: 785: 782: 779: 776: 773: 770: 767: 764: 761: 758: 755: 752: 749: 745: 742: 739: 736: 733: 730: 727: 724: 721: 718: 715: 712: 709: 706: 703: 700: 697: 694: 691: 688: 684: 681: 678: 675: 672: 669: 666: 663: 660: 657: 654: 651: 648: 641: 634: 630: 625: 619: 614: 608:web programming 601: 553: 501: 492: 488: 453: 418: 405: 401: 366: 356: 352: 339: 335: 331: 322: 315: 311: 234: 228: 224: 220: 210: 200: 190: 181: 175: 171: 165: 161: 155: 151: 141: 131: 122: 118: 106: 88: 28: 23: 22: 15: 12: 11: 5: 1610: 1608: 1600: 1599: 1594: 1589: 1579: 1578: 1573: 1572: 1567: 1562: 1557: 1545: 1544:External links 1542: 1539: 1538: 1512: 1493: 1479: 1465: 1432: 1406: 1380: 1353: 1350:. 19 May 2023. 1334: 1333: 1331: 1328: 1327: 1326: 1321: 1316: 1311: 1304: 1301: 1292: 1289: 1280:hosted service 1275: 1272: 1255: 1252: 1162: 1107: 1104: 912:"en" 856: 664:"en" 647: 600: 597: 552: 549: 517:spell checking 505:authenticating 500: 497: 452: 449: 445:buffer overrun 417: 414: 404:" instead of " 365: 362: 340:<number> 270: 269: 266: 263: 260: 253: 250: 243: 242: 239:drop-down list 235:<select> 232: 218: 211:<submit> 208: 198: 188: 179: 174:— similar to 169: 162:<number> 159: 149: 130: 127: 87: 84: 26: 24: 14: 13: 10: 9: 6: 4: 3: 2: 1609: 1598: 1595: 1593: 1590: 1588: 1585: 1584: 1582: 1575: 1571: 1568: 1566: 1563: 1561: 1558: 1555: 1551: 1548: 1547: 1543: 1526: 1522: 1516: 1513: 1508: 1504: 1497: 1494: 1489: 1483: 1480: 1475: 1469: 1466: 1462: 1458: 1457:Email clients 1454: 1450: 1446: 1442: 1436: 1433: 1420: 1416: 1410: 1407: 1394: 1390: 1384: 1381: 1368: 1367:MSDN Magazine 1364: 1357: 1354: 1349: 1345: 1339: 1336: 1329: 1325: 1322: 1320: 1317: 1315: 1312: 1310: 1307: 1306: 1302: 1300: 1298: 1290: 1288: 1285: 1281: 1274:Form builders 1273: 1271: 1269: 1265: 1264:"FormMail.pl" 1261: 1253: 1182:qw(:standard) 1160: 1159: 1153: 1150: 1148: 1143: 1141: 1137: 1133: 1129: 1125: 1120: 1116: 1112: 1105: 1103: 1101: 1098:function, or 979:"Hello, 854: 853: 645: 644: 638: 611: 609: 605: 598: 596: 594: 590: 586: 582: 578: 574: 570: 566: 562: 558: 550: 544: 540: 538: 534: 530: 526: 522: 519:, to sending 518: 514: 510: 506: 498: 496: 486: 482: 477: 475: 471: 467: 463: 460: 459: 450: 448: 446: 442: 438: 433: 431: 427: 423: 415: 413: 411: 399: 395: 391: 387: 383: 379: 375: 371: 363: 361: 350: 345: 332:<email> 327: 320: 312:<label> 308: 306: 302: 298: 294: 290: 285: 283: 279: 275: 267: 264: 261: 258: 254: 251: 248: 247: 246: 240: 233: 219: 216: 209: 206: 201:<reset> 199: 196: 189: 187: 182:<radio> 180: 170: 164:- a type of 160: 154:- a type of 152:<email> 150: 147: 140: 139: 138: 136: 128: 126: 116: 112: 105: 97: 92: 85: 83: 81: 80:search engine 77: 73: 69: 65: 64:radio buttons 61: 57: 53: 49: 45: 41: 37: 33: 19: 1574: 1529:. Retrieved 1524: 1515: 1507:Blitzen Blog 1506: 1496: 1482: 1468: 1435: 1423:. Retrieved 1418: 1409: 1397:. Retrieved 1392: 1383: 1371:. Retrieved 1366: 1356: 1347: 1338: 1294: 1277: 1257: 1155: 1154: 1151: 1144: 1109: 1083:filter_input 1035:filter_input 1031: 873:filter_input 849: 848: 640: 639: 612: 602: 555:Some of the 554: 529:standardized 525:web browsers 502: 478: 474:Dynamic HTML 457: 454: 434: 419: 367: 353:<date> 328: 309: 293:semantically 286: 271: 244: 225:<text> 205:reset button 191:<file> 186:radio button 176:<text> 166:<text> 156:<text> 142:<text> 132: 107:<form> 101: 39: 35: 31: 29: 1531:17 February 1399:20 February 1373:20 February 1369:. Microsoft 1348:w3.org wiki 1284:Web hosting 867:$ firstName 537:scalability 495:attribute. 451:Client-side 336:<tel> 195:file select 144:— a simple 86:Description 76:credit card 68:text fields 1581:Categories 1521:"ViolaWWW" 1425:31 October 1330:References 1124:web server 765:/></ 635:first_name 481:validation 466:JavaScript 426:developers 364:Submission 349:JavaScript 257:select box 137:elements: 96:HTML table 60:checkboxes 18:Form (web) 1592:HTML tags 1299:browser. 1074:firstname 1072:into the 985:firstName 879:INPUT_GET 811:></ 771:></ 642:form.html 447:attacks. 430:web sites 424:to allow 319:attribute 282:grid view 278:tree view 40:HTML form 1463:scripts. 1314:Postback 1303:See also 1266:made by 1260:spammers 1140:mod_perl 973:<?php 861:<?php 786:>< 740:>< 513:database 493:required 458:de facto 303:such as 146:text box 129:Elements 72:shipping 56:database 44:web page 36:web form 1309:CAPTCHA 1291:History 1128:FastCGI 991:!" 620:$ _POST 593:ASP.NET 487:'s new 398:newline 32:webform 1552:, the 1419:w3.org 1393:w3.org 1319:XForms 1212:header 1191:$ name 1170:strict 1136:Apache 1066:script 1063:)</ 1048:script 935:Output 808:button 803:Submit 789:button 748:Name: 722:action 631:method 626:$ _GET 615:action 565:Python 521:e-mail 441:string 305:jQuery 215:button 115:method 48:server 1421:. W3C 1395:. W3C 1297:Viola 1218:print 1209:print 1197:param 1132:Plack 1054:alert 1021:</ 1012:</ 1003:</ 1000:?> 946:</ 940:title 937:</ 930:title 897:?> 838:</ 829:</ 820:</ 805:</ 768:label 753:input 743:label 698:</ 692:title 689:</ 682:title 591:with 515:, to 509:login 489:input 485:HTML5 382:email 357:color 344:focus 297:lists 289:table 66:, or 52:paper 42:on a 1597:HTML 1533:2022 1449:SMTP 1441:HTML 1427:2014 1401:2014 1375:2014 1324:HTML 1227:body 1221:html 1111:Perl 1069:> 1051:> 1045:< 1027:> 1024:html 1018:> 1015:body 1009:> 976:echo 970:> 964:< 961:> 958:body 955:< 952:> 949:head 943:> 933:> 927:< 924:> 921:head 918:< 915:> 906:lang 903:html 900:< 844:> 841:html 835:> 832:body 826:> 823:form 817:> 801:> 792:type 780:< 777:> 756:name 750:< 746:> 734:< 731:> 719:form 716:< 713:> 710:body 707:< 704:> 701:head 695:> 687:Form 685:> 679:< 676:> 673:head 670:< 667:> 658:lang 655:html 652:< 587:and 585:Java 573:Perl 569:Ruby 455:The 378:POST 370:HTTP 237:— a 213:— a 203:— a 193:— a 184:— a 123:POST 104:HTML 1554:W3C 1461:CGI 1445:URL 1179:CGI 1176:use 1167:use 1142:). 1138:'s 1134:or 982:$ { 623:or 604:PHP 599:PHP 577:JSP 561:PHP 406:%20 376:or 374:GET 323:for 280:or 121:or 119:GET 74:or 54:or 38:or 1583:: 1523:. 1505:. 1417:. 1391:. 1365:. 1346:. 1248:); 1245:), 1242:), 1206:); 1188:my 1130:, 1095:() 1086:() 1038:() 894:); 610:. 595:. 589:C# 579:, 575:, 571:, 567:, 563:, 507:a 388:, 316:id 307:. 284:. 255:a 125:. 82:. 62:, 34:, 30:A 1535:. 1509:. 1490:. 1476:. 1429:. 1403:. 1377:. 1236:( 1233:p 1230:( 1224:( 1215:; 1200:( 1194:= 1185:; 1173:; 1060:1 1057:( 1006:p 994:; 988:} 967:p 909:= 888:, 882:, 876:( 870:= 814:p 795:= 783:p 774:p 759:= 737:p 725:= 661:= 402:+ 20:)

Index

Form (web)
web page
server
paper
database
checkboxes
radio buttons
text fields
shipping
credit card
search engine
test
HTML table
HTML
communication endpoint
method
graphical user interface
text box
radio button
file select
reset button
button
drop-down list
select box
graphical user interface
tree view
grid view
table
semantically
lists

Text is available under the Creative Commons Attribution-ShareAlike License. Additional terms may apply.