1
00:00:02,060 --> 00:00:03,400
Now that we learned about

2
00:00:03,400 --> 00:00:07,230
all those important HTML input elements,

3
00:00:07,230 --> 00:00:09,290
and now that we also added

4
00:00:09,290 --> 00:00:11,330
more HTML elements

5
00:00:11,330 --> 00:00:13,940
to structure our form,

6
00:00:13,940 --> 00:00:16,110
I wanna dive into one element again,

7
00:00:16,110 --> 00:00:18,660
which we already did add before.

8
00:00:18,660 --> 00:00:20,240
And that's the button.

9
00:00:20,240 --> 00:00:23,660
The button, when placed inside of a form,

10
00:00:23,660 --> 00:00:25,650
submits that form.

11
00:00:25,650 --> 00:00:27,110
That is what you learned before

12
00:00:27,110 --> 00:00:28,670
and what you saw in action.

13
00:00:28,670 --> 00:00:31,280
If I press this button down there,

14
00:00:31,280 --> 00:00:33,620
the form is submitted.

15
00:00:33,620 --> 00:00:37,410
And then it depends on the attributes set

16
00:00:37,410 --> 00:00:39,160
on the form element,

17
00:00:39,160 --> 00:00:40,740
action and method,

18
00:00:40,740 --> 00:00:43,530
how the form is submitted.

19
00:00:43,530 --> 00:00:45,310
But we can ignore that for now,

20
00:00:45,310 --> 00:00:48,000
we're going to dive into that later again,

21
00:00:48,000 --> 00:00:51,940
once we also explore server-size development.

22
00:00:51,940 --> 00:00:54,920
And once we also write code that handles

23
00:00:54,920 --> 00:00:57,453
this form submission on a server.

24
00:00:58,470 --> 00:01:00,850
But let's have a look at this button again.

25
00:01:00,850 --> 00:01:02,760
This default behavior,

26
00:01:02,760 --> 00:01:06,040
which I described that the buttons submits the form

27
00:01:06,040 --> 00:01:09,990
when placed inside of a form can be overwritten.

28
00:01:09,990 --> 00:01:14,270
Now, in most cases you want buttons to submit the form,

29
00:01:14,270 --> 00:01:16,550
but you could also add a button

30
00:01:16,550 --> 00:01:19,150
which should do something else.

31
00:01:19,150 --> 00:01:21,740
For example, with help of JavaScript,

32
00:01:21,740 --> 00:01:25,320
which we are going to explore very soon in the course.

33
00:01:25,320 --> 00:01:28,610
And you can control the behavior of the button

34
00:01:28,610 --> 00:01:31,680
with the type attribute then.

35
00:01:31,680 --> 00:01:33,030
Just as a side note,

36
00:01:33,030 --> 00:01:35,010
because it is worth mentioning it,

37
00:01:35,010 --> 00:01:38,600
you can use buttons outside of forms as well.

38
00:01:38,600 --> 00:01:41,190
You don't have to use them in forms.

39
00:01:41,190 --> 00:01:43,580
It's just that inside of a form,

40
00:01:43,580 --> 00:01:47,323
they have this default behavior of submitting the form.

41
00:01:47,323 --> 00:01:49,140
Outside of a form,

42
00:01:49,140 --> 00:01:52,810
you will always have to use JavaScript to do anything

43
00:01:52,810 --> 00:01:54,450
when a button is clicked.

44
00:01:54,450 --> 00:01:58,490
You have to write your own logic with JavaScript.

45
00:01:58,490 --> 00:02:01,120
But we are going to explore that later.

46
00:02:01,120 --> 00:02:02,190
Inside of a form,

47
00:02:02,190 --> 00:02:04,700
if you wanna overwrite the default behavior,

48
00:02:04,700 --> 00:02:07,320
you can do it as with the type attribute.

49
00:02:07,320 --> 00:02:11,750
And here, the type by default is submit.

50
00:02:11,750 --> 00:02:13,940
So you don't have to set this,

51
00:02:13,940 --> 00:02:16,883
though, you can set it to be more explicit.

52
00:02:17,800 --> 00:02:21,200
But you could also set this to type button.

