HTML form

Elements

Forms can be made up of standard graphical 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 its type attribute.
• <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 input element can have the following types:

• 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 *
• tel — a telephone number
• radio — a radio button
• file — a file select control for uploading a file
• reset — a reset button that, 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)

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 table with each cell containing a text input element. A tree view could also be mimicked through nested tables or, more semantically appropriately, nested 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 libraries such as jQuery.

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 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 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).

Client-side

The 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-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 authenticating a login, to retrieving and storing data in a database, to 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 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 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.

Interpreted languages

Some of the interpreted languages commonly used to design interactive forms in web development are PHP, Python, Ruby, Perl, JSP, Adobe ColdFusion and some of the compiled languages commonly used are Java and C# with ASP.NET.

<!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>

<!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>

#!/usr/bin/env perl
use strict;
use CGI qw(:standard);

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

Form builders

Some companies offer forms as a 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.^[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.