Awebform,web form orHTML form on aweb page allows a user to enter data that is sent to aserver for processing. Forms can resemblepaper ordatabase forms because web users fill out the forms usingcheckboxes,radio buttons, ortext fields. For example, forms can be used to entershipping orcredit card data to order a product, or can be used to retrieve search results from asearch engine.
Forms are enclosed in theHTML<form> element. This HTML element specifies thecommunication endpoint the data entered into the form should be submitted to, and themethod of submitting the data,GET orPOST.
Forms can be made up of standardgraphical user interface elements:
<button> — a button that can be tied to action such as submitting the form, resetting the form or executing a JavaScript function.<input> — a element for user input. The element varies by the value of itstype attribute.<textarea> — much like the<text> input field except a<textarea> allows for multiple rows of data to be shown and entered<select> — adrop-down list that displays a list of items a user can select fromThe input element can have the following types:
text — a simpletext box that allows input of a single line of text.email - a type of<text> that requires a partially validated email addressnumber - a type of<text> that requires a numberpassword — similar to<text>, it is used for security purposes, in which the characters typed in are invisible or replaced by symbols such as *tel — a telephone numberradio — aradio buttonfile — afile select control for uploading a filereset — areset button that, when activated, tells the browser to restore the values of the current form, to their initial values.submit — abutton that tells the browser to take action on the form (typically to send it to a server)The sample image on the right shows most of these elements:
These basic elements provide the most commongraphical user interface (GUI) elements, but not all. For example, there are no equivalents to atree view orgrid view.
A grid view, however, can be mimicked by using a standard HTMLtable with each cell containing a text input element. A tree view could also be mimicked through nested tables or, moresemantically appropriately, nestedlists. In both cases, aserver-side process is responsible for processing the information, while JavaScript handles the user-interaction. Implementations of these interface elements are available throughJavaScript libraries such asjQuery.
HTML 4 introduced the<label> tag, which is intended to represent a caption in a user interface, and can be associated with a specific form control by specifying theidattribute of the control in the label tag'sfor attribute.[1] 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).
HTML 5 introduces a number of input types 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 includeemail to enter email addresses,tel for telephone numbers,number for numeric values. There are additional attributes to specify required fields, fields that should have keyboardfocus 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 withJavaScript, but had become so common that support for them was added to the standard. Thedate input type displays a calendar from which the user can select a date or date range.[2][3] And thecolor input type can be represented as an input text simply checking the value entered is a correcthexadecimal representation of a color, according to the specification,[4] or a color picker widget (the latter being the solution used in most browsers which support this attribute).
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 anHTTP request message usingGET orPOST. Historically, anemail transport was also used.[5] The defaultMIME type (internet media type),application/x-www-form-urlencoded, is based on a very early version of the general URIpercent-encoding rules, with a number of modifications such asnewline normalization and replacing spaces with "+" instead of "%20". Another possible encoding, Internet media typemultipart/form-data, is also available and is common for POST-based file submissions.
Forms are usually combined with programs written in variousprogramming language to allowdevelopers to create dynamicweb sites. The most popular languages include both client-side and/or server-side languages.
Although any programming language can be used on the server to process a form's data, the most commonly used languages arescripting languages, which tend to have strongerstring handling functionality than programming languages such as C, and also have automaticmemory management which helps to preventbuffer overrun attacks.
Thede factoclient-side scripting language for web sites isJavaScript.Using JavaScript on theDocument Object Model (DOM) leads to the method ofDynamic HTML that allows dynamic creation and modification of a web page within the browser.
While client-side languages used in conjunction with forms are limited, they often can serve to do pre-validation of the form data and/or to prepare the form data to send to a server-side program. This usage is being replaced, however, byHTML5's newinput field types andrequired attribute.
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 — fromauthenticating alogin, to retrieving and storing data in adatabase, tospell checking, to sendinge-mail. A significant advantage to server-side over client-side execution is the concentration of functionality onto the server rather than relying on differentweb browsers to implement various functions in consistent,standardized 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 asHTML sanitization. One disadvantage to server side code isscalability—server side processing for all users occurs on the server, while client side processing occurs on individual client computers.
Some of theinterpreted languages commonly used to design interactive forms in web development arePHP,Python,Ruby,Perl,JSP,Adobe ColdFusion and some of the compiled languages commonly used areJava andC# withASP.NET.
PHP is one very common language used for server-side "programming" and is one of the few languages created specifically forweb programming.[6][7]
To use PHP with an HTML form, the URL of the PHP script is specified in theaction attribute of the form tag. The target PHP file then accesses the data passed by the form through PHP's$_POST or$_GET variables, depending on the value of themethod attribute used in the form. Here is a basic form handler PHP script that will display the contents of thefirst_name input field on the page:
form.html
<!DOCTYPE html><htmllang="en"><head><title>Form</title></head><body><formaction="form_handler.php"><p><label>Name:<inputname="first_name"/></label></p><p><buttontype="submit">Submit</button></p></form></body></html>
form_handler.php
<!DOCTYPE html><?php// requesting the value of the external variable "first_name" and filtering it.$firstName=filter_input(INPUT_GET,"first_name",FILTER_SANITIZE_STRING);?><htmllang="en"><head><title>Output</title></head><body><p><?phpecho"Hello,{$firstName}!";/* printing the value */?></p></body></html>
The sample code above uses PHP'sfilter_input() 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<script>alert(1)</script> into thefirstname field, the browser would execute the script on theform_handler.php page, just as if it had been coded by the developer; malicious code could be executed this way.filter_input() was introduced in PHP 5.2. Users of earlier PHP versions could use thehtmlspecialchars() function, orregular expressions to sanitize the user input before doing anything with it.
Perl is another language often used forweb development. Perl scripts are traditionally used asCommon Gateway Interface 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 aweb server than using CGI (such asFastCGI,Plack orApache'smod_perl).
Perl CGIs were once a very common way to writeweb applications. However, many web hosts today effectively only support PHP, and developers of web applications often seek compatibility with them.
A modern Perl 5 CGI using the CGI module with a form similar to the one above might look like:
form_handler.pl
#!/usr/bin/env perlusestrict;useCGIqw(:standard);my$name=param("first_name");printheader;printhtml(body(p("Hello, $name!"),),);
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 byspammers, 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"FormMail.pl" made byMatt's Script Archive. Today, this script is no longer widely used in new development due to lack of updates, security concerns, and difficulty of configuration.
Some companies offer forms as ahosted service. 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.[8]Web hosting 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.
HTML forms were first implemented by theViola browser.[9]
