1
00:00:00,600 --> 00:00:05,350
So in this video we're going to talk about three additional ways of getting user input.

2
00:00:05,370 --> 00:00:10,830
The first one the radio button is actually just another type of input tag that we've seen.

3
00:00:11,010 --> 00:00:12,740
It's similar to a checkbox.

4
00:00:12,780 --> 00:00:16,170
The next one the select tag is how we get dropdown menus.

5
00:00:16,230 --> 00:00:20,550
And finally we're going to talk about the text area which is how we can create text inputs that are

6
00:00:20,550 --> 00:00:22,290
multiple lines long.

7
00:00:23,130 --> 00:00:26,900
So I'm going to start Of course with those standard HMO boilerplate.

8
00:00:26,970 --> 00:00:33,570
Go ahead and add in title save that and let's go ahead and add a radio button.

9
00:00:33,750 --> 00:00:37,830
So it's just input type because radio.

10
00:00:37,830 --> 00:00:43,410
And I'm going to duplicate it and I'm going to give the other one type because checkbox just so you

11
00:00:43,410 --> 00:00:46,570
can see them side by side.

12
00:00:46,650 --> 00:00:48,900
So this is a radio button right here.

13
00:00:49,650 --> 00:00:51,850
I can not turned off once I've selected it.

14
00:00:51,870 --> 00:00:55,350
This is a checkbox which I can toggle on and off.

15
00:00:55,470 --> 00:01:03,390
So the difference really is that a checkbox allows a user to select it or unselected to have let's say

16
00:01:03,390 --> 00:01:07,310
there's five different choices of things that a user can check.

17
00:01:07,320 --> 00:01:09,890
Let's say we're asking users to select their.

18
00:01:10,080 --> 00:01:12,800
This is a job site and we want them to select their skills.

19
00:01:12,900 --> 00:01:18,990
We want them to be able to say javascript and see as an HMO or maybe only javascript and they're just

20
00:01:18,990 --> 00:01:21,960
a bunch of checkboxes that they check on and off our radio button.

21
00:01:21,960 --> 00:01:26,280
However it's used usually when a user has one choice.

22
00:01:26,280 --> 00:01:33,840
So an example typically on Web sites should be something like gender where it asks you to check male

23
00:01:33,840 --> 00:01:36,210
or female or other.

24
00:01:36,600 --> 00:01:38,920
And you only have one choice.

25
00:01:39,000 --> 00:01:41,360
You can not you know not select.

26
00:01:41,430 --> 00:01:49,410
You have to pick one of the elements so to do that let's say for example we're going to have a form

27
00:01:49,500 --> 00:01:52,110
where users pick if they prefer cats or dogs

28
00:01:55,830 --> 00:01:58,090
and there's no option to pick both.

29
00:01:58,110 --> 00:02:03,470
Unfortunately in this world it is black or white either prefer cats we prefer dogs.

30
00:02:04,080 --> 00:02:07,430
So to do that we're going to have two radio buttons.

31
00:02:07,650 --> 00:02:15,600
And if that's all we do to start I can pick one and I can also pick the other.

32
00:02:15,600 --> 00:02:16,650
Not quite what we want.

33
00:02:16,650 --> 00:02:18,780
I want to only be able to pick one.

34
00:02:19,080 --> 00:02:24,550
So the first thing I want to do is get a form going and I'm going to move my inputs into that form.

35
00:02:25,170 --> 00:02:29,490
And for now we're just going to leave it so that it's just a get request and it just the default action

36
00:02:29,490 --> 00:02:31,290
which is just to refresh the page.

37
00:02:31,650 --> 00:02:40,080
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

38
00:02:40,080 --> 00:02:45,360
syntax so this will be for dogs.

39
00:02:48,030 --> 00:02:51,570
And then we have to give our input and I.D. dogs.

40
00:02:51,650 --> 00:02:53,870
But those have to match then.

41
00:02:53,880 --> 00:02:55,690
Same thing here.

42
00:02:55,980 --> 00:03:06,120
Another label tag for cats and then Id cats.

43
00:03:06,210 --> 00:03:08,360
So if you're fresh now we have two choices.

44
00:03:08,430 --> 00:03:10,160
But I can still pick both.

45
00:03:10,500 --> 00:03:17,580
So what we need to do is tell him how these two radio buttons are for the same choice so you can pick

46
00:03:17,580 --> 00:03:20,550
one or the other but they are one decision.

47
00:03:20,550 --> 00:03:27,090
So to do that we need to use the name attribute which remember that the name is giving an individual

48
00:03:27,090 --> 00:03:34,620
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

49
00:03:34,620 --> 00:03:36,000
that names are important.

50
00:03:36,270 --> 00:03:37,580
So let's give it a name here.

51
00:03:37,620 --> 00:03:46,370
The first one name will be let's go with let's just call it pet choice.

