1
00:00:03,250 --> 00:00:07,810
Nun, da wir gesehen haben, wie man Schaltflächen zu unserer Webseite hinzufügen.

2
00:00:07,810 --> 00:00:12,560
In dieser Übung werden wir uns Formulare ansehen und wie wir Formulare zu

3
00:00:12,560 --> 00:00:19,220
unserer Webseite hinzufügen und diese Formularelemente auch mit den Bootstrap-Klassen formatieren können.

4
00:00:19,220 --> 00:00:23,065
Gehen Sie zurück zur Seite contactus.html,

5
00:00:23,065 --> 00:00:28,215
scrollen Sie nach unten, bis Sie diesen Kommentar dort namens „Formular geht hier“ sehen.

6
00:00:28,215 --> 00:00:32,990
Wir werden dies durch das Formular in dieser Webseite ersetzen.

7
00:00:32,990 --> 00:00:35,715
Also, lassen Sie uns das löschen und dann

8
00:00:35,715 --> 00:00:39,945
das Formular an dieser bestimmten Stelle innerhalb des div dort konstruieren.

9
00:00:39,945 --> 00:00:41,855
Um mit dem Formular

10
00:00:41,855 --> 00:00:50,585
zu beginnen, werde ich das Formular HTML-Tag verwenden und das Formular innerhalb dieses HTML-Tags erstellen.

11
00:00:50,585 --> 00:00:52,960
Also, innerhalb dieses Formular-Tags,

12
00:00:52,960 --> 00:00:57,925
lassen Sie uns die Radiuselemente unseres Formulars hinzufügen.

13
00:00:57,925 --> 00:01:00,195
Also, in dieser Form

14
00:01:00,195 --> 00:01:04,405
werde ich diese Form in mehrere Reihen aufteilen.

15
00:01:04,405 --> 00:01:06,780
Um Ihr Formular in Zeilen zu unterteilen,

16
00:01:06,780 --> 00:01:17,020
können Sie einfach ein div mit der class = „form-group“ verwenden und dann die Zeilenklasse darauf anwenden.

17
00:01:20,370 --> 00:01:26,540
Also, damit werden wir hier in zwei Formulargruppen hinzufügen.

18
00:01:26,540 --> 00:01:29,795
Ich werde das kopieren und es dann unten hier unten einfügen.

19
00:01:29,795 --> 00:01:34,055
Sie können also sehen, dass ich diesem Formular hier zwei Zeilen hinzufügen werde.

20
00:01:34,055 --> 00:01:36,690
Also, um ein Element in dieses Formular hinzuzufügen,

21
00:01:36,690 --> 00:01:44,330
gehen wir zu diesem div und dann werde ich anfangen, indem ich hier ein Label-Tag verwende.

22
00:01:44,330 --> 00:01:46,550
Und für die Label-Tags,

23
00:01:46,550 --> 00:01:48,460
also werde ich zwei Zeilen haben;

24
00:01:48,460 --> 00:01:51,270
eine, die dem Benutzer erlaubt, ihren Vornamen einzugeben,

25
00:01:51,270 --> 00:01:53,470
und die zweite für ihren Nachnamen.

26
00:01:53,470 --> 00:02:01,530
Also, hier werden wir dieses Label verwenden, um die Klasse dort anzugeben.

27
00:02:01,530 --> 00:02:09,080
Nun, Darüber hinaus, Bootstrap ermöglicht es uns, das Bootstrap-Raster

28
00:02:09,080 --> 00:02:19,300
zu verwenden, um anzugeben, wie diese Formulare werden angelegt werden, so dass ich die col-md-2 anwenden.

29
00:02:19,300 --> 00:02:27,720
Sie können sehen, dass ich die md-2-Spaltenklassen auf dieses bestimmte Element angewendet habe.

30
00:02:27,720 --> 00:02:31,360
Also, dieses Element im Formular wird zwei Spalten besetzen.

31
00:02:31,360 --> 00:02:33,465
Also, innerhalb dieses Formularelements,

32
00:02:33,465 --> 00:02:37,950
haben wir jede Zeile in 12 Spalten unterteilt.

33
00:02:37,950 --> 00:02:40,940
Also, weil wir bereits die Zeile für das div verwendet haben,

34
00:02:40,940 --> 00:02:45,030
so dass wir dort 12 Spalten innerhalb des div zur Verfügung stellen.

35
00:02:45,030 --> 00:02:52,560
Darüber hinaus muss ich das Klassencol-Formularlabel darauf anwenden.

