HTML5 Projects: Customized Photo Cards
Illustration by John Hersey

Creating the form


From:

HTML5 Projects: Customized Photo Cards

with Joseph Lowery

Video: Creating the form

When I wrote a chapter on forms in the very first Dreamweaver Bible, I titled it Interactive Forms, because at the time, when dinosaurs ruled the earth, forms were pretty much the only way users could interact with a webpage. Now, there are many more options. But forms are still critical. In this lesson, I'm going to use the HTML5 technology of local storage to save the selection that a user makes in a form and then retrieve it on another page. So, our form is right here in the center of the page, and there are three radio buttons that we are going to be working with.

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now
please wait ...
Watch the Online Video Course HTML5 Projects: Customized Photo Cards
44m 20s Intermediate Oct 31, 2012

Viewers: in countries Watching now:

The HTML5 Projects series puts HTML5, CSS3, and recent JavaScript API technologies to work—enhancing your web projects with interactivity and multimedia. This first installment shows you how to build an online application for creating personalized photo cards with user-uploaded imagery. Author Joseph Lowery shows how to create the form interface and introduces HTML5 features such as drag-and-drop file upload and interactive image manipulation.

Topics include:
  • Creating a form
  • Uploading images
  • Preparing the stage
  • Manipulating photos interactively
  • Saving photo cards
Subjects:
Design Web
Software:
HTML JavaScript CSS
Author:
Joseph Lowery

Creating the form

When I wrote a chapter on forms in the very first Dreamweaver Bible, I titled it Interactive Forms, because at the time, when dinosaurs ruled the earth, forms were pretty much the only way users could interact with a webpage. Now, there are many more options. But forms are still critical. In this lesson, I'm going to use the HTML5 technology of local storage to save the selection that a user makes in a form and then retrieve it on another page. So, our form is right here in the center of the page, and there are three radio buttons that we are going to be working with.

Let's head on over to my Code Editor. And here, you see the form starting on line 27. And as I said, there are three radio buttons inside, each have the same name, bgImage, as you can see here on lines 30, 37, and 44, and different values of course. So, let's go up to the top of the page, and right after the jQuery script tag, I'm going to add in some custom code that will control what happens when the user clicks the Submit button.

So let's enter in our script tag, and I'll set the type="text/JavaScript", make a little space, and put in my opening jQuery function. You don't really have to use jQuery to do this, but it does make life much, much easier. So, the first thing after I've set up my (document).ready function is to put in a click function that will look for the Submit button, which has an ID of Submit.

And I follow the selector with a .click, and in parentheses, function, another set of parentheses, and put e for errors inside of that, and then we'll put our curly braces there, and I am just going to go ahead and close out that parentheses, and end it with a semicolon. So that's all done. Now, let's get to the meat of what we are doing here. First thing I am going to do is prevent the default for the passed in error, or ehandler. This tells the browser to ignore the click, so it doesn't go up to the top of the page.

Now, let's set up a variable to hold the choice of the user, and I am going to call it theChoice. We'll set that to the value of whatever the radio button is that's checked. So, for that, dollar sign and then parentheses, and in the parentheses, I'll do a single quote. And we're looking at the input tag that is of type radio, and has the attribute checked inside of it. And once we find that selector, we want to know its value.

In jQuery, you use the val function. Next, we'll take that value that's stored in the choice, and save it via local storage. So I'll enter in my keyword localStorage.setItem. Make sure you uppercase the I in Item, and then enter the first of our two arguments in parentheses. TheChoice is what we're going to be calling this item that we're storing, just to be consistent there, separate the argument with a comma, and then enter in what's going to go into that stored item.

And of course it's going to be the variable we just created, also called theChoice. Finally, once that's all done, we are going to move to the next page. So, for that, we'll use a basic JavaScript function called window.location. And I'll set that to my next page, which is beam-up.php. All right. That's all I need for this particular function. So cool! We've stored the user's choice and we've opened up the next page in the app. Let's go to that page. I am going to go to my Chapter 2 > 02_01 folder, and open up beam-up.php.

Now we are going to add in the code that will get the item from localStorage. So again, we'll place it right after the script tag that gets jQuery and enter in our (document).ready function. And now, because we want this to work on load, we are going to go ahead and declare the variable on this page. And we'll set that to $theChoice.

And what we're going to put into that is what we get from localStorage. So after localStorage, it's .getItem. And the only argument you need to put in is the name of the stored item, which is of course theChoice. We're going to let the user know that we recognize their selection. So, I am going to set this variable to a little bit of HTML. This will be just a paragraph tag, and inside it, a little text.

And let's concatenate the variable, and then close out that tag. Now that we've created the string and assigned it to the variable, let's use a little jQuery function to swap out the HTML for where we want it to go. I'll show you that right now. Let me go down just a little bit. Here you see below 'Step 2: Beam up your photo' on line 34, the div with an ID of showChoice.

So, that's what we're going to do, we are going to show them their choice. And back up in my jQyery function on line 12, we'll identify showChoice, make it .html, and then put in the variable $theChoice. Now, my coder's sense is tingling. I realized as I was typing this in, something was a little off when I typed in the other (document).ready function. So, I just want to go back and double-check something.

I'll go to index.php, and yes, there is an extra parenthesis here. So, for all you sharp-eyed people watching this who thought, he's going to miss that mistake, he's going to try it and it's going to fail. Ha ha! I guess not. So, let's save all of our files, and head back to the browser, where I'll click Refresh so we can have all that code in. So let's scroll down. And I think this time I am going to go with Weightlessness as my image.

I'll click Select Background and Proceed. The file is stored in localStorage and then retrieved, and here you see the result for your background, you chose weightless.jpg. And we're on the second page, where the user is ready to proceed.

There are currently no FAQs about HTML5 Projects: Customized Photo Cards.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed HTML5 Projects: Customized Photo Cards.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.