1

00:00:00,840 --> 00:00:02,730

OK, let's clean our form up a little bit.



2

00:00:02,980 --> 00:00:09,900

So right now we have started on one line and then get in another line and I want to put them beside



3

00:00:09,900 --> 00:00:10,350

each other.



4

00:00:10,350 --> 00:00:13,740

Unfortunately, Bootstrap gives us some really easy ways to do this.



5

00:00:14,100 --> 00:00:19,770

So back in the documentation under form, some documentation forms, I want to go over the right hand



6

00:00:19,770 --> 00:00:22,380

side here and look for form.



7

00:00:23,160 --> 00:00:23,880

There we are.



8

00:00:24,360 --> 00:00:25,870

So I can put things beside each other.



9

00:00:25,890 --> 00:00:27,030

That's exactly what I want.



10

00:00:27,030 --> 00:00:30,650

And it looks like all I have to do is wrap whatever elements do.



11

00:00:30,660 --> 00:00:37,680

I want to be in one row in one row and put a div class cult classic was call around each column.



12

00:00:37,860 --> 00:00:42,100

Well, that's almost exactly like laying things out on a page, so that should be pretty easy.



13

00:00:42,120 --> 00:00:42,770

Let's try that.



14

00:00:43,800 --> 00:00:50,010

So back here I am looking at my reservation page and here's my form, which is right here.



15

00:00:50,310 --> 00:00:52,590

I'm going to wrap this entire thing.



16

00:00:52,830 --> 00:01:02,160

Div class equals form Dasch row and then I will close that down here before my button.



17

00:01:02,160 --> 00:01:11,430

But after the other input slash div and this needs to be wrapped in a div class equals call div class



18

00:01:11,430 --> 00:01:15,150

equals call for my start and I'll end it right here.



19

00:01:15,450 --> 00:01:17,910

Slash div and the same thing here.



20

00:01:19,770 --> 00:01:25,500

Div class equals call and close the div right.



21

00:01:25,500 --> 00:01:26,190

Where is it.



22

00:01:26,310 --> 00:01:28,610

Here slash div.



23

00:01:28,620 --> 00:01:32,490

So things are getting a little out of whack right now, so I'm going to reformat it all by selecting



24

00:01:32,490 --> 00:01:39,190

the entire form, moving it over and then in indenting things a little bit.



25

00:01:39,210 --> 00:01:44,280

So the first div here includes this column which is right there.



26

00:01:45,700 --> 00:01:47,380

So this is a close call.



27

00:01:47,410 --> 00:01:51,690

This is a day of class for one group, this one goes with that, OK?



28

00:01:51,790 --> 00:01:59,920

So this all gets moved in as one in this class couple gets moved in as one, then this formiga group



29

00:01:59,920 --> 00:02:01,690

gets moved in there.



30

00:02:01,750 --> 00:02:05,230

OK, and the same thing for this, this gets moved over.



31

00:02:05,230 --> 00:02:08,960

And this is just so I don't accidentally have unclosed.



32

00:02:09,420 --> 00:02:15,580

There are too many closing dudes or something like that, which is really, really easy to do and much



33

00:02:15,970 --> 00:02:20,860

easier to fix while you're entering things rather than making up as we go along.



34

00:02:20,890 --> 00:02:23,180

So there's a dude here and this dude.



35

00:02:23,350 --> 00:02:24,970

See, I was out of work.



36

00:02:25,690 --> 00:02:28,480

Move that one over and move that one over to here.



37

00:02:28,750 --> 00:02:31,600

And this device should close the door of equals.



38

00:02:32,140 --> 00:02:36,700

So this whole thing gets indented, then this gets indented.



39

00:02:37,330 --> 00:02:41,800

And now I can move my whole form over there.



40

00:02:41,980 --> 00:02:43,030

That's much cleaner.



41

00:02:43,030 --> 00:02:45,100

Let's save that and see what it looks like.



42

00:02:45,790 --> 00:02:47,020

So back over to here.



43

00:02:47,140 --> 00:02:49,450

Find my nice page, reload.



44

00:02:50,050 --> 00:02:52,960

Much better starting date here and indeed here.



45

00:02:53,800 --> 00:02:55,210

That's exactly what I want.



46

00:02:55,660 --> 00:02:55,950

All right.



47

00:02:55,960 --> 00:03:01,030

Now, the other thing I want is I don't want people to be able to submit this form without actually



48

00:03:01,030 --> 00:03:03,400

having something in here and something in here.



49

00:03:04,060 --> 00:03:05,950

So I can do that really easily.



50

00:03:05,950 --> 00:03:08,100

And it's HTML5 that does this for us.



51

00:03:08,110 --> 00:03:11,530

We're going to do a better version in the next lecture or the next section somewhere along there.



52

00:03:12,100 --> 00:03:14,920

But right now, let's just make it a required field.



53

00:03:14,920 --> 00:03:23,380

And I can do that simply by typing the word required anywhere in that input input required.



54

00:03:23,840 --> 00:03:26,650

But spell spelt right though required.



55

00:03:26,650 --> 00:03:27,200

Required.



56

00:03:27,220 --> 00:03:30,850

Now, if I reload this page, I should not be able to submit this form.



