HTML form

Awebform,web formorHTML formon aweb pageallows a user to enter data that is sent to aserverfor processing. Forms can resemblepaperordatabaseforms because web users fill out the forms usingcheckboxes,radio buttons,ortext fields.For example, forms can be used to entershippingorcredit carddata to order a product, or can be used to retrieve search results from asearch engine.

Description

Sample form. The form is enclosed in anHTML tablefor visual layout.

Forms are enclosed in theHTML<form>element. This HTML element specifies thecommunication endpointthe data entered into the form should be submitted to, and themethodof submitting the data,GETorPOST.

Elements

Forms can be made up of standardgraphical user interfaceelements:

• <text>— a simpletext boxthat allows input of a single line of text.
• <email>- a type of<text>that requires a partially validated email address
• <number>- a type of<text>that requires a number
• <password>— similar to<text>,it is used for security purposes, in which the characters typed in are invisible or replaced by symbols such as *
• <radio>— aradio button
• <file>— afile selectcontrol for uploading a file
• <reset>— areset buttonthat, when activated, tells the browser to restore the values of the current form, to their initial values.
• <submit>— abuttonthat tells the browser to take action on the form (typically to send it to a server)
• <textarea>— much like the<text>input field except a<textarea>allows for multiple rows of data to be shown and entered
• <select>— adrop-down listthat displays a list of items a user can select from

The sample image on the right shows most of these elements:

• a text box asking for your name
• a pair of radio buttons asking you to choose between gender values
• aselect boxgiving you a list of eye colors to choose from
• a pair of check boxes to click on if they apply to you
• a text area to describe your athletic ability
• a submit button to send current form values to the server

These basic elements provide the most commongraphical user interface(GUI) elements, but not all. For example, there are no equivalents to atree vieworgrid view.

A grid view, however, can be mimicked by using a standard HTMLtablewith each cell containing a text input element. A tree view could also be mimicked through nested tables or, moresemanticallyappropriately, nestedlists.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 throughJavaScript librariessuch 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 theidattributeof the control in the label tag'sforattribute.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 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<email>to enter email addresses,<tel>for telephone numbers,<number>for numeric values. There are additional attributes to specify required fields, fields that should have keyboardfocuswhen 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. The<date>input type displays a calendar from which the user can select a date or date range.And thecolorinput 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).

Submission

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 anHTTPrequest message usingGETorPOST.Historically, anemailtransport was also used.The defaultMIME type (internet media type),application/x-www-form-urlencoded,is based on a very early version of the general URIpercent-encodingrules, with a number of modifications such asnewlinenormalization 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.

Use with programming languages

Forms are usually combined with programs written in variousprogramming languageto allowdevelopersto 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 strongerstringhandling functionality than programming languages such as C, and also have automatic memory management which helps to preventbuffer overrunattacks.

Client-side

Thede factoclient-side scriptinglanguage for web sites isJavaScript. Using JavaScript on theDocument Object Model(DOM) leads to the method ofDynamic HTMLthat 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-validationof 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 newinputfield types andrequiredattribute.

Server-side execution

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 — fromauthenticatingalogin,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 browsersto implement various functions in consistent,standardizedways. 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.

Registration form of PHP-based e-commerce web-shop software ZenCart

Interpreted languages

Some of theinterpreted languagescommonly used to design interactive forms in web development arePHP,Python,Ruby,Perl,JSP,Adobe ColdFusionand some of the compiled languages commonly used areJavaandC#withASP.NET.

PHP

PHPis one very common language used for server-side "programming" and is one of the few languages created specifically forweb programming.

To use PHP with an HTML form, the URL of the PHP script is specified in theactionattribute of the form tag. The target PHP file then accesses the data passed by the form through PHP's$_POSTor$_GETvariables, depending on the value of themethodattribute used in the form. Here is a basic form handler PHP script that will display the contents of thefirst_nameinput 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 thefirstnamefield, the browser would execute the script on theform_handler.phppage, 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 expressionsto sanitize the user input before doing anything with it.

Perl programming language

Perlis another language often used forweb development.Perl scripts are traditionally used asCommon Gateway Interfaceapplications (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 serverthan using CGI (such asFastCGI,PlackorApache'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 perl
usestrict;
useCGIqw(:standard);

my$name=param("first_name");
printheader;
printhtml(
body(
p("Hello, $name!"),
),
);

Form-to-email scripts

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.

Form builders

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.Web hostingcompanies 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.

History

HTML forms were first implemented by theViolabrowser.

See also

• CAPTCHA
• Postback
• XForms
• HTML

External links

• Forms in HTML documents,theW3C's spec page for forms in HTML 4.
• HTML5 forms specification
• Wikibooks: HyperText Markup Language/Forms
• Try out HTML properties.