36
00:02:52,560 --> 00:02:56,905
So kann ich hier ein Label angeben.

37
00:02:56,905 --> 00:02:58,395
Also, für dieses Etikett

38
00:02:58,395 --> 00:03:07,070
werde ich das Etikett als Vornamen ausfüllen und dann das Etiketten-Tag schließen.

39
00:03:07,070 --> 00:03:10,485
Dieses Label-Tag erlaubt mir, ein Label zu geben,

40
00:03:10,485 --> 00:03:14,150
das zwei linke Spalten in dieser bestimmten Zeile besetzt.

41
00:03:14,150 --> 00:03:22,740
Auf der rechten Seite werde ich ein anderes div verwenden, das die Klasse als col-md-10 angewendet hat.

42
00:03:22,740 --> 00:03:28,420
Beachten Sie, dass das frühere Etikett dort die col-md-2 verwendet hat.

43
00:03:28,420 --> 00:03:29,665
Also, für dieses div,

44
00:03:29,665 --> 00:03:32,755
werde ich die col-md-10 dort anwenden.

45
00:03:32,755 --> 00:03:35,120
Und dann

46
00:03:35,120 --> 00:03:38,700
werde ich in diesem div ein Eingabeelement anwenden,

47
00:03:38,700 --> 00:03:42,750
das vom Typ Text ist.

48
00:03:42,750 --> 00:03:46,770
Also, wenn Sie mit den Formularen aus HTML vertraut sind,

49
00:03:46,770 --> 00:03:50,460
werden Sie sehen, dass wir die Formularelemente aus HTML verwenden, um

50
00:03:50,460 --> 00:03:55,910
dieses Formular hier zu erstellen, so dass das Eingabefeld hier vom Typ Text ist.

51
00:03:55,910 --> 00:04:00,410
Nun, hier werden wir die Bootstrap-Klassen darauf anwenden

52
00:04:00,410 --> 00:04:05,500
und die entsprechende Bootstrap-Klasse dafür

53
00:04:05,500 --> 00:04:10,710
ist Formularsteuerung und dann kann ich

54
00:04:10,710 --> 00:04:16,165
eine ID dafür als Vorname angeben.

55
00:04:16,165 --> 00:04:21,260
Beachten Sie also, dass diese ID mit diesem Label für div übereinstimmt.

56
00:04:21,260 --> 00:04:26,625
Also, Vorname, und dann Name als

57
00:04:26,625 --> 00:04:30,735
Vorname und auch ich werde

58
00:04:30,735 --> 00:04:37,190
einen Platzhalter dafür angeben, so lassen Sie mich die nächste Zeile hier verwenden,

59
00:04:37,940 --> 00:04:46,890
Platzhalter als, ich bin sicher, aus Ihrem Wissen über HTML,

60
00:04:46,890 --> 00:04:52,020
Sie verstehen, wie diese Spezifikation hier gemacht wird.

61
00:04:52,020 --> 00:04:59,355
Damit haben wir nun unser erstes Formularelement in unserer Form erstellt.

62
00:04:59,355 --> 00:05:03,170
Werfen wir einen kurzen Blick auf die Webseite. Wenn Sie

63
00:05:03,170 --> 00:05:08,310
auf unsere Webseite gehen, können Sie nun sehen, wie das Hinzufügen in den Formularelementen

64
00:05:08,310 --> 00:05:14,515
dieses Eingabetextfeld und das Label auf der linken Seite erstellt hat.

65
00:05:14,515 --> 00:05:18,105
Jetzt werde ich eine weitere Zeile mit dem Nachnamen hinzufügen.

66
00:05:18,105 --> 00:05:23,150
Gehen Sie zurück zu meiner contactus.html,

67
00:05:23,150 --> 00:05:29,215
lassen Sie mich einfach diesen Teil kopieren und fügen Sie ihn dann in das zweite div ein

68
00:05:29,215 --> 00:05:32,875
und gehen Sie dann hinein und bearbeiten Sie das.

69
00:05:32,875 --> 00:05:39,890
Vom Vornamen ändere ich das in Nachname.

70
00:05:39,890 --> 00:05:45,090
Stellen Sie sicher, dass Sie alle Änderungen korrekt abgeschlossen haben.

71
00:05:45,550 --> 00:05:49,470
Selbst eine fehlende falsche Bearbeitung,

72
00:05:49,470 --> 00:05:53,210
wird dazu führen, dass Ihr Formular nicht richtig funktioniert, so stellen Sie sicher, dass

