1
00:00:03,250 --> 00:00:07,810
Bây giờ chúng ta đã thấy làm thế nào để thêm các nút vào trang web của chúng tôi.

2
00:00:07,810 --> 00:00:12,560
Trong bài tập này, chúng ta sẽ xem xét các biểu mẫu và làm thế nào chúng ta có thể thêm biểu mẫu vào

3
00:00:12,560 --> 00:00:19,220
trang web của chúng tôi và cũng tạo kiểu các yếu tố biểu mẫu bằng cách sử dụng các lớp Bootstrap.

4
00:00:19,220 --> 00:00:23,065
Quay trở lại trang contactus.html,

5
00:00:23,065 --> 00:00:28,215
cuộn xuống cho đến khi bạn thấy nhận xét này có tên là “Biểu mẫu đi đây”.

6
00:00:28,215 --> 00:00:32,990
Chúng tôi sẽ thay thế điều này bằng biểu mẫu trong trang web này.

7
00:00:32,990 --> 00:00:35,715
Vì vậy, chúng ta hãy xóa điều đó và sau đó xây dựng

8
00:00:35,715 --> 00:00:39,945
các hình thức ở vị trí cụ thể bên trong div có.

9
00:00:39,945 --> 00:00:41,855
Để bắt đầu với các hình thức,

10
00:00:41,855 --> 00:00:50,585
tôi sẽ sử dụng thẻ HTML mẫu và xây dựng các hình thức trong thẻ HTML này.

11
00:00:50,585 --> 00:00:52,960
Vì vậy, trong thẻ hình thức này, chúng

12
00:00:52,960 --> 00:00:57,925
ta hãy thêm vào các yếu tố bán kính của hình thức của chúng tôi.

13
00:00:57,925 --> 00:01:00,195
Vì vậy, bên trong hình thức này,

14
00:01:00,195 --> 00:01:04,405
tôi sẽ chia hình thức này thành nhiều hàng ở đó.

15
00:01:04,405 --> 00:01:06,780
Để chia biểu mẫu của bạn thành hàng,

16
00:01:06,780 --> 00:01:17,020
bạn có thể chỉ cần sử dụng một div với class="form-group” và sau đó áp dụng lớp hàng cho nó.

17
00:01:20,370 --> 00:01:26,540
Vì vậy, với điều này, chúng ta sẽ thêm vào hai nhóm hình thức ở đây.

18
00:01:26,540 --> 00:01:29,795
Tôi sẽ sao chép điều này và sau đó dán nó xuống dưới đây.

19
00:01:29,795 --> 00:01:34,055
Vì vậy, bạn có thể thấy rằng tôi sẽ thêm hai hàng vào biểu mẫu này ở đây.

20
00:01:34,055 --> 00:01:36,690
Vì vậy, để thêm một mục vào biểu mẫu này,

21
00:01:36,690 --> 00:01:44,330
chúng tôi sẽ div này và sau đó tôi sẽ bắt đầu bằng cách sử dụng một thẻ nhãn ở đây.

22
00:01:44,330 --> 00:01:46,550
Và đối với các thẻ nhãn,

23
00:01:46,550 --> 00:01:48,460
vì vậy tôi sẽ có hai hàng;

24
00:01:48,460 --> 00:01:51,270
một cho phép người dùng điền vào tên của họ,

25
00:01:51,270 --> 00:01:53,470
và cái thứ hai cho họ.

26
00:01:53,470 --> 00:02:01,530
Vì vậy, đây là nơi chúng ta sẽ sử dụng nhãn đó để xác định các lớp ở đó.

27
00:02:01,530 --> 00:02:09,080
Bây giờ, Ngoài ra, Bootstrap cho phép chúng ta sử dụng lưới Bootstrap

28
00:02:09,080 --> 00:02:19,300
để xác định làm thế nào các hình thức này sẽ được đặt ra quảng cáo vì vậy tôi sẽ áp dụng col-md-2.

29
00:02:19,300 --> 00:02:27,720
Bạn có thể thấy rằng tôi đã áp dụng các lớp cột md-2 cho mục cụ thể này.

30
00:02:27,720 --> 00:02:31,360
Vì vậy, mục này trong biểu mẫu sẽ chiếm hai cột.

31
00:02:31,360 --> 00:02:33,465
Vì vậy, bên trong yếu tố hình thức này,

32
00:02:33,465 --> 00:02:37,950
chúng tôi đã chia mỗi hàng thành 12 cột.

33
00:02:37,950 --> 00:02:40,940
Vì vậy, bởi vì chúng tôi đã sử dụng hàng cho div,

34
00:02:40,940 --> 00:02:45,030
do đó sẽ cung cấp cho chúng tôi với 12 cột bên trong div có.

