1
00:00:00,870 --> 00:00:05,110
If you haven't already, download the project files associated 

2
00:00:05,110 --> 00:00:08,950
with this video and open them up in a code editor.

3
00:00:09,680 --> 00:00:13,755
As you can see, I've provided the basic HTML and

4
00:00:13,755 --> 00:00:18,650
CSS already. Everything but the form.

5
00:00:19,920 --> 00:00:25,590
There are a few resources attached to the head of our HTML page.

6
00:00:25,590 --> 00:00:30,502
I've included a Google Font called Nunito, and a CSS reset

7
00:00:30,502 --> 00:00:36,140
to make my page consistent from browser to browser. You'll also

8
00:00:36,140 --> 00:00:39,990
see a note that I'm planning to use a resource called Font Awesome.

9
00:00:41,190 --> 00:00:46,000
Font Awesome describes itself as the web's most popular icon set,

10
00:00:47,120 --> 00:00:51,290
and is a great resource for vector icons and social logos.

11
00:00:52,420 --> 00:00:57,360
I'll be using Font Awesome to display an icon called utensil.

12
00:00:57,360 --> 00:01:01,360
To use Font Awesome, you'll need to sign up for an account.

13
00:01:01,360 --> 00:01:05,309
Once you've confirmed your email, press the Copy Kit Code

14
00:01:05,309 --> 00:01:09,691
button that appears in Font Awesome, and paste to the bottom

15
00:01:09,691 --> 00:01:16,730
 of your head. We'll look at the code that implements our utensils

16
00:01:16,730 --> 00:01:22,810
icon in just a moment. I've also created the header of the

16
00:01:22,810 --> 00:01:28,810
page, including a logo, a few context clues reminding the 

17
00:01:28,810 --> 00:01:32,940
user they'll have two more steps to complete after this delivery 

18
00:01:32,940 --> 00:01:37,620
information page, and a summary of what's in their cart.

19
00:01:39,270 --> 00:01:43,893
You might have noticed the two empty a elements in my nav, 

20
00:01:43,893 --> 00:01:48,074
but that's because those links are currently inactive.

21
00:01:48,074 --> 00:01:52,701
I've included an article from CSS tricks in the Teacher's Notes

22
00:01:52,701 --> 00:01:56,040
on removing the href from inactive links.

23
00:01:56,040 --> 00:02:00,290
The code that applies Font Awesome is already in your HTML

24
00:02:00,290 --> 00:02:06,240
 in line 32. I've used three classes here. "fas" means

25
00:02:06,240 --> 00:02:11,530
Font Awesome Solid. "fa-utensils" provides the utensils icon, 

26
00:02:11,530 --> 00:02:15,980
and "fa-3x" increases the scale of the icon.

27
00:02:17,990 --> 00:02:22,700
My layout is responsive, which is mostly due to a class 

28
00:02:22,700 --> 00:02:29,060
I'm using called container. Let's get started right where I've

29
00:02:29,060 --> 00:02:32,870
included a comment that says form goes here.

30
00:02:33,570 --> 00:02:37,330
I'm not going to make the form do anything when you submit,

31
00:02:37,330 --> 00:02:40,330
which would require server-side code.

32
00:02:40,330 --> 00:02:43,130
I'm also not going to write any JavaScript.

33
00:02:43,130 --> 00:02:46,540
So our form won't really be validated upon submit.

34
00:02:47,690 --> 00:02:52,500
I've included an MDN article on client side form validation

35
00:02:52,500 --> 00:02:54,110
in the Teacher's Notes.

36
00:02:54,110 --> 00:02:58,583
I'm going to include a fieldset element next.

37
00:02:58,583 --> 00:03:02,030
Fieldsets group related questions, which we 

38
00:03:02,030 --> 00:03:06,640
learned is an important principle of creating usable forms.

39
00:03:06,640 --> 00:03:11,030
Since I've kept my number of questions per screen as few as

40
00:03:11,030 --> 00:03:14,970
possible, there will be only one fieldset on this screen.

41
00:03:16,060 --> 00:03:21,820
The legend element creates a caption for our fieldset.