73
00:05:53,210 --> 00:05:58,220
alle Vornamen Dinge hier durch meinen Nachnamen ersetzt werden.

74
00:05:58,220 --> 00:05:59,795
Also, der Nachname,

75
00:05:59,795 --> 00:06:02,640
md-10 Textformular-Steuerelement.

76
00:06:02,640 --> 00:06:11,510
Die ID hier sollte Nachname sein und der Name

77
00:06:11,510 --> 00:06:14,945
sollte auch Nachname und der Platzhalter

78
00:06:14,945 --> 00:06:21,030
wieder der Nachname sein, so dass dies in einer zweiten Zeile mit dem Nachnamen hinzufügen sollte.

79
00:06:21,030 --> 00:06:22,530
Gehen Sie zu Ihrer Webseite,

80
00:06:22,530 --> 00:06:24,000
können Sie sehen, jetzt das Formular

81
00:06:24,000 --> 00:06:28,150
langsam in Form, so dass Sie den Vornamen und Nachnamen haben.

82
00:06:28,150 --> 00:06:33,790
Jetzt können wir als nächstes in einem Eingabeelement hinzufügen.

83
00:06:33,790 --> 00:06:38,260
Wir werden sehen, wie das funktioniert, wenn wir den Code hinzufügen. Wenn wir

84
00:06:38,260 --> 00:06:41,989
nun zum nächsten Teil der Übung wechseln,

85
00:06:41,989 --> 00:06:46,220
fügen wir hier zwei weitere Felder in

86
00:06:46,220 --> 00:06:51,690
unser Formular ein, um die Telefonnummer und die E-Mail-ID einzugeben.

87
00:06:51,690 --> 00:06:54,870
Da die grundlegende Struktur des Codes dem

88
00:06:54,870 --> 00:06:58,610
Vornamen und dem Nachnamen ähnlich ist, den Sie bereits dem Formular hinzugefügt haben,

89
00:06:58,610 --> 00:07:02,370
also werde ich nur den Code aus dem Vornamen und

90
00:07:02,370 --> 00:07:08,000
dem Nachnamen kopieren und ihn dann hier einfügen und dann den Code entsprechend ändern.

91
00:07:08,000 --> 00:07:11,910
Also, ich habe den Code aus dem Vornamen und dem Nachnamen hier eingefügt.

92
00:07:11,910 --> 00:07:17,080
Lassen Sie uns fortfahren und ändern Sie dies nun, um es in Felder zu verwandeln,

93
00:07:17,080 --> 00:07:22,745
die es dem Benutzer ermöglichen, die Telefonnummer und die E-Mail-ID einzugeben.

94
00:07:22,745 --> 00:07:24,420
Also, für die Telefonnummer,

95
00:07:24,420 --> 00:07:28,200
also hier haben wir bereits den Vornamen und den Nachnamen oben.

96
00:07:28,200 --> 00:07:34,380
Also, die dritte, werde ich das ändern, um für „Telnum“ zu beschriften.

97
00:07:34,380 --> 00:07:38,745
Also, das ist von der Telefonnummer und dann den Klassen,

98
00:07:38,745 --> 00:07:44,790
ich werde eine col-12-Klasse auf dieses Sprichwort anwenden, dass dieses Etikett in

99
00:07:44,790 --> 00:07:52,795
seiner eigenen Zeichnung sein wird, wenn das Formular auf extra kleinen bis kleinen Bildschirmgrößen angezeigt wird.

100
00:07:52,795 --> 00:07:55,660
Und dann, für mittlere bis höhere Bildschirmgröße,

101
00:07:55,660 --> 00:07:59,945
würde dies in zwei Spalten

102
00:07:59,945 --> 00:08:04,655
dieser bestimmten Zeile hier angezeigt werden, so dass die Änderung, die wir dort vornehmen werden.

103
00:08:04,655 --> 00:08:06,875
Und dann auch, das Etikett selbst,

104
00:08:06,875 --> 00:08:14,860
lassen Sie mich ändern, dass Telefonnummer kontaktieren, kontaktieren Sie Tel.

105
00:08:15,230 --> 00:08:18,915
Nun, die Telefonnummer selbst,

106
00:08:18,915 --> 00:08:22,600
lassen wir den Benutzer es als zwei Teile eingeben; eine,

107
00:08:22,600 --> 00:08:25,485
die ist die Vorwahl und die zweite,

108
00:08:25,485 --> 00:08:28,225
die die tatsächliche Telefonnummer wäre.

