Welcome back, everyone, to part two of our discussion on forms.
We're going to briefly go over a couple of other input selection types, so there's going to be many
different types of input selection we can actually set up for the user.
We've already explored a couple of them like text, email and password, and we want to cover just a
few more of them here.
And keep in mind, we're going to introduce more and more of the for input selection types further along
in the course.
But if you're curious of what's available, you can always check out the Emden that is the Mozilla Developer
Network web documentation online.
For more details on input types and, more importantly, the attributes that are associated for specific
input types.
OK, let's get started.
Head back to our code editor.
All right.
Here I am back inside Visual Studio code.
As a quick note, typically when we're making each HTML documents, we will actually say doc and create
a full heading and then the full body and so on.
But for right now, since we're just doing really simple examples, I'm not bothering to follow that
mainly for the sake of tech space.
So keep that in mind.
Later on, we will be doing things like separating out the head and the body, creating a title and
so on.
For right now, let's imagine that we want to create a hotel feedback form.
However, there's going to be only certain responses that I want from a user.
For example, I want to know whether they're from inside the USA or outside the USA.
And I want to collect that information in a uniform manner.
I don't want the user to have the ability to type anything out.
They only have two buttons for it.
So how to actually create this?
Well, first off, I need to create my form.
And let's have the action go to other HTML.
And inside other HTML, we're still going to say thank you, but I'll say something like, thank you
for filling out the form or for your feedback, et cetera.
And then what I'm going to do here is inside the forum.
I'm going to in fact, let's see outside the forum, I have a little heading that says hotel feedback.
That way, it starts looking a little more real.
So I have my heading, then I have the actual form.
And inside the form, I'm going to create a.
Inputs.
And instead of a text input, what I want to know is where is the user from and let's say, inside the
USA or outside the USA?
So for that sort of thing where I only want to have a few select options, a radio button could work
for us.
So here I have type radio and note that it's a real button I can click.
So then I can add a little label to it so I can put a label in front of this and say This is going to
be inside.
And the thing is, I still need some information here for the actual question that's being asked.
So right about that label, I can create a paragraph that says.
Are you from inside or outside USA?
Maybe you were running a hotel in the United States and I want to know if we're getting more visitors
from inside United States or outside the United States, so I can see here are you from inside or outside
the USA and then inside they can go ahead and click on it.
I want another set.
So we're going to say label.
And then again, input type.
And this one is going to be another radio button.
And let's have this one before outside.
OK.
And maybe this is a little confusing to have them both right next to each other.
So I put a little break in between them.
So inside and outside, keep my later on.
We're going to be able to format these a lot nicer.
Now, unfortunately, the way I have it set up right now is I don't actually have this connection to
the label and the input.
So this allows me to actually select both of them, which sometimes you may actually want that for them
to be able to select multiple options.
But what I only want is for only one of these to be selectable at once inside and outside.
So how can I do that?
Well, I'm first going to actually assign a label to these inputs by connecting a four to an ID for
the input.
So we're going to have to say four in.
And let's make the idea of this input element be in, and we'll say this one is liable for out.
And then we're going to have the I.T. here be equal to the string out.
OK, so now these labels are officially connected to their inputs, but that doesn't actually solve
the problem of inside and outside.
However, recall that when we assign names to the actual inputs, that allows us to create what is essentially
going to be a variable that we can send to the other action page that is other than HTML.
So let's say the name for this input is equal to in and the name.
For this input is equal to out, so I have two names here in and in and out.
And then we have inside and outside and the radio buttons.
So I'm going to save those changes.
And if I select one right now, then I still need to submit button to go to the other page.
So let's actually do that.
So we're going to say input type is submit that we go.
And let's also have this be on a new line.
So we're going to break element there.
OK, so very simple form.
I have my label input, and right now my name is in.
Name is out for inside and outside there, but for you buttons.
So I select inside hit submit says thank you for filling out the form and you notice it says in is equal
to on so on.
Essentially, it means, hey, was that radio been turned on in the previous page?
Now we can go back here, and if we select inside and outside, I can hit submit and it said in was
on and then out was also selected as on the radio buttons were on, however, notice that what would
happen if I force them to share the same name space so I wouldn't allow for two separate names.
Instead, I would call this name something like Locy for location, and I would actually force both
radio input buttons to share the same name.
So now that they're sharing the same name, look what's going to happen to the form when you try to
select both of them?
It says inside.
And now if I try to also select outside, it switches them.
So now each team is smart enough to understand, Hey, these radio buttons are sharing the same name
space, so I'm not going to allow you to select both of them as on, because in order for them to share
the same name space, I can only have one of them be on.
In order for this feedback to make sense as it goes to the other HTML.
So that is how we're able to link input buttons together by making them share and forcing them to have
the same name.
Then when I hit submit, I can see it just says location is on here.
So that's not actually very helpful as far as saying well which button was clicked.
So what I need to do is assign an attribute known as value, so the value will be able to distinguish
between inside and outside being clicked.
So I'm going to add in here value is equal to and let's have this one be outside or out.
And then we're going to say the value here.
Is equal to in.
So let me just quickly clarify what ID, name and value are doing.
It is connecting the label for this input.
Later on, we'll see that this actually has to do with CSI styling as well.
The name is going to be able to link the actual input together.
The value is going to distinguish which real button is actually being clicked as I send it to the next
page.
So going to come back here and let's go ahead and select inside now.
Hit Submit.
And now I can see that it says, OK, location is equal to out.
You'll notice the default value for the radio buttons was on.
So the default value was looking something like this on.
And on for both buttons, but obviously that's not super helpful as I get to the next page just to know
that location was on because no matter what I do for each input, even though I can only select one,
this name value combination would be the same.
So instead, I don't want to say, OK, this value is inside for the first one, and this value is going
to be outside for the second one.
And hopefully I can get the idea of name value pairs or in Python, we actually call these key value
pairs.
But either way, you get the idea that now I can send back name value pairs to the next page and also
have them linked.
So I can only select one radio button at a time, which is super useful.
OK, so that's the radio button.
The other thing I can begin to ask are things like, let's say, how was your service?
Maybe it was great, OK or bad for this, I can use a dropdown menu.
I'm going to delete what we have here so far for the radio buttons.
Just save a little bit of space.
And for this, I'm going to use the select tag.
It's not quite the same as an input tag, but I can say select and I'm going to give this a name, let's
say stars.
And then right above this, I'll say a paragraph here and say, How was your service?
Question mark.
OK, so it says, how is your service a note by saying select, I give the option to have a little selection
here and then inside, I need to actually put the options that are going to be part of the select tag.
So I say option.
And then I can give it a value like great.
And let's go ahead and copy this couple more times.
And then let's say the Sun was OK, and this one is bad.
You can almost think of this as like three stars, two stars or one star service.
And now you'll notice I have three options here, but don't actually see what they actually say as far
as what's actually shown in the dropdown.
So for that, you can decide what text you want actually put in inside the options.
So I could say three to one.
And no, now I get the options three to one and oops, accidentally put that in there.
There we go.
OK.
Three two one Those go inside in between the option tax and I can see three to one in my dropdown.
So how does this work again?
Well, you have this select call.
You can give it a name and then you have the value that's associated of that name.
So no, I can only select one value either greats, OK or bad to be associated with this name stars.
So all of these options are going to be connected to name.
So let's go ahead and choose two to say that Starz was going to be OK.
Remember, the user sees two, but programmatically on the back end, I'm going to see a name value
pair that says something like Starz is equal to OK.
Now I'm going to save this hit submit and on the back end, they see here stars as equal to OK, now
maybe that wasn't super useful and I would prefer to have something like value is equal the two here
and actually send a two back so it can actually have a number.
But hopefully you get the idea that again, we're just creating name value pairs in order to link options
together within select.
Now, the other different type of input I want to show you is a text area input.
This one also is not really an input tag, but you can just say text area and then note it by default
gives us a name I.D. columns and rows that will actually define the size of the text area.
If I come back here, you can see I have a text area that I can be in the type in.
So this is for the kind of thing that I can say just open ended any other comments, question mark.
And now the person can type any text they want.
They just have a really large text area to play with.
This is different than just a text box, because now I can actually have the user be able to resize
this on their own and rows and columns and give me a default size so I could make this, you know,
much larger, really small.
I can make it just like a three by one, just tiny little text box so they can begin to type in.
But you'll probably to want to have it be larger and the literal looks to be able to adjust the size
of this text area based off the size of the user screen.
That's the last one I want to point out it's text area.
Same idea.
You can have a name and value associated with it.
OK.
That's it for the different types of inputs.
Again, we're going to discover more and more slowly as we go throughout the course.
But just get the idea in your mind that there's a form.
It's going to have labels and inputs.
And sometimes there's special types of inputs like text area or dropdown selects that are also available
to us.
OK.
Thanks.
And I'll see you at the next lecture.