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.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up