109
00:08:28,225 --> 00:08:31,120
Also, ich werde diesen Teil des Codes nehmen, der

110
00:08:31,120 --> 00:08:34,640
das Eingabefeld war, das wir für

111
00:08:34,640 --> 00:08:40,315
den Vornamen hatten, und dann einen weiteren unten hier unten erstellen,

112
00:08:40,315 --> 00:08:44,190
den ich für die Telefonnummer selbst verwenden werde.

113
00:08:44,190 --> 00:08:50,560
Und jetzt werden wir diesen ersten in das Feld für die Eingabe der Vorwahl verwandeln.

114
00:08:50,560 --> 00:08:52,540
Sie können es auch zum Beispiel

115
00:08:52,540 --> 00:08:57,220
für Ländercode verwenden, wenn Sie das in das Formular einfügen möchten.

116
00:08:57,220 --> 00:09:00,190
Also, für die Vorwahl selbst,

117
00:09:00,190 --> 00:09:02,520
werde ich mich für das div bewerben,

118
00:09:02,520 --> 00:09:09,105
die Klasse = „col-5 col-md-3 hier“.

119
00:09:09,105 --> 00:09:13,410
Beachten Sie also, dass

120
00:09:13,410 --> 00:09:16,805
wir für den mittleren Bildschirm zwei Spalten haben, die von der Beschriftung besetzt sind,

121
00:09:16,805 --> 00:09:20,630
drei Spalten, die von der Ortskennzahl selbst besetzt sind, und

122
00:09:20,630 --> 00:09:25,385
die restlichen sieben Spalten werde ich es dem Textfeld hier geben.

123
00:09:25,385 --> 00:09:29,650
Also, ähnlich, für die Vorwahl sage ich Col fünf.

124
00:09:29,650 --> 00:09:32,680
Also, für extra kleine bis kleine Bildschirme wird dies

125
00:09:32,680 --> 00:09:37,520
fünf Spalten besetzen und dann für die restlichen sieben Spalten,

126
00:09:37,520 --> 00:09:42,640
lassen wir die Telefonnummer selbst besetzen.

127
00:09:42,640 --> 00:09:48,510
Also, lassen Sie mich das nächste zu col-7 und col-md-7 hier ändern.

128
00:09:49,540 --> 00:09:54,365
Nun, dieses Feld werde ich dies in tel ändern,

129
00:09:54,365 --> 00:09:58,965
Eingabetyp tel für Telefonnummer und die Klasse ist Formular-Steuerelement,

130
00:09:58,965 --> 00:10:08,830
die ID ist Vorwahl und der Name ist Vorwahl und dann der Platzhalter,

131
00:10:08,830 --> 00:10:12,415
ich werde dies in Ortskennzahl ändern.

132
00:10:12,415 --> 00:10:14,215
Und der nächste Teil,

133
00:10:14,215 --> 00:10:21,885
wir werden diesen auch Typ tel ändern und ID ist telnum,

134
00:10:21,885 --> 00:10:28,060
der Name ist telnum und der Platzhalter,

135
00:10:28,060 --> 00:10:34,830
selbst, wäre tel Nummer.

136
00:10:34,830 --> 00:10:40,975
Dies wird also das Rufnummernfeld bilden,

137
00:10:40,975 --> 00:10:42,840
das als zwei Teile eingegeben wird:

138
00:10:42,840 --> 00:10:45,160
die Vorwahl und die Telefonnummer.

139
00:10:45,160 --> 00:10:47,180
Wir verwenden also wieder

140
00:10:47,180 --> 00:10:51,540
die Spaltenklassen, um zu strukturieren, wie

141
00:10:51,540 --> 00:10:57,260
die beiden Teile des Eingabefeldes in der Form dort angezeigt werden.

142
00:10:57,260 --> 00:10:59,490
Nun die letzte, natürlich,

143
00:10:59,490 --> 00:11:02,940
dies wäre für E-Mail-ID so das Etikett,

144
00:11:02,940 --> 00:11:08,595
Ich verwandle das in E-Mail-ID und dann

145
00:11:08,595 --> 00:11:14,345
ist das Etikett selbst E-Mail und Eingabetyp ist E-Mail.

146
00:11:14,345 --> 00:11:16,575
Nun ändern wir den Typ in E-Mail,

147
00:11:16,575 --> 00:11:22,060
die in HTML erlaubt ist, so dass später, wenn wir eine Formularvalidierung durchführen müssen,

