1
00:00:03,250 --> 00:00:07,810
Maintenant que nous avons vu comment ajouter des boutons à notre page Web.

2
00:00:07,810 --> 00:00:12,560
Dans cet exercice, nous allons examiner les formulaires et comment nous pouvons ajouter des formulaires à

3
00:00:12,560 --> 00:00:19,220
notre page Web et également styliser ces éléments de formulaire en utilisant les classes Bootstrap.

4
00:00:19,220 --> 00:00:23,065
Pour revenir à la page contactus.html,

5
00:00:23,065 --> 00:00:28,215
faites défiler vers le bas jusqu'à ce que vous voyez ce commentaire appelé « Formulaire va ici ».

6
00:00:28,215 --> 00:00:32,990
Nous allons remplacer ceci par le formulaire de cette page web.

7
00:00:32,990 --> 00:00:35,715
Donc, supprimons cela et construisons

8
00:00:35,715 --> 00:00:39,945
le formulaire à cet emplacement particulier à l'intérieur de la div là-bas.

9
00:00:39,945 --> 00:00:41,855
Pour commencer avec le formulaire,

10
00:00:41,855 --> 00:00:50,585
je vais utiliser la balise HTML de formulaire et construire le formulaire dans cette balise HTML.

11
00:00:50,585 --> 00:00:52,960
Donc, dans cette balise de formulaire,

12
00:00:52,960 --> 00:00:57,925
ajoutons dans les éléments de rayon de notre formulaire.

13
00:00:57,925 --> 00:01:00,195
Donc, à l'intérieur de ce formulaire,

14
00:01:00,195 --> 00:01:04,405
je vais diviser ce formulaire en plusieurs rangées là-bas.

15
00:01:04,405 --> 00:01:06,780
Pour diviser votre formulaire en lignes,

16
00:01:06,780 --> 00:01:17,020
vous pouvez simplement utiliser un div avec la classe = « form-group », puis lui appliquer la classe de ligne.

17
00:01:20,370 --> 00:01:26,540
Donc, avec cela, nous allons ajouter dans deux groupes de formulaires ici.

18
00:01:26,540 --> 00:01:29,795
Je vais copier ceci et puis le coller ci-dessous ici.

19
00:01:29,795 --> 00:01:34,055
Donc, vous pouvez voir que je vais ajouter deux lignes à ce formulaire ici.

20
00:01:34,055 --> 00:01:36,690
Donc, pour ajouter un élément dans ce formulaire,

21
00:01:36,690 --> 00:01:44,330
nous allons à cette div et ensuite je vais commencer par utiliser une balise d'étiquette ici.

22
00:01:44,330 --> 00:01:46,550
Et pour les étiquettes d'étiquette,

23
00:01:46,550 --> 00:01:48,460
donc j'aurai deux lignes ;

24
00:01:48,460 --> 00:01:51,270
une permettant à l'utilisateur de remplir son prénom,

25
00:01:51,270 --> 00:01:53,470
et la seconde pour son nom de famille.

26
00:01:53,470 --> 00:02:01,530
Donc, c'est là que nous allons utiliser cette étiquette pour spécifier la classe là-bas.

27
00:02:01,530 --> 00:02:09,080
Maintenant, En outre, Bootstrap nous permet d'utiliser la grille Bootstrap

28
00:02:09,080 --> 00:02:19,300
pour spécifier comment ces formulaires vont être disposés annonce donc je vais appliquer le col-md-2.

29
00:02:19,300 --> 00:02:27,720
Vous pouvez voir que j'ai appliqué les classes de colonne md-2 à cet élément particulier.

30
00:02:27,720 --> 00:02:31,360
Donc, cet élément dans le formulaire occupera deux colonnes.

31
00:02:31,360 --> 00:02:33,465
Donc, à l'intérieur de cet élément de formulaire,

32
00:02:33,465 --> 00:02:37,950
nous avons divisé chaque ligne en 12 colonnes.

33
00:02:37,950 --> 00:02:40,940
Donc, parce que nous avons déjà utilisé la ligne pour la div,

34
00:02:40,940 --> 00:02:45,030
donc cela nous fournira 12 colonnes à l'intérieur de la div là-bas.

