1 00:00:02,200 --> 00:00:05,500 So we get this first input here. 2 00:00:05,500 --> 00:00:08,320 This first input certainly allows the user 3 00:00:08,320 --> 00:00:10,930 to enter some text, 4 00:00:10,930 --> 00:00:15,050 but it's actually not creating a complete form yet. 5 00:00:15,050 --> 00:00:18,210 This input is not submittable right now. 6 00:00:18,210 --> 00:00:20,550 We can enter content in there. 7 00:00:20,550 --> 00:00:23,790 We can hit the enter button thereafter if you want, 8 00:00:23,790 --> 00:00:25,750 but that won't submit the form. 9 00:00:25,750 --> 00:00:27,850 And there also is no visible button, 10 00:00:27,850 --> 00:00:30,610 which we could click to submit the form. 11 00:00:30,610 --> 00:00:32,240 And therefore we should add 12 00:00:32,240 --> 00:00:34,710 one other HTML element, at least. 13 00:00:34,710 --> 00:00:38,580 One element, which you will also need in basically any form 14 00:00:38,580 --> 00:00:41,780 you're building -- a button to submit the form. 15 00:00:41,780 --> 00:00:44,130 And therefore, maybe below the input here, 16 00:00:44,130 --> 00:00:48,590 I'll add this special button HTML element. 17 00:00:48,590 --> 00:00:51,360 And this is now not a void element, 18 00:00:51,360 --> 00:00:53,710 but an element, a standard element 19 00:00:53,710 --> 00:00:55,960 with an opening and closing tag, 20 00:00:55,960 --> 00:00:58,390 because between those tags, 21 00:00:58,390 --> 00:01:01,930 you enter the caption of the button. 22 00:01:01,930 --> 00:01:05,269 So, the text which shows up on the button. 23 00:01:05,269 --> 00:01:07,350 And here we could say "submit", 24 00:01:07,350 --> 00:01:08,800 but we can say whatever we want. 25 00:01:08,800 --> 00:01:12,990 We can say, "save" or "add user" or whichever kind of form 26 00:01:12,990 --> 00:01:14,060 we're building. 27 00:01:14,060 --> 00:01:15,943 I'll just say, "submit" here. 28 00:01:16,800 --> 00:01:21,800 And if I save this, you now see there is this submit button. 29 00:01:23,230 --> 00:01:25,140 And here's one interesting thing, 30 00:01:25,140 --> 00:01:28,100 which we can see right away. 31 00:01:28,100 --> 00:01:29,970 Both the input element, 32 00:01:29,970 --> 00:01:34,790 as well as the button seemed to be inline elements. 33 00:01:34,790 --> 00:01:38,730 Otherwise, there would be a line break after the input. 34 00:01:38,730 --> 00:01:40,420 And we can, of course, confirm this 35 00:01:40,420 --> 00:01:43,730 by inspecting our elements here. 36 00:01:43,730 --> 00:01:45,710 If I inspect the input element, 37 00:01:45,710 --> 00:01:48,290 we see that there are a bunch of browser, 38 00:01:48,290 --> 00:01:50,380 default styles applied. 39 00:01:50,380 --> 00:01:51,670 Most of them are fine, 40 00:01:51,670 --> 00:01:54,390 but of course, you can also override them as you learn. 41 00:01:54,390 --> 00:01:56,710 And one thing you see in here, 42 00:01:56,710 --> 00:02:01,030 is that display is set to inline block, 43 00:02:01,030 --> 00:02:04,200 which means it behaves like an inline element, 44 00:02:04,200 --> 00:02:06,700 but regarding the margin and padding and so on, 45 00:02:06,700 --> 00:02:10,539 it also has characteristics of a block element. 46 00:02:10,539 --> 00:02:14,360 But it behaves like an inline element in general. 47 00:02:14,360 --> 00:02:18,050 And it will only wrap into a new line, as it does here, 48 00:02:18,050 --> 00:02:21,530 if there's not enough space on the screen. 49 00:02:21,530 --> 00:02:23,030 But if there is enough space, 50 00:02:23,030 --> 00:02:26,220 both elements sit in the same line. 51 00:02:26,220 --> 00:02:27,740 And they sit in the same line 52 00:02:27,740 --> 00:02:31,590 because not just the input element is an inline element, 53 00:02:31,590 --> 00:02:34,150 but the button is as well. 54 00:02:34,150 --> 00:02:38,200 If I inspect the button here, I see that there, 55 00:02:38,200 --> 00:02:42,030 we also have display inline block for the button 56 00:02:42,030 --> 00:02:43,643 as a default style. 57 00:02:44,710 --> 00:02:46,620 And that's just something to note. 58 00:02:46,620 --> 00:02:49,340 And of course you can change that by setting 59 00:02:49,340 --> 00:02:54,340 the display CSS property to block in your own CSS code. 60 00:02:54,740 --> 00:02:57,420 If you want to have these elements treated 61 00:02:57,420 --> 00:03:02,140 as block elements, you simply overwrite that default. 62 00:03:02,140 --> 00:03:05,550 And that is something which I will do here. 63 00:03:05,550 --> 00:03:09,400 I'll go back to my styles and I set my input element 64 00:03:09,400 --> 00:03:11,890 to be display block, 65 00:03:11,890 --> 00:03:16,380 so to act and behave as a block level element. 66 00:03:16,380 --> 00:03:18,320 And I'll do the same for the button. 67 00:03:18,320 --> 00:03:21,640 I'll set it to display block. 68 00:03:21,640 --> 00:03:24,730 Though, theoretically setting the input element 69 00:03:24,730 --> 00:03:27,150 to display block would suffice here, 70 00:03:27,150 --> 00:03:29,980 because that would already force a line break 71 00:03:29,980 --> 00:03:33,098 after the input, since the input will then take 72 00:03:33,098 --> 00:03:35,203 the full available space. 73 00:03:36,150 --> 00:03:37,910 But with those changes made, 74 00:03:37,910 --> 00:03:41,023 now we see the button in the new line. 75 00:03:42,210 --> 00:03:44,660 And of course we now might want some spacing 76 00:03:45,536 --> 00:03:46,630 and therefore on that input, 77 00:03:46,630 --> 00:03:50,080 I'll actually add a margin bottom here of, 78 00:03:50,080 --> 00:03:52,433 let's say, one REM. 79 00:03:53,630 --> 00:03:58,140 And if I saved that, then we have that spacing here. 80 00:03:58,140 --> 00:03:59,730 Now, that's all nice and good. 81 00:03:59,730 --> 00:04:03,443 Now we have the input element where we can enter anything, 82 00:04:03,443 --> 00:04:05,500 and we have that button, 83 00:04:05,500 --> 00:04:08,650 but clicking that button does nothing. 84 00:04:08,650 --> 00:04:12,520 I can hammer this button and nothing changes. 85 00:04:12,520 --> 00:04:13,870 And the reason for that is, 86 00:04:13,870 --> 00:04:18,230 that yet another extremely important HTML element, 87 00:04:18,230 --> 00:04:21,762 which we need for any form we're building is missing.