1
00:00:00,480 --> 00:00:04,190
We can use bootstrap to style form elements.

2
00:00:04,220 --> 00:00:06,110
There are three types of form layouts.

3
00:00:06,260 --> 00:00:14,940
Vertical horizontal and inline forms this sample log in form shows an example of a basic vertical form

4
00:00:14,940 --> 00:00:17,460
labeled with three inputs and one button

5
00:00:20,220 --> 00:00:22,480
to create this.

6
00:00:22,610 --> 00:00:29,740
We start with a form tag remember to always use the roll attribute and set it to form.

7
00:00:29,800 --> 00:00:35,700
This helps improve accessibility for people using screen readers next.

8
00:00:35,740 --> 00:00:43,760
We need to wrap all our form labels and form controls in a do with a class set to form group.

9
00:00:43,770 --> 00:00:46,800
This is used to help browsers interpret optimal spacing

10
00:00:49,450 --> 00:00:50,500
inside our div.

11
00:00:50,500 --> 00:00:56,520
We have a label with a four attribute set to email after our label.

12
00:00:56,520 --> 00:01:02,050
We have our input by setting input type to email.

13
00:01:02,050 --> 00:01:13,230
The input will be validated for proper email format prior to submission and we can test that here.

14
00:01:13,360 --> 00:01:19,780
You can see that when you put an incorrect format and click the Submit button an error appears

15
00:01:23,030 --> 00:01:23,530
next.

16
00:01:23,570 --> 00:01:27,350
It's required to add a class attribute instead it to form control

17
00:01:30,900 --> 00:01:31,860
set an IED.

18
00:01:31,890 --> 00:01:39,740
If you intend to add additional validation or any JavaScript functions to this forum input the place

19
00:01:39,740 --> 00:01:41,060
holder is optional.

20
00:01:41,060 --> 00:01:43,730
It simply sets the default input field.

21
00:01:43,730 --> 00:01:50,910
Text so here you can see it says enter email and that's what the place holder is set to as well.

22
00:01:58,700 --> 00:02:05,920
Next we have our div element setup for the second input which is password most of the code is the same

23
00:02:05,920 --> 00:02:15,190
as the previous input do note that the type has changed to password and the idea has also changed to

24
00:02:15,190 --> 00:02:16,080
p WD.

25
00:02:20,860 --> 00:02:22,030
To create a checkbox.

26
00:02:22,030 --> 00:02:27,350
Start with a div element in set the class to checkbox next.

27
00:02:27,350 --> 00:02:35,140
Create a label element we've inserted the input with type equal to checkbox right before the actual

28
00:02:35,140 --> 00:02:36,960
label which is remember me

29
00:02:41,440 --> 00:02:44,800
as you can see in our browser here.

30
00:02:45,060 --> 00:02:50,430
It's important to note that if you do not include labels for every input screen readers will have difficulty

31
00:02:50,430 --> 00:02:53,850
in interpreting your forms so that's always a good practice

32
00:02:57,130 --> 00:03:06,610
and after all of our inputs we have our button and we've been over buttons a few times so this should

33
00:03:06,610 --> 00:03:07,810
be familiar.

34
00:03:07,840 --> 00:03:09,700
And lastly just close the form.

35
00:03:09,700 --> 00:03:17,130
The Open Forum tag with the closed form type we can convert this form into an inline form by adding

36
00:03:17,130 --> 00:03:21,720
the form inline class to the form element.

37
00:03:21,720 --> 00:03:30,120
So if we set the class to form in line and save the file and refresh.

38
00:03:30,340 --> 00:03:33,250
You can see that all the items are now in a single row.