57

00:03:30,850 --> 00:03:32,170

So please fill in this field.



58

00:03:32,170 --> 00:03:35,590

So it actually and again, this is not something we have done.



59

00:03:35,890 --> 00:03:37,780

All we did was put the word required in there.



60

00:03:37,990 --> 00:03:42,690

This is actually handled by the browser and again, different browsers handle it differently.



61

00:03:43,540 --> 00:03:46,620

So this works and it's sufficient for our purposes at the moment.



62

00:03:46,630 --> 00:03:52,960

But with a little bit of judiciously applied JavaScript, we can make this much better and we will do



63

00:03:52,960 --> 00:03:54,810

that in the not too distant future.



64

00:03:55,000 --> 00:03:57,340

For now, we have our search for availability.



65

00:03:57,430 --> 00:04:01,270

Is there any other information we need on this form?



66

00:04:01,930 --> 00:04:06,210

And I think it's not there's no information that we need other than what we're specifying right now.



67

00:04:06,850 --> 00:04:11,050

We don't need the person's name or their email address or any special requests.



68

00:04:11,050 --> 00:04:16,330

All we want them to do is to be able to search for availability, and that works really well.



69

00:04:16,850 --> 00:04:19,840

The only thing I would say about this form is it's kind of wide.



70

00:04:20,020 --> 00:04:20,890

It really is.



71

00:04:20,890 --> 00:04:25,450

It's taking up a lot of space horizontally because the date is only this big.



72

00:04:25,450 --> 00:04:33,940

So we can fix that and we can fix that by changing this call to a call MDE or let's go with six to make



73

00:04:33,940 --> 00:04:38,430

it half the width that it normally is OK, and that actually makes it much smaller.



74

00:04:38,560 --> 00:04:39,130

Very good.



75

00:04:39,130 --> 00:04:43,870

And we could even if we wanted to, since we know we have 12 columns and we're using six, we could



76

00:04:43,870 --> 00:04:46,450

actually add an offset or just put an AP column here.



77

00:04:46,450 --> 00:04:52,590

Div class equals call M.D. three, which gives us a total of nine.



78

00:04:52,600 --> 00:04:53,470

But this is Dave.



79

00:04:53,470 --> 00:04:54,280

It's just got to close.



80

00:04:54,280 --> 00:04:55,320

We don't need anything else there.



81

00:04:55,330 --> 00:05:01,150

This should add three a space for three columns and leave it blank and then give us this which should



82

00:05:01,150 --> 00:05:02,180

centered on a page.



83

00:05:02,200 --> 00:05:03,070

Let's see if it does.



84

00:05:03,670 --> 00:05:04,330

And it does.



85

00:05:04,510 --> 00:05:07,150

OK, and maybe the word submit shouldn't say submit.



86

00:05:07,450 --> 00:05:13,720

Maybe I should say that here we have instead of submit, say, search availability,



87

00:05:17,150 --> 00:05:19,270

OK, and a freeloader there.



88

00:05:19,490 --> 00:05:22,630

Now we have our search for availability page functional.



89

00:05:22,630 --> 00:05:24,780

We can make it better and we will make it better.



90

00:05:25,030 --> 00:05:26,620

So let's see here the only other thing.



91

00:05:26,770 --> 00:05:27,400

Yeah, that's all right.



92

00:05:27,400 --> 00:05:28,250

That's sufficient for now.



93

00:05:28,660 --> 00:05:29,050

All right.



94

00:05:29,080 --> 00:05:30,130

This gets us going.



95

00:05:30,280 --> 00:05:35,640

And this actually gives us our search for availability page on this on our site.



96

00:05:35,650 --> 00:05:39,460

So the other place that we have this is what we're looking at, rooms.



97

00:05:39,460 --> 00:05:42,580

We have check availability, which, you know, doesn't do anything right now.



98

00:05:42,580 --> 00:05:44,830

It goes to a placeholder URL.



99

00:05:45,190 --> 00:05:47,980

We need to figure out what we're going to do with this.



100

00:05:48,400 --> 00:05:55,930

But my plan is to say, rather than taking us to a whole new page on on the site to search for Generals'



101

00:05:55,930 --> 00:05:57,490

course, well, that might be confusing.



102

00:05:57,490 --> 00:06:00,430

I'm on the general quarters page, site, page.



103

00:06:00,910 --> 00:06:01,840

I'm looking at it.



104

00:06:01,840 --> 00:06:06,160

If I click that button and it takes me somewhere else, it's kind of not intuitive.



105

00:06:06,160 --> 00:06:11,830

It would be better if we could pop a dialogue and have the search availability button just show up in



106

00:06:11,830 --> 00:06:17,710

that where we enter our starting date and our ending date and we stay right on this page and we'll do



107

00:06:17,710 --> 00:06:18,010

that.



108

00:06:18,010 --> 00:06:22,540

But to do that, we need some JavaScript which will get to in the next section.



109

00:06:22,930 --> 00:06:28,660

But right now, we have everything we need to start cutting this page, these pages up and turning them



110

00:06:28,660 --> 00:06:34,720

into line templates before we do that will probably add some JavaScript and we'll do that in the next



111

00:06:34,720 --> 00:06:35,110

section.