HTML5 Mobile UI: Forms: Part 1

[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