jQuery 3 - Forms
Written by Ian Elliot   
Monday, 26 December 2016
Article Index
jQuery 3 - Forms
Form Selectors
Hand coded

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.


 Available as a Book:


buy from Amazon

  1. Understanding jQuery
  2. Basic jQuery CSS Selectors
       Extract: The DOM ***NEW!!!
  3. More Selectors
  4. The jQuery Object
  5. Filters
  6. Traversal Filters
  7. Modifying DOM Objects
  8. Creating Objects & Modifying The DOM Hierarchy
  9. Working With Data
  10. Forms
  11. Function Queues
  12. Animation
  13. jQuery UI
  14. jQuery UI Custom Control
  15. jQuery Plugins
  16. Testing With QUnit
  17. Epilog A Bonus Function

Also Available:


buy from Amazon


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

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:

<form action="mypage.html" method="get">
 <button type="submit">Submit</button>

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. 

A basic form that uses one of each of the above is:

<form action="mypage.html" method="get">
 <input type="text" name="username"/><br/>
 <input type="password" name="password" /><br/>
 <input type="checkbox" name="maths" value="on" /> Tick<br/>
 <input type="radio" name="group1" value="option1"/> Option 1<br/>
 <input type="radio" name="group1" value="option2"/> Option 2<br/>
 <textarea rows="5" cols="50" name="description">
  Text area
 </textarea> <br/>
 <select name="dropdown">
  <option value="Option1" selected>Option1</option>
  <option value="Option2">Option2</option>
 <input type="file" name="fileupload" accept="image/*" /><br/>
 <input type="submit" />
 <input type="reset">

This creates the following form:



New in HTML5 are: 

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

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.



Last Updated ( Monday, 26 December 2016 )