148
00:11:22,060 --> 00:11:24,040
dann wissen wir, dass dieses Feld

149
00:11:24,040 --> 00:11:28,730
nur einen E-Mail-Typ von Eintrag dort enthalten sollte, und die ID,

150
00:11:28,730 --> 00:11:37,490
selbst, E-Mail-ID und den Namen E-Mail-ID und den Platzhalter.

151
00:11:38,600 --> 00:11:42,295
E-Mail. Das war's.

152
00:11:42,295 --> 00:11:47,335
Lassen Sie uns die Änderungen speichern und gehen und werfen Sie einen Blick auf das aktualisierte Formular. Wenn Sie

153
00:11:47,335 --> 00:11:49,820
zum Formular im Browser gehen,

154
00:11:49,820 --> 00:11:54,030
sehen Sie nun zwei zusätzliche Zeilen in unser Formular eingefügt.

155
00:11:54,030 --> 00:11:57,030
Der Vorname und der Nachname werden im vorherigen Teil der Übung hinzugefügt.

156
00:11:57,030 --> 00:11:59,050
Also, hier haben wir die Kontakt-Telefonnummer,

157
00:11:59,050 --> 00:12:01,805
die in die Vorwahl und Telefonnummer unterteilt ist.

158
00:12:01,805 --> 00:12:06,515
Beachten Sie, wie wir die Spaltenklassen verwendet haben, um diese beiden

159
00:12:06,515 --> 00:12:11,650
im Formular selbst zu positionieren und dann das E-Mail-Feld hier.

160
00:12:11,650 --> 00:12:15,775
Werfen wir einen Blick auf die gleiche Sache auf einer extra kleinen Bildschirmgröße.

161
00:12:15,775 --> 00:12:18,465
Wenn Sie also zu einer extra kleinen Bildschirmgröße gehen,

162
00:12:18,465 --> 00:12:20,800
werden Sie feststellen, wie das Formular selbst ausgelegt ist.

163
00:12:20,800 --> 00:12:24,690
Sie sehen, dass sich die Beschriftung oben und dann das Feld selbst unten befindet.

164
00:12:24,690 --> 00:12:26,055
Also Vorname, Nachname.

165
00:12:26,055 --> 00:12:28,605
Beachten Sie, wie die

166
00:12:28,605 --> 00:12:33,160
Eingabefelder der Kontakt-Telefonnummer unter Verwendung der Spaltenklassen positioniert

167
00:12:33,160 --> 00:12:34,855
werden, also

168
00:12:34,855 --> 00:12:36,085
die Ortsvorwahl hier, die Telefonnummer

169
00:12:36,085 --> 00:12:38,410
und dann die E-Mail-ID hier.

170
00:12:38,410 --> 00:12:41,630
Jetzt fahren wir mit der Übung fort.

171
00:12:41,630 --> 00:12:44,145
Weiter im nächsten Schritt,

172
00:12:44,145 --> 00:12:49,680
werden wir in einem Kontrollkästchen hinzufügen und dann werden wir in einem ausgewählten zwei oder vier hinzufügen.

173
00:12:49,680 --> 00:12:51,680
Um ein Kontrollkästchen hinzuzufügen,

174
00:12:51,680 --> 00:12:57,590
kopieren wir einfach diese Formulargruppe hier, so dass wir es als eine weitere Zeile hier hinzufügen,

175
00:12:57,590 --> 00:13:01,595
und fügen Sie dann in der Formulargruppe div hier,

176
00:13:01,595 --> 00:13:04,970
und schließen Sie dann das div hier.

177
00:13:04,970 --> 00:13:08,860
Und dann innerhalb dieser Form Gruppe Zeile,

178
00:13:08,860 --> 00:13:13,330
so gibt es uns eine weitere Zeile in der Form.

179
00:13:13,330 --> 00:13:16,120
Lassen Sie mich in dieser Formulargruppenzeile zuerst das Kontrollkästchen hinzufügen.

180
00:13:16,120 --> 00:13:22,655
Um dies zu tun, fügen wir ein div mit der class = „col-md-6" hinzu,

181
00:13:22,655 --> 00:13:26,610
so dass Sie sehen, dass dies

182
00:13:26,610 --> 00:13:31,695
sechs Spalten in der mittleren bis extragroßen Bildschirmgröße belegen

183
00:13:31,695 --> 00:13:36,800
wird und dann offset-md-2, so dass dies es

184
00:13:36,800 --> 00:13:43,850
nach rechts um zwei Spalten versetzt und dann das Kontrollkästchen dort angezeigt wird.