35
00:02:45,030 --> 00:02:52,560
Ngoài ra, tôi phải áp dụng nhãn mẫu col lớp này.

36
00:02:52,560 --> 00:02:56,905
Vì vậy, đây là những gì cho phép tôi chỉ định một nhãn ở đây.

37
00:02:56,905 --> 00:02:58,395
Vì vậy, đối với nhãn này,

38
00:02:58,395 --> 00:03:07,070
tôi sẽ điền vào nhãn dưới dạng tên và sau đó đóng thẻ nhãn.

39
00:03:07,070 --> 00:03:10,485
Vì vậy, thẻ nhãn này cho phép tôi đưa ra một nhãn,

40
00:03:10,485 --> 00:03:14,150
mà sẽ chiếm hai cột bên trái trong hàng cụ thể này.

41
00:03:14,150 --> 00:03:22,740
Ở phía bên phải, tôi sẽ sử dụng một div mà các lớp áp dụng như col-md-10.

42
00:03:22,740 --> 00:03:28,420
Chú ý rằng nhãn trước đó đã sử dụng col-md-2 ở đó.

43
00:03:28,420 --> 00:03:29,665
Vì vậy, đối với div này,

44
00:03:29,665 --> 00:03:32,755
tôi sẽ áp dụng col-md-10 ở đó.

45
00:03:32,755 --> 00:03:35,120
Và sau đó bên trong div này,

46
00:03:35,120 --> 00:03:38,700
tôi sẽ áp dụng một yếu tố đầu vào,

47
00:03:38,700 --> 00:03:42,750
đó là loại văn bản.

48
00:03:42,750 --> 00:03:46,770
Vì vậy, nếu bạn đã quen thuộc với các hình thức từ HTML,

49
00:03:46,770 --> 00:03:50,460
bạn sẽ thấy rằng chúng ta đang sử dụng các yếu tố hình thức từ HTML để

50
00:03:50,460 --> 00:03:55,910
tạo ra hình thức ở đây để hộp đầu vào ở đây là của văn bản kiểu.

51
00:03:55,910 --> 00:04:00,410
Bây giờ, đây là nơi chúng ta sẽ áp dụng các lớp Bootstrap này

52
00:04:00,410 --> 00:04:05,500
và lớp Bootstrap tương ứng cho điều này

53
00:04:05,500 --> 00:04:10,710
là điều khiển hình thức và sau đó tôi có thể chỉ định

54
00:04:10,710 --> 00:04:16,165
một ID cho điều này như tên đầu tiên.

55
00:04:16,165 --> 00:04:21,260
Vì vậy, lưu ý rằng ID này phù hợp với nhãn này cho div.

56
00:04:21,260 --> 00:04:26,625
Vì vậy, tên đầu tiên, và sau đó tên như

57
00:04:26,625 --> 00:04:30,735
tên đầu tiên và tôi cũng sẽ chỉ định

58
00:04:30,735 --> 00:04:37,190
một giữ chỗ cho điều này để cho tôi sử dụng dòng tiếp theo ở đây,

59
00:04:37,940 --> 00:04:46,890
giữ chỗ như, Tôi chắc chắn từ kiến thức của bạn về HTML,

60
00:04:46,890 --> 00:04:52,020
bạn hiểu làm thế nào đặc điểm kỹ thuật này được thực hiện ở đây.

61
00:04:52,020 --> 00:04:59,355
Vì vậy, với điều này, bây giờ chúng tôi đã tạo ra phần tử hình thức đầu tiên của chúng tôi trong hình thức của chúng tôi.

62
00:04:59,355 --> 00:05:03,170
Chúng ta hãy xem nhanh trang web. Vào

63
00:05:03,170 --> 00:05:08,310
trang web của chúng tôi, bây giờ bạn có thể thấy cách thêm vào các yếu tố biểu mẫu đã tạo ra

64
00:05:08,310 --> 00:05:14,515
hộp văn bản đầu vào này và nhãn ở phía bên trái.

65
00:05:14,515 --> 00:05:18,105
Bây giờ, tôi sẽ thêm vào hàng khác với họ.

66
00:05:18,105 --> 00:05:23,150
Quay trở lại contactus.html của tôi,

67
00:05:23,150 --> 00:05:29,215
hãy để tôi chỉ cần sao chép phần này và sau đó dán nó vào div thứ hai ở đây,

68
00:05:29,215 --> 00:05:32,875
và sau đó đi vào và chỉnh sửa điều đó.

69
00:05:32,875 --> 00:05:39,890
Từ tên tôi thay đổi nó thành họ.

70
00:05:39,890 --> 00:05:45,090
Đảm bảo rằng bạn hoàn tất tất cả các chỉnh sửa một cách chính xác.

