Home arrow HTML arrow How To Autosave Web Forms in HTML5
HTML

How To Autosave Web Forms in HTML5


In this penultimate part of the series, I demonstrate how to implement a working web form autosaving program, thanks to the functionality provided by the “localStorage” HTML5 object. Even though it's simple, this example shows how to utilize the object in a pretty realistic use case.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 14
January 31, 2011
TABLE OF CONTENTS:
  1. · How To Autosave Web Forms in HTML5
  2. · Autosaving with some JavaScript functions

print this article
SEARCH DEVARTICLES

How To Autosave Web Forms in HTML5
(Page 1 of 2 )

Definitively, it's not breaking news that HTML5 includes a new set of structural elements, such as <header>, <nav> and <footer> (to name only a few). These elements can be used for emphasizing the semantic meaning of sections on web pages, without having to use highly generic divs.

What is a big surprise, at least for some people, is that the specification incorporates a powerful JavaScript object called "localStorage." This object permits you to save, fetch and even remove large chunks of data from the browser, through a remarkably simple API.

Needless to say, if you've already read all of the tutorials that precede this one, you should have a thorough background in using this object. Over the course of this series I created some practical examples that demonstrated, among other things, how to use its "setItem()," "getItem()" and "removeItems()" methods. While some of these examples were admittedly contrived, I also developed a small JavaScript program which used this object to implement a client-side visitor counter.

Of course, the "localStorage" object's flexible model opens up the doors to developing all sorts of clever applications, not just simple counters. In line with this concept, in this penultimate part of the series I'm going to employ the object for building an "autosaving" program. It will store in the browser the data entered into an HTML form at a predefined time interval, which naturally can be customized at will.

Ready to learn the fine details regarding the construction of this web form autosaver? Then don't waste more time in preliminaries; begin reading!

Getting started: building a sample contact form

Before I start developing the  autosaver program mentioned in the introduction, it's necessary to create a sample HTML form. This form's behavior will be enhanced afterward by the program in question.

Having said that, here's an HTML5 document that includes the sample form. Check it out:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Autosaving a web form with HTML5 local Storage</title>
<link rel="stylesheet" type="text/css" href="default.css" />
</head>
<body>
<div id="wrapper">
    <header>
        <h1>Contact us now!</h1>
    </header>   
    <nav>
        <ul>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <section>
        <form action="processform.php" method="post">
            <fieldset>
                <ol>
                    <li>
                        <label for="subject">Subject: <em>[required]</em></label>
                        <input type="text" name="subject" id="subject" class="text" />
                    </li>
                    <li>
                        <label for="email">Email: <em>[required]</em></label>
                        <input type="email" name="email" id="email" class="text" />
                    </li>
                    <li>
                        <label for="comments">Comments:</label>
                        <textarea rows="10" cols="20" name="comments"></textarea>
                    </li>
                    <li>
                        <input type="submit" name="send" value="Submit" />
                    </li>
                </ol>
            </fieldset>
        </form>
    </section>
    <footer>
        <h2>Footer section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </footer>
</div>
</body>
</html>

As the above code fragment shows, the previous HTML5 page is composed of a few typical sections, such as "header," "nav" and "footer." This isn't particularly interesting. You should pay attention, however, to the area that contains the sample form. As you can see, this element is the one that can be found on a classic contact page, where users can submit their inquiries, comments and so forth. So far, nothing unexpected, right?

In addition, you may have noticed that the earlier web page has a CSS file attached to it called "default.css," which makes the form (and the whole page, by the way) look a little bit more polished. The styles defined within this file are the following:

(default.css)

/* layout styles */
body {
    padding: 0;
    margin: 0;
    background: #0C2478;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #000;
}
#wrapper {
    width: 960px;
    margin: 0 auto;
    background: #fff;
}
header {
    display: block;
    padding: 20px;
}
nav {
    display: block;
    width: 920px;
    height: 30px;
    margin: 0 auto;
    padding-top: 10px;
    background: #eee;
}
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
nav ul li {
    float: left;
    width: 120px;
    text-align: center;
}
nav ul li a {
    display: block;
    width: 120px;
    text-decoration: none;
    color: #000;
    border-right: 1px solid #ccc;
}
section {
    display: block;
    padding: 20px;
}
footer {
    display: block;
    padding: 20px;
}
/* form styles */
form {
    width: 280px;
    padding: 30px;
    background: #dfefff;
}
form fieldset {
    border: none;
}
form fieldset ol {
    list-style: none;
    padding: 0;
    margin: 0;
}
form fieldset ol li {
    margin-bottom: 10px;
}
form fieldset ol label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
form fieldset ol label em {
    font-style: normal;
    font-weight: normal;
    color: #00f;
}
form fieldset ol input.text {
    width: 250px;
}
form fieldset ol textarea {
    width: 250px;
}
/* time container */
#time_container {
    color: #00f;
}

Assuming that you're pretty familiar with CSS, I'm not going to get into detail explaining how the previous CSS file works. Instead, move on and look at the following screen capture, which shows the appearance of the earlier web page, once the corresponding styles have been assigned to it:

That's not too bad, considering that this is only an example. However, if you need to see specifically how the sample contact form looks, here's another image that hopefully will be pretty illustrative:

There you have it. At this point, I managed to create a basic web page that includes a sample contact form. So, what comes next? Well, it's time to start enhancing the form's behavior by making it able to automatically save the data entered in it, thus preventing users from losing what they've typed in.

As I noted at the beginning, this feature will be implemented through the "localStorage" object. In the following section I'm going to define the JavaScript functions that will perform this "autosaving" task.

Now, go ahead and read the lines to come.


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials