1
00:00:01,210 --> 00:00:08,380
Hello, in this video, I am going to show you input groups, so what I'll do is I'll provide a link

2
00:00:08,380 --> 00:00:12,250
to the input group API Guide paid from Bidstrup.

3
00:00:12,400 --> 00:00:17,910
We can see all of the different variants that you can do, and I'm sure you can probably make some extra

4
00:00:17,910 --> 00:00:18,570
rope as well.

5
00:00:18,580 --> 00:00:20,440
And you know all of the different features of it.

6
00:00:21,040 --> 00:00:24,430
I will show you a basic one and that will give you a rough idea of what it is.

7
00:00:24,730 --> 00:00:30,550
OK, so we have these all of these are some form of input and you see this input here, regular input

8
00:00:30,550 --> 00:00:30,850
it.

9
00:00:30,850 --> 00:00:35,890
Texas will say TextField, you see the text area, multiline stuff.

10
00:00:36,400 --> 00:00:42,760
But what we can do is it's best for to show you can it is pretty darn cool what you can achieve.

11
00:00:43,210 --> 00:00:53,430
So we're going to have a div and this is going to have a class of input group and B dash right in here.

12
00:00:53,830 --> 00:01:04,660
We're going to first of all, have an input and this is going to have a type of text and then class

13
00:01:05,590 --> 00:01:16,980
is going to be for dust control and another placeholder of recipient's username.

14
00:01:17,020 --> 00:01:19,660
All of this will make sense shortly.

15
00:01:20,710 --> 00:01:27,200
And going to have an area that's Laboe equal.

16
00:01:27,220 --> 00:01:31,300
We see RPM's username.

17
00:01:33,630 --> 00:01:45,120
And I'm going to say ARIAD described by and if we're going to say in group one, will we use this as

18
00:01:45,120 --> 00:01:54,720
the head of the spine, which we are literally creating right now if you don't have a class of input

19
00:01:56,100 --> 00:01:56,880
text.

20
00:01:57,810 --> 00:02:11,300
And then I have an idea this is going to be this, and in here I'm so epic and epic Web sites, dot

21
00:02:11,400 --> 00:02:14,690
com and my thinking, what would happen produce it produces this.

22
00:02:14,970 --> 00:02:24,060
So imagine if you are, you know, have some sort of registration form and you are essentially creating

23
00:02:24,060 --> 00:02:26,190
an email address on your website.

24
00:02:26,250 --> 00:02:27,710
You could do something like this.

25
00:02:27,720 --> 00:02:29,940
You know, it's going to be at your website.

26
00:02:29,940 --> 00:02:31,650
Name is dot com.

27
00:02:32,290 --> 00:02:38,250
Wherever in this case, in this example is an epic website, dot com, and you could do something like

28
00:02:38,340 --> 00:02:38,870
a home.

29
00:02:39,000 --> 00:02:44,360
And so that would correspond to being for John Atwood epic website dot com.

30
00:02:44,640 --> 00:02:49,410
You would obviously have to code this in JavaScript, then pass that into your backend technology like

31
00:02:50,070 --> 00:02:52,040
Python point into the front end.

32
00:02:52,200 --> 00:02:53,640
This is what you would do.

33
00:02:53,880 --> 00:02:59,460
If you look at the other groups, there are other examples of an ATM for something like a username,

34
00:02:59,970 --> 00:03:03,180
something to do with currency, for example, which is pretty cool.

35
00:03:03,450 --> 00:03:06,690
You can do stuff with your rapini as well.

36
00:03:06,990 --> 00:03:09,600
Know you can sort of feel free to check that out.

37
00:03:09,810 --> 00:03:12,540
There's check boxes and radio buttons.

38
00:03:12,600 --> 00:03:19,950
Well, the multiple inputs, which is pretty darn cool and multiple add ons are often the first and

39
00:03:19,950 --> 00:03:20,340
last name.

40
00:03:20,340 --> 00:03:26,320
So that way you can input separately because a lot of websites do want it separately.

41
00:03:26,330 --> 00:03:31,710
It's just easier to manipulate the data domain in a malicious way.

42
00:03:31,710 --> 00:03:34,110
But just in general, you know, for searching, for example.

43
00:03:34,920 --> 00:03:39,270
But you might want to show it so you can see what it looks like because you generally would have it

44
00:03:39,270 --> 00:03:45,090
next to each other and you can have multiple add ons as well as pretty simple, pretty self-explanatory.

45
00:03:45,090 --> 00:03:48,900
So feel free to experiment, create your own custom stuff.

46
00:03:49,140 --> 00:03:54,000
If you have any questions or you get stuck, let me know there will be a link to this.

47
00:03:54,000 --> 00:03:57,930
And you know, my disco page on my website and feel free to check that out.

48
00:03:58,110 --> 00:04:01,500
And as usual, I look forward to seeing you in the next video.