HyperText Markup Language/Forms

From Wikibooks, the open-content textbooks collection

HTML forms are an easy way to gather data from the end user. Processing them requires a server-side scripting language such as PHP or (in some cases when limited interaction is to be provided within a single page) a client-side scripting language such as JavaScript.

Here is a simple form:

<form id="" action="" method="post">
 <fieldset>
  <legend>Personal details</legend>
 
  <label for="first">First name</label>
  <input type="text" name="first" id="first"><br>
 
  <label for="family">Family name</label>
  <input type="text" name="family" id="family"><br>
 
  <input type="submit" name="personal">
 
 </fieldset>
</form>

Here's an explanation -

id 

The name of the form or control.

action 

The URL of a server-side script which can process the data.

method 

The method used to send the information. Two methods are supported, POST and GET. POST is the preferred method except for simple searches which generally use GET. Use with server-side languages.

fieldset 

Form controls are normally contained in a fieldset element. Complex forms may have multiple fieldsets. Fieldsets can contain other fieldsets.

legend 

Each fieldset begins with a legend element. The content of the element is used as a title placed in the border of the fieldset.

input type="" name ="" id="" 

various types of input controls. Supported types are - submit, text, password, checkbox, radio, reset, file, hidden, image and button. The name Attribute is used by the server to identify which piece of data was entered in a given box on the form. The id attribute is used to match an input with its label. The name and id attributes normally have identical values for text inputs but different values for checkbox and radio inputs.

label for="" 

A label for a single form control. The value of the for attribute must match the id attribute of a form control in the same form.

select 

There is also a SELECT element for drop down lists and a TEXTAREA element for multi-line text input.

This simple example uses <br> tags to force newlines between the different controls. A real-world form would use more structured markup to layout the controls neatly.

For a nice and comprehensive reference on forms, see the official W3 Technical Recommendation for forms.