53
00:02:21,200 --> 00:02:25,030
And the difference is that if you do set it to type button,

54
00:02:25,030 --> 00:02:28,320
the button will not submit the form.

55
00:02:28,320 --> 00:02:30,110
We can tell the difference.

56
00:02:30,110 --> 00:02:35,110
For example, if I enter Max here into the email field,

57
00:02:35,130 --> 00:02:37,990
which is an invalid email address,

58
00:02:37,990 --> 00:02:39,800
you might remember that in the past,

59
00:02:39,800 --> 00:02:42,590
we got to this warning from the browser then.

60
00:02:42,590 --> 00:02:44,170
Now, if I press submit,

61
00:02:44,170 --> 00:02:48,350
we don't get a warning because the form wasn't submitted.

62
00:02:48,350 --> 00:02:51,420
We can also tell by the fact that I'm entering something

63
00:02:51,420 --> 00:02:53,360
here in the name field.

64
00:02:53,360 --> 00:02:55,780
Before when I clicked submit,

65
00:02:55,780 --> 00:02:57,530
this field was cleared

66
00:02:57,530 --> 00:02:59,550
when the form was submitted.

67
00:02:59,550 --> 00:03:02,760
Now, if I click Submit, nothing happens,

68
00:03:02,760 --> 00:03:05,430
again, because the form isn't submitted.

69
00:03:05,430 --> 00:03:08,860
If I clear all that stuff here in the URL,

70
00:03:08,860 --> 00:03:12,400
so that we just visit our domain slash nothing

71
00:03:12,400 --> 00:03:14,930
or slash index HTML.

72
00:03:14,930 --> 00:03:17,360
If I do that and I enter something here,

73
00:03:17,360 --> 00:03:19,060
then if I click submit,

74
00:03:19,060 --> 00:03:23,340
you see the URL does not change as it did before.

75
00:03:23,340 --> 00:03:26,430
Because when we use type button on a button,

76
00:03:26,430 --> 00:03:29,740
this button will not submit the form.

77
00:03:29,740 --> 00:03:31,870
And of course here, that's not what I want.

78
00:03:31,870 --> 00:03:34,343
Hence, I'll set it back to type submit.

79
00:03:35,320 --> 00:03:38,290
But we can also add a second button now,

80
00:03:38,290 --> 00:03:42,910
which we use to reset the form or clear the form.

81
00:03:42,910 --> 00:03:46,080
And we can achieve this by using yet another type,

82
00:03:46,080 --> 00:03:48,840
the type reset.

83
00:03:48,840 --> 00:03:50,340
If we use this type,

84
00:03:50,340 --> 00:03:53,180
then the button does what the name implies

85
00:03:53,180 --> 00:03:55,940
when placed inside of a form,

86
00:03:55,940 --> 00:03:58,250
this button with type reset,

87
00:03:58,250 --> 00:04:00,310
will reset that form.

88
00:04:00,310 --> 00:04:02,073
It will clear that form.

89
00:04:02,910 --> 00:04:05,600
So here, if I enter Max here,

90
00:04:05,600 --> 00:04:08,900
if I click this clear button now,

91
00:04:08,900 --> 00:04:11,660
then you see the form is not submitted.

92
00:04:11,660 --> 00:04:14,430
We have no content in the URL,

93
00:04:14,430 --> 00:04:17,560
but still this first field is empty again

94
00:04:17,560 --> 00:04:19,680
because of the reset button.

95
00:04:19,680 --> 00:04:21,279
We can also see this if I check

96
00:04:21,279 --> 00:04:23,530
the "Agree to terms" check box,

97
00:04:23,530 --> 00:04:26,750
if I click Clear, it's unchecked again.

98
00:04:26,750 --> 00:04:29,480
And that's of course a useful behavior.

99
00:04:29,480 --> 00:04:31,810
I will get rid of that button here

100
00:04:31,810 --> 00:04:33,660
because we don't need it here,

101
00:04:33,660 --> 00:04:36,290
but sometimes you want such a clear button,

102
00:04:36,290 --> 00:04:38,030
such a reset mechanism,

103
00:04:38,030 --> 00:04:41,803
and then you can achieve it with a button of type reset.