35
00:02:45,030 --> 00:02:52,560
En outre, je dois appliquer l'étiquette de formulaire de classe col à cela.

36
00:02:52,560 --> 00:02:56,905
Donc, c'est ce qui me permet de spécifier une étiquette ici.

37
00:02:56,905 --> 00:02:58,395
Donc, pour cette étiquette,

38
00:02:58,395 --> 00:03:07,070
je vais remplir l'étiquette comme prénom, puis fermer la balise étiquette étiquette.

39
00:03:07,070 --> 00:03:10,485
Donc, cette balise d'étiquette me permet de donner une étiquette,

40
00:03:10,485 --> 00:03:14,150
qui occupera deux colonnes de gauche dans cette ligne particulière.

41
00:03:14,150 --> 00:03:22,740
Du côté droit, je vais utiliser un autre div que la classe appliquée en tant que col-md-10.

42
00:03:22,740 --> 00:03:28,420
Notez que l'étiquette précédente utilisait le col-md-2 là.

43
00:03:28,420 --> 00:03:29,665
Donc, pour cette div,

44
00:03:29,665 --> 00:03:32,755
je vais appliquer le col-md-10 là-bas.

45
00:03:32,755 --> 00:03:35,120
Et puis à l'intérieur de cette div,

46
00:03:35,120 --> 00:03:38,700
je vais appliquer un élément d'entrée,

47
00:03:38,700 --> 00:03:42,750
qui est du texte de type.

48
00:03:42,750 --> 00:03:46,770
Donc, si vous êtes familier avec les formulaires à partir de HTML,

49
00:03:46,770 --> 00:03:50,460
vous verrez que nous utilisons les éléments de formulaire à partir de HTML pour

50
00:03:50,460 --> 00:03:55,910
créer ce formulaire ici donc la zone de saisie ici est du type texte.

51
00:03:55,910 --> 00:04:00,410
Maintenant, c'est là que nous allons appliquer les classes Bootstrap à cela

52
00:04:00,410 --> 00:04:05,500
et la classe Bootstrap correspondante pour cela

53
00:04:05,500 --> 00:04:10,710
est le contrôle de formulaire et ensuite je peux spécifier

54
00:04:10,710 --> 00:04:16,165
un ID pour cela comme prénom.

55
00:04:16,165 --> 00:04:21,260
Donc, notez que cet ID correspond à cette étiquette pour div.

56
00:04:21,260 --> 00:04:26,625
Donc, prénom, puis nom comme

57
00:04:26,625 --> 00:04:30,735
prénom et aussi je vais spécifier

58
00:04:30,735 --> 00:04:37,190
un espace réservé pour cela donc laissez-moi utiliser la ligne suivante ici,

59
00:04:37,940 --> 00:04:46,890
espace réservé car, je suis sûr que d'après votre connaissance du HTML,

60
00:04:46,890 --> 00:04:52,020
vous comprenez comment cette spécification est faite ici.

61
00:04:52,020 --> 00:04:59,355
Donc, avec cela, nous avons maintenant créé notre premier élément de forme dans notre forme.

62
00:04:59,355 --> 00:05:03,170
Jetons un coup d'oeil à la page web.

63
00:05:03,170 --> 00:05:08,310
Aller à notre page Web, vous pouvez maintenant voir comment l'ajout dans les éléments de formulaire a créé

64
00:05:08,310 --> 00:05:14,515
cette zone de texte d'entrée et l'étiquette sur le côté gauche.

65
00:05:14,515 --> 00:05:18,105
Maintenant, je vais ajouter une autre ligne avec le nom de famille.

66
00:05:18,105 --> 00:05:23,150
Pour revenir à mon contactus.html,

67
00:05:23,150 --> 00:05:29,215
laissez-moi simplement copier cette partie, puis collez-la dans la deuxième div ici,

68
00:05:29,215 --> 00:05:32,875
puis allez dans et éditez cela.

69
00:05:32,875 --> 00:05:39,890
Du prénom, je change ça en nom de famille.

70
00:05:39,890 --> 00:05:45,090
Assurez-vous d'effectuer toutes les modifications correctement.

71
00:05:45,550 --> 00:05:49,470
Même une modification incorrecte manquante,

72
00:05:49,470 --> 00:05:53,210
fera en sorte que votre formulaire ne fonctionne pas correctement, alors assurez-vous que

