OK, let's clean our form up a little bit.
So right now we have started on one line and then get in another line and I want to put them beside
each other.
Unfortunately, Bootstrap gives us some really easy ways to do this.
So back in the documentation under form, some documentation forms, I want to go over the right hand
side here and look for form.
There we are.
So I can put things beside each other.
That's exactly what I want.
And it looks like all I have to do is wrap whatever elements do.
I want to be in one row in one row and put a div class cult classic was call around each column.
Well, that's almost exactly like laying things out on a page, so that should be pretty easy.
Let's try that.
So back here I am looking at my reservation page and here's my form, which is right here.
I'm going to wrap this entire thing.
Div class equals form Dasch row and then I will close that down here before my button.
But after the other input slash div and this needs to be wrapped in a div class equals call div class
equals call for my start and I'll end it right here.
Slash div and the same thing here.
Div class equals call and close the div right.
Where is it.
Here slash div.
So things are getting a little out of whack right now, so I'm going to reformat it all by selecting
the entire form, moving it over and then in indenting things a little bit.
So the first div here includes this column which is right there.
So this is a close call.
This is a day of class for one group, this one goes with that, OK?
So this all gets moved in as one in this class couple gets moved in as one, then this formiga group
gets moved in there.
OK, and the same thing for this, this gets moved over.
And this is just so I don't accidentally have unclosed.
There are too many closing dudes or something like that, which is really, really easy to do and much
easier to fix while you're entering things rather than making up as we go along.
So there's a dude here and this dude.
See, I was out of work.
Move that one over and move that one over to here.
And this device should close the door of equals.
So this whole thing gets indented, then this gets indented.
And now I can move my whole form over there.
That's much cleaner.
Let's save that and see what it looks like.
So back over to here.
Find my nice page, reload.
Much better starting date here and indeed here.
That's exactly what I want.
All right.
Now, the other thing I want is I don't want people to be able to submit this form without actually
having something in here and something in here.
So I can do that really easily.
And it's HTML5 that does this for us.
We're going to do a better version in the next lecture or the next section somewhere along there.
But right now, let's just make it a required field.
And I can do that simply by typing the word required anywhere in that input input required.
But spell spelt right though required.
Required.
Now, if I reload this page, I should not be able to submit this form.
So please fill in this field.
So it actually and again, this is not something we have done.
All we did was put the word required in there.
This is actually handled by the browser and again, different browsers handle it differently.
So this works and it's sufficient for our purposes at the moment.
But with a little bit of judiciously applied JavaScript, we can make this much better and we will do
that in the not too distant future.
For now, we have our search for availability.
Is there any other information we need on this form?
And I think it's not there's no information that we need other than what we're specifying right now.
We don't need the person's name or their email address or any special requests.
All we want them to do is to be able to search for availability, and that works really well.
The only thing I would say about this form is it's kind of wide.
It really is.
It's taking up a lot of space horizontally because the date is only this big.
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
it half the width that it normally is OK, and that actually makes it much smaller.
Very good.
And we could even if we wanted to, since we know we have 12 columns and we're using six, we could
actually add an offset or just put an AP column here.
Div class equals call M.D. three, which gives us a total of nine.
But this is Dave.
It's just got to close.
We don't need anything else there.
This should add three a space for three columns and leave it blank and then give us this which should
centered on a page.
Let's see if it does.
And it does.
OK, and maybe the word submit shouldn't say submit.
Maybe I should say that here we have instead of submit, say, search availability,
OK, and a freeloader there.
Now we have our search for availability page functional.
We can make it better and we will make it better.
So let's see here the only other thing.
Yeah, that's all right.
That's sufficient for now.
All right.
This gets us going.
And this actually gives us our search for availability page on this on our site.
So the other place that we have this is what we're looking at, rooms.
We have check availability, which, you know, doesn't do anything right now.
It goes to a placeholder URL.
We need to figure out what we're going to do with this.
But my plan is to say, rather than taking us to a whole new page on on the site to search for Generals'
course, well, that might be confusing.
I'm on the general quarters page, site, page.
I'm looking at it.
If I click that button and it takes me somewhere else, it's kind of not intuitive.
It would be better if we could pop a dialogue and have the search availability button just show up in
that where we enter our starting date and our ending date and we stay right on this page and we'll do
that.
But to do that, we need some JavaScript which will get to in the next section.
But right now, we have everything we need to start cutting this page, these pages up and turning them
into line templates before we do that will probably add some JavaScript and we'll do that in the next
section.