HTML forms

January 2017


Interactive forms let web page authors give their pages interactive elements, such as for receiving messages from their readers, much like the reply cards found in some magazines.

The reader enters information by filling in fields or clicking on buttons, then pressing a submit button to send it to a URL, normally one pointing to an e-mail address or to a dynamic web script like PHP, ASP, or a CGI script.

The FORM tag

Forms are delimited with the <FORM> ... </FORM> tag, which contains several form elements, such as buttons and text boxes, and which must possess the following attributes:

  • METHOD indicates how replies will be sent
    "POST" is the value that sends the data to the processing agent by storing it in the body of the form, while "GET" sends the data by adding it to the URL, separating it from the address with an exclamation mark (to learn more about the POST and GET methords, consult the article on HTTP protocol)
  • ACTION indicates the address that the information will be sent to (a CGI script or e-mail address (mailto:email.address@machine))
An optional attribute of the FORM tag is ENCTYPE, which specifies how the form data is encoded in the URL. However, this does not need to be specified, since the default value (application/x-www-form-urlencoded) is the only legal value. The optional attribute ACCEPT is used to set MIME types for the data which the form can send.

This is the syntax for the FORM tag:

<FORM METHOD="POST" or "GET" ACTION="url" ENCTYPE="x-www-form-urlencoded">

Here are a few examples of FORM tags:



Inside the FORM Tag

The FORM tag acts as a sort of container for storing elements which let the user select or enter data. All data will be sent to the URL indicated in the ACTION attribute of the FORM tag by the method indicated by the METHOD attribute.

Any basic HTML element may be inserted into a FORM tag (such as text, buttons, tables, and links), but the interactive elements are the most important. These interactive elements are:

  • The INPUT tag: All buttons and text boxes
  • The TEXTAREA tag: A text box
  • The SELECT tag: A multiple-choice list

Sending Data

When a form is submitted (by clicking on the submit button), the data in the form is sent to a CGI script in the form of name/value pairs, which are sets of data represented as the name of the form element, an equal sign ("="), and then the associated value. These name/value pairs are set off from one another by ampersands ("&"). So the data sent to the script will look like this:

With the GET method (sending data using a URL), the URL will be a string that looks like this:;=value2


The INPUT tag is the essential form tag, since it is used to create many interactive "elements." This tag's syntax is as follows:

<INPUT type="Field Name" value="Default Value" name="Element Name">
The name attribute is essential, as it lets the CGI script know which field is associated with which name/value pair, meaning that the name of the field will be followed by an equal sign ("=") followed by the value entered by the user, or if the user didn't input a value, by the default value for the value attribute.
The type attribute is used to specify which type of element is represented by the INPUT tag. These are the possible values:
  • checkbox: Checkboxes can be in one of two states: checked or unchecked. When the box is checked, the name/value pair is sent to the CGI.
  • hidden: This field, which the browser does not display, is for defining a fixed setting that will be sent to the CGI as a name/value pair.
  • file: A field that lets the user specify a filepath leading to a file that will be sent along with the form. The file types that can be sent should be specified, by using the ACCEPT attribute of the FORM tag
  • image: A customized submit button, which appears as whatever image is at the location defined by its SRC attribute
  • password: A textbox, in which the characters that are entered show up as asterisks, in order to camouflage the input text.
  • radio: A button allowing the user to choose from between several options. Each of these radio buttons must have the same name attribute. The name/value pair of the radio button selected will be sent to the CGI. Using the checked attribute for one of the buttons lets you define it as being selected by default.
  • reset: A reset button for clearing all elements in the form by setting them back to their default values.
  • submit: A submit button to send the form. The text on the button can be set using the value attribute.
  • text: A textbox for entering a line of text. The size of the box may be defined using the size attribute and the maximum length of the text with the maxlength attribute.


The TEXTAREA tag is for defining a textbox bigger than just the single line allowed by the INPUT tag. This tag has the following attributes:

  • cols: represents the number of characters that a line may contain
  • rows: represents the number of lines
  • name: represents the name associated with the textbox, which allows it to be identified in the name/value pair.
  • readonly: prevents the user from changing the default text in the field
  • value: represents the default value that will be sent to the script if the user has not entered anything in the textbox

The SELECT tag

The SELECT tag is for creating a dropdown list of elements (specified by the OPTION tags within it). This tag's attributes are:

  • name: represents the name associated with the textbox, which allows it to be identified in the name/value pair.
  • disabled: creates a disabled list, shown as being grayed out
  • size: represents the number of lines in the list (this value may be larger than the number of actual elements in the list)
  • multiple: enables the user to select several fields in the list

Example Form

Forms can be placed in a page using tables (recommended for a professional-looking layout). Here is an example summing up the above points, showing you how to place a form in a web page using a table:

<FORM method=post action="cgi-bin/">
User Registration
<TD>Last Name</TD>
<INPUT type=text name="lastname">

<TD>First Name</TD>
<INPUT type=text name="firstname">

Man: <INPUT type=radio name="gender" value="M">
<br>Woman: <INPUT type=radio name="gender" value="F">

<SELECT name="occupation">
<OPTION VALUE="teacher">Teacher</OPTION>
<OPTION VALUE="student">Student</OPTION>
<OPTION VALUE="engineer">Engineer</OPTION>
<OPTION VALUE="retired">Retired</OPTION>
<OPTION VALUE="other">Other</OPTION>
<TEXTAREA rows="3" name="comments">
Type your comments here</TEXTAREA>

<INPUT type="submit" value="Send">

Here's what shows up on screen:

User Registration
First Name
Gender Man:

FORM Tag Attributes and Types of Input

Tag Attribute Value Result Visual Effect
ACTION   Sends to the address shown  
ENCTYPE   Specifies encoding type  
<INPUT> TYPE submit performs the ACTION in the <FORM> tag
text simple line of text whose length
is given by the SIZE attribute
reset Erases the form's contents
radio radio button
checkbox checkbox
NAME   Name  
SIZE   Text size  
<TEXTAREA> ... </TEXTAREA> NAME   Text box



MULTIPLE   Multiple selections possible
<OPTION> ... </OPTION> SELECTED Default choice  
VALUE Forced value  


Formularios HTML
Formularios HTML
Formulaires HTML - Cours et exemples
Formulaires HTML - Cours et exemples
I formulari HTML
I formulari HTML
Os formulários HTML
Os formulários HTML
Latest update on October 16, 2008 at 09:43 AM by Jeff.
This document, titled "HTML forms," is available under the Creative Commons license. Any copy, reuse, or modification of the content should be sufficiently credited to CCM (