185
00:13:43,850 --> 00:13:48,490
Nun, hier, um ein Kontrollkästchen hinzuzufügen,

186
00:13:48,490 --> 00:13:58,170
sagen wir div mit der class = „form-check“ und

187
00:13:58,170 --> 00:14:07,200
in dieser Form-check-Klasse fügen wir einen Eingabetyp = „checkbox“

188
00:14:07,200 --> 00:14:17,990
und die class = „form-check-input“ hinzu und lassen Sie mich dann zur nächsten Zeile gehen und dann

189
00:14:17,990 --> 00:14:24,400
name = „approve“ und die

190
00:14:24,400 --> 00:14:32,560
ID = „approve“ und der Wert ist dort eine leere Zeichenfolge.

191
00:14:32,560 --> 00:14:35,360
Und zu diesem Kontrollkästchen

192
00:14:35,360 --> 00:14:36,735
fügen wir ein Label hinzu.

193
00:14:36,735 --> 00:14:38,380
Also, um ein Label hinzuzufügen,

194
00:14:38,380 --> 00:14:41,940
gehen wir und fügen in label

195
00:14:41,940 --> 00:14:50,885
class = „form-check-label“ hinzu und dann

196
00:14:50,885 --> 00:14:53,775
ist dieses Label für dieses Kontrollkästchen, das wir gerade hinzugefügt haben.

197
00:14:53,775 --> 00:15:00,270
Also, deshalb werden wir sagen für = „genehmigen“, so beachten Sie, dass

198
00:15:00,270 --> 00:15:03,635
wir für das Kontrollkästchen den Namen und die ID als genehmigen angegeben hatten, deshalb

199
00:15:03,635 --> 00:15:07,090
werden wir hier für das Etikett für genehmigen gespeichert.

200
00:15:07,090 --> 00:15:09,560
Und dann innerhalb dieses Labels

201
00:15:09,560 --> 00:15:19,250
geben wir den Inhalt als „Dürfen wir uns mit Ihnen in Verbindung setzen?“

202
00:15:19,250 --> 00:15:24,240
Und dann speichern Sie die Änderungen und lassen Sie uns gehen und werfen einen Blick auf unser Formular.

203
00:15:24,240 --> 00:15:25,810
Gehen Sie auf die Webseite,

204
00:15:25,810 --> 00:15:30,970
können Sie jetzt sehen, dass wir in einem Kontrollkästchen zusammen mit einem Label hier hinzugefügt haben und feststellen

205
00:15:30,970 --> 00:15:36,685
, dass dieses Label wegen der Verwendung des „starken“ Tags dort fett ist,

206
00:15:36,685 --> 00:15:40,270
und wir haben offset-md-2.

207
00:15:40,270 --> 00:15:42,850
Deshalb drücken wir dieses Kontrollkästchen den ganzen Weg hierher.

208
00:15:42,850 --> 00:15:46,750
Dies hat hier kein Label, aber stattdessen wird dies direkt hier geschoben,

209
00:15:46,750 --> 00:15:50,765
also ist das der Grund für die Verwendung von offset-md-2 hier,

210
00:15:50,765 --> 00:15:56,980
und dieser nimmt md-6 also sechs Spalten hier ein. Damit

211
00:15:56,980 --> 00:15:59,180
sind wir noch nicht fertig.

212
00:15:59,180 --> 00:16:03,075
Ich werde hier im nächsten Teil hinzufügen,

213
00:16:03,075 --> 00:16:06,995
der dort ein Auswahlfeld ist.

214
00:16:06,995 --> 00:16:11,230
Also werde ich hier ein weiteres div mit

215
00:16:11,230 --> 00:16:20,475
der class = „col-md-3 offset-md-1" anwenden.

216
00:16:20,475 --> 00:16:23,375
Und in diesem div

217
00:16:23,375 --> 00:16:27,160
werde ich eine Auswahl definieren.

218
00:16:27,160 --> 00:16:30,590
Also, wieder, aus Ihrem Wissen über HTML,

219
00:16:30,590 --> 00:16:33,260
wissen Sie, was eine Auswahl für Sie tut.

220
00:16:33,260 --> 00:16:36,635
Jetzt wird die Auswahl

221
00:16:36,635 --> 00:16:45,920
das Klassenformular-Steuerelement anwenden, also ist dies Bootstrap-Klasse, die ich auf die Auswahl hier anwende,

222
00:16:46,130 --> 00:16:49,245
und schließen Sie die Auswahl.

