So in this video we're going to talk about three additional ways of getting user input.
The first one the radio button is actually just another type of input tag that we've seen.
It's similar to a checkbox.
The next one the select tag is how we get dropdown menus.
And finally we're going to talk about the text area which is how we can create text inputs that are
multiple lines long.
So I'm going to start Of course with those standard HMO boilerplate.
Go ahead and add in title save that and let's go ahead and add a radio button.
So it's just input type because radio.
And I'm going to duplicate it and I'm going to give the other one type because checkbox just so you
can see them side by side.
So this is a radio button right here.
I can not turned off once I've selected it.
This is a checkbox which I can toggle on and off.
So the difference really is that a checkbox allows a user to select it or unselected to have let's say
there's five different choices of things that a user can check.
Let's say we're asking users to select their.
This is a job site and we want them to select their skills.
We want them to be able to say javascript and see as an HMO or maybe only javascript and they're just
a bunch of checkboxes that they check on and off our radio button.
However it's used usually when a user has one choice.
So an example typically on Web sites should be something like gender where it asks you to check male
or female or other.
And you only have one choice.
You can not you know not select.
You have to pick one of the elements so to do that let's say for example we're going to have a form
where users pick if they prefer cats or dogs
and there's no option to pick both.
Unfortunately in this world it is black or white either prefer cats we prefer dogs.
So to do that we're going to have two radio buttons.
And if that's all we do to start I can pick one and I can also pick the other.
Not quite what we want.
I want to only be able to pick one.
So the first thing I want to do is get a form going and I'm going to move my inputs into that form.
And for now we're just going to leave it so that it's just a get request and it just the default action
which is just to refresh the page.
The next thing that we're going to do is add a few labels so I'm going to go ahead and use the four
syntax so this will be for dogs.
And then we have to give our input and I.D. dogs.
But those have to match then.
Same thing here.
Another label tag for cats and then Id cats.
So if you're fresh now we have two choices.
But I can still pick both.
So what we need to do is tell him how these two radio buttons are for the same choice so you can pick
one or the other but they are one decision.
So to do that we need to use the name attribute which remember that the name is giving an individual
input a name but m l can refer to it by and it's also the way that it is stored or sent in the HGP request
that names are important.
So let's give it a name here.
The first one name will be let's go with let's just call it pet choice.
And then on input here we're also going to give it the exact same name.
And the reason we do that you'll see in just a second is that by giving them the same name it then connects
them so that we now can only pick one.
So if we refresh.
I can click dogs or cats but not both.
And one more thing I'll show you.
Let's add a button to the end of the form.
And what we've seen so far is actually input type equals submit at the bottom of a form but I'm showing
you a button just to show to you that if the button is the last thing in a form it will actually submit
the form.
So there's a few options of inputs to actually submit the form at the end button at the end or input
type you will submit.
So now let's pick dogs of course.
The only natural choice there.
Remember the name is pet choice so we should see something up here in the query string just like with
any other inputs.
When I click go we see pet choices equal to and then O N or on which is not really what we expected
.
So we're missing one thing which is we need to also say what the value of this decision is.
So when you go ahead and add the value tag inside that value attribute.
And let's just say this value will just be dog and this one will be cats and let's be good all caps
just so that you can see what's coming from where.
OK.
So it says if the user clicks on dogs under the name pet choice store the value dogs in all caps if
the user submits and clicks cats under the value or the name pet choice store the value cats in all
caps.
So just to show that to you let's click on dogs go and we get pet choice equals dogs.
If we do cats we get pet choice because cats.
So the next element we're going to talk about is the select tag and with a select tag what to do is
create nice dropdown menus.
So the tag name is called.
It's just select.
It's an opening and closing tag.
And if I just do that and then it just slide and I refresh my page.
I actually already get a dropdown menu.
It's just totally empty.
So along with the select tag we use the option tag.
So inside of there for every possible option that we want to use or to pick we add an option tag.
So let's do a dropdown that led to the user pick their favorite color
and let's do a few options here.
Red orange and yellow.
So as you can see we already get a nice drop down here with our choices.
And if I hit go let's select orange and I hit go.
You'll see we don't actually get anything up here and there you are l like we do if we select dogs do
yellow this time and they hit go.
I still only get pet choice and that's because we do not have a name that we provide.
So on our select We need to give it a name and let's just call it fav and let's just go with color and
leave it at that.
And I refresh my page let's click cats let's click on yellow and watch up here as I hit go.
I now get pet choices cat and color is yellow.
So what you'll see is that depending on the option that I have selected in this case yellow maps the
browser takes whatever that the text is inside of that option and it just sends that as a value under
the name color.
So we don't always want the value that is sent along in the request to be identical to whatever is displayed
to the user in the dropdown.
So an example of that might be something like if we wanted the user to pick a mood so let's say What's
your current mood and we want to have a happy face here.
A most emotionless face I guess and a sad face.
And we end up with this nice drop down here with our emoticons but let's say that when a user selects
happy we don't want all of this to be sent.
Instead we want the word happy to be sent or the word said to be sent to do that.
We use the value tag sorry the value attribute.
So we will say value equals.
And let's just say Happy equals neutral and value equals set.
Now if I refresh correct dogs let's go outside and I click go.
You can see I get pet choice is dogs and color is equal to said.
And of course that's because we kept the name as color you would want to change that to be mood just
so that our markup is meaningful and actually makes sense.
So cats are soooo happy and yet mood is equal to happy.
OK.
So that's all we need to cover with selects.
One other thing is the textarea tag and textarea.
I'll put it up on Indian is a nice way to create inputs that are more than one line.
So we've seen text inputs like this input type equals text
and they are single lines.
But what if we wanted to ask a user for a bio or to copy and paste a resume or something that is not
going to work very well and this really slim short input.
So textarea It's actually another tag just like select.
So it's not an input with a type.
It's actually a separate type of form control.
And the way that it works there's two important parts.
The first is we create a text area tag and that on its own it's going to give us this text area.
But what we can also do is specify exactly how big that text area is using these two attributes rows
and columns.
So I'll show you that here.
Let's start with 10 rows and 50 columns and you can see that my textarea expanded in both directions
.
But it definitely got wider.
So let's say I now want 100 rows and you can see it gets a lot longer.
So basically we can specify how many rows and how many columns to change the dimensions of our text
area.
One other thing about it is just like with these other elements let's go back to a smaller one to 10
by 10.
Just like with these other elements if I wanted to send this data in the request let's get rid of this
input.
I would need to give it a name name is equal to and let's just say paragraph
fill this paragraph with some text.
I clicked go and you can see or expand this.
I get paragraph equals whatever text I have in here
every go