52
00:03:47,610 --> 00:03:51,890
And then on input here we're also going to give it the exact same name.

53
00:03:52,200 --> 00:03:59,760
And the reason we do that you'll see in just a second is that by giving them the same name it then connects

54
00:03:59,760 --> 00:04:02,260
them so that we now can only pick one.

55
00:04:02,340 --> 00:04:03,510
So if we refresh.

56
00:04:03,650 --> 00:04:08,510
I can click dogs or cats but not both.

57
00:04:10,050 --> 00:04:11,500
And one more thing I'll show you.

58
00:04:11,520 --> 00:04:14,400
Let's add a button to the end of the form.

59
00:04:15,630 --> 00:04:21,360
And what we've seen so far is actually input type equals submit at the bottom of a form but I'm showing

60
00:04:21,360 --> 00:04:26,760
you a button just to show to you that if the button is the last thing in a form it will actually submit

61
00:04:26,760 --> 00:04:27,800
the form.

62
00:04:27,870 --> 00:04:33,960
So there's a few options of inputs to actually submit the form at the end button at the end or input

63
00:04:33,960 --> 00:04:35,490
type you will submit.

64
00:04:35,490 --> 00:04:38,250
So now let's pick dogs of course.

65
00:04:38,250 --> 00:04:40,270
The only natural choice there.

66
00:04:40,380 --> 00:04:47,520
Remember the name is pet choice so we should see something up here in the query string just like with

67
00:04:47,520 --> 00:04:48,710
any other inputs.

68
00:04:48,750 --> 00:04:57,420
When I click go we see pet choices equal to and then O N or on which is not really what we expected

69
00:04:57,420 --> 00:04:58,020
.

70
00:04:58,110 --> 00:05:04,710
So we're missing one thing which is we need to also say what the value of this decision is.

71
00:05:04,710 --> 00:05:09,210
So when you go ahead and add the value tag inside that value attribute.

72
00:05:09,360 --> 00:05:22,610
And let's just say this value will just be dog and this one will be cats and let's be good all caps

73
00:05:22,610 --> 00:05:28,010
just so that you can see what's coming from where.

74
00:05:28,220 --> 00:05:28,690
OK.

75
00:05:28,790 --> 00:05:36,430
So it says if the user clicks on dogs under the name pet choice store the value dogs in all caps if

76
00:05:36,440 --> 00:05:42,910
the user submits and clicks cats under the value or the name pet choice store the value cats in all

77
00:05:42,920 --> 00:05:43,690
caps.

78
00:05:44,000 --> 00:05:50,170
So just to show that to you let's click on dogs go and we get pet choice equals dogs.

79
00:05:50,360 --> 00:05:53,630
If we do cats we get pet choice because cats.

80
00:05:53,690 --> 00:05:58,790
So the next element we're going to talk about is the select tag and with a select tag what to do is

81
00:05:58,790 --> 00:06:01,260
create nice dropdown menus.

82
00:06:01,730 --> 00:06:03,300
So the tag name is called.

83
00:06:03,350 --> 00:06:04,510
It's just select.

84
00:06:04,690 --> 00:06:06,470
It's an opening and closing tag.

85
00:06:06,860 --> 00:06:10,860
And if I just do that and then it just slide and I refresh my page.

86
00:06:10,920 --> 00:06:13,040
I actually already get a dropdown menu.

87
00:06:13,060 --> 00:06:14,890
It's just totally empty.

88
00:06:14,930 --> 00:06:18,660
So along with the select tag we use the option tag.

89
00:06:18,940 --> 00:06:25,150
So inside of there for every possible option that we want to use or to pick we add an option tag.

90
00:06:25,430 --> 00:06:29,140
So let's do a dropdown that led to the user pick their favorite color

91
00:06:37,610 --> 00:06:39,510
and let's do a few options here.

92
00:06:39,590 --> 00:06:46,810
Red orange and yellow.

93
00:06:48,680 --> 00:06:53,780
So as you can see we already get a nice drop down here with our choices.

94
00:06:54,270 --> 00:06:58,330
And if I hit go let's select orange and I hit go.

95
00:06:58,940 --> 00:07:05,740
You'll see we don't actually get anything up here and there you are l like we do if we select dogs do

96
00:07:05,770 --> 00:07:08,070
yellow this time and they hit go.

97
00:07:08,210 --> 00:07:13,940
I still only get pet choice and that's because we do not have a name that we provide.

98
00:07:14,060 --> 00:07:20,030
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

99
00:07:20,020 --> 00:07:21,360
leave it at that.

100
00:07:22,270 --> 00:07:29,170
And I refresh my page let's click cats let's click on yellow and watch up here as I hit go.

101
00:07:29,360 --> 00:07:33,810
I now get pet choices cat and color is yellow.

