Forms are a special part of the HTML UI because they provided a way to get data back to the server. You can get data back to the server in other ways, namely Ajax but Forms are still a good way to work. jQuery helps make it easier and more flexible to use forms.

Back in the days before HTML 5 forms really were the only UI HTML had - the rest was text and layout. Today you can build a UI using HTML 5 without using a form of any sort, but they are still a useful way to collect data and get it back to the server.

The <form> Element

Forms are collections of controls like buttons and input controls. In the early days of HTML these controls should only appear as child elements of a form but in HTML 5 this isn't the case. As a result it is perfectly possible to create what looks like a form without there being any sign of a <form> tag or parent Form Element.

The main purpose of a <form> tag is to specify what is to happen to the data collected by the controls it contains. It does this using two attributes action and method. The action attributes specifies the URL where the data will be sent and the method is usually either post or get and specifies how the data is sent to the server.

It is important to understand that the <form> doesn't just send data to the server it implements a full get or post request which results in a web page being sent back to the client. That is the URL specified determines the next page that the user sees.

For example:

<form action="mypage.html" method="get"></form>

This specifies that an HTTP get is performed and the next page to be loaded is mypage.html.

The next question is what triggers the form to actually get the next page?

The answer is that a submit event has to be triggered on the form element. When the form handles the event it automatically gathers all the data in the form and sends it to the server as part of the request for the next page. There are a number of ways of triggering a submit event but the most common is to include a submit button within the form. For example:

If you click the submit button then the submit event is triggered on the parent form element and it gathers the data and performs a get for mypage.html which will load and replace the page that the form is on. If you put an HTML file in the root of the web site called mypage.html you will see that when you click the button it does load.

The user can also trigger a submit event by entering a return in a text field but this is browser dependant.

The next question is, what sort of data can the form collect and how does it send it to the server?

There are a range of input controls that you can use. HTML5 expanded the possible range by quite a lot and if you can assume that the client is HTML5 capable then you can create much better forms. However the basic controls are good enough for many purposes.

In HTML the main form element is the <input type= "type"> where type is any of:

text - text input box

password - password input box uses asterisks to mask entry

file upload - enter a file name.

radio - a radio button grouped by name attribute

checkbox - a single ticked or unticked checkbox

button - a standard button

image - a standard button with an image background

submit - a submit button which triggers a submit event

reset - a reset button which resets the from elements to their defaults

There are also a few special input tags:

textarea - a multiline input box

select box - a dropdown list

The key idea is that every input element has a name and a value attribute. These define the name,value pairs that the form collects and sends to the server. The the value attribute is also used to set the initial value of the input element and this is also used if the form is reset.

If any of these are not supported by the browser then it shows a simple text input box. The advantages of the HTML5 input types are that on mobile browsers you get an appropriate onscreen keyboard and in all browsers you get automatic validation, i.e. in an email input type you can only type an email address. You can also specify a regular expression to add custom validation.

For the purpose of explaining the basic functioning of a form an how jQuery can help with this we will use simple HTML input types.