1
00:00:03,250 --> 00:00:07,810
Теперь, когда мы видели, как добавить кнопки на нашу веб-страницу.

2
00:00:07,810 --> 00:00:12,560
В этом упражнении мы рассмотрим формы и как мы можем добавить формы на

3
00:00:12,560 --> 00:00:19,220
нашу веб-страницу, а также стиль этих элементов формы с помощью классов Bootstrap.

4
00:00:19,220 --> 00:00:23,065
Возвращаясь к странице contactus.html,

5
00:00:23,065 --> 00:00:28,215
прокрутите вниз, пока не увидите этот комментарий под названием «Форма идет здесь».

6
00:00:28,215 --> 00:00:32,990
Мы собираемся заменить это на форму на этой веб-странице.

7
00:00:32,990 --> 00:00:35,715
Итак, давайте удалим это, а затем построим

8
00:00:35,715 --> 00:00:39,945
форму в этом конкретном месте внутри div там.

9
00:00:39,945 --> 00:00:41,855
Чтобы начать работу с формой,

10
00:00:41,855 --> 00:00:50,585
я собираюсь использовать HTML-тег формы и построить форму в этом HTML-теге.

11
00:00:50,585 --> 00:00:52,960
Итак, в этом теге формы,

12
00:00:52,960 --> 00:00:57,925
давайте добавим в радиус элементы нашей формы.

13
00:00:57,925 --> 00:01:00,195
Итак, внутри этой формы,

14
00:01:00,195 --> 00:01:04,405
я собираюсь разделить эту форму на несколько строк там.

15
00:01:04,405 --> 00:01:06,780
Чтобы разделить свою форму на строки,

16
00:01:06,780 --> 00:01:17,020
вы можете просто использовать div с классом = «form-group», а затем применить к нему класс строки.

17
00:01:20,370 --> 00:01:26,540
Таким образом, с этим мы собираемся добавить в две группы форм здесь.

18
00:01:26,540 --> 00:01:29,795
Я собираюсь скопировать это, а затем вставить его ниже здесь.

19
00:01:29,795 --> 00:01:34,055
Итак, вы можете видеть, что я собираюсь добавить две строки в эту форму здесь.

20
00:01:34,055 --> 00:01:36,690
Итак, чтобы добавить элемент в эту форму,

21
00:01:36,690 --> 00:01:44,330
мы собираемся в этот div, а затем я начну с использования тега метки здесь.

22
00:01:44,330 --> 00:01:46,550
И для тегов метки,

23
00:01:46,550 --> 00:01:48,460
так что у меня будет две строки:

24
00:01:48,460 --> 00:01:51,270
одна, позволяющая пользователю заполнить свое имя,

25
00:01:51,270 --> 00:01:53,470
а вторая для своей фамилии.

26
00:01:53,470 --> 00:02:01,530
Итак, вот где мы собираемся использовать эту метку, чтобы указать класс там.

27
00:02:01,530 --> 00:02:09,080
Теперь, Кроме того, Bootstrap позволяет нам использовать сетку Bootstrap,

28
00:02:09,080 --> 00:02:19,300
чтобы указать, как эти формы будут выложены объявление, поэтому я буду применять col-md-2.

29
00:02:19,300 --> 00:02:27,720
Вы можете видеть, что я применил классы столбцов md-2 к этому конкретному элементу.

30
00:02:27,720 --> 00:02:31,360
Таким образом, этот пункт в форме будет занимать два столбца.

31
00:02:31,360 --> 00:02:33,465
Итак, внутри этого элемента формы,

32
00:02:33,465 --> 00:02:37,950
мы разделили каждую строку на 12 столбцов.

33
00:02:37,950 --> 00:02:40,940
Итак, потому что мы уже использовали строку для div,

34
00:02:40,940 --> 00:02:45,030
так что это предоставит нам 12 столбцов внутри div.

35
00:02:45,030 --> 00:02:52,560
Кроме того, я должен применить метку формы класса col к этому.

