1
00:00:02,120 --> 00:00:04,440
Now for that to get our hands dirty,

2
00:00:04,440 --> 00:00:08,230
I have a brand new project and empty folder again,

3
00:00:08,230 --> 00:00:10,450
in which I wanna start from scratch.

4
00:00:10,450 --> 00:00:13,410
So you can also just create such an empty folder

5
00:00:13,410 --> 00:00:15,130
and follow along.

6
00:00:15,130 --> 00:00:16,700
And in there, I'll do something

7
00:00:16,700 --> 00:00:18,840
which we did many times already.

8
00:00:18,840 --> 00:00:22,560
I will create a new HTML file, because of course,

9
00:00:22,560 --> 00:00:25,160
we're going to write some HTML code.

10
00:00:25,160 --> 00:00:29,410
After all, we're talking about important HTML elements here,

11
00:00:29,410 --> 00:00:31,373
when it comes to building forms.

12
00:00:32,259 --> 00:00:35,730
Now I will again name this index.html, though you do know,

13
00:00:35,730 --> 00:00:38,630
that this name is in the end, up to you.

14
00:00:38,630 --> 00:00:42,000
And in there, in this index.html file,

15
00:00:42,000 --> 00:00:45,420
I will create this basic skeleton by entering

16
00:00:45,420 --> 00:00:47,940
an exclamation mark and hitting tab.

17
00:00:47,940 --> 00:00:51,060
And then, I'll just clean it up a little bit

18
00:00:51,060 --> 00:00:56,010
and get rid of this line here and change the title

19
00:00:56,010 --> 00:00:59,973
to HTML Forms, though of course, the title is up to you.

20
00:01:00,930 --> 00:01:02,940
And now, here in the body section,

21
00:01:02,940 --> 00:01:06,294
I wanna get started with some forms

22
00:01:06,294 --> 00:01:09,013
and with some form elements.

23
00:01:09,013 --> 00:01:11,520
And for that, I wanna get started with that

24
00:01:11,520 --> 00:01:16,520
most important or most common HTML element I mentioned,

25
00:01:16,570 --> 00:01:19,963
the <input> element like this.

26
00:01:21,110 --> 00:01:25,160
The important thing to note about the <input> element

27
00:01:25,160 --> 00:01:28,210
is that it's a void element.

28
00:01:28,210 --> 00:01:32,060
So you don't have opening and closing tag here.

29
00:01:32,060 --> 00:01:33,370
You don't have that.

30
00:01:33,370 --> 00:01:35,850
You just have that opening tag.

31
00:01:35,850 --> 00:01:38,350
Even written like this, or as you know,

32
00:01:38,350 --> 00:01:41,420
self-closing with that forward slash.

33
00:01:41,420 --> 00:01:44,550
Both is possible for those void elements.

34
00:01:44,550 --> 00:01:48,170
The only important thing is that you have no content

35
00:01:48,170 --> 00:01:50,150
between opening and closing tag,

36
00:01:50,150 --> 00:01:53,640
so that you have no closing tag therefore.

37
00:01:53,640 --> 00:01:57,010
And with that, if I save this,

38
00:01:57,010 --> 00:02:01,780
if I open this page with my live server,

39
00:02:01,780 --> 00:02:06,780
if I zoom in a bit, I see this <input> element here.

40
00:02:07,630 --> 00:02:11,350
Now it's totally unstyled and maybe a bit hard to see,

41
00:02:11,350 --> 00:02:15,023
but you should have this <input> element on your page.

42
00:02:15,980 --> 00:02:18,120
Now to make it a bit easier to see,

43
00:02:18,120 --> 00:02:20,940
let's add some styling right away.

44
00:02:20,940 --> 00:02:23,990
And for this, I'll add an extra CSS file,

45
00:02:23,990 --> 00:02:26,510
the styles.css file.

46
00:02:26,510 --> 00:02:30,300
And then I'll add this link here

47
00:02:30,300 --> 00:02:32,480
and I can just type link and hit tab

48
00:02:32,480 --> 00:02:37,480
to get some auto completion and then import styles.css.

49
00:02:37,670 --> 00:02:41,360
And in styles.css, I then wanna target the body

50
00:02:41,360 --> 00:02:45,670
first of all, and give this body some background color.

51
00:02:45,670 --> 00:02:50,670
And here I want to use some dark color.

52
00:02:52,920 --> 00:02:55,820
So I'll use black as a starting point here

53
00:02:55,820 --> 00:02:59,010
with zero, zero, zero and then choose

54
00:02:59,010 --> 00:03:02,563
a dark gray color here, like this.

55
00:03:03,850 --> 00:03:08,010
And I'll also ramp up that margin and set that margin

56
00:03:08,010 --> 00:03:10,300
to 8rem here.

57
00:03:10,300 --> 00:03:13,190
Rem is a new unit you'll learn about

58
00:03:13,190 --> 00:03:17,880
in the responsive websites course section.

