imported>Bruce1ee: Undid revision 1297504363 by 151.236.178.237 (talk) - unconstructive

2025-06-26T23:59:13Z

Undid revision 1297504363 by 151.236.178.237 (talk) - unconstructive

New page

{{short description|Input fields on a Web page}}
A '''webform''', '''web form''' or '''HTML form''' on a [[web page]] allows a user to enter data that is sent to a [[Server (computing)|server]] for processing. Forms can resemble [[form (document)|paper]] or [[database]] forms because web users fill out the forms using [[checkbox|checkboxes]], [[radio buttons]], or [[text fields]]. For example, forms can be used to enter [[shipping]] or [[credit card]] data to order a product, or can be used to retrieve search results from a [[search engine]].

==Description==
[[File:Sample web form.png|thumb|393px|Sample form. The form is enclosed in an [[HTML table]] for visual layout.|alt=test]]

Forms are enclosed in the [[HTML]] <code><form></code> element. This HTML element specifies the [[communication endpoint]] the data entered into the form should be submitted to, and the [[HTTP request|method]] of submitting the data, <code>GET</code> or <code>POST</code>.

===Elements===
Forms can be made up of standard [[graphical user interface]] elements:
* <code><button></code> — a button that can be tied to action such as submitting the form, resetting the form or executing a JavaScript function.
* <code><input></code> — a element for user input. The element varies by the value of its <code>type</code> attribute.
* <code><textarea></code> — much like the <code><text></code> input field except a <code><textarea></code> allows for multiple rows of data to be shown and entered
* <code><select></code> — a [[drop-down list]] that displays a list of items a user can select from

The input element can have the following types:
* <code>text</code> — a simple [[text box]] that allows input of a single line of text.
* <code>email</code> - a type of <code><text></code> that requires a partially validated email address
* <code>number</code> - a type of <code><text></code> that requires a number
* <code>password</code> — similar to <code><text></code>, it is used for security purposes, in which the characters typed in are invisible or replaced by symbols such as *
* <code>tel</code> — a telephone number
* <code>radio</code> — a [[radio button]]
* <code>file</code> — a [[file select]] control for uploading a file
* <code>reset</code> — a [[reset button]] that, when activated, tells the browser to restore the values of the current form, to their initial values.
* <code>submit</code> — a [[button (computing)|button]] 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:
* a text box asking for your name
* a pair of radio buttons asking you to choose between gender values
* a [[Drop-down list|select box]] giving 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 common [[graphical user interface]] (GUI) elements, but not all. For example, there are no equivalents to a [[tree view]] or [[grid view]].