36
00:02:52,560 --> 00:02:56,905
Итак, это то, что позволяет мне указать ярлык здесь.

37
00:02:56,905 --> 00:02:58,395
Итак, для этой метки

38
00:02:58,395 --> 00:03:07,070
я заполню метку как имя, а затем закрою тег метки.

39
00:03:07,070 --> 00:03:10,485
Таким образом, этот тег метки позволяет мне дать метку,

40
00:03:10,485 --> 00:03:14,150
которая будет занимать два левых столбца в этой конкретной строке.

41
00:03:14,150 --> 00:03:22,740
С правой стороны, я собираюсь использовать другой div, который класс применялся как col-md-10.

42
00:03:22,740 --> 00:03:28,420
Обратите внимание, что более ранняя метка использовала col-md-2.

43
00:03:28,420 --> 00:03:29,665
Итак, для этого div

44
00:03:29,665 --> 00:03:32,755
я собираюсь применить col-md-10 там.

45
00:03:32,755 --> 00:03:35,120
И затем внутри этого div

46
00:03:35,120 --> 00:03:38,700
я собираюсь применить элемент ввода,

47
00:03:38,700 --> 00:03:42,750
который имеет тип текста.

48
00:03:42,750 --> 00:03:46,770
Итак, если вы знакомы с формами из HTML,

49
00:03:46,770 --> 00:03:50,460
вы увидите, что мы используем элементы формы из HTML, чтобы

50
00:03:50,460 --> 00:03:55,910
создать эту форму здесь, так что поле ввода здесь текста типа.

51
00:03:55,910 --> 00:04:00,410
Теперь, вот где мы собираемся применить классы Bootstrap к этому,

52
00:04:00,410 --> 00:04:05,500
и соответствующий класс Bootstrap для этого

53
00:04:05,500 --> 00:04:10,710
является элементом управления формой, а затем я могу указать

54
00:04:10,710 --> 00:04:16,165
идентификатор для этого как имя.

55
00:04:16,165 --> 00:04:21,260
Итак, обратите внимание, что этот идентификатор соответствует этой метке для div.

56
00:04:21,260 --> 00:04:26,625
Итак, имя, а затем имя как

57
00:04:26,625 --> 00:04:30,735
имя, а также я укажу

58
00:04:30,735 --> 00:04:37,190
заполнитель для этого, поэтому позвольте мне использовать следующую строку здесь,

59
00:04:37,940 --> 00:04:46,890
заполнитель, поскольку, я уверен, из ваших знаний HTML,

60
00:04:46,890 --> 00:04:52,020
вы понимаете, как эта спецификация выполняется здесь.

61
00:04:52,020 --> 00:04:59,355
Таким образом, с этим, мы теперь создали наш первый элемент формы в нашей форме.

62
00:04:59,355 --> 00:05:03,170
Давайте посмотрим на веб-страницу.

63
00:05:03,170 --> 00:05:08,310
Перейдя на нашу веб-страницу, теперь вы можете увидеть, как добавление в форму элементов создало

64
00:05:08,310 --> 00:05:14,515
это текстовое поле ввода и метку на левой стороне.

65
00:05:14,515 --> 00:05:18,105
Теперь я собираюсь добавить в другую строку с фамилией.

66
00:05:18,105 --> 00:05:23,150
Возвращаясь к моему contactus.html,

67
00:05:23,150 --> 00:05:29,215
позвольте мне просто скопировать эту часть, а затем вставить ее во второй div здесь,

68
00:05:29,215 --> 00:05:32,875
а затем войти и отредактировать ее.

69
00:05:32,875 --> 00:05:39,890
С имени я меняю это на фамилию.

70
00:05:39,890 --> 00:05:45,090
Убедитесь, что все изменения выполнены правильно.

71
00:05:45,550 --> 00:05:49,470
Даже одно отсутствие неправильного редактирования,

72
00:05:49,470 --> 00:05:53,210
приведет к тому, что ваша форма не будет работать правильно, поэтому убедитесь, что

