HTML5 Input

There are a lot of new and modified input elements in HTML5:

• 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 and how jQuery can help with this we will use simple HTML input types.

Get and Post

Now that we know how to build a form UI within a form element and we know how to trigger a submit event, the only questions left are how is the form data gathered and how is the data sent to the server?

When the form element receives a submit event it scans through all of the elements it contains, i.e. the child elements, takes the name and value of each one and makes up a list of name/value pairs. Some fairly obvious processing is performed. For example only the name and value of the currently selected radio button is included and deselected radio buttons are ignored. 

Once the form element has the set of name/value pairs, it sends it to the server as part of the get or post request for the next page. If a get is specified then the name/value pairs are sent as a query string i.e. as part of the URL and the client can see them in the address bar. If a post is used then the name/value pairs are included in the body of the HTTP request to the server and these are not visible to the client. 

Using a get means we can see what is going on without having to implement a handler on the server. 

For example consider the simple form:

<form action="mypage.html" method="get">
 <input type="text" name="username"/><br/>
 <input type="submit" /> 
</form>

When the user clicks the submit button the form element gathers the name/value pairs of its children – in this case only username and whatever the user has typed in – codes it as a query string and sends it as a get request for mypage.html. The URL sent will be something like:

http://domain/mypage.html?username=myvalue

assuming that the user entered myvalue.

Of course, any JavaScript that you might want to include in mypage can access the query string and process it.

In this case we send the form's data to the server which immediately sends it back to the client for any further processing. This is not the usual way that form data is processed. What usually happens is that the form sends the data to the server specifying a program that will process the data on the server and then return whatever HTML is appropriate.

For example, the URL might specify a PHP page which then uses PHP to access the query string or the query string’s parameters and process them. This is, of course the only way you can work if you specify a post as the method and in this case the PHP has to access the post data. 

jQuery Form Selectors

At this point you might be wondering what jQuery can do to make forms easier to use and it is worth saying that jQuery doesn't do as much as it could. There are some jQuery plugins that add features like data validation but even if you don't want to use one of these jQuery makes implementing special form handling easier. 

The biggest simplification is that jQuery provides an extended set of selectors to find standard form elements:

• :button
  Selects all button elements and elements of type button.

• :checkbox
  Selects all elements of type checkbox.

• :checked 
  Matches all elements that are checked or selected.

• :disabled 
  Selects all elements that are disabled.

• :enabled 
  Selects all elements that are enabled.

• :file 
  Selects all elements of type file.

• :focus 
  Selects element if it is currently focused.

• :image
  Selects all elements of type image.

• :input 
  Selects all input, textarea, select and button elements.

• :password
  Selects all password elements.

• :radio 
  Selects all elements of type radio.

• :reset 
  Selects all elements of type reset.

• :selected 
  Selects all elements that are selected.

• :submit 
  Selects all elements of type submit.

All these selectors are jQuery extensions and do not take advantage of the optimization possible in modern browsers using standard CSS selectors. If you are worried about efficiency you can usually work out a pure CSS equivalent of most of these selectors.

For example instead of :radio you can use an attribute selector as a radio button that has the attribute type=radio. However, if you use [type="radio"] this is equivalent to *[type="radio"] and it will search every element for type=radio. It is much better to use input[type="radio"] because this examines the attributes only of input elements.

Usually you also want to restrict your selection to a given form. There are a number of ways of doing this but the simplest is to make sure that each form has an id and then use something like:

var form=$("#form1>*"); 
var text=form.filter(":text");

The first select returns all the immediate children of the form with id set to form1. The second returns all of the text input elements within the form. If you save the form query you can use it to do multiple queries on different type of form element.

You can get and set the value of the form element using the val function. For example:

text.val();

is the value of the first text element in the result.  

If you want to select an input element based on its name then you have to use an attribute selector. For example:

var text=form.filter("[name='username']");

selects the elements in the form with name equal to username. What you have to keep in mind is that the name attribute isn't unique like an id and you might well get multiple results. For example, a set of radio buttons all share the same name because this groups them together so that only one is selected.