1
00:00:05,120 --> 00:00:13,280
Among the elements we are going to talk about, the input element is the one you should focus on the

2
00:00:13,280 --> 00:00:22,190
most and it has the greatest relevance within the forum because it's most used to be to a contact module

3
00:00:22,220 --> 00:00:26,870
or beat a login form to a specific area of a website.

4
00:00:27,850 --> 00:00:33,510
The input tag, therefore, the input element gets inserted.

5
00:00:33,580 --> 00:00:45,280
Exactly like all the other tags and inside it, it's stored some specific attributes which define precisely

6
00:00:45,280 --> 00:00:52,000
what this specific tag is about, such as what is called tag.

7
00:00:53,050 --> 00:01:03,370
Therefore, let's insert type equals opened and closed affixes and let's close our input tag.

8
00:01:04,300 --> 00:01:12,640
Inside type, then all the diverse types of input in searchable in the form will be entered.

9
00:01:13,060 --> 00:01:17,740
The most classical among all is the text type.

10
00:01:18,670 --> 00:01:27,730
In so doing, therefore exclusively as input time equals Kekst, we are defining a new textual space

11
00:01:28,210 --> 00:01:32,620
where you can insert a certain type of information.

12
00:01:33,430 --> 00:01:44,710
Therefore, if we saved and refreshed our view in Chrome, as you see, we would turn up with a space

13
00:01:44,710 --> 00:01:47,020
which is in fact a rectangle.

14
00:01:48,520 --> 00:01:58,420
Within which you can enter a text input, therefore text is the most common attribute inserted within

15
00:01:58,420 --> 00:02:00,610
type in the input.

16
00:02:02,720 --> 00:02:12,170
In addition to this kind of input, you can also, for example, insert a password which differently

17
00:02:12,170 --> 00:02:18,590
from what happens with a simple text, is going to display some asterisked.

18
00:02:19,690 --> 00:02:27,640
To mask the content, therefore, also in this case, by saving and refreshing, we will see that the

19
00:02:27,640 --> 00:02:36,070
second input we inserted in case of inserting a value will display some dots, which indeed have the

20
00:02:36,070 --> 00:02:39,220
aim to conceal what has been inserted.

21
00:02:39,250 --> 00:02:44,080
Another very important type of input is relative to submit.

22
00:02:44,410 --> 00:02:48,490
Therefore, input type equals submit.

23
00:02:49,030 --> 00:02:54,990
This input, unlike the previous ones, enable us to submit the form.

24
00:02:55,600 --> 00:03:03,460
Therefore, it enables the processing of all the stored data to be able then to warn action, which

25
00:03:03,460 --> 00:03:09,420
will start the actual submission to the destination of them saving and refreshing.

26
00:03:09,880 --> 00:03:19,750
We can see that it's submitting button has been created clicking on which of course we are redirected

27
00:03:19,750 --> 00:03:26,530
to the insurgent detection, which in this case is not present inside the address, and therefore it

28
00:03:26,530 --> 00:03:29,680
will lead us to execute the compound for.

29
00:03:31,090 --> 00:03:39,970
In addition to submit another input with a specific function without having to be compiled is the set

30
00:03:39,970 --> 00:03:50,530
input type, which as we see once compiled, for example, the first two fields by clicking on Rousset,

31
00:03:51,010 --> 00:03:57,190
delete the content we set in our form so that it has to be compiled again.

32
00:03:59,760 --> 00:04:07,530
There are also some other types of inputs which create like, for example, the radio input types,

33
00:04:07,680 --> 00:04:09,270
different buttons.

34
00:04:10,580 --> 00:04:16,820
With other specific functionalities to which a value has necessarily to be linked.

35
00:04:17,920 --> 00:04:20,860
For example, value one.

36
00:04:21,880 --> 00:04:30,430
Saving and refreshing, we will see this button gets added with the value that will be then communicated.

37
00:04:31,540 --> 00:04:33,580
Once the form gets submitted.

38
00:04:36,250 --> 00:04:44,260
Obviously, sending this type of input, you have to add a detail referring to what we are going to

39
00:04:44,260 --> 00:04:52,150
click on, therefore what we are going to select, therefore it would be necessary the addition of a

40
00:04:52,150 --> 00:04:55,380
label which we will see in the next lesson.

41
00:04:55,720 --> 00:05:01,180
Therefore, let's complete the already inserted inputs with some labels.

42
00:05:04,170 --> 00:05:12,600
Apart from radio, there's also a check box, which is another type of selection, but also in this

43
00:05:12,600 --> 00:05:22,410
case with the present value, that then will be associated to a label which obviously will enable the

44
00:05:22,410 --> 00:05:23,310
selection.

45
00:05:23,740 --> 00:05:33,180
Also, in this case of specific information to submit within the form, the difference between radio

46
00:05:33,180 --> 00:05:42,810
and checkbox is that checkbox can have more than one selection in them, whereas the radio buttons can

47
00:05:42,810 --> 00:05:46,350
be selected just once within our four.

48
00:05:48,040 --> 00:05:56,530
To make this distinction evident, we have to add a further radio and a further checkbook's with a different

49
00:05:56,530 --> 00:05:57,130
value.

50
00:05:58,700 --> 00:06:08,270
But with their specific name, for example, test to associate to the two radios and test one.

51
00:06:10,040 --> 00:06:18,440
To associate to the two checkboxes in so doing, we are making them different, but we are making sure

52
00:06:18,440 --> 00:06:27,020
that if there is radio as input, it will provide just one choice, whereas checkbox will permit both

53
00:06:27,020 --> 00:06:27,770
choices.

54
00:06:28,340 --> 00:06:35,720
Therefore, now let's save refresh and let's see that by clicking on radio, only one gets selected

55
00:06:35,720 --> 00:06:39,500
while the two checkboxes can both be selected.

56
00:06:40,770 --> 00:06:48,390
Let's close then with the three input types which get inserted exactly like the first ones.

57
00:06:49,290 --> 00:06:51,330
And these are day to.

58
00:06:53,490 --> 00:06:54,330
Email.

59
00:06:57,200 --> 00:06:58,280
And five.

60
00:07:03,820 --> 00:07:14,680
These three input types permit us to insert a date and e-mail address and the file in performing operations

61
00:07:14,680 --> 00:07:20,040
regarding them, as we can see, saving and refreshing.

62
00:07:20,530 --> 00:07:26,740
That's the opportunity here to insert a date inside the date input.

63
00:07:28,160 --> 00:07:31,700
In here, an email address.

64
00:07:34,390 --> 00:07:37,690
And here, the option of a new file.

65
00:07:46,410 --> 00:07:55,380
Now that we have seen this series of inputs stored within our forms, let's clean what we inserted,

66
00:07:55,680 --> 00:08:07,020
living a base for a standard contact module for let's insert an e-mail input type in addition to text

67
00:08:07,020 --> 00:08:11,760
and input some meat, which obviously will have to stay.

68
00:08:11,880 --> 00:08:16,140
And let's add also some check boxes to make it complete.

69
00:08:16,860 --> 00:08:25,380
Then let's remove what we don't need, naturally will keep reset to make our form able to get reset

70
00:08:25,380 --> 00:08:27,920
and therefore starting from zero.

71
00:08:28,560 --> 00:08:33,330
That's insert some VR to align correctly our content.

72
00:08:33,780 --> 00:08:36,090
And let's go ahead with the next lesson.

73
00:08:36,360 --> 00:08:39,120
Whose topic is the labels?