73
00:05:53,210 --> 00:05:58,220
все имена здесь заменены моей фамилией.

74
00:05:58,220 --> 00:05:59,795
Итак, фамилия,

75
00:05:59,795 --> 00:06:02,640
элемент управления текстовой формой md-10.

76
00:06:02,640 --> 00:06:11,510
Идентификатор здесь должен быть фамилией, а имя также должно

77
00:06:11,510 --> 00:06:14,945
быть фамилией, а заполнитель

78
00:06:14,945 --> 00:06:21,030
снова фамилия, поэтому это должно добавить во второй строке с фамилией.

79
00:06:21,030 --> 00:06:22,530
Перейдя на веб-страницу,

80
00:06:22,530 --> 00:06:24,000
вы можете увидеть, как форма

81
00:06:24,000 --> 00:06:28,150
медленно становится в форму, так что у вас есть имя и фамилия.

82
00:06:28,150 --> 00:06:33,790
Теперь давайте добавим в входные элементы.

83
00:06:33,790 --> 00:06:38,260
Мы увидим, как это работает, когда мы добавляем в код.

84
00:06:38,260 --> 00:06:41,989
Переходя сейчас к следующей части упражнения,

85
00:06:41,989 --> 00:06:46,220
здесь мы добавим еще два поля в

86
00:06:46,220 --> 00:06:51,690
нашу форму здесь для ввода номера телефона и идентификатора электронной почты.

87
00:06:51,690 --> 00:06:54,870
Поскольку основная структура кода похожа

88
00:06:54,870 --> 00:06:58,610
на имя и фамилию, которые вы уже добавили в форму,

89
00:06:58,610 --> 00:07:02,370
поэтому я просто собираюсь скопировать код из имени и фамилии,

90
00:07:02,370 --> 00:07:08,000
а затем вставить его здесь, а затем изменить код соответственно.

91
00:07:08,000 --> 00:07:11,910
Итак, я вставил код от имени и фамилии здесь.

92
00:07:11,910 --> 00:07:17,080
Давайте продолжим и теперь изменим это, чтобы превратить его в поля, которые позволяют

93
00:07:17,080 --> 00:07:22,745
пользователю вводить номер телефона и идентификатор электронной почты.

94
00:07:22,745 --> 00:07:24,420
Итак, для номера телефона,

95
00:07:24,420 --> 00:07:28,200
так вот у нас уже есть имя и фамилия выше.

96
00:07:28,200 --> 00:07:34,380
Итак, третий, я собираюсь изменить это на метку «telnum».

97
00:07:34,380 --> 00:07:38,745
Итак, это из номера телефона, а затем классов,

98
00:07:38,745 --> 00:07:44,790
я собираюсь применить класс col-12 к этому говоря, что эта метка будет в

99
00:07:44,790 --> 00:07:52,795
своем собственном розыгрыше, когда форма отображается на дополнительных маленьких или маленьких размерах экрана.

100
00:07:52,795 --> 00:07:55,660
И затем, для среднего и более высокого размера экрана,

101
00:07:55,660 --> 00:07:59,945
это будет отображаться в двух столбцах

102
00:07:59,945 --> 00:08:04,655
этой конкретной строки здесь, так что это изменение, которое мы сделаем там.

103
00:08:04,655 --> 00:08:06,875
А затем, сама этикетка,

104
00:08:06,875 --> 00:08:14,860
позвольте мне изменить, что контактный номер телефона, связаться по тел.

105
00:08:15,230 --> 00:08:18,915
Теперь, сам номер телефона,

106
00:08:18,915 --> 00:08:22,600
мы позволим пользователю ввести его как две части: одна,

107
00:08:22,600 --> 00:08:25,485
которая является кодом города, а вторая,

108
00:08:25,485 --> 00:08:28,225
которая будет фактическим номером телефона.

109
00:08:28,225 --> 00:08:31,120
Итак, я собираюсь взять эту часть кода,

