1
00:00:00,520 --> 00:00:07,240
Bootstrap styling can be applied to several different types of form elements including inputs text areas

2
00:00:07,720 --> 00:00:16,270
checkboxes radio buttons and select menus bootstrap also supports all HDMI L5 input types such as text

3
00:00:16,810 --> 00:00:26,590
password email no time week and so on an important consideration is that inputs will not be styled if

4
00:00:26,590 --> 00:00:28,480
their type is not properly declared

5
00:00:31,200 --> 00:00:32,490
on this general page.

6
00:00:32,490 --> 00:00:35,350
We have a number of different types of form elements.

7
00:00:35,610 --> 00:00:41,010
We covered the input field elements in the last lesson so we'll take a look at the text area to begin

8
00:00:41,010 --> 00:00:52,730
with to create a text area create a div and set the class to form group create a label for your text

9
00:00:52,730 --> 00:00:58,220
area and remember to apply the four attribute and set it to comment

10
00:01:01,440 --> 00:01:10,450
the text area is created using the text area tags set a class inside the text area element and set it

11
00:01:10,450 --> 00:01:18,880
to form control you can specify the length of your text area by creating a rose attribute and setting

12
00:01:18,880 --> 00:01:19,800
the value.

13
00:01:19,800 --> 00:01:22,620
In this case our text area is five rows in length.

14
00:01:23,370 --> 00:01:29,370
If we set it to 10 you can see that the text area will become larger

15
00:01:36,000 --> 00:01:38,850
the next element we have here is a checkbox

16
00:01:41,890 --> 00:01:49,130
to create a checkbox start with the div and set the class to checkbox create a label element input your

17
00:01:49,130 --> 00:01:59,160
input inside the label tags and we have two checkboxes here check option 1 and Option 2

18
00:02:04,530 --> 00:02:05,970
to create a radio button.

19
00:02:05,970 --> 00:02:11,490
Start with a div and set the class to radio and it's more or less the same as the checkbox.

20
00:02:11,490 --> 00:02:18,490
You can create a label and insert your input element right into the label.

21
00:02:18,720 --> 00:02:24,390
And keep in mind that the difference between a checkbox and a radio button is with radio buttons you

22
00:02:24,390 --> 00:02:31,720
typically only want the user to be able to select one option and for that reason the name attribute

23
00:02:31,720 --> 00:02:32,650
is very important.

24
00:02:32,710 --> 00:02:38,080
When you give two radio buttons the same name the user can only select one option

25
00:02:44,990 --> 00:02:51,210
our next element here is a select menu and to make one first create a div.

26
00:02:51,210 --> 00:03:00,080
Set the class to form group Next create a label for the select list insert your select tags and set

27
00:03:00,080 --> 00:03:01,670
the class to form control

28
00:03:04,760 --> 00:03:05,140
eat.

29
00:03:05,230 --> 00:03:07,910
Create each option using the option tags.

30
00:03:07,930 --> 00:03:12,990
So here we have four options and it's just a numerical value one two three four.

31
00:03:13,180 --> 00:03:15,250
If we were to change this to something else

32
00:03:18,500 --> 00:03:31,370
you can see that the value changes in the menu.

33
00:03:31,390 --> 00:03:37,690
You can also create a select menu that allows multiple options to be selected to do so creative and

34
00:03:37,690 --> 00:03:42,200
set the class to form group create a label for the menu.

35
00:03:45,360 --> 00:03:50,330
And create a select element and create a multiple attribute.

36
00:03:50,370 --> 00:03:52,800
So we have a select element created.

37
00:03:52,950 --> 00:03:55,290
Here's our multiple attribute.

38
00:03:55,290 --> 00:04:02,110
Also create a class attribute and set that to form control and create your options.

39
00:04:02,150 --> 00:04:07,500
The same way we did in the previous in the previous select menu.

40
00:04:07,610 --> 00:04:14,380
Here we have five options and it's just the numbers one two three four 5 on the right hand side here

41
00:04:14,380 --> 00:04:21,280
you can see we can select multiple options by holding the control key or if you want to select large

42
00:04:21,280 --> 00:04:24,940
groups of options or the shift key and we can select all of them at once.