223
00:16:49,245 --> 00:16:53,745
Und hier drin muss ich die Optionen für die Auswahl geben.

224
00:16:53,745 --> 00:16:57,500
Also, ich benutze eine einfache Auswahl hier,

225
00:16:57,500 --> 00:17:02,570
und so ist die erste eine Option

226
00:17:02,570 --> 00:17:09,060
für Telefon oder E-Mail und schließen Sie die Option.

227
00:17:09,060 --> 00:17:13,735
So erstellt dies ein Auswahlelement in meinem Formular,

228
00:17:13,735 --> 00:17:15,310
das zwei Optionen hat:

229
00:17:15,310 --> 00:17:17,080
Telefon und E-Mail,

230
00:17:17,080 --> 00:17:18,505
also speichern wir die Änderungen. Wenn Sie

231
00:17:18,505 --> 00:17:20,180
einen Blick auf unsere Webseite werfen,

232
00:17:20,180 --> 00:17:26,960
können Sie jetzt sehen, wie die Telefon- und E-Mail-Auswahlbox jetzt hier erstellt wird, so dass

233
00:17:26,960 --> 00:17:34,025
ich auswählen kann, welche zu tun ist, und dann können Sie auch das Kontrollkästchen so aktivieren.

234
00:17:34,025 --> 00:17:36,730
Also, das beendet die nächste Zeile.

235
00:17:36,730 --> 00:17:39,040
Lassen Sie uns eine weitere Zeile hinzufügen,

236
00:17:39,040 --> 00:17:42,960
die es dem Benutzer ermöglicht, sein Feedback tatsächlich einzugeben.

237
00:17:42,960 --> 00:17:47,535
Also, ich werde einen Textbereich verwenden, um das zu formatieren.

238
00:17:47,535 --> 00:17:51,615
Für den nächsten werde ich einen Textbereich verwenden.

239
00:17:51,615 --> 00:17:58,840
Also, was ich tun werde, ist, ich gehe einfach nach oben und kopiere diesen E-Mail-Teil davon.

240
00:17:58,840 --> 00:18:02,115
Ich bin zu faul, um ständig alles einzutippen.

241
00:18:02,115 --> 00:18:06,950
Also neige ich dazu, ausschneiden und einfügen, wo immer möglich, aber für diesen

242
00:18:06,950 --> 00:18:15,670
sollte das Etikett Feedback und die Spaltenformularbeschriftung sein,

243
00:18:15,670 --> 00:18:24,575
und dann ist der eigentliche Text „Ihr Feedback hier“.

244
00:18:24,575 --> 00:18:26,450
Das ist also das Etikett.

245
00:18:26,450 --> 00:18:28,795
Und dann, hier, der zweite,

246
00:18:28,795 --> 00:18:32,530
werde ich diesen formatieren.

247
00:18:32,530 --> 00:18:34,140
Anstelle des Eingabetyps

248
00:18:34,140 --> 00:18:39,085
werde ich das in einen Textbereich ändern,

249
00:18:39,085 --> 00:18:42,815
und dann brauche ich den Typ dort nicht.

250
00:18:42,815 --> 00:18:51,400
Textbereich, ist die Klasse immer noch Formular-Steuerelement und die ID ist Feedback.

251
00:18:51,400 --> 00:18:58,890
Name ist Feedback und der Platzhalter wird

252
00:18:58,890 --> 00:19:02,880
hier nicht benötigt und stattdessen ändern, wie viele Zeilen ich

253
00:19:02,880 --> 00:19:06,890
aus dem Feedback für den Textbereich geben möchte?

254
00:19:06,890 --> 00:19:10,340
Also werde ich 12 Zeilen sagen und dann Text schließen.

255
00:19:10,340 --> 00:19:15,215
Beachten Sie also, wie ich den Textbereich in mein Formular aufgenommen habe.

256
00:19:15,215 --> 00:19:16,680
Speichern Sie die Änderungen.

257
00:19:16,680 --> 00:19:19,560
Werfen Sie einen Blick. Wenn du auf meine Webseite gehst,

258
00:19:19,560 --> 00:19:23,910
siehst du jetzt meine Form, die hier seine vollständige Form annimmt.

259
00:19:23,910 --> 00:19:25,470
Sie haben

260
00:19:25,470 --> 00:19:28,050
dort den Vornamen, Nachnamen, Telefon, E-Mail und dann das Feedback.

261
00:19:28,050 --> 00:19:30,720
Der Textbereich mit 12 Zeilen.

