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