73
00:05:53,210 --> 00:05:58,220
toutes les choses de prénom ici sont remplacées par mon nom de famille.

74
00:05:58,220 --> 00:05:59,795
Donc, le nom de famille, le

75
00:05:59,795 --> 00:06:02,640
contrôle de formulaire de texte md-10.

76
00:06:02,640 --> 00:06:11,510
L' ID ici doit être le nom de famille et le nom doit également

77
00:06:11,510 --> 00:06:14,945
être le nom de famille et l'espace réservé

78
00:06:14,945 --> 00:06:21,030
à nouveau le nom de famille afin que cela puisse ajouter dans une deuxième ligne avec le nom de famille.

79
00:06:21,030 --> 00:06:22,530
Aller à votre page Web,

80
00:06:22,530 --> 00:06:24,000
vous pouvez voir maintenant le formulaire

81
00:06:24,000 --> 00:06:28,150
se mettre lentement en forme afin que vous ayez le prénom et le nom de famille.

82
00:06:28,150 --> 00:06:33,790
Maintenant, nous pouvons ajouter ensuite dans un des éléments d'entrée.

83
00:06:33,790 --> 00:06:38,260
Nous verrons comment cela fonctionne lorsque nous ajoutons dans le code.

84
00:06:38,260 --> 00:06:41,989
Passant maintenant à la partie suivante de l'exercice,

85
00:06:41,989 --> 00:06:46,220
nous allons ajouter ici deux champs supplémentaires dans

86
00:06:46,220 --> 00:06:51,690
notre formulaire pour entrer le numéro de téléphone et l'ID e-mail.

87
00:06:51,690 --> 00:06:54,870
Puisque la structure de base du code est similaire

88
00:06:54,870 --> 00:06:58,610
au prénom et au nom que vous avez déjà ajoutés au formulaire,

89
00:06:58,610 --> 00:07:02,370
donc je vais juste copier le code à partir du prénom et

90
00:07:02,370 --> 00:07:08,000
du nom, puis le coller ici et puis modifier le code en conséquence.

91
00:07:08,000 --> 00:07:11,910
Donc, j'ai collé le code du prénom et du nom ici.

92
00:07:11,910 --> 00:07:17,080
Continuons et modifions maintenant ceci pour le transformer en champs qui permettent

93
00:07:17,080 --> 00:07:22,745
à l'utilisateur d'entrer le numéro de téléphone et l'ID e-mail.

94
00:07:22,745 --> 00:07:24,420
Donc, pour le numéro de téléphone,

95
00:07:24,420 --> 00:07:28,200
donc ici nous avons déjà le prénom et le nom de famille ci-dessus.

96
00:07:28,200 --> 00:07:34,380
Donc, le troisième, je vais changer ça pour étiqueter « telnum ».

97
00:07:34,380 --> 00:07:38,745
Donc, c'est à partir du numéro de téléphone et puis des classes,

98
00:07:38,745 --> 00:07:44,790
je vais appliquer une classe de col-12 à ce dicton que cette étiquette sera dans

99
00:07:44,790 --> 00:07:52,795
son propre tirage lorsque le formulaire est affiché sur des tailles d'écran extra petites à petites.

100
00:07:52,795 --> 00:07:55,660
Et puis, pour la taille d'écran moyenne à supérieure,

101
00:07:55,660 --> 00:07:59,945
cela serait affiché dans deux colonnes

102
00:07:59,945 --> 00:08:04,655
de cette ligne particulière ici donc c'est le changement que nous allons y apporter.

103
00:08:04,655 --> 00:08:06,875
Et puis aussi, l'étiquette elle-même,

104
00:08:06,875 --> 00:08:14,860
laissez-moi changer cela pour contacter numéro de téléphone, contacter Tel.

105
00:08:15,230 --> 00:08:18,915
Maintenant, le numéro de téléphone lui-même,

106
00:08:18,915 --> 00:08:22,600
nous allons laisser l'utilisateur le saisir en deux parties ; l'une,

107
00:08:22,600 --> 00:08:25,485
qui est l'indicatif régional et la seconde,

108
00:08:25,485 --> 00:08:28,225
qui serait le numéro de téléphone réel.

109
00:08:28,225 --> 00:08:31,120
Donc, je vais prendre cette partie du code,

110
00:08:31,120 --> 00:08:34,640
qui était le champ d'entrée que nous avions pour

111
00:08:34,640 --> 00:08:40,315
le prénom, puis en créer une autre ci-dessous,

112
00:08:40,315 --> 00:08:44,190
que je vais utiliser pour le numéro de téléphone lui-même.

113
00:08:44,190 --> 00:08:50,560
Et maintenant, nous allons transformer ce premier dans le champ pour entrer l'indicatif régional.

114
00:08:50,560 --> 00:08:52,540
Vous pouvez également l'utiliser par exemple,

115
00:08:52,540 --> 00:08:57,220
pour le code de pays si c'est ce que vous souhaitez mettre dans le formulaire.

116
00:08:57,220 --> 00:09:00,190
Donc, pour le code régional lui-même,

117
00:09:00,190 --> 00:09:02,520
je vais postuler pour le div,

118
00:09:02,520 --> 00:09:09,105
les classes="col-5 col-md-3 ici ».

119
00:09:09,105 --> 00:09:13,410
Donc, notez que pour l'écran moyen,

120
00:09:13,410 --> 00:09:16,805
nous avons deux colonnes occupées par l'étiquette,

121
00:09:16,805 --> 00:09:20,630
trois colonnes occupées par l'indicatif régional lui-même et

122
00:09:20,630 --> 00:09:25,385
les sept colonnes restantes je vais le donner au champ de texte ici.

123
00:09:25,385 --> 00:09:29,650
Donc, de même, pour l'indicatif régional, je dis col 5.

124
00:09:29,650 --> 00:09:32,680
Donc, pour les écrans extra petits à petits, cela occupera

125
00:09:32,680 --> 00:09:37,520
cinq colonnes, puis pour les sept colonnes restantes,

126
00:09:37,520 --> 00:09:42,640
nous laisserons le numéro de téléphone se nourrir lui-même occupé à.

127
00:09:42,640 --> 00:09:48,510
Laisse-moi changer le prochain en col-7 et col-md-7 ici.

128
00:09:49,540 --> 00:09:54,365
Maintenant, ce champ je vais changer ceci en tel,

129
00:09:54,365 --> 00:09:58,965
type d'entrée tel pour le numéro de téléphone et la classe est le contrôle de formulaire,

130
00:09:58,965 --> 00:10:08,830
l'ID est l'indicatif régional et le nom est l'indicatif régional et puis l'espace réservé,

131
00:10:08,830 --> 00:10:12,415
je vais changer cela en indicatif régional.

132
00:10:12,415 --> 00:10:14,215
Et la partie suivante,

133
00:10:14,215 --> 00:10:21,885
nous allons changer ce type aussi tel et ID est telnum,

134
00:10:21,885 --> 00:10:28,060
le nom est telnum et l'espace réservé,

135
00:10:28,060 --> 00:10:34,830
lui-même, serait le numéro de téléphone.

136
00:10:34,830 --> 00:10:40,975
Ainsi, cela formera le champ du numéro de téléphone,

137
00:10:40,975 --> 00:10:42,840
qui sera entré en deux parties :

138
00:10:42,840 --> 00:10:45,160
l'indicatif régional et le numéro de téléphone.

139
00:10:45,160 --> 00:10:47,180
Donc, nous utilisons, encore une fois,

140
00:10:47,180 --> 00:10:51,540
les classes de colonne afin de structurer

141
00:10:51,540 --> 00:10:57,260
la façon dont les deux parties du champ d'entrée sont affichées dans le formulaire là-bas.

142
00:10:57,260 --> 00:10:59,490
Maintenant, le dernier, bien sûr,

143
00:10:59,490 --> 00:11:02,940
ce serait pour l'ID e-mail donc l'étiquette,

144
00:11:02,940 --> 00:11:08,595
je le transforme en ID e-mail et puis l'étiquette elle-même

145
00:11:08,595 --> 00:11:14,345
est e-mail et le type d'entrée est e-mail.

146
00:11:14,345 --> 00:11:16,575
Maintenant, nous changeons le type en email,

147
00:11:16,575 --> 00:11:22,060
ce qui est autorisé en HTML de sorte que plus tard si nous avons besoin de faire la validation de formulaire,

