Disaster-Proof HTML 5 forms
Users have to fill out forms at every point of their browsing from simple appointment bookings to site registration and even ticket purchase. However, technology and life are unpredictable and anything and everything can happen. Although you’ve highlighted and explained to the user not to use the backspace button when filling the form, he still does it, much to everyone’s discomfort. Alternatively, the electricity or the WiFi connection will go out at the wrong time. Whatever the case, having a disaster-proof HTML 5 form can save you and your customer a lot of unpleasant moments.
This function will not take longer than an hour to complete for somebody with intermediate HTML and JavaScript skills. Naturally, a text editor is required as well as a modern web browser and Internet connection. Cookies are not practical for this type of function because they offer only a few kilobytes of storage and have no programmatic access API. Therefore, the best choice is Web Storage API, or more specifically, localStorage, for saving the filled form offline.
Additionally, most recent browsers have ECMAScript 5 built-in support, which can be used natively. Alternatively, the json2.js can provide support for it1. The most popular browsers (IE, Safari, Chrome, and Firefox) all support cross-browser web storage. Surprisingly, the disaster-proof forms will also be available on Opera Mobile, Mobile Safari and the built-in Android browser.
W3C Webs Storage API stores data on the client side by using key-value pairs. Currently, the major storage methods are via sessionStorage and localStorage. The former, as the name implies, lasts for one session, so when the tab or browser is closed, everything is lost. The latter can store information in a more persistent way.
There are two problems with this method. The first is that it has a limit of 5 MB and stores information in strings. Although the limit quota can be extended by simply asking the user, it is best to optimize the form so that it has no large-size items on it. Furthermore, objects can be converted to and from strings using the JSON functions (the JSON.stringify() and JSPN.parsel() functions respectively).
Three functions will be used to assign values to keys; setItem(), getItem(), and removeItem(), respectively, for setting a value, retrieving it, and deleting the value from the key. If your form has a lot items to be filled and cleared later, use the clear() function for a mass delete. Here is a sample code for the beginning of a form:
localStorage.setItem(‘name’, uname);
localStorage.setItem(’email’, email);
localStorage.setItem(‘comment’, comment)
Be careful, as passwords should not be saved locally to prevent security issues. Furthermore, the information should be saved at regular intervals; every 5 seconds seems a reasonable time period. Naturally, there should be a retrievedata() function to check whether there is any saved information every time the page is loaded. Otherwise, the form will always appear blank.
After the user has submitted his information, everything should be deleted so that the form appears empty. Use the removeItem() function after the submission process has finished to delete any locally saved data. Do not forget to display your normal “Thank you” message and redirect users to minimize the chance of them submitting it a second time.
Finally, there are other options to further improve the user experience. One is the OnInput event, which substitutes the 5-second interval operator. However, Internet Explorer considers only new information as Input, so when the user deletes something this is not recorded. There are ways to fix this, such as sending the form information through Ajax, which could be used in commenting systems. However, when deploying new systems it is important to think of the user and where he might encounter difficulties.
References:
