So now I want to start working on the actual interactive part of our site, and that's the part where
people get to search for reservations, to search for a date range and decide whether or not they actually
want to stay on a certain day and whether or not the room is available on the days they want to stay
there.
So I'm on the reservation page right now and it's just a placeholder.
But we're going to use this to build a form and forms are kind of cool.
So I'm back on the bootstrap documentation and I'm going to go to, let's see, content.
And in there, maybe it's under here somewhere.
Yeah, there it is under component's forms.
And this tells us how we can build forms.
So this is the sort of thing we're going to be building right here, a place where people can type things
in and submit the actual form to find out whether or not the dates that they want are available.
So how do we do that?
Well, here's an example of a form, and that is one way to do it.
So I can just copy this just as a starter and go over to my reservations page and I'll change this to
search for availability, which you can call whatever you want, but I'm going to call it that.
I'm going to move that down a little bit.
And remember, we can use that using do that by using class, merge on top and we'll put five.
I'll move it down a fair bit and there's got to be a dash in there.
So if I save that and then paste the form in and format a little bit better and this form is going to
change a lot.
So don't worry that it doesn't have the right information yet.
Save it and go back and reload this page and just see what it looks like.
Search for availability, but already it looks pretty good.
So what kinds of things do we need to know at the point where we're searching for availability?
Will all we really need to know at this point is a starting date and an ending date.
So this is really not appropriate.
So let's go back here and change the label.
First of all, let's look at the actual way a form is built.
So I'm going to space these things out so we could see them a little bit.
And here a form begins with a form tag and you can just use a form tag, but it actually needs a little
more information.
Every form has to have an action and that is an HTML attribute.
So you put the keyword action followed by equals sign, followed by something in parentheses.
And the action is where do you want the information filled out on this form to be sent?
And where you're going to send it, of course, is to some you are out.
So we're actually not going to make this form functional right now.
So we'll leave that empty.
We can't make it functional until we actually start working and go and handling the posted form data.
But we can fill out is method equals and it's either get or post.
Well, let's look at the difference between these two will make the action right now.
We'll just to show how this works, will say the action is equal to this page.
So it is reservation on HTML.
So we'll make the action the same thing as this page, same address as this page that his HTML.
And I'll make the method equal to get, which can be upper case or lower case.
It's entirely up to you and I'm going to get rid of the password because we don't need the password
and I'm just going to leave this email address.
I'll relabel that to starting date and then I will change the help text here, which is something that
enter your starting date and we'll make this really a stupid form right now.
We'll make it smarter later in the form of year to year, month, month data.
And I know the Americans listening to this don't like that format, but this is the ISO standard and
I'm in Canada so I can put whatever I want.
And of course, so can you.
If you don't like that format, choose another one.
But that's the format will be using when we actually submit data.
But we're not going to force people to type it in a few other things here.
Label, for example, input email.
Well this is for some ID.
I'm going to call this start date.
So this has to match the input, which is this part.
The input actually draws this part of the form, the part where they can type things in.
It has to match whatever the label, the the for tag on the before attribute on the label tag is.
So this has an ID and will change that to start date and something.
For some reason I've never understood why, but they always do this.
The people who write the documentation at Bootstrap leave the most important part of the form out,
and that is the name of the attribute of the input attribute.
And the name here can be whatever I want, but I'm going to call it start date.
So it has this name of start date.
It has the idea of start date.
It's a type email.
Well, let's make that text because we don't require this to be an email.
So an input of type text, class of form control.
All that does is make it look like a bootstrap form.
In other words, nice.
The ID matches the four four attribute on the the label, the name, and this is critical because that's
what we're going to use to pull information out of the post Engo and the described by is email helpable.
Call this start date help just because that's what it actually is.
And all that does is allow screen readers to read some text it.
All right.
So we have that and we don't need this checkbox.
So we'll get rid of that and we'll save this and go look at our form and reload.
OK, so search for availability and I've got to put my dad in there.
Now, you'll remember that I gave this form the type input type of text and that I gave the form itself
the method of get.
So let's submit this and see what happens.
Nothing's going to happen except we'll come back to this page.
But I'll put the date in here, 20 21 zero six zero one June, the first 20 21.
I look up here where it says reservation got HTML.
I'm submitting this form using the method of get.
When I submit it, it actually takes me to reservationist html start date equals notice how it put that
information back there.
OK, so that is probably misnamed.
The file looks like I did.
Let me go back here and fix that just so it'll work the way we want it to be.
This file is called Reservation Dot html and I'm going to oh yes.
I'm not on a web server so I have to do this.
Let's go back here and just load the page, get.
Open go here.
Hopefully this will actually do it this time.
Put some date in there, 20, 21 zero once a bit and it does takes me back here and it put whatever
I entered in the form after a question mark, the name of the the input attribute, which matches what
you see right here, the name of the input attribute right here equals whatever I typed in.
So if I can type in something here like 20 twenty zero six zero one and hit submit, all that's going
to change is the date changes from what it was to what I entered.
OK, so that is what a get does.
Now what if I change it to a post.
Well, I can't hear because I'm not running a web server.
But the important thing is if I run this as a post, it's actually going to not show this information.
When you submit a form using post, it hides all that data, doesn't put it in the address bar of a
web browser and kind of puts it encodes it differently.
When you put it as a get, it does encode it differently.
Now, the advantage of putting something in a get is if I submit the form using get and then hit the
back button, my web browser, it'll just display the previous page.
Probably won't repopulate the form data, but it will actually display the page.
If I submit a form using post and hit the back button on a web browser, you get a little word warning
Dylon that says this page wants to submit a form again.
Are you sure you want to proceed, yes or no?
So that's one of the differences between the two.
Now, there are ways around that.
And when we actually get to processing form, data will handle those situations.
But for right now, we're just going to build a form.
So I have a starting date probably.
I'd like to have an ending date, too.
I could do this.
I could come here, just copy this whole thing, paste it down here, call this ending date, ending
date and call this end date and copy the four and make it the ID and make it the name and call this
end date.
Help and copy that and paste it here and hail into your ending date in the form of your month month
data.
And I work.
I can actually do that.
So I have a starting date and I have an ending date.
It would be nicer though if there were two changes to this form.
No.
One, let's put these things beside each other.
So put a starting date here and right beside it, put an ending date here and then have my submit submit
button underneath it.
And also, if what I clicked on this, it displayed a calendar instead of forcing people to remember
to type a four digit year and a hyphen and a two month and a hyphen and a two digit that day and a hyphen,
which is a real pain.
But we can do that.
We can change it really easily.
We can change the first.
Let's just do the calendar pick first.
So modern browsers have a type of date for input and a type of date for input.
So if I save this and reload the page and click in here now I have a date picker so so I can come in
here and say, oh well, I don't want 20-20, I want 2021, I want to June and I want that's fine.
So that's that's good.
I got that now.
I want June the first perfect.
And now the dates and exactly the right format URL in a format I can work with.
Anyway, the only problem with this is if I copy this, I'm in Firefox right now.
If I start up say Chrome and paste in the same address, yes, you can access files on my desktop.
It doesn't work quite the same way, so, for example, I can click on the y y y y and start typing
2021, but to make the calendar come up, I actually have to click over here and it's a different looking
calendar.
That's because the actual generation of the calendar using the input type equals date is delegated to
the browser.
So browsers often well, they all have their own date picture if they have one at all.
Some just leave it as a text input.
So this is sufficient for our purposes now, but really down the road, I'm probably going to want to
install a slightly better calendar picture.
All right, let's let's go back and think about what we're going to do next.
We want to actually move this from down here to up here, and then we want to put in something that
makes it clear whether or not a date is available or we can't do that last part until we actually get
to go.
But we can get going.
We can do certain other things.
We could say this should be required field and this should be a required field.
In other words, I shouldn't be able to submit this form like I am right now that's actually giving
me an invalid date.
But again, that's from Chrome, not from us at all.
But we'll go back to Firefox.
So I'm used to using and reload the page.
And here it's we have a calendar picture.
But what if what if they don't specify an end date?
What if they try to submit it right now?
Well, that's a bit of a problem.
We need to make sure that both fields are required.
We'll do that and a little bit more cleanup in the next lecture.