110
00:08:31,120 --> 00:08:34,640
которая была полем ввода, которое у нас было для

111
00:08:34,640 --> 00:08:40,315
имени, а затем создать еще один ниже здесь,

112
00:08:40,315 --> 00:08:44,190
который я собираюсь использовать для самого телефонного номера.

113
00:08:44,190 --> 00:08:50,560
И теперь мы превратим эту первую в поле для ввода кода города.

114
00:08:50,560 --> 00:08:52,540
Вы также можете использовать его, например,

115
00:08:52,540 --> 00:08:57,220
для кода страны, если это то, что вы хотите поместить в форму.

116
00:08:57,220 --> 00:09:00,190
Итак, для самого кода области

117
00:09:00,190 --> 00:09:02,520
я собираюсь подать заявку на div,

118
00:09:02,520 --> 00:09:09,105
классы = «col-5 col-md-3 здесь».

119
00:09:09,105 --> 00:09:13,410
Итак, обратите внимание, что для среднего экрана

120
00:09:13,410 --> 00:09:16,805
у нас есть два столбца, занятые меткой,

121
00:09:16,805 --> 00:09:20,630
три столбца заняты самим кодом области, а

122
00:09:20,630 --> 00:09:25,385
остальные семь столбцов я дам его текстовому полю здесь.

123
00:09:25,385 --> 00:09:29,650
Итак, аналогичным образом, для кода области я говорю col five.

124
00:09:29,650 --> 00:09:32,680
Таким образом, для дополнительных маленьких или маленьких экранов это будет занимать

125
00:09:32,680 --> 00:09:37,520
пять столбцов, а затем для остальных семи столбцов,

126
00:09:37,520 --> 00:09:42,640
мы позволим телефонному номеру питать себя занятым в.

127
00:09:42,640 --> 00:09:48,510
Итак, позвольте мне изменить следующий на col-7 и col-md-7 здесь.

128
00:09:49,540 --> 00:09:54,365
Теперь это поле я изменю это на tel,

129
00:09:54,365 --> 00:09:58,965
введите тип tel для номера телефона, а класс - элемент управления формой,

130
00:09:58,965 --> 00:10:08,830
идентификатор - код области, а имя - код области, а затем заполнитель,

131
00:10:08,830 --> 00:10:12,415
я изменю это на код области.

132
00:10:12,415 --> 00:10:14,215
И следующая часть,

133
00:10:14,215 --> 00:10:21,885
мы изменим этот тип tel и ID telnum,

134
00:10:21,885 --> 00:10:28,060
имя telnum и заполнитель,

135
00:10:28,060 --> 00:10:34,830
сам, будет номер tel.

136
00:10:34,830 --> 00:10:40,975
Таким образом, это сформирует поле телефонного номера,

137
00:10:40,975 --> 00:10:42,840
которое будет введено как две части:

138
00:10:42,840 --> 00:10:45,160
код города и номер телефона.

139
00:10:45,160 --> 00:10:47,180
Итак, мы используем, опять же,

140
00:10:47,180 --> 00:10:51,540
классы столбцов для того, чтобы структурировать, как

141
00:10:51,540 --> 00:10:57,260
две части поля ввода отображаются в форме там.

142
00:10:57,260 --> 00:10:59,490
Теперь последний, конечно,

143
00:10:59,490 --> 00:11:02,940
это было бы для идентификатора электронной почты, поэтому метка,

144
00:11:02,940 --> 00:11:08,595
я превращаю это в идентификатор электронной почты, а затем сама метка

145
00:11:08,595 --> 00:11:14,345
- это электронная почта, а тип ввода - электронная почта.

146
00:11:14,345 --> 00:11:16,575
Теперь мы меняем тип электронной почты,

147
00:11:16,575 --> 00:11:22,060
который разрешен в HTML, так что позже, если нам нужно сделать проверку формы,

148
00:11:22,060 --> 00:11:24,040
то мы знаем, что это поле должно содержать