262
00:19:30,720 --> 00:19:36,080
Jetzt benötigen Sie eine Schaltfläche, auf die der Benutzer klicken sollte, um sein Feedback abzugeben.

263
00:19:36,080 --> 00:19:40,715
Also, lassen Sie in eine Senden-Schaltfläche zu diesem Formular hinzufügen.

264
00:19:40,715 --> 00:19:44,030
Gehen Sie wieder zum Formular zurück,

265
00:19:44,030 --> 00:19:47,195
erstellen Sie hier eine weitere Zeile, indem Sie

266
00:19:47,195 --> 00:19:55,715
das div hier mit der

267
00:19:55,715 --> 00:19:59,405
Formulargruppenzeile hier verwenden, und hier werde ich eine Schaltfläche hinzufügen.

268
00:19:59,405 --> 00:20:02,300
Also, ich würde sagen, div

269
00:20:02,340 --> 00:20:10,500
class = „offset-md-2", weil ich möchte, dass meine Schaltfläche

270
00:20:10,500 --> 00:20:13,880
direkt unter all den Feldern positioniert wird, die ich

271
00:20:13,880 --> 00:20:17,850
hier habe, so dass die linken beiden Spalten für das Label verwendet werden.

272
00:20:17,850 --> 00:20:21,750
Der Submit-Button benötigt also kein Label, also werde ich

273
00:20:21,750 --> 00:20:25,890
es hier einfach nach rechts drücken und dann würde ich

274
00:20:25,890 --> 00:20:35,090
„col-md-10" sagen, damit dies die restlichen 10 Spalten dort belegen würde.

275
00:20:35,090 --> 00:20:37,310
Und dann in diesen div

276
00:20:37,310 --> 00:20:40,045
werde ich dort eine Schaltfläche hinzufügen.

277
00:20:40,045 --> 00:20:45,020
Also, wenn Sie eine Schaltfläche zu Ihrem Formular hinzufügen,

278
00:20:45,020 --> 00:20:50,190
verwenden Sie die Schaltfläche Tag hier mit einem Typ senden.

279
00:20:50,190 --> 00:20:56,440
Also, dies ist die Absende-Button für Ihr Formular dort und Ihre Klasse.

280
00:20:56,440 --> 00:21:02,890
Denken Sie daran, Tastenklassen, Taste primäre,

281
00:21:02,890 --> 00:21:07,890
so würde dies eine dunkelblaue Schaltfläche in Ihrem Formular erstellen und

282
00:21:07,890 --> 00:21:15,110
dann schließen Sie die Schaltfläche dort,

283
00:21:15,110 --> 00:21:19,805
und dann werde ich einfach in und innerhalb der Schaltfläche gehen,

284
00:21:19,805 --> 00:21:28,725
Ich werde den Namen als „Feedback senden“ geben und dann die Änderungen speichern.

285
00:21:28,725 --> 00:21:31,295
Nun, unser Formular ist vollständig.

286
00:21:31,295 --> 00:21:36,600
Lassen Sie uns also einen Blick auf die endgültige Version unseres Formulars werfen.

287
00:21:36,600 --> 00:21:38,660
Gehen Sie auf unsere Webseite,

288
00:21:38,660 --> 00:21:40,875
können Sie jetzt sehen, das Formular ausgefüllt.

289
00:21:40,875 --> 00:21:43,135
All diese Felder haben wir bereits gesehen,

290
00:21:43,135 --> 00:21:46,610
die Schaltfläche am unteren Rand mit der Formulierung „

291
00:21:46,610 --> 00:21:51,265
Feedback senden“ und die dunkelblaue Schaltfläche wegen der Verwendung der Schaltfläche „primär“.

292
00:21:51,265 --> 00:21:58,870
Damit wird das Formular ausgefüllt, das wir auf unserer Webseite erstellen wollten.

293
00:21:58,870 --> 00:22:02,380
Damit schließen wir diese Übung ab,

294
00:22:02,380 --> 00:22:07,135
in der wir gesehen haben, wie wir ein Formular konstruieren und es in unsere Webseite aufnehmen können.

295
00:22:07,135 --> 00:22:10,130
Sie arbeiten mit Formularen in einigen

296
00:22:10,130 --> 00:22:13,720
der späteren Übungen, einschließlich Ihrer zweiten Aufgabe.

297
00:22:13,720 --> 00:22:19,310
Dies ist ein guter Zeitpunkt für Sie, einen guten Kommentar mit den Nachrichtenformularen zu machen.