Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, we learn about how forms are created using jQuery Mobile.
[Forms]
0:00
[?music?]
0:03
[Jim Hoskins] So now we've created sort of our scaffold for our first page.
0:05
We have different buttons for creating new and links that will eventually
0:09
dive into different lists of Notes in our application.
0:13
Let's actually take a look at it in the Simulator to make sure that it still looks good.
0:17
It looks pretty much the same; we have our new buttons,
0:22
we have our inset lists.
0:25
Now, of course, we're not actually going to get anywhere with them,
0:27
but we can see it works in both orientations
0:30
and it's pretty flexible.
0:32
Now, the next thing in our application is we want to start being able to have Notes
0:35
actually in our application.
0:39
But before we can really do that, we need to create a form
0:41
to input those Notes, and then we can actually start with the business
0:43
of creating the logic to save them and then display them later.
0:47
So I think our first course of action should be working on making this New Note button work
0:51
and bring up a form.
0:56
So let's take a look at the jQuery Mobile documentation to see what it gives us
0:58
in terms of forms.
1:02
So I'm just going to go back to the homepage here,
1:04
and we can see there's a section on Form elements.
1:08
So what we can do is let's just first take a look at the Form element gallery.
1:11
This gives us an idea of what forms look like in our application.
1:17
It'll make text inputs look nice; text areas nice and rounded here.
1:22
Search inputs will have the correct icon and be rounded to look like a search input.
1:26
It has this new item, which is a flipswitch, which we'll use later
1:32
which is just basically an on/off toggle.
1:35
It also gives us a nice slider attribute which will allow us to have different values
1:38
within a range.
1:42
For check boxes, it makes these really cool list items here
1:45
that are styled like check boxes that we can select multiple of.
1:48
You can have different button groups like this,
1:53
where we can add them on and off.
1:55
Radio buttons look like this.
1:58
We can also have them toggle like this, just like if there's only one that's available.
2:02
It even makes cool select tags--for instance, this select tag
2:06
pops up this cool little style dialog that we can choose.
2:10
Or if we have a really long one, it will pop up a dialog like this
2:14
which will be much longer.
2:19
Now, this will look a little better in a mobile browser
2:21
or we could just go with the default like this,
2:24
which will pop up a picker
2:26
like a normal select item would.
2:28
So let's actually take a look at this in a Simulator to see what it looks like
2:30
on an actual device.
2:33
I'm actually going to just create a new tab here.
2:35
I'm going to paste the URL into the Simulator just using Command-V
2:38
and then I can use the Paste dialog here to paste it from the device's clipboard.
2:41
So here we get the same page, and we can see how they actually look in a browser.
2:48
They actually look a little bit nicer; the flipswitch doesn't have as much of the little jaggies
2:51
on the end and we can actually use sort of a swiping motion to flip it on and off.
2:55
The sliders work.
3:01
It looks really good.
3:02
And we can see the different select forms that we have here,
3:04
and here's what a longer one looks like,
3:09
and the default one looks like this.
3:13
So you can see that jQuery Mobile really has a good set of form elements
3:16
that we can use.
3:21
Most of them are really just styling a normal input field
3:23
like an input of type text or a text area
3:27
or various other things--things like flipswitches, sliders, and our select items
3:30
have a few more options that we can put there, but by default,
3:35
our form should actually look pretty good.
3:39
Now, there is one thing:
3:41
we do want to associate our labels with the forms in a certain way.
3:43
So you can see here in our portrait orientation, our labels are on top of our items,
3:50
but in the landscape orientation, our labels are next to them.
3:54
So it actually decides based on how wide our page is if labels should be on top
3:58
or below, and there's some markup that it's expecting in order to make this happen.
4:02
So if we go back in our documentation
4:07
and we look at our Form elements
4:10
and take a look right here, we can see our markup conventions.
4:13
Basically, what we want to be using is a field container,
4:19
and these will be divs with a data-role of fieldcontain
4:23
and these will hold both our labels and our inputs in order to group them together
4:27
so they can be styled in that nice way.
4:31
So let's start on creating another page in our document.
4:34
Here, we have our homepage, which goes from this div down here,
4:39
and let's add a new form.
4:43
So I'm going to just create a div with an id="new".
4:46
And then, I'm going to add a data-role="page" just like we normally do.
4:50
And then, I'm going to add a title of New Note.
4:56
Then, I'm going to add a header, so div data-role="header"
5:00
and then inside of the header, I'm going to give it an h1
5:08
and we'll say New Note.
5:12
And then, let's create our content area inside of our new page.
5:14
So we'll give it a div data-role="content">
5:19
and there we have it.
5:26
Now let's add a comment marker here saying that this is our New Note Form.
5:28
Cool, so now that we've created a div with the id of New,
5:38
our New button should actually work as expected if we go back to our code.
5:43
So checking it out, flipping back.
5:47
So if we click this New button here, we're actually taken to our New Note form,
5:50
which is empty in the content area, but you can see our title works,
5:54
and it added a Back button so we can get back.
5:57
Notice we didn't have to add that--it was just something that's automatically created.
6:00
Now, the way it actually creates this sliding motion isn't exactly what I want.
6:05
I kind of want it to pop up and be more like a dialog and less like a page,
6:10
but we'll get to that a little bit later.
6:15
We can see it also works for this button here.
6:17
It's simply linking to the #"new" page right here.
6:19
So to create a form, all we need to do is create a normal form.
6:23
Now, its action and method aren't really important
6:26
because we're actually going to be intercepting it with a little bit of jQuery and Backbone,
6:29
but let's just add an action="#" because it doesn't really go anywhere
6:34
and method="post">.
6:40
Now, in a typical jQuery Mobile application,
6:43
you would actually want your action and method to go to the server
6:45
in the way you want it, and it actually works out really well.
6:49
It'll do an AJAX request, bring back the information, and do a cool page transition.
6:52
However, in our application, we're not communicating with the server--ever--
6:57
and we want to handle this all ourselves,
7:01
so we're going to actually be doing a little bit of magic to intercept our form submissions.
7:04
So let's close our form out and let's create our first field.
7:08
We want to create that field container to hold our label and our inputs,
7:12
so let's create a div with a data-role="fieldcontain".
7:16
You need to sign up for Treehouse in order to download course files.
Sign up