149
00:11:24,040 --> 00:11:28,730
только тип записи электронной почты там, и идентификатор,

150
00:11:28,730 --> 00:11:37,490
сам, идентификатор электронной почты и имя электронной почты ID и заполнитель.

151
00:11:38,600 --> 00:11:42,295
Электронная почта. Вот оно.

152
00:11:42,295 --> 00:11:47,335
Давайте сохраним изменения и посмотрим на обновленную форму.

153
00:11:47,335 --> 00:11:49,820
Перейдя к форме в браузере,

154
00:11:49,820 --> 00:11:54,030
вы теперь увидите две дополнительные строки, добавленные в нашу форму.

155
00:11:54,030 --> 00:11:57,030
Имя и фамилия добавляются в предыдущей части упражнения.

156
00:11:57,030 --> 00:11:59,050
Итак, здесь у нас есть контактный номер телефона,

157
00:11:59,050 --> 00:12:01,805
который разделен на код города и номер телефона.

158
00:12:01,805 --> 00:12:06,515
Обратите внимание, как мы использовали классы столбцов, чтобы разместить эти два в

159
00:12:06,515 --> 00:12:11,650
самой форме, а затем поле электронной почты здесь.

160
00:12:11,650 --> 00:12:15,775
Давайте посмотрим на то же самое на очень маленьком экране.

161
00:12:15,775 --> 00:12:18,465
Таким образом, когда вы переходите на дополнительный маленький размер экрана,

162
00:12:18,465 --> 00:12:20,800
вы заметите, как сама форма выложена.

163
00:12:20,800 --> 00:12:24,690
Вы увидите, что метка находится сверху, а затем само поле внизу.

164
00:12:24,690 --> 00:12:26,055
Итак, имя, фамилия.

165
00:12:26,055 --> 00:12:28,605
Обратите внимание, как

166
00:12:28,605 --> 00:12:33,160
поля ввода номера контактного телефона позиционируются с использованием классов столбцов,

167
00:12:33,160 --> 00:12:34,855
поэтому код города здесь,

168
00:12:34,855 --> 00:12:36,085
номер телефона,

169
00:12:36,085 --> 00:12:38,410
а затем идентификатор электронной почты здесь.

170
00:12:38,410 --> 00:12:41,630
Теперь мы продолжим упражнение.

171
00:12:41,630 --> 00:12:44,145
Продолжая в следующем шаге,

172
00:12:44,145 --> 00:12:49,680
мы добавим в флажок, а затем мы добавим в выбор два или четыре.

173
00:12:49,680 --> 00:12:51,680
Чтобы добавить флажок,

174
00:12:51,680 --> 00:12:57,590
давайте просто скопируем эту группу форм здесь, так что мы добавим его как другую строку здесь,

175
00:12:57,590 --> 00:13:01,595
а затем добавим в группу форм div здесь,

176
00:13:01,595 --> 00:13:04,970
а затем закроем div здесь.

177
00:13:04,970 --> 00:13:08,860
И затем внутри этой строки группы формы,

178
00:13:08,860 --> 00:13:11,280
так что это дает нам еще одну строку в форме.

179
00:13:11,280 --> 00:13:13,330
Поэтому внутри этой строки группы форм

180
00:13:13,330 --> 00:13:16,120
позвольте мне сначала добавить флажок.

181
00:13:16,120 --> 00:13:22,655
Итак, чтобы сделать это, мы добавим div с классом = «col-md-6»,

182
00:13:22,655 --> 00:13:26,610
чтобы вы увидели, что это займет

183
00:13:26,610 --> 00:13:31,695
шесть столбцов в среднем

184
00:13:31,695 --> 00:13:36,800
и очень большом размере экрана, а затем offset-md-2, так что это сместит его

185
00:13:36,800 --> 00:13:43,850
вправо на два столбца, а затем отобразит флажок там.

186
00:13:43,850 --> 00:13:48,490
Теперь, внутри здесь, чтобы добавить флажок,