148
00:11:22,060 --> 00:11:24,040
alors nous savons que ce champ devrait contenir

149
00:11:24,040 --> 00:11:28,730
seulement un type d'e-mail d'entrée là-bas, et l'ID,

150
00:11:28,730 --> 00:11:37,490
lui-même, l'ID e-mail et le nom email ID et l'espace réservé.

151
00:11:38,600 --> 00:11:42,295
E-mail. C'est ça.

152
00:11:42,295 --> 00:11:47,335
Sauvegardons les modifications et allons jeter un oeil au formulaire mis à jour.

153
00:11:47,335 --> 00:11:49,820
Aller au formulaire dans le navigateur,

154
00:11:49,820 --> 00:11:54,030
vous voyez maintenant deux lignes supplémentaires ajoutées dans notre formulaire.

155
00:11:54,030 --> 00:11:57,030
Le prénom et le nom de famille doivent être ajoutés dans la partie précédente de l'exercice.

156
00:11:57,030 --> 00:11:59,050
Donc, ici, nous avons le numéro de téléphone de contact,

157
00:11:59,050 --> 00:12:01,805
qui est divisé en l'indicatif régional et le numéro de téléphone.

158
00:12:01,805 --> 00:12:06,515
Notez comment nous avons utilisé les classes de colonne pour positionner ces deux dans

159
00:12:06,515 --> 00:12:11,650
le formulaire lui-même, puis le champ e-mail ici.

160
00:12:11,650 --> 00:12:15,775
Jetons un coup d'oeil à la même chose sur un très petit écran.

161
00:12:15,775 --> 00:12:18,465
Ainsi, lorsque vous allez à une taille d'écran extra petite,

162
00:12:18,465 --> 00:12:20,800
vous remarquerez comment le formulaire lui-même est disposé.

163
00:12:20,800 --> 00:12:24,690
Vous verrez que l'étiquette est en haut, puis le champ lui-même en bas.

164
00:12:24,690 --> 00:12:26,055
Donc prénom, nom de famille.

165
00:12:26,055 --> 00:12:28,605
Notez comment les

166
00:12:28,605 --> 00:12:33,160
champs d'entrée de numéro de téléphone de contact sont positionnés à l'aide des classes de colonne,

167
00:12:33,160 --> 00:12:34,855
donc l'indicatif régional ici,

168
00:12:34,855 --> 00:12:36,085
et le numéro de téléphone,

169
00:12:36,085 --> 00:12:38,410
puis l'ID e-mail ici.

170
00:12:38,410 --> 00:12:41,630
Maintenant, nous allons continuer avec l'exercice.

171
00:12:41,630 --> 00:12:44,145
En continuant à l'étape suivante,

172
00:12:44,145 --> 00:12:49,680
nous allons ajouter une case à cocher, puis nous allons ajouter dans une sélection deux ou quatre.

173
00:12:49,680 --> 00:12:51,680
Pour ajouter une case à cocher,

174
00:12:51,680 --> 00:12:57,590
copions simplement ce groupe de formulaires ici afin que nous l'ajoutions comme une autre ligne ici,

175
00:12:57,590 --> 00:13:01,595
puis ajouterons dans le groupe de formulaires div ici,

176
00:13:01,595 --> 00:13:04,970
puis fermez le div ici.

177
00:13:04,970 --> 00:13:08,860
Et puis à l'intérieur de cette ligne de groupe de formulaires,

178
00:13:08,860 --> 00:13:11,280
donc cela nous donne une autre ligne dans le formulaire.

179
00:13:11,280 --> 00:13:13,330
Donc, à l'intérieur de cette ligne de groupe de formulaires,

180
00:13:13,330 --> 00:13:16,120
permettez-moi d'ajouter en premier la case à cocher.

181
00:13:16,120 --> 00:13:22,655
Donc, pour ce faire, nous allons ajouter un div avec la classe ="col-md-6"

182
00:13:22,655 --> 00:13:26,610
afin que vous verrez que cela va occuper

183
00:13:26,610 --> 00:13:31,695
six colonnes dans la taille de l'écran moyen à extra grand,

184
00:13:31,695 --> 00:13:36,800
puis offset-md-2, donc cela va le décaler vers