71
00:05:45,550 --> 00:05:49,470
Ngay cả một thiếu chỉnh sửa không đúng cách,

72
00:05:49,470 --> 00:05:53,210
sẽ làm cho hình thức của bạn không hoạt động chính xác vì vậy hãy chắc chắn rằng

73
00:05:53,210 --> 00:05:58,220
tất cả những thứ tên đầu tiên ở đây được thay thế bằng tên cuối cùng của tôi.

74
00:05:58,220 --> 00:05:59,795
Vì vậy, tên cuối cùng,

75
00:05:59,795 --> 00:06:02,640
md-10 văn bản điều khiển.

76
00:06:02,640 --> 00:06:11,510
ID ở đây phải là họ và tên cũng

77
00:06:11,510 --> 00:06:14,945
phải là họ và giữ chỗ

78
00:06:14,945 --> 00:06:21,030
lại tên cuối cùng vì vậy điều này sẽ thêm vào một hàng thứ hai với họ.

79
00:06:21,030 --> 00:06:22,530
Đi đến trang web của bạn,

80
00:06:22,530 --> 00:06:24,000
bạn có thể thấy bây giờ các hình thức

81
00:06:24,000 --> 00:06:28,150
từ từ nhận được vào hình dạng để bạn có tên và họ.

82
00:06:28,150 --> 00:06:33,790
Bây giờ, cho phép tiếp theo thêm vào một yếu tố đầu vào.

83
00:06:33,790 --> 00:06:38,260
Chúng ta sẽ thấy cách thức hoạt động này khi chúng ta thêm vào mã.

84
00:06:38,260 --> 00:06:41,989
Di chuyển bây giờ đến phần tiếp theo của bài tập,

85
00:06:41,989 --> 00:06:46,220
ở đây chúng tôi sẽ thêm hai trường nữa vào

86
00:06:46,220 --> 00:06:51,690
biểu mẫu của chúng tôi ở đây để nhập số điện thoại và ID email.

87
00:06:51,690 --> 00:06:54,870
Kể từ khi cấu trúc cơ bản của mã là tương tự như

88
00:06:54,870 --> 00:06:58,610
tên và tên cuối cùng mà bạn đã thêm vào biểu mẫu,

89
00:06:58,610 --> 00:07:02,370
vì vậy tôi sẽ chỉ sao chép mã từ tên đầu tiên và

90
00:07:02,370 --> 00:07:08,000
tên cuối cùng và sau đó dán nó vào đây và sau đó sửa đổi mã cho phù hợp.

91
00:07:08,000 --> 00:07:11,910
Vì vậy, tôi đã dán mã từ tên và họ ở đây.

92
00:07:11,910 --> 00:07:17,080
Hãy tiếp tục và bây giờ sửa đổi này để biến nó thành

93
00:07:17,080 --> 00:07:22,745
các trường cho phép người dùng nhập số điện thoại và ID email.

94
00:07:22,745 --> 00:07:24,420
Vì vậy, đối với số điện thoại,

95
00:07:24,420 --> 00:07:28,200
vì vậy ở đây chúng tôi đã có tên và họ ở trên.

96
00:07:28,200 --> 00:07:34,380
Vì vậy, thứ ba, tôi sẽ thay đổi này để nhãn cho “telnum”.

97
00:07:34,380 --> 00:07:38,745
Vì vậy, đây là từ số điện thoại và sau đó các lớp học,

98
00:07:38,745 --> 00:07:44,790
Tôi sẽ áp dụng một lớp col-12 này nói rằng nhãn này sẽ được

99
00:07:44,790 --> 00:07:52,795
vẽ riêng của mình khi hình thức được hiển thị trên kích thước màn hình nhỏ đến nhỏ.

100
00:07:52,795 --> 00:07:55,660
Và sau đó, cho kích thước màn hình trung bình đến cao hơn,

101
00:07:55,660 --> 00:07:59,945
điều này sẽ được hiển thị trong hai cột

102
00:07:59,945 --> 00:08:04,655
của hàng cụ thể ở đây để đó là sự thay đổi mà chúng tôi sẽ thực hiện ở đó.

103
00:08:04,655 --> 00:08:06,875
Và sau đó, bản thân nhãn,

104
00:08:06,875 --> 00:08:14,860
hãy để tôi thay đổi nó để liên lạc với số điện thoại, liên lạc với Tel.

105
00:08:15,230 --> 00:08:18,915
Bây giờ, số điện thoại chính nó,

106
00:08:18,915 --> 00:08:22,600
chúng tôi sẽ cho phép người dùng nhập nó như hai phần; một,

107
00:08:22,600 --> 00:08:25,485
đó là mã vùng và số thứ hai,

108
00:08:25,485 --> 00:08:28,225
đó sẽ là số điện thoại thực tế.