187
00:13:48,490 --> 00:13:58,170
мы скажем div с классом = «form-check», а

188
00:13:58,170 --> 00:14:07,200
внутри этого класса проверки формы мы добавим тип ввода = «checkbox»

189
00:14:07,200 --> 00:14:17,990
и класс = «form-check-input», а затем позвольте мне перейти к следующей строке, а затем

190
00:14:17,990 --> 00:14:24,400
сказать имя = «approbe» и

191
00:14:24,400 --> 00:14:32,560
идентификатор = «approbe» и значение - это пустая строка.

192
00:14:32,560 --> 00:14:35,360
И к этому флажку

193
00:14:35,360 --> 00:14:36,735
добавим метку.

194
00:14:36,735 --> 00:14:38,380
Итак, чтобы добавить метку,

195
00:14:38,380 --> 00:14:41,940
мы пойдем и добавим в

196
00:14:41,940 --> 00:14:50,885
класс label = «form-check-label», а затем

197
00:14:50,885 --> 00:14:53,775
эта метка для этого флажка, который мы только что добавили.

198
00:14:53,775 --> 00:15:00,270
Итак, вот почему мы скажем для="утвердить», так что обратите внимание, что для флажка

199
00:15:00,270 --> 00:15:03,635
мы дали имя и идентификатор как утверждение, поэтому здесь,

200
00:15:03,635 --> 00:15:07,090
мы сохраним для метки для утверждения.

201
00:15:07,090 --> 00:15:09,560
И затем внутри этой этикетки

202
00:15:09,560 --> 00:15:19,250
мы будем указывать содержимое как «Можем ли мы связаться с вами?»

203
00:15:19,250 --> 00:15:24,240
А потом сохраним изменения и пойдем и взглянем на нашу форму.

204
00:15:24,240 --> 00:15:25,810
Перейдя на веб-страницу,

205
00:15:25,810 --> 00:15:30,970
теперь вы можете увидеть, что мы добавили в флажок вместе с меткой здесь и обратите внимание,

206
00:15:30,970 --> 00:15:36,685
что эта метка выделена жирным шрифтом из-за использования там «сильного» тега,

207
00:15:36,685 --> 00:15:40,270
и мы сделали offset-md-2.

208
00:15:40,270 --> 00:15:42,850
Вот почему мы нажимаем этот флажок на этом пути.

209
00:15:42,850 --> 00:15:46,750
Здесь нет метки, но вместо этого это толкается прямо здесь,

210
00:15:46,750 --> 00:15:50,765
так что это причина использования offset-md-2 здесь,

211
00:15:50,765 --> 00:15:56,980
и этот занимает md-6, поэтому здесь шесть столбцов.

212
00:15:56,980 --> 00:15:59,180
Мы еще не закончили с этим.

213
00:15:59,180 --> 00:16:03,075
Я собираюсь добавить в следующую часть здесь,

214
00:16:03,075 --> 00:16:06,995
которая является полем выбора там.

215
00:16:06,995 --> 00:16:11,230
Поэтому я применим еще один div здесь с

216
00:16:11,230 --> 00:16:20,475
классом = «col-md-3 offset-md-1» здесь.

217
00:16:20,475 --> 00:16:23,375
И внутри этого div

218
00:16:23,375 --> 00:16:27,160
я собираюсь определить выбор.

219
00:16:27,160 --> 00:16:30,590
Итак, опять же, из ваших знаний HTML,

220
00:16:30,590 --> 00:16:33,260
вы знаете, что делает выбор для вас.

221
00:16:33,260 --> 00:16:36,635
Теперь выбор будет применять элемент

222
00:16:36,635 --> 00:16:45,920
управления формы классов, так что это класс Bootstrap, который я применяю к выбору здесь,

223
00:16:46,130 --> 00:16:49,245
и закрыть выбор.

224
00:16:49,245 --> 00:16:53,745
И внутри здесь мне нужно дать варианты выбора.