185
00:13:36,800 --> 00:13:43,850
la droite par deux colonnes, puis afficher la case à cocher dedans.

186
00:13:43,850 --> 00:13:48,490
Maintenant, à l'intérieur ici, pour ajouter une case à cocher,

187
00:13:48,490 --> 00:13:58,170
nous allons dire div avec la classe ="form-check » et

188
00:13:58,170 --> 00:14:07,200
à l'intérieur de cette classe form-check nous allons ajouter un type d'entrée ="checkbox »

189
00:14:07,200 --> 00:14:17,990
et la classe ="form-check-input », puis laissez-moi passer à la ligne suivante et

190
00:14:17,990 --> 00:14:24,400
dire ensuite name="approuver » et l'

191
00:14:24,400 --> 00:14:32,560
id="approuver » et la valeur est une chaîne vide là.

192
00:14:32,560 --> 00:14:35,360
Et à cette case à cocher,

193
00:14:35,360 --> 00:14:36,735
ajoutons une étiquette.

194
00:14:36,735 --> 00:14:38,380
Donc, pour ajouter une étiquette,

195
00:14:38,380 --> 00:14:41,940
nous allons ajouter dans label

196
00:14:41,940 --> 00:14:50,885
class="form-check-label » et puis cette étiquette

197
00:14:50,885 --> 00:14:53,775
est pour cette case à cocher que nous venons d'ajouter.

198
00:14:53,775 --> 00:15:00,270
Donc, c'est pourquoi nous allons dire pour="approuver » alors notez que pour la case à cocher,

199
00:15:00,270 --> 00:15:03,635
nous avons donné le nom et l'ID comme approbation, donc c'est pourquoi ici,

200
00:15:03,635 --> 00:15:07,090
nous allons être sauvegardés pour l'étiquette pour approbation.

201
00:15:07,090 --> 00:15:09,560
Et puis à l'intérieur de cette étiquette,

202
00:15:09,560 --> 00:15:19,250
nous indiquerons le contenu comme « Pouvons-nous vous contacter ? »

203
00:15:19,250 --> 00:15:24,240
Et puis sauvegardez les changements et allons-y jeter un oeil à notre formulaire.

204
00:15:24,240 --> 00:15:25,810
Aller à la page Web,

205
00:15:25,810 --> 00:15:30,970
vous pouvez maintenant voir que nous avons ajouté dans une case à cocher avec une étiquette ici et remarquez

206
00:15:30,970 --> 00:15:36,685
que cette étiquette est en gras à cause de l'utilisation de la balise « forte » là,

207
00:15:36,685 --> 00:15:40,270
et nous avons fait offset-md-2.

208
00:15:40,270 --> 00:15:42,850
C' est pourquoi nous poussons cette case à cocher jusqu'ici.

209
00:15:42,850 --> 00:15:46,750
Cela n'a pas d'étiquette ici mais au lieu de cela est poussé ici,

210
00:15:46,750 --> 00:15:50,765
donc c'est la raison pour utiliser offset-md-2 ici,

211
00:15:50,765 --> 00:15:56,980
et celui-ci occupe md-6 donc six colonnes ici.

212
00:15:56,980 --> 00:15:59,180
Nous n'en avons pas encore fini.

213
00:15:59,180 --> 00:16:03,075
Je vais ajouter dans la partie suivante ici,

214
00:16:03,075 --> 00:16:06,995
qui est une boîte de sélection là-bas.

215
00:16:06,995 --> 00:16:11,230
Donc, je vais appliquer un div de plus ici avec

216
00:16:11,230 --> 00:16:20,475
la classe ="col-md-3 offset-md-1" ici.

217
00:16:20,475 --> 00:16:23,375
Et à l'intérieur de cette div,

218
00:16:23,375 --> 00:16:27,160
je vais définir une sélection.

219
00:16:27,160 --> 00:16:30,590
Donc, encore une fois, à partir de votre connaissance du HTML,

220
00:16:30,590 --> 00:16:33,260
vous savez ce qu'un select fait pour vous.

221
00:16:33,260 --> 00:16:36,635
Maintenant, la sélection appliquera

222
00:16:36,635 --> 00:16:45,920
le contrôle de formulaire de classes donc c'est la classe Bootstrap que j'applique à la sélection ici,