109
00:08:28,225 --> 00:08:31,120
Vì vậy, tôi sẽ lấy phần này của mã,

110
00:08:31,120 --> 00:08:34,640
đó là lĩnh vực đầu vào mà chúng tôi đã có cho

111
00:08:34,640 --> 00:08:40,315
tên đầu tiên và sau đó tạo ra một cái khác dưới đây,

112
00:08:40,315 --> 00:08:44,190
mà tôi sẽ sử dụng cho số điện thoại chính nó.

113
00:08:44,190 --> 00:08:50,560
Và bây giờ chúng ta sẽ biến cái này đầu tiên vào trường để nhập mã vùng.

114
00:08:50,560 --> 00:08:52,540
Bạn cũng có thể sử dụng nó ví dụ,

115
00:08:52,540 --> 00:08:57,220
cho mã quốc gia nếu đó là những gì bạn muốn đặt trong biểu mẫu.

116
00:08:57,220 --> 00:09:00,190
Vì vậy, đối với mã khu vực chính nó,

117
00:09:00,190 --> 00:09:02,520
tôi sẽ áp dụng cho div,

118
00:09:02,520 --> 00:09:09,105
các lớp="col-5 col-md-3 đây”.

119
00:09:09,105 --> 00:09:13,410
Vì vậy, lưu ý rằng đối với màn hình trung bình,

120
00:09:13,410 --> 00:09:16,805
chúng ta có hai cột bị chiếm bởi nhãn,

121
00:09:16,805 --> 00:09:20,630
ba cột bị chiếm bởi mã

122
00:09:20,630 --> 00:09:25,385
vùng và bảy cột còn lại tôi sẽ đưa nó vào trường văn bản ở đây.

123
00:09:25,385 --> 00:09:29,650
Vì vậy, tương tự, đối với mã vùng tôi nói col năm.

124
00:09:29,650 --> 00:09:32,680
Vì vậy, đối với màn hình nhỏ đến nhỏ, điều này sẽ chiếm

125
00:09:32,680 --> 00:09:37,520
năm cột và sau đó cho bảy cột còn lại,

126
00:09:37,520 --> 00:09:42,640
chúng tôi sẽ cho phép số điện thoại ăn chính nó chiếm đóng tại.

127
00:09:42,640 --> 00:09:48,510
Vì vậy, để tôi thay đổi cái tiếp theo thành col-7 và col-md-7 ở đây.

128
00:09:49,540 --> 00:09:54,365
Bây giờ, lĩnh vực này tôi sẽ thay đổi điều này để

129
00:09:54,365 --> 00:09:58,965
tel, nhập loại tel cho số điện thoại và lớp là điều khiển hình thức,

130
00:09:58,965 --> 00:10:08,830
ID là mã vùng và tên là mã vùng và sau đó giữ chỗ,

131
00:10:08,830 --> 00:10:12,415
tôi sẽ thay đổi điều này để mã vùng.

132
00:10:12,415 --> 00:10:14,215
Và phần tiếp theo,

133
00:10:14,215 --> 00:10:21,885
chúng ta sẽ thay đổi điều này cũng gõ tel và ID là telnum,

134
00:10:21,885 --> 00:10:28,060
tên là telnum và giữ chỗ,

135
00:10:28,060 --> 00:10:34,830
chính nó, sẽ là số tel.

136
00:10:34,830 --> 00:10:40,975
Vì vậy, điều này sẽ tạo thành trường số điện thoại

137
00:10:40,975 --> 00:10:42,840
, sẽ được nhập dưới dạng hai

138
00:10:42,840 --> 00:10:45,160
phần; mã vùng và số điện thoại.

139
00:10:45,160 --> 00:10:47,180
Vì vậy, chúng tôi đang sử dụng, một lần nữa,

140
00:10:47,180 --> 00:10:51,540
các lớp cột để cấu trúc

141
00:10:51,540 --> 00:10:57,260
cách hai phần của trường đầu vào được hiển thị trong biểu mẫu ở đó.

142
00:10:57,260 --> 00:10:59,490
Bây giờ cái cuối cùng, tất nhiên, nó

143
00:10:59,490 --> 00:11:02,940
sẽ là cho email ID vì vậy nhãn,

144
00:11:02,940 --> 00:11:08,595
tôi biến nó thành email ID và sau đó nhãn chính nó

145
00:11:08,595 --> 00:11:14,345
là email và loại đầu vào là email.

146
00:11:14,345 --> 00:11:16,575
Bây giờ, chúng ta thay đổi loại để email,

147
00:11:16,575 --> 00:11:22,060
được cho phép trong HTML để sau này nếu chúng ta cần phải làm xác nhận hình thức,

148
00:11:22,060 --> 00:11:24,040
sau đó chúng ta biết rằng lĩnh vực này nên