225
00:16:53,745 --> 00:16:57,500
Итак, я использую простой выбор здесь,

226
00:16:57,500 --> 00:17:02,570
и поэтому первый из них - вариант

227
00:17:02,570 --> 00:17:09,060
для телефона или электронной почты и закрыть опцию.

228
00:17:09,060 --> 00:17:13,735
Таким образом, это создает элемент select в моей форме,

229
00:17:13,735 --> 00:17:15,310
который имеет два варианта:

230
00:17:15,310 --> 00:17:17,080
телефон и электронная почта, поэтому

231
00:17:17,080 --> 00:17:18,505
давайте сохраним изменения.

232
00:17:18,505 --> 00:17:20,180
Взглянув на нашу веб-страницу,

233
00:17:20,180 --> 00:17:26,960
вы можете увидеть, как теперь здесь создается окно выбора телефона и электронной почты, так что это

234
00:17:26,960 --> 00:17:34,025
позволяет мне выбрать, какой из них делать, а затем вы также можете установить флажок, как это.

235
00:17:34,025 --> 00:17:36,730
Таким образом, это заканчивает следующую строку.

236
00:17:36,730 --> 00:17:39,040
Добавим еще в одну строку,

237
00:17:39,040 --> 00:17:42,960
что позволит пользователю фактически вводить свои отзывы.

238
00:17:42,960 --> 00:17:47,535
Итак, я буду использовать текстовую область для форматирования этого.

239
00:17:47,535 --> 00:17:51,615
Для следующего я собираюсь использовать текстовую область.

240
00:17:51,615 --> 00:17:58,840
Итак, что я собираюсь сделать, так это я просто собираюсь пойти вверх и скопировать эту часть письма.

241
00:17:58,840 --> 00:18:02,115
Я слишком ленив, чтобы все время печатать.

242
00:18:02,115 --> 00:18:06,950
Итак, я склонен делать вырезать и вставлять везде, где это возможно, но для этого

243
00:18:06,950 --> 00:18:15,670
ярлык должен быть обратной связью и меткой формы столбца,

244
00:18:15,670 --> 00:18:24,575
а затем фактический текст: «Ваша обратная связь здесь».

245
00:18:24,575 --> 00:18:26,450
Так вот этикетка.

246
00:18:26,450 --> 00:18:28,795
А затем, здесь, второй,

247
00:18:28,795 --> 00:18:32,530
я собираюсь отформатировать этот.

248
00:18:32,530 --> 00:18:34,140
Вместо типа ввода

249
00:18:34,140 --> 00:18:39,085
я собираюсь изменить это на текстовую область,

250
00:18:39,085 --> 00:18:42,815
а затем мне не нужен тип там.

251
00:18:42,815 --> 00:18:51,400
Текстовая область, класс по-прежнему является элементом управления формой, а идентификатор является обратная связь.

252
00:18:51,400 --> 00:18:58,890
Имя - это обратная связь, и заполнитель

253
00:18:58,890 --> 00:19:02,880
здесь не нужен, и вместо этого измените его на сколько строк я

254
00:19:02,880 --> 00:19:06,890
хочу дать из обратной связи для текстовой области?

255
00:19:06,890 --> 00:19:10,340
Так что я скажу 12 строк, а затем закрою текст.

256
00:19:10,340 --> 00:19:15,215
Поэтому обратите внимание, как я включил текстовое поле в свою форму.

257
00:19:15,215 --> 00:19:16,680
Сохраните изменения.

258
00:19:16,680 --> 00:19:19,560
Взгляни. Перейдя на мою веб-страницу,

259
00:19:19,560 --> 00:19:23,910
теперь вы видите, что моя форма принимает свою полную форму здесь.

260
00:19:23,910 --> 00:19:25,470
У вас есть имя, фамилия,

261
00:19:25,470 --> 00:19:28,050
телефон, адрес электронной почты, а затем обратная связь.

262
00:19:28,050 --> 00:19:30,720
Текстовая область из 12 строк.