A grid view, however, can be mimicked by using a standard HTML [[Table (HTML)|table]] with each cell containing a text input element. A tree view could also be mimicked through nested tables or, more [[HTML#Semantic HTML|semantically]] appropriately, nested [[HTML element#Lists|lists]]. 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 [[JavaScript library|JavaScript libraries]] such as [[jQuery]].

HTML 4 introduced the <code><label></code> tag, which is intended to represent a caption in a user interface, and can be associated with a specific form control by specifying the <code>id</code> [[HTML attribute|attribute]] of the control in the label tag's <code>for</code> attribute.<ref>{{cite web
| url=http://www.w3.org/wiki/HTML/Elements/label | title=HTML/Elements/label | work=w3.org wiki
| date=19 May 2023 }}</ref> 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 include <code>email</code> to enter email addresses, <code>tel</code> for telephone numbers, <code>number</code> for numeric values. There are additional attributes to specify required fields, fields that should have keyboard [[focus (computing)|focus]] 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 [[JavaScript]], but had become so common that support for them was added to the standard. The <code>date</code> input type displays a calendar from which the user can select a date or date range.<ref>{{cite web
| url=http://msdn.microsoft.com/en-us/magazine/hh547102.aspx | title=Better Web Forms with HTML5 Forms | publisher=Microsoft | work=MSDN Magazine | date=November 2011 | access-date=2014-02-20
| author=Satrom, Brandon
}}</ref><ref>{{cite web
| url=http://www.w3.org/TR/html5/forms.html | title=Forms – HTML5 | publisher=W3C | work=w3.org | access-date=2014-02-20
}}</ref> And the <code>color</code> 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,<ref>{{cite web
| url=http://www.w3.org/TR/html-markup/input.color.html | title=input type<nowiki>=</nowiki>color – color-well control | publisher=W3C | work=w3.org | access-date=2014-10-31
}}</ref> 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 an [[HTTP]] request message using [[Hypertext Transfer Protocol#Request methods|GET]] or [[POST (HTTP)|POST]]. Historically, an [[email]] transport was also used.<ref>User-agent support for email based [[Hypertext Markup Language|HTML]] form submission, using a 'mailto' [[Uniform Resource Locator|URL]] 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 [[Simple Mail Transfer Protocol|SMTP]] capabilities, or by becoming [[Internet suite]]s by implementing entire [[Email client]]s. Although sometimes unreliable, it was briefly popular as a simple way to transmit form data without involving a web server or [[Common Gateway Interface|CGI]] scripts.</ref> The default [[MIME type|MIME type (internet media type)]], [[application/x-www-form-urlencoded]], is based on a very early version of the general URI [[percent-encoding]] rules, with a number of modifications such as [[newline]] normalization and replacing spaces with "<code>+</code>" instead of "<code>%20</code>". Another possible encoding, Internet media type [[multipart/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 various [[programming language]] to allow [[Software developer|developer]]s to create dynamic [[web site]]s. 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 are [[scripting languages]], which tend to have stronger [[string (programming)|string]] handling functionality than programming languages such as C, and also have automatic [[memory management]] which helps to prevent [[buffer overrun]] attacks.

===Client-side===
The [[de facto standard|''de facto'']] [[client-side scripting]] language for web sites is [[JavaScript]].
Using JavaScript on the [[Document Object Model]] (DOM) leads to the method of [[Dynamic 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-[[Data validation|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, by [[HTML5]]'s new <code>input</code> field types and <code>required</code> attribute.

===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 — from [[authentication|authenticating]] a [[login]], to retrieving and storing data in a [[database]], to [[spell checker|spell checking]], to sending [[e-mail]]. A significant advantage to server-side over client-side execution is the concentration of functionality onto the server rather than relying on different [[web browser]]s to implement various functions in consistent, [[Web standards|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 as [[HTML sanitization]]. One disadvantage to server side code is [[scalability]]—server side processing for all users occurs on the server, while client side processing occurs on individual client computers.

[[File:Zen-cart Web-Shop Frontend Registration Form.png|thumb|Registration form of PHP-based e-commerce web-shop software ZenCart]]

===Interpreted languages===
Some of the [[interpreted language]]s commonly used to design interactive forms in web development are [[PHP]], [[Python (programming language)|Python]], [[Ruby (programming language)|Ruby]], [[Perl]], [[JavaServer Pages|JSP]], [[Adobe ColdFusion]] and some of the compiled languages commonly used are [[Java (programming language)|Java]] and [[C Sharp (programming language)|C#]] with [[ASP.NET]].

====PHP====
[[PHP]] is one very common language used for server-side "programming" and is one of the few languages created specifically for [[web programming]].<ref>{{cite web|url=http://www.php.net/|title=PHP: Hypertext Preprocessor}}</ref><ref>{{cite web|url=http://www.lampfire.com/encyclopedia-web/php.php|title=Encyclopedia Web}}</ref>

To use PHP with an HTML form, the URL of the PHP script is specified in the <code>action</code> attribute of the form tag. The target PHP file then accesses the data passed by the form through PHP's <syntaxhighlight lang="php" inline>$_POST</syntaxhighlight> or <syntaxhighlight lang="php" inline>$_GET</syntaxhighlight> variables, depending on the value of the <code>method</code> attribute used in the form. Here is a basic form handler PHP script that will display the contents of the {{samp|first_name}} input field on the page:

'''{{samp|form.html}}'''
<syntaxhighlight lang="html"><!DOCTYPE html>
<html lang="en">
<head>
<title>Form</title>
</head>
<body>
<form action="form_handler.php">
<p><label>Name: <input name="first_name" /></label></p>
<p><button type="submit">Submit</button></p>
</form>
</body>
</html></syntaxhighlight>

'''{{samp|form_handler.php}}'''
<syntaxhighlight lang="html+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);
?>
<html lang="en">
<head>
<title>Output</title>
</head>
<body>
<p>
<?php echo "Hello, {$firstName}!"; /* printing the value */?>
</p>
</body>
</html>
</syntaxhighlight>

The sample code above uses PHP's <syntaxhighlight lang="php" inline>filter_input()</syntaxhighlight> 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 <syntaxhighlight lang="html" inline><script>alert(1)</script></syntaxhighlight> into the {{samp|firstname}} field, the browser would execute the script on the {{samp|form_handler.php}} page, just as if it had been coded by the developer; malicious code could be executed this way. <syntaxhighlight lang="php" inline>filter_input()</syntaxhighlight> was introduced in PHP 5.2. Users of earlier PHP versions could use the <syntaxhighlight lang="php" inline>htmlspecialchars()</syntaxhighlight> function, or [[regular expressions]] to sanitize the user input before doing anything with it.

====Perl programming language====
[[Perl]] is another language often used for [[web development]]. Perl scripts are traditionally used as [[Common 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 a [[web server]] than using CGI (such as [[FastCGI]], [[Plack (software)|Plack]] or [[Apache HTTP Server|Apache]]'s [[mod_perl]]).

Perl CGIs were once a very common way to write [[web application]]s. 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:

'''{{samp|form_handler.pl}}'''
<syntaxhighlight lang="perl">
#!/usr/bin/env perl
use strict;
use CGI qw(:standard);

my $name = param("first_name");
print header;
print html(
body(
p("Hello, $name!"),
),
);
</syntaxhighlight>

====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 by [[spammer]]s, 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 [http://www.scriptarchive.com/formmail.html "FormMail.pl"] made by [[Matt'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 a [[Software as a service|hosted 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.<ref>{{cite web|url=https://blitzen.com/blog/intro-online-forms-form-builders/|title=Intro to Online Forms and Form Builders|last1=Garofalo|first1=Josh|website=Blitzen Blog}}</ref> [[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.

==History==
HTML forms were first implemented by the [[ViolaWWW|Viola]] browser.<ref>{{cite web |title=ViolaWWW |url=https://www.webdesignmuseum.org/web-design-history/violawww-1992 |website=webdesignmuseum.org |publisher=Web Design Museum |access-date=17 February 2022}}</ref>

==See also==
* [[CAPTCHA]]
* [[Postback]]
* [[XForms]]
* [[HTML]]

==References==
{{reflist}}

==External links==
* [http://www.w3.org/TR/html4/interact/forms.html Forms in HTML documents], the [[W3C]]'s spec page for forms in HTML 4.
* [http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html HTML5 forms specification]
* [[Wikibooks:HyperText Markup Language/Forms|Wikibooks: HyperText Markup Language/Forms]]
* [https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_form_submit Try out HTML properties.]

{{Authority control}}
{{Use dmy dates|date=August 2024}}

[[Category:User interface techniques]]
[[Category:HTML tags]]
[[Category:HTML]]

HTML form - Revision history

imported>Bruce1ee: Undid revision 1297504363 by 151.236.178.237 (talk) - unconstructive