42
00:03:21,820 --> 00:03:26,534
I'll call this set of questions Delivery Information.

43
00:03:28,152 --> 00:03:32,530
I'm creating a paragraph with a class called a hint,

44
00:03:32,530 --> 00:03:36,620
to provide instructions for this form.

45
00:03:36,620 --> 00:03:42,182
Including using a star to indicate which fields are required.

46
00:03:45,451 --> 00:03:47,920
Now to create a few form labels and

47
00:03:47,920 --> 00:03:52,320
inputs starting with Your Name and Email Address.

48
00:03:55,180 --> 00:03:59,175
It's critical that the for attribute of your form label

49
00:03:59,175 --> 00:04:02,650
match the id attribute of the form input.

50
00:04:06,399 --> 00:04:09,361
Otherwise, screen readers will be unable

51
00:04:09,361 --> 00:04:13,240
to figure out the association between label and input.

52
00:04:14,570 --> 00:04:18,930
Another reason it's so important to match the for attribute of

53
00:04:18,930 --> 00:04:23,750
the form label to the id attribute of the form input,

54
00:04:23,750 --> 00:04:27,650
is this increases the area that can be interacted with.

55
00:04:28,450 --> 00:04:33,460
Thinking back to the 44 pixel target size required by the WCAG,

56
00:04:33,460 --> 00:04:36,990
you might say, hmm. Checkboxes and radio buttons

57
00:04:36,990 --> 00:04:41,280
aren't usually 44 pixels. And that's true.

58
00:04:41,840 --> 00:04:46,840
But if the label uses proper markup, the user can tap on either 

59
00:04:46,840 --> 00:04:53,450
the input or the label to change their selection.

60
00:04:54,660 --> 00:05:00,927
Now, the target size is larger and the form input is more accessible.

61
00:05:09,226 --> 00:05:12,961
I could use the required attribute here,

62
00:05:12,961 --> 00:05:17,460
if I wanted some built in HTML5 form validation.

63
00:05:17,460 --> 00:05:20,640
But as I said, I'm ignoring validation for now.

64
00:05:22,260 --> 00:05:26,100
I'm choosing my form labels carefully to try to be as

65
00:05:26,100 --> 00:05:30,320
clear as possible about what information is needed in each blank.

66
00:05:31,360 --> 00:05:35,950
By choosing Your Name and Email Address, over just Name

67
00:05:35,950 --> 00:05:39,690
and Email, I'm aiming for clarity, not concision.

68
00:05:40,820 --> 00:05:44,787
Users with cognitive disabilities might struggle with a shorter label.

69
00:05:47,532 --> 00:05:49,218
With the email field,

70
00:05:49,218 --> 00:05:55,130
I've included a note indicating why the email address is required.

71
00:05:55,130 --> 00:05:58,322
User will receive a receipt at this address.

72
00:06:00,942 --> 00:06:06,119
Next, I'll create the labels and fields for the user's Street Address.

73
00:06:27,095 --> 00:06:31,023
The first line of the user's address is required, but the

74
00:06:31,023 --> 00:06:34,334
apartment or office number will be optional.

75
00:06:49,577 --> 00:06:54,466
I'm assuming for this exercise that the user lives in the United States.

76
00:07:03,921 --> 00:07:08,679
One great way you can reduce the number of fields on an address form

77
00:07:08,679 --> 00:07:13,204
is use JavaScript to look up the city and state from the zip code.

78
00:07:25,174 --> 00:07:30,210
A service like Google's location API can help with this.

79
00:07:30,210 --> 00:07:33,359
I've included a link in the Teacher's Notes.

80
00:07:33,359 --> 00:07:37,238
Of course, it's important to include a note letting users

82
00:07:37,238 --> 00:07:42,328
know the reason there's no form input for city and state.

83
00:08:06,307 --> 00:08:09,072
I haven't required the phone number

84
00:08:09,072 --> 00:08:12,572
for reasons covered in the previous video.

85
00:08:25,207 --> 00:08:27,788
I've mentioned in the instructions

86
00:08:27,788 --> 00:08:29,648
that if the user doesn't have or

87
00:08:29,648 --> 00:08:32,008
can't use a phone, they should