102
00:07:34,460 --> 00:07:42,890
So what you'll see is that depending on the option that I have selected in this case yellow maps the

103
00:07:42,880 --> 00:07:51,230
browser takes whatever that the text is inside of that option and it just sends that as a value under

104
00:07:51,230 --> 00:07:54,150
the name color.

105
00:07:54,170 --> 00:08:02,450
So we don't always want the value that is sent along in the request to be identical to whatever is displayed

106
00:08:02,450 --> 00:08:05,260
to the user in the dropdown.

107
00:08:05,260 --> 00:08:13,190
So an example of that might be something like if we wanted the user to pick a mood so let's say What's

108
00:08:13,190 --> 00:08:21,510
your current mood and we want to have a happy face here.

109
00:08:23,120 --> 00:08:29,860
A most emotionless face I guess and a sad face.

110
00:08:31,780 --> 00:08:37,810
And we end up with this nice drop down here with our emoticons but let's say that when a user selects

111
00:08:37,930 --> 00:08:41,930
happy we don't want all of this to be sent.

112
00:08:42,200 --> 00:08:48,570
Instead we want the word happy to be sent or the word said to be sent to do that.

113
00:08:48,670 --> 00:08:52,570
We use the value tag sorry the value attribute.

114
00:08:52,750 --> 00:08:54,990
So we will say value equals.

115
00:08:55,000 --> 00:09:04,720
And let's just say Happy equals neutral and value equals set.

116
00:09:04,730 --> 00:09:10,220
Now if I refresh correct dogs let's go outside and I click go.

117
00:09:10,660 --> 00:09:14,890
You can see I get pet choice is dogs and color is equal to said.

118
00:09:15,010 --> 00:09:20,690
And of course that's because we kept the name as color you would want to change that to be mood just

119
00:09:20,680 --> 00:09:24,030
so that our markup is meaningful and actually makes sense.

120
00:09:24,230 --> 00:09:29,050
So cats are soooo happy and yet mood is equal to happy.

121
00:09:29,060 --> 00:09:29,300
OK.

122
00:09:29,330 --> 00:09:33,140
So that's all we need to cover with selects.

123
00:09:33,250 --> 00:09:37,250
One other thing is the textarea tag and textarea.

124
00:09:37,430 --> 00:09:44,330
I'll put it up on Indian is a nice way to create inputs that are more than one line.

125
00:09:44,380 --> 00:09:50,480
So we've seen text inputs like this input type equals text

126
00:09:53,380 --> 00:09:55,250
and they are single lines.

127
00:09:55,250 --> 00:10:01,360
But what if we wanted to ask a user for a bio or to copy and paste a resume or something that is not

128
00:10:01,370 --> 00:10:05,540
going to work very well and this really slim short input.

129
00:10:05,620 --> 00:10:09,390
So textarea It's actually another tag just like select.

130
00:10:09,430 --> 00:10:12,490
So it's not an input with a type.

131
00:10:12,530 --> 00:10:15,560
It's actually a separate type of form control.

132
00:10:15,880 --> 00:10:19,690
And the way that it works there's two important parts.

133
00:10:19,690 --> 00:10:27,690
The first is we create a text area tag and that on its own it's going to give us this text area.

134
00:10:28,420 --> 00:10:35,860
But what we can also do is specify exactly how big that text area is using these two attributes rows

135
00:10:36,320 --> 00:10:37,720
and columns.

136
00:10:37,970 --> 00:10:40,040
So I'll show you that here.

137
00:10:40,150 --> 00:10:47,890
Let's start with 10 rows and 50 columns and you can see that my textarea expanded in both directions

138
00:10:47,890 --> 00:10:48,080
.

139
00:10:48,230 --> 00:10:49,270
But it definitely got wider.

140
00:10:49,280 --> 00:10:55,370
So let's say I now want 100 rows and you can see it gets a lot longer.

141
00:10:55,370 --> 00:10:59,920
So basically we can specify how many rows and how many columns to change the dimensions of our text

142
00:10:59,920 --> 00:11:01,060
area.

143
00:11:01,850 --> 00:11:07,870
One other thing about it is just like with these other elements let's go back to a smaller one to 10

144
00:11:07,880 --> 00:11:08,540
by 10.

145
00:11:08,650 --> 00:11:14,570
Just like with these other elements if I wanted to send this data in the request let's get rid of this

146
00:11:14,580 --> 00:11:15,460
input.

147
00:11:15,670 --> 00:11:22,970
I would need to give it a name name is equal to and let's just say paragraph

148
00:11:28,100 --> 00:11:30,170
fill this paragraph with some text.

149
00:11:30,190 --> 00:11:33,800
I clicked go and you can see or expand this.

150
00:11:33,930 --> 00:11:36,880
I get paragraph equals whatever text I have in here

151
00:11:39,790 --> 00:11:40,590
every go