HTML form
A webform, web form or HTML form on a
Description
Forms are enclosed in the
GET
or POST
.
Elements
Forms can be made up of standard graphical user interface elements:
<text>
— a simple text box that 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>
— a radio button<file>
— a file select control 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>
— a button that 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>
— a drop-down list that 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
- a 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
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 the id
attribute of the control in the label tag's for
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 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 keyboard 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 <date>
input type displays a calendar from which the user can select a date or date range.[2][3] And the color
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,[4] 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
Use with programming languages
Forms are usually combined with programs written in various
Although any programming language can be used on the server to process a form's data, the most commonly used languages are
Client-side
The
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, by HTML5's new input
field types and required
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
Interpreted languages
Some of the
.PHP
To use PHP with an HTML form, the URL of the PHP script is specified in the action
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 the method
attribute used in the form. Here is a basic form handler PHP script that will display the contents of the first_name input field on the page:
form.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>
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);
?>
<html lang="en">
<head>
<title>Output</title>
</head>
<body>
<p>
<?php echo "Hello, ${firstName}!"; /* printing the value */?>
</p>
</body>
</html>
The sample code above uses PHP's filter_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 the firstname field, the browser would execute the script on the form_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 the htmlspecialchars()
function, or
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 or Apache's mod_perl).
Perl CGIs were once a very common way to write web 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
use strict;
use CGI qw(:standard);
my $name = param("first_name");
print header;
print html(
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 by
Form builders
Some companies offer forms as a
History
HTML forms were first implemented by the Viola browser.[9]
See also
References
- ^ "HTML/Elements/label". w3.org wiki. 19 May 2023.
- ^ Satrom, Brandon (November 2011). "Better Web Forms with HTML5 Forms". MSDN Magazine. Microsoft. Retrieved 2014-02-20.
- ^ "Forms – HTML5". w3.org. W3C. Retrieved 2014-02-20.
- ^ "input type=color – color-well control". w3.org. W3C. Retrieved 2014-10-31.
- 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 SMTP capabilities, or by becoming Internet suites by implementing entire Email clients. Although sometimes unreliable, it was briefly popular as a simple way to transmit form data without involving a web server or CGIscripts.
- ^ "PHP: Hypertext Preprocessor".
- ^ "Encyclopedia Web".
- ^ Garofalo, Josh. "Intro to Online Forms and Form Builders". Blitzen Blog.
- ^ "ViolaWWW". webdesignmuseum.org. Web Design Museum. Retrieved 17 February 2022.
External links
- Forms in HTML documents, the W3C's spec page for forms in HTML 4.
- HTML5 forms specification
- Wikibooks: HyperText Markup Language/Forms
- Try out HTML properties.