88
00:08:32,008 --> 00:08:34,368
include an alternate contact in

89
00:08:34,368 --> 00:08:38,182
the delivery instructions.

90
00:09:02,810 --> 00:09:05,051
A question you might have here,

91
00:09:05,051 --> 00:09:09,560
is the fact that I haven't used any placeholder text in my form.

92
00:09:09,560 --> 00:09:12,420
Even though some sites provide placeholder text

93
00:09:12,420 --> 00:09:15,040
to indicate how a phone number should be formatted.

94
00:09:16,340 --> 00:09:21,100
I covered in the last video the fact that using placeholder text

95
00:09:21,100 --> 00:09:23,750
instead of labels is a bad idea.

96
00:09:24,800 --> 00:09:30,330
Suggesting the formatting of data using a placeholder isn't quite as bad.

97
00:09:30,330 --> 00:09:33,875
But placeholder text can create a color contrast issue.

98
00:09:33,875 --> 00:09:39,170
Too light and low vision users can't read it, too dark and

99
00:09:39,170 --> 00:09:43,470
the text could get confused with a pre-filled form input.

100
00:09:43,470 --> 00:09:47,910
Also, will your user remember that formatting once they start typing?

101
00:09:50,380 --> 00:09:54,620
A better solution is a technique called Input Masks,

102
00:09:54,620 --> 00:09:59,130
in which JavaScript converts the format of the user's data as they type.

103
00:10:00,580 --> 00:10:05,360
I've included articles in the Teacher's Notes to learn more, as well as

104
00:10:05,360 --> 00:10:10,480
a link to a Treehouse JavaScript lesson on reformatting a telephone number.

105
00:10:11,830 --> 00:10:15,599
Finally, I'll make sure to label my submit button carefully.

106
00:10:23,552 --> 00:10:28,860
I need to let the user know they're not finished filling out the entire form.

107
00:10:28,860 --> 00:10:29,960
Billing comes next.

108
00:10:31,370 --> 00:10:33,940
All right, let's check our page out in a browser.

109
00:10:35,620 --> 00:10:38,050
The page remains responsive.

110
00:10:38,050 --> 00:10:42,005
All interface elements are a minimum of 44 pixels across.

111
00:10:44,000 --> 00:10:49,270
And, if your page is on a web server, you can run Google Lighthouse

112
00:10:49,270 --> 00:10:54,280
which is built into Chrome, and check your accessibility score.

113
00:10:55,670 --> 00:11:01,540
For example, I've loaded my completed form hosted on GitHub Pages,

114
00:11:01,540 --> 00:11:04,560
which is GitHub's static site hosting service.

115
00:11:05,780 --> 00:11:08,690
I'll right click on my page, and choose Inspect.

116
00:11:09,980 --> 00:11:12,186
Then choose Lighthouse from the drop down menu.

117
00:11:13,927 --> 00:11:17,944
Lighthouse will run performance, accessibility,

118
00:11:17,944 --> 00:11:22,200
and SEO audits for either mobile or desktop view.

119
00:11:22,200 --> 00:11:25,660
I'll try mobile for now, and hit Generate report.

120
00:11:28,997 --> 00:11:35,046
And it looks like I have an Accessibility score of 100%.

121
00:11:35,046 --> 00:11:39,570
I've included resources on GitHub pages in the Teacher's Notes.

122
00:11:40,700 --> 00:11:44,980
And don't forget to navigate using only a keyboard.

123
00:11:44,980 --> 00:11:47,483
Can you tab back and forth using Tab

124
00:11:50,180 --> 00:11:56,740
and Shift+Tab without getting stuck?

125
00:11:58,650 --> 00:12:03,340
You'll notice as you tab through, that I've made the focus indicator

126
00:12:03,340 --> 00:12:06,839
more obvious than what's built into the browser by default.

127
00:12:08,000 --> 00:12:14,570
I've achieved that by adjusting the focus pseudo class selector in my CSS.

128
00:12:16,540 --> 00:12:21,840
If your page is keyboard navigable, we can move on to our error messaging,

129
00:12:21,840 --> 00:12:24,010
which we'll examine in our next video.