59
00:03:17,880 --> 00:03:21,490
And I'll then save this, and with those changes made,

60
00:03:21,490 --> 00:03:24,430
now this is a bit better to see,

61
00:03:24,430 --> 00:03:26,940
because it's not in the top left corner

62
00:03:26,940 --> 00:03:31,330
and it now is in a contrast color to the background.

63
00:03:31,330 --> 00:03:33,460
And that's our form input.

64
00:03:33,460 --> 00:03:35,470
And in there I can enter, for example,

65
00:03:35,470 --> 00:03:38,150
my name or anything else.

66
00:03:38,150 --> 00:03:40,900
We can enter some text in here.

67
00:03:40,900 --> 00:03:45,060
And that's important, we can enter some text in here,

68
00:03:45,060 --> 00:03:49,490
any kind of text, because the default type

69
00:03:49,490 --> 00:03:54,490
of this <input> element is that it expects some plain text.

70
00:03:54,660 --> 00:03:57,143
So any kind of text.

71
00:03:58,110 --> 00:04:02,630
And I did mention, that you can configure this type

72
00:04:02,630 --> 00:04:05,423
with the type attribute.

73
00:04:06,340 --> 00:04:09,210
And in most cases you will specify the type

74
00:04:09,210 --> 00:04:12,220
to make it very clear, which type of input

75
00:04:12,220 --> 00:04:13,890
you are expecting.

76
00:04:13,890 --> 00:04:17,550
And even if you are expecting some standard text,

77
00:04:17,550 --> 00:04:21,870
it's still a good idea to set type="text",

78
00:04:21,870 --> 00:04:25,730
which is the identifier for expecting standard text

79
00:04:25,730 --> 00:04:28,853
to make your intentions super clear.

80
00:04:30,100 --> 00:04:34,130
And with that, with the type attribute set to text,

81
00:04:34,130 --> 00:04:37,550
we have this standard text input

82
00:04:37,550 --> 00:04:40,660
where we can enter anything we want,

83
00:04:40,660 --> 00:04:43,460
and as much text as we want.

84
00:04:43,460 --> 00:04:46,370
And you see, it automatically scrolls.

85
00:04:46,370 --> 00:04:48,540
And of course, we can also scroll in there

86
00:04:48,540 --> 00:04:50,893
and change that text, and so on.

87
00:04:52,420 --> 00:04:55,310
Now we might want to change the styling

88
00:04:55,310 --> 00:04:57,300
of this <input> element as well,

89
00:04:57,300 --> 00:04:59,890
maybe to make it a bit wider.

90
00:04:59,890 --> 00:05:02,610
And of course, that's also something we can do.

91
00:05:02,610 --> 00:05:06,990
In styles.css, we can also target the <input> element

92
00:05:06,990 --> 00:05:10,810
with that type selector, or we give it an ID

93
00:05:10,810 --> 00:05:13,870
or a class and target it by that.

94
00:05:13,870 --> 00:05:17,600
So we target it like any other HTML element,

95
00:05:17,600 --> 00:05:20,330
and then we can basically also style it

96
00:05:20,330 --> 00:05:24,050
like any other HTML element.

97
00:05:24,050 --> 00:05:27,070
There are a couple of interesting styles

98
00:05:27,070 --> 00:05:29,720
or interesting features to which I'll come back,

99
00:05:29,720 --> 00:05:33,340
but for a start, we can style it however we want.

100
00:05:33,340 --> 00:05:36,060
And here I'll therefore give this a fixed width

101
00:05:36,060 --> 00:05:38,353
of let's say 20rem.

102
00:05:40,142 --> 00:05:43,143
And if I save this, you see it now is wider.

103
00:05:44,020 --> 00:05:47,130
And that's an element where setting a fixed width

104
00:05:47,130 --> 00:05:52,130
makes a lot of sense, because it has a width out of the box.

105
00:05:52,430 --> 00:05:56,580
As you saw, it has a certain width and in most websites,

106
00:05:56,580 --> 00:06:00,370
that's probably not the width you wanna use,

107
00:06:00,370 --> 00:06:02,050
but instead you wanna set your own width

108
00:06:02,050 --> 00:06:04,180
and that's what we're doing here.

109
00:06:04,180 --> 00:06:07,170
Now, you can also style other things as well.

110
00:06:07,170 --> 00:06:12,120
The size of the text in there with font size, the border,

111
00:06:12,120 --> 00:06:14,930
the background color, all of that is possible,

112
00:06:14,930 --> 00:06:18,440
but all of that is something I'll do a little bit later.

113
00:06:18,440 --> 00:06:21,450
For the moment, I instead wanna explore

114
00:06:21,450 --> 00:06:24,110
other <input> elements first and in general,

115
00:06:24,110 --> 00:06:27,270
how you set up a form and then we'll build a complete

116
00:06:27,270 --> 00:06:31,540
example form with proper styling from start to end

117
00:06:31,540 --> 00:06:33,423
later in this course section.