Search:


HTML.Form

Recent Changes
Printable View
Page History
Edit Page

HTML forms provide a way for web-site users to fill in details for submission to the server.

HTML Forms are elements that contain a number of controls. They enable user input to be captured by a web page and the information to be submitted to the server. Additionally form controls can be placed outside of a form element and become stand-alone page controls.

Forms controls, are available in various forms, such as text-boxes, checkboxes, radio buttons, inter-mixed with other normal content. Controls can also be labelled.

Javascript can be used to control interaction and value range-checking in and between form elements using the event-handlers and the DOM. Scripts can provide handler functions for events such as onclick triggered by form elements, which it turn could make changes to other parts of the form.

Example web form HTML markup: 

 <form action="http://example.com/webapp/adduser" method="post">
    <p>
    <label for="firstname">First name: </label>
              <input type="text" id="firstname"><br>
    <label for="lastname">Last name: </label>
              <input type="text" id="lastname"><br>
    <label for="email">email: </LABEL>
              <input type="text" id="email"><br>
    <input type="radio" name="sex" value="Male"> Male<br>
    <input type="radio" name="sex" value="Female"> Female<BR>
    <input type="submit" value="Send">
    <input type="reset">
    </p>
 </form>

Start tag: required, End tag: required

Control Types

The following control types are defined:

Also take note that it is possible to create hidden form controls?, to enable extra information to be submitted along with the form.

Important: (From the W3C spec: "The elements used to create controls generally appear inside a FORM element, but may also appear outside of a FORM element declaration when they are used to build user interfaces. This is discussed in the section on intrinsic events. Note that controls outside a form cannot be successful controls.")

The Form element

Start tag: required, End tag: required

Note: the following specifications are directly from the HTML4.01 specification:

  • action = uri [CT]
    • This attribute specifies a form processing agent. User agent behavior for a value other than an HTTP URI is undefined.
  • method = get|post [CI]
    • This attribute specifies which HTTP method will be used to submit the form data set. Possible (case-insensitive) values are "get" (the default) and "post". See the section on form submission for usage information.
  • enctype = content-type [CI]
    • This attribute specifies the content type used to submit the form to the server (when the value of method is "post"). The default value for this attribute is "application/x-www-form-urlencoded". The value "multipart/form-data" should be used in combination with the INPUT element, type="file".

Form element DTD

<!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM) -- interactive form -->
<!ATTLIST FORM
  %attrs;                              -- %coreattrs, %i18n, %events --
  action      %URI;          #REQUIRED -- server-side form handler --
  method      (GET|POST)     GET       -- HTTP method used to submit the form--
  enctype     %ContentType;  "application/x-www-form-urlencoded"
  accept      %ContentTypes; #IMPLIED  -- list of MIME types for file upload --
  name        CDATA          #IMPLIED  -- name of form for scripting --
  onsubmit    %Script;       #IMPLIED  -- the form was submitted --
  onreset     %Script;       #IMPLIED  -- the form was reset --
  accept-charset %Charsets;  #IMPLIED  -- list of supported charsets --
  >

Detailed information

Controls

HTML Forms are elements that contain a number of controls. They enable user input to be captured by a web page and the information to be submitted to the server. Additionally form controls can be placed outside of a form element and become stand-alone page controls.

Web form controls should be named. The control name of a control is given by it's name attribute. The scope of the name attribute for a control within a FORM element is the FORM element. Therefore, different forms on the same page can have controls with the same name, without worry about name collisions. A form control's name allows it to be accessed by Javascript.

A control also has an initial value and a current value, which are defined as character strings. Each different type of form control has different restrictions and interpretations of this value.

In general, a control's initial value may be specified with the control element's value attribute, however, one exception is that the initial value of a TEXTAREA element is given by its contents.

A control's current value is initially set to the initial value, but from that point onward can be modified by scripts.

Form controls keep track of their initial value and if the form is reset, the current value of all controls is returned to the initial value.

When a form is submitted for processing, certain controls have their name paired with their current value and these pairs are submitted with the form for processing on the server-side. The controls for which name/value pairs are submitted are called successful controls.

See also