223
00:16:46,130 --> 00:16:49,245
et fermera la sélection.

224
00:16:49,245 --> 00:16:53,745
Et à l'intérieur ici, je dois donner les options pour la sélection.

225
00:16:53,745 --> 00:16:57,500
Donc, j'utilise une sélection simple ici,

226
00:16:57,500 --> 00:17:02,570
et donc le premier est une option

227
00:17:02,570 --> 00:17:09,060
pour téléphone ou e-mail et fermer l'option.

228
00:17:09,060 --> 00:17:13,735
Donc, cela crée un élément select dans mon formulaire,

229
00:17:13,735 --> 00:17:15,310
qui a deux options ;

230
00:17:15,310 --> 00:17:17,080
téléphone et e-mail, donc,

231
00:17:17,080 --> 00:17:18,505
sauvegardons les modifications. En

232
00:17:18,505 --> 00:17:20,180
regardant notre page Web,

233
00:17:20,180 --> 00:17:26,960
vous pouvez maintenant voir comment la case de sélection du téléphone et de l'e-mail est maintenant créée ici, donc cela

234
00:17:26,960 --> 00:17:34,025
me permet de sélectionner lequel faire et ensuite vous pouvez également cocher la case comme ceci.

235
00:17:34,025 --> 00:17:36,730
Donc, cela termine la rangée suivante.

236
00:17:36,730 --> 00:17:39,040
Ajoutons une ligne de plus,

237
00:17:39,040 --> 00:17:42,960
ce qui permettra à l'utilisateur de taper réellement ses commentaires.

238
00:17:42,960 --> 00:17:47,535
Donc, je vais utiliser une zone de texte pour le formatage.

239
00:17:47,535 --> 00:17:51,615
Pour la prochaine, je vais utiliser une zone de texte.

240
00:17:51,615 --> 00:17:58,840
Donc, ce que je vais faire, c'est juste que je vais monter et copier cette partie email de celui-ci.

241
00:17:58,840 --> 00:18:02,115
Je suis trop paresseux pour continuer à taper tout le temps.

242
00:18:02,115 --> 00:18:06,950
Donc, j'ai tendance à couper et coller dans la mesure du possible, mais pour celui-ci,

243
00:18:06,950 --> 00:18:15,670
l'étiquette devrait être des commentaires et l'étiquette du formulaire de colonne,

244
00:18:15,670 --> 00:18:24,575
puis le texte réel est, « Vos commentaires ici ».

245
00:18:24,575 --> 00:18:26,450
C' est donc l'étiquette.

246
00:18:26,450 --> 00:18:28,795
Et puis, ici, le second,

247
00:18:28,795 --> 00:18:32,530
je vais formater celui-ci.

248
00:18:32,530 --> 00:18:34,140
Au lieu du type d'entrée,

249
00:18:34,140 --> 00:18:39,085
je vais changer cela en une zone de texte,

250
00:18:39,085 --> 00:18:42,815
et puis je n'ai pas besoin du type là.

251
00:18:42,815 --> 00:18:51,400
Zone de texte, la classe est toujours le contrôle de formulaire et l'ID est la rétroaction. Le

252
00:18:51,400 --> 00:18:58,890
nom est un commentaire et l'espace réservé n'est pas nécessaire

253
00:18:58,890 --> 00:19:02,880
ici et au lieu de le changer pour combien de lignes je

254
00:19:02,880 --> 00:19:06,890
veux donner à partir des commentaires pour la zone de texte ?

255
00:19:06,890 --> 00:19:10,340
Donc, je vais dire 12 lignes et puis fermer le texte.

256
00:19:10,340 --> 00:19:15,215
Donc, remarquez comment j'ai inclus la zone de texte dans mon formulaire.

257
00:19:15,215 --> 00:19:16,680
Enregistrez les modifications.

258
00:19:16,680 --> 00:19:19,560
Jetez un oeil. Aller à ma page web,

259
00:19:19,560 --> 00:19:23,910
maintenant vous voyez mon formulaire prendre sa forme complète ici.

260
00:19:23,910 --> 00:19:25,470
Vous avez le prénom, le nom de famille,

261
00:19:25,470 --> 00:19:28,050
le téléphone, l'e-mail, puis les commentaires.