149
00:11:24,040 --> 00:11:28,730
chỉ chứa một loại email của mục nhập đó, và ID

150
00:11:28,730 --> 00:11:37,490
, chính nó, email ID và tên email ID và giữ chỗ.

151
00:11:38,600 --> 00:11:42,295
Email. Đó là nó.

152
00:11:42,295 --> 00:11:47,335
Hãy lưu các thay đổi và đi và xem biểu mẫu được cập nhật.

153
00:11:47,335 --> 00:11:49,820
Đi đến biểu mẫu trong trình duyệt,

154
00:11:49,820 --> 00:11:54,030
bây giờ bạn thấy hai hàng bổ sung được thêm vào biểu mẫu của chúng tôi.

155
00:11:54,030 --> 00:11:57,030
Tên và họ được thêm vào trong phần trước của bài tập.

156
00:11:57,030 --> 00:11:59,050
Vì vậy, ở đây, chúng tôi có số điện thoại liên lạc,

157
00:11:59,050 --> 00:12:01,805
được chia thành mã vùng và số điện thoại.

158
00:12:01,805 --> 00:12:06,515
Lưu ý cách chúng tôi đã sử dụng các lớp cột để định vị hai

159
00:12:06,515 --> 00:12:11,650
trong biểu mẫu chính nó và sau đó là trường email ở đây.

160
00:12:11,650 --> 00:12:15,775
Chúng ta hãy nhìn vào cùng một điều trên một kích thước màn hình nhỏ thêm.

161
00:12:15,775 --> 00:12:18,465
Vì vậy, khi bạn đi đến một kích thước màn hình nhỏ thêm,

162
00:12:18,465 --> 00:12:20,800
bạn sẽ nhận thấy cách biểu mẫu chính nó được đặt ra.

163
00:12:20,800 --> 00:12:24,690
Bạn sẽ thấy rằng nhãn nằm ở trên cùng và sau đó là trường chính nó ở dưới cùng.

164
00:12:24,690 --> 00:12:26,055
Vì vậy, tên, họ.

165
00:12:26,055 --> 00:12:28,605
Lưu ý cách các

166
00:12:28,605 --> 00:12:33,160
trường nhập số điện thoại liên hệ được định vị bằng cách sử dụng

167
00:12:33,160 --> 00:12:34,855
các lớp cột, vì vậy mã vùng ở đây,

168
00:12:34,855 --> 00:12:36,085
và số điện thoại,

169
00:12:36,085 --> 00:12:38,410
và sau đó là ID email ở đây.

170
00:12:38,410 --> 00:12:41,630
Bây giờ, chúng ta sẽ tiếp tục với bài tập.

171
00:12:41,630 --> 00:12:44,145
Tiếp tục trong bước tiếp theo,

172
00:12:44,145 --> 00:12:49,680
chúng tôi sẽ thêm vào một hộp kiểm và sau đó chúng tôi sẽ thêm vào một chọn hai hoặc bốn.

173
00:12:49,680 --> 00:12:51,680
Để thêm một hộp kiểm, chúng ta

174
00:12:51,680 --> 00:12:57,590
hãy chỉ cần sao chép nhóm hình thức này ở đây để chúng ta sẽ thêm nó như một hàng khác ở đây,

175
00:12:57,590 --> 00:13:01,595
và sau đó thêm vào div nhóm hình thức ở đây,

176
00:13:01,595 --> 00:13:04,970
và sau đó đóng div ở đây.

177
00:13:04,970 --> 00:13:08,860
Và sau đó bên trong hàng nhóm hình thức này,

178
00:13:08,860 --> 00:13:11,280
vì vậy điều này cho chúng ta thêm một hàng trong các hình thức.

179
00:13:11,280 --> 00:13:13,330
Vì vậy, bên trong hàng nhóm biểu mẫu này,

180
00:13:13,330 --> 00:13:16,120
hãy để tôi thêm vào đầu tiên hộp kiểm.

181
00:13:16,120 --> 00:13:22,655
Vì vậy, để làm điều đó, chúng ta sẽ thêm vào một div với class="col-md-6"

182
00:13:22,655 --> 00:13:26,610
vì vậy bạn sẽ thấy rằng điều này sẽ chiếm

183
00:13:26,610 --> 00:13:31,695
sáu cột trong kích thước màn hình trung bình để thêm lớn,

184
00:13:31,695 --> 00:13:36,800
và sau đó offset-md-2, vì vậy điều này sẽ bù đắp nó

185
00:13:36,800 --> 00:13:43,850
bên phải bởi hai cột và sau đó hiển thị hộp kiểm ở đó.

186
00:13:43,850 --> 00:13:48,490
Bây giờ, bên trong đây, để thêm một hộp kiểm,