263
00:19:30,720 --> 00:19:36,080
Теперь вам понадобится кнопка, которую пользователь должен нажать, чтобы отправить свой отзыв.

264
00:19:36,080 --> 00:19:40,715
Итак, давайте добавим в кнопку отправки в эту форму.

265
00:19:40,715 --> 00:19:44,030
Возвращаясь к форме снова,

266
00:19:44,030 --> 00:19:47,195
создайте еще одну строку здесь, используя

267
00:19:47,195 --> 00:19:55,715
div здесь с строкой группы форм

268
00:19:55,715 --> 00:19:59,405
здесь, и внутри здесь я собираюсь добавить кнопку здесь.

269
00:19:59,405 --> 00:20:02,300
Итак, я бы сказал, div

270
00:20:02,340 --> 00:20:10,500
class = «offset-md-2", потому что я хочу, чтобы моя кнопка

271
00:20:10,500 --> 00:20:13,880
располагалась прямо под всеми теми полями, которые

272
00:20:13,880 --> 00:20:17,850
у меня есть здесь, поэтому для метки используются два левых столбца.

273
00:20:17,850 --> 00:20:21,750
Таким образом, кнопка отправки не нуждается в метке, поэтому я просто собираюсь нажать

274
00:20:21,750 --> 00:20:25,890
ее справа здесь, а затем я бы

275
00:20:25,890 --> 00:20:35,090
сказал «col-md-10», чтобы это заняло оставшиеся 10 столбцов там.

276
00:20:35,090 --> 00:20:37,310
И затем внутри этих div,

277
00:20:37,310 --> 00:20:40,045
я собираюсь добавить туда кнопку.

278
00:20:40,045 --> 00:20:45,020
Таким образом, когда вы добавляете кнопку в свою форму,

279
00:20:45,020 --> 00:20:50,190
используйте тег кнопки здесь с типом submit.

280
00:20:50,190 --> 00:20:56,440
Итак, это кнопка отправки для вашей формы там и класса.

281
00:20:56,440 --> 00:21:02,890
Помните классы кнопок, кнопка первичная,

282
00:21:02,890 --> 00:21:07,890
так что это создаст темно-синюю кнопку в вашей форме, а

283
00:21:07,890 --> 00:21:15,110
затем закроет кнопку там,

284
00:21:15,110 --> 00:21:19,805
а затем я просто войду и внутри кнопки,

285
00:21:19,805 --> 00:21:28,725
я дам имя как «Отправить отзыв», а затем сохраню изменения.

286
00:21:28,725 --> 00:21:31,295
Теперь наша форма заполнена.

287
00:21:31,295 --> 00:21:36,600
Итак, давайте взглянем на окончательный вариант нашей формы.

288
00:21:36,600 --> 00:21:38,660
Перейдя на нашу веб-страницу,

289
00:21:38,660 --> 00:21:40,875
вы можете увидеть заполненную форму.

290
00:21:40,875 --> 00:21:43,135
Все эти поля мы уже видели,

291
00:21:43,135 --> 00:21:46,610
кнопка внизу с надписью «Отправить

292
00:21:46,610 --> 00:21:51,265
отзыв» и темно-синяя кнопка из-за использования кнопки «первичный».

293
00:21:51,265 --> 00:21:58,870
Таким образом, это завершает форму, которую мы хотели создать на нашей веб-странице.

294
00:21:58,870 --> 00:22:02,380
С этим мы завершаем это упражнение,

295
00:22:02,380 --> 00:22:07,135
где мы видели, как мы можем построить форму и включить ее в нашу веб-страницу.

296
00:22:07,135 --> 00:22:10,130
Вы будете работать с формами в некоторых из

297
00:22:10,130 --> 00:22:13,720
последующих упражнений, включая ваше второе задание.

298
00:22:13,720 --> 00:22:19,310
Это хорошее время для вас, чтобы сделать хороший комментарий с формами сообщений.