262
00:19:28,050 --> 00:19:30,720
Zone de texte de 12 lignes.

263
00:19:30,720 --> 00:19:36,080
Maintenant, vous aurez besoin d'un bouton sur lequel l'utilisateur doit cliquer pour soumettre ses commentaires.

264
00:19:36,080 --> 00:19:40,715
Donc, nous ajoutons un bouton de soumission à ce formulaire.

265
00:19:40,715 --> 00:19:44,030
Pour revenir au formulaire à nouveau,

266
00:19:44,030 --> 00:19:47,195
créez une ligne de plus ici en utilisant

267
00:19:47,195 --> 00:19:55,715
la div ici avec la ligne du groupe de formulaires ici,

268
00:19:55,715 --> 00:19:59,405
et à l'intérieur ici je vais ajouter un bouton ici.

269
00:19:59,405 --> 00:20:02,300
Donc, je dirais, div

270
00:20:02,340 --> 00:20:10,500
class="offset-md-2" parce que je veux que mon bouton soit

271
00:20:10,500 --> 00:20:13,880
positionné juste en dessous de tous les champs que j'

272
00:20:13,880 --> 00:20:17,850
ai ici donc les deux colonnes gauche sont utilisées pour l'étiquette.

273
00:20:17,850 --> 00:20:21,750
Donc, le bouton de soumission n'a pas besoin d'étiquette donc je vais juste le

274
00:20:21,750 --> 00:20:25,890
pousser vers la droite ici et puis je

275
00:20:25,890 --> 00:20:35,090
dirais « col-md-10" donc cela occuperait les 10 colonnes restantes là-bas.

276
00:20:35,090 --> 00:20:37,310
Et puis à l'intérieur de ces div,

277
00:20:37,310 --> 00:20:40,045
je vais ajouter un bouton là.

278
00:20:40,045 --> 00:20:45,020
Ainsi, lorsque vous ajoutez un bouton à votre formulaire,

279
00:20:45,020 --> 00:20:50,190
utilisez la balise bouton ici avec un type soumettre.

280
00:20:50,190 --> 00:20:56,440
Donc, c'est le bouton de soumission pour votre formulaire là-bas et la classe.

281
00:20:56,440 --> 00:21:02,890
Rappelez-vous les classes de bouton, bouton primaire,

282
00:21:02,890 --> 00:21:07,890
donc cela créerait un bouton bleu foncé dans votre formulaire,

283
00:21:07,890 --> 00:21:15,110
puis fermez le bouton là,

284
00:21:15,110 --> 00:21:19,805
et puis je vais simplement entrer et à l'intérieur du bouton,

285
00:21:19,805 --> 00:21:28,725
je vais donner le nom comme « Envoyer des commentaires », puis enregistrer les changements.

286
00:21:28,725 --> 00:21:31,295
Maintenant, notre formulaire est complet.

287
00:21:31,295 --> 00:21:36,600
Jetons donc un coup d'oeil à la version finale de notre formulaire.

288
00:21:36,600 --> 00:21:38,660
En accédant à notre page Web,

289
00:21:38,660 --> 00:21:40,875
vous pouvez maintenant voir le formulaire rempli.

290
00:21:40,875 --> 00:21:43,135
Tous ces champs que nous avons déjà vu,

291
00:21:43,135 --> 00:21:46,610
le bouton en bas avec le libellé « Envoyer des

292
00:21:46,610 --> 00:21:51,265
commentaires » et le bouton de couleur bleu foncé en raison de l'utilisation du bouton « primaire ».

293
00:21:51,265 --> 00:21:58,870
Donc, cela complète le formulaire que nous voulions créer sur notre page web.

294
00:21:58,870 --> 00:22:02,380
Avec cela, nous terminons cet exercice,

295
00:22:02,380 --> 00:22:07,135
où nous avons vu comment nous pouvons construire un formulaire et l'inclure dans notre page Web.

296
00:22:07,135 --> 00:22:10,130
Vous travaillerez avec des formulaires dans certains

297
00:22:10,130 --> 00:22:13,720
des exercices ultérieurs, y compris votre deuxième affectation.

298
00:22:13,720 --> 00:22:19,310
C' est un bon moment pour vous de faire un bon commentaire avec les formulaires de message.