187
00:13:48,490 --> 00:13:58,170
chúng ta sẽ nói div với lớp = “form-check” và

188
00:13:58,170 --> 00:14:07,200
bên trong lớp kiểm tra hình thức này, chúng ta sẽ thêm vào một kiểu đầu vào = “hộp kiểm”

189
00:14:07,200 --> 00:14:17,990
và class="form-check input” và sau đó cho phép tôi đi đến dòng tiếp theo và sau đó

190
00:14:17,990 --> 00:14:24,400
nói name="approve” và

191
00:14:24,400 --> 00:14:32,560
id="approve” và giá trị là một chuỗi rỗng ở đó.

192
00:14:32,560 --> 00:14:35,360
Và để hộp kiểm này,

193
00:14:35,360 --> 00:14:36,735
chúng ta hãy thêm một nhãn.

194
00:14:36,735 --> 00:14:38,380
Vì vậy, để thêm một nhãn,

195
00:14:38,380 --> 00:14:41,940
chúng tôi sẽ đi và thêm vào nhãn

196
00:14:41,940 --> 00:14:50,885
class="form-check label” và sau đó nhãn này

197
00:14:50,885 --> 00:14:53,775
là cho hộp kiểm này mà chúng tôi vừa thêm vào.

198
00:14:53,775 --> 00:15:00,270
Vì vậy, đó là lý do tại sao chúng tôi sẽ nói cho="phê duyệt” để lưu ý rằng đối với hộp kiểm,

199
00:15:00,270 --> 00:15:03,635
chúng tôi đã cung cấp tên và ID như phê duyệt để đó là lý do tại sao ở đây,

200
00:15:03,635 --> 00:15:07,090
chúng tôi sẽ lưu cho nhãn để phê duyệt.

201
00:15:07,090 --> 00:15:09,560
Và sau đó bên trong nhãn này,

202
00:15:09,560 --> 00:15:19,250
chúng tôi sẽ chỉ định nội dung là 'Chúng tôi có thể liên hệ với bạn không? '

203
00:15:19,250 --> 00:15:24,240
Và sau đó lưu các thay đổi và chúng ta hãy đi và xem hình thức của chúng tôi.

204
00:15:24,240 --> 00:15:25,810
Đi đến trang web,

205
00:15:25,810 --> 00:15:30,970
bây giờ bạn có thể thấy rằng chúng tôi đã thêm vào một hộp kiểm cùng với một nhãn ở đây và nhận thấy

206
00:15:30,970 --> 00:15:36,685
rằng nhãn này được in đậm vì việc sử dụng thẻ “mạnh” ở đó,

207
00:15:36,685 --> 00:15:40,270
và chúng tôi đã làm offset-md-2.

208
00:15:40,270 --> 00:15:42,850
Vì vậy, đó là lý do tại sao chúng tôi đẩy hộp kiểm này tất cả các cách ở đây.

209
00:15:42,850 --> 00:15:46,750
Điều này không có một nhãn ở đây nhưng thay vào đó điều này được đẩy ngay ở đây, vì

210
00:15:46,750 --> 00:15:50,765
vậy đó là lý do để sử dụng offset-md-2 ở đây,

211
00:15:50,765 --> 00:15:56,980
và điều này chiếm md-6 nên sáu cột ở đây.

212
00:15:56,980 --> 00:15:59,180
Chúng ta chưa xong việc với điều đó.

213
00:15:59,180 --> 00:16:03,075
Tôi sẽ thêm vào phần tiếp theo ở đây,

214
00:16:03,075 --> 00:16:06,995
đó là một hộp chọn ở đó.

215
00:16:06,995 --> 00:16:11,230
Vì vậy, tôi sẽ áp dụng thêm một div ở đây với

216
00:16:11,230 --> 00:16:20,475
class="col-md-3 offset-md-1" ở đây.

217
00:16:20,475 --> 00:16:23,375
Và bên trong div này,

218
00:16:23,375 --> 00:16:27,160
tôi sẽ xác định một lựa chọn.

219
00:16:27,160 --> 00:16:30,590
Vì vậy, một lần nữa, từ kiến thức của bạn về HTML,

220
00:16:30,590 --> 00:16:33,260
bạn biết những gì một lựa chọn làm cho bạn.

221
00:16:33,260 --> 00:16:36,635
Bây giờ, chọn sẽ áp dụng

222
00:16:36,635 --> 00:16:45,920
các lớp biểu mẫu điều khiển vì vậy đây là Bootstrap class mà tôi đang áp dụng để chọn ở đây,

223
00:16:46,130 --> 00:16:49,245
và đóng tắt chọn.

224
00:16:49,245 --> 00:16:53,745
Và bên trong đây, tôi cần phải đưa ra các tùy chọn cho việc chọn.

225
00:16:53,745 --> 00:16:57,500
Vì vậy, tôi đang sử dụng một lựa chọn đơn giản ở đây,

226
00:16:57,500 --> 00:17:02,570
và do đó, một trong những đầu tiên là một lựa chọn

227
00:17:02,570 --> 00:17:09,060
cho điện thoại hoặc email và đóng tùy chọn.

228
00:17:09,060 --> 00:17:13,735
Vì vậy, điều này tạo ra một yếu tố chọn trong biểu mẫu của tôi, trong

229
00:17:13,735 --> 00:17:15,310
đó có hai tùy chọn;

230
00:17:15,310 --> 00:17:17,080
điện thoại và email, vì vậy,

231
00:17:17,080 --> 00:17:18,505
chúng ta hãy lưu các thay đổi.

232
00:17:18,505 --> 00:17:20,180
Hãy xem trang web của chúng tôi,

233
00:17:20,180 --> 00:17:26,960
bây giờ bạn có thể thấy cách hộp chọn điện thoại và email bây giờ được tạo ra ở đây vì vậy điều này

234
00:17:26,960 --> 00:17:34,025
cho phép tôi chọn một trong những để làm và sau đó bạn cũng có thể kiểm tra hộp kiểm như thế này.

235
00:17:34,025 --> 00:17:36,730
Vì vậy, điều này kết thúc hàng tiếp theo.

236
00:17:36,730 --> 00:17:39,040
Hãy thêm vào một hàng nữa,

237
00:17:39,040 --> 00:17:42,960
điều này sẽ cho phép người dùng thực sự gõ phản hồi của họ.

238
00:17:42,960 --> 00:17:47,535
Vì vậy, tôi sẽ sử dụng một khu vực văn bản để định dạng đó.

239
00:17:47,535 --> 00:17:51,615
Đối với kế tiếp, tôi sẽ sử dụng một khu vực văn bản.

240
00:17:51,615 --> 00:17:58,840
Vì vậy, những gì tôi sẽ làm là tôi sẽ đi lên và sao chép phần email này của nó.

241
00:17:58,840 --> 00:18:02,115
Tôi quá lười biếng để tiếp tục gõ tất cả mọi thứ mọi lúc.

242
00:18:02,115 --> 00:18:06,950
Vì vậy, tôi có xu hướng cắt và dán bất cứ nơi nào khả thi, nhưng đối với cái này,

243
00:18:06,950 --> 00:18:15,670
nhãn phải là phản hồi và nhãn dạng cột,

244
00:18:15,670 --> 00:18:24,575
và sau đó văn bản thực tế là, “Phản hồi của bạn ở đây.”

245
00:18:24,575 --> 00:18:26,450
Vì vậy, đó là nhãn hiệu.

246
00:18:26,450 --> 00:18:28,795
Và sau đó, ở đây, cái thứ hai,

247
00:18:28,795 --> 00:18:32,530
tôi sẽ định dạng cái này.

248
00:18:32,530 --> 00:18:34,140
Thay vì loại đầu vào,

249
00:18:34,140 --> 00:18:39,085
tôi sẽ thay đổi đó vào một khu vực văn bản,

250
00:18:39,085 --> 00:18:42,815
và sau đó tôi không cần loại ở đó.

251
00:18:42,815 --> 00:18:51,400
Khu vực văn bản, lớp học vẫn là điều khiển biểu mẫu và ID là phản hồi.

252
00:18:51,400 --> 00:18:58,890
Tên là phản hồi và chỗ dành sẵn không cần thiết

253
00:18:58,890 --> 00:19:02,880
ở đây và thay vào đó thay vào đó thay đổi nó thành bao nhiêu hàng tôi

254
00:19:02,880 --> 00:19:06,890
muốn đưa ra từ phản hồi cho khu vực văn bản?

255
00:19:06,890 --> 00:19:10,340
Vì vậy, tôi sẽ nói 12 hàng và sau đó đóng văn bản.

256
00:19:10,340 --> 00:19:15,215
Vì vậy, hãy lưu ý làm thế nào tôi đã bao gồm textarea trong hình thức của tôi.

257
00:19:15,215 --> 00:19:16,680
Lưu các thay đổi.

258
00:19:16,680 --> 00:19:19,560
Hãy nhìn xem. Đi đến trang web của tôi,

259
00:19:19,560 --> 00:19:23,910
bây giờ bạn thấy biểu mẫu của tôi có hình dạng hoàn chỉnh của nó ở đây.

260
00:19:23,910 --> 00:19:25,470
Bạn có tên, họ,

261
00:19:25,470 --> 00:19:28,050
điện thoại, email ở đó, và sau đó là phản hồi.

262
00:19:28,050 --> 00:19:30,720
Vùng văn bản của 12 hàng.

263
00:19:30,720 --> 00:19:36,080
Bây giờ, bạn sẽ cần một nút mà người dùng nên nhấp vào để gửi phản hồi của họ.

264
00:19:36,080 --> 00:19:40,715
Vì vậy, cho phép thêm vào một nút gửi vào biểu mẫu này.

265
00:19:40,715 --> 00:19:44,030
Quay trở lại biểu mẫu một lần nữa,

266
00:19:44,030 --> 00:19:47,195
tạo thêm một hàng ở đây bằng cách sử dụng

267
00:19:47,195 --> 00:19:55,715
div ở đây với hàng nhóm hình thức ở đây,

268
00:19:55,715 --> 00:19:59,405
và bên trong đây tôi sẽ thêm vào một nút ở đây.

269
00:19:59,405 --> 00:20:02,300
Vì vậy, tôi sẽ nói, div

270
00:20:02,340 --> 00:20:10,500
class="offset-md-2" bởi vì tôi muốn nút của tôi được

271
00:20:10,500 --> 00:20:13,880
đặt ngay dưới tất cả những lĩnh vực mà tôi

272
00:20:13,880 --> 00:20:17,850
có ở đây để hai cột bên trái đang được sử dụng cho nhãn.

273
00:20:17,850 --> 00:20:21,750
Vì vậy, nút gửi không cần một nhãn vì vậy tôi chỉ cần đẩy

274
00:20:21,750 --> 00:20:25,890
nó sang bên phải ở đây và sau đó tôi sẽ

275
00:20:25,890 --> 00:20:35,090
nói “col-md-10" vì vậy điều này sẽ chiếm 10 cột còn lại ở đó.

276
00:20:35,090 --> 00:20:37,310
Và sau đó bên trong những div,

277
00:20:37,310 --> 00:20:40,045
tôi sẽ thêm vào một nút ở đó.

278
00:20:40,045 --> 00:20:45,020
Vì vậy, khi bạn thêm vào một nút vào biểu mẫu của bạn,

279
00:20:45,020 --> 00:20:50,190
sử dụng thẻ nút ở đây với một loại gửi.

280
00:20:50,190 --> 00:20:56,440
Vì vậy, đây là nút gửi cho biểu mẫu của bạn ở đó và lớp học.

281
00:20:56,440 --> 00:21:02,890
Ghi các lớp nút, nút chính,

282
00:21:02,890 --> 00:21:07,890
vì vậy điều này sẽ tạo ra một nút màu xanh đậm trong biểu mẫu của bạn và

283
00:21:07,890 --> 00:21:15,110
sau đó đóng nút ở đó,

284
00:21:15,110 --> 00:21:19,805
và sau đó tôi sẽ chỉ đơn giản là đi vào và bên trong nút,

285
00:21:19,805 --> 00:21:28,725
tôi sẽ cung cấp cho tên là “Gửi phản hồi” và sau đó lưu các thay đổi.

286
00:21:28,725 --> 00:21:31,295
Bây giờ, hình thức của chúng tôi đã hoàn thành.

287
00:21:31,295 --> 00:21:36,600
Vì vậy, chúng ta hãy nhìn vào phiên bản cuối cùng của hình thức của chúng tôi.

288
00:21:36,600 --> 00:21:38,660
Vào trang web của chúng tôi,

289
00:21:38,660 --> 00:21:40,875
bây giờ bạn có thể xem biểu mẫu đã hoàn thành.

290
00:21:40,875 --> 00:21:43,135
Tất cả các lĩnh vực này chúng tôi đã thấy,

291
00:21:43,135 --> 00:21:46,610
nút ở dưới cùng với từ ngữ “Gửi

292
00:21:46,610 --> 00:21:51,265
phản hồi” và nút màu xanh đậm vì việc sử dụng nút “chính”.

293
00:21:51,265 --> 00:21:58,870
Vì vậy, điều này hoàn thành biểu mẫu mà chúng tôi muốn tạo ra trong trang web của chúng tôi.

294
00:21:58,870 --> 00:22:02,380
Với điều này, chúng tôi hoàn thành bài tập này,

295
00:22:02,380 --> 00:22:07,135
nơi chúng tôi đã thấy làm thế nào chúng tôi có thể xây dựng một hình thức và bao gồm nó vào trang web của chúng tôi.

296
00:22:07,135 --> 00:22:10,130
Bạn sẽ làm việc với các biểu mẫu trong một số

297
00:22:10,130 --> 00:22:13,720
bài tập sau này bao gồm bài tập thứ hai của bạn.

298
00:22:13,720 --> 00:22:19,310
Đây là thời điểm tốt để bạn thực hiện một bình luận tốt với các mẫu tin nhắn.