1
00:00:00,930 --> 00:00:06,100
Donc, dans cette vidéo, nous allons aller de l'avant et créer une solution pour ce formulaire d'inscription.

2
00:00:06,640 --> 00:00:09,360
J'ai donc un nouveau fichier pour le sauvegarder.

3
00:00:09,540 --> 00:00:25,220
Je vais juste appeler ce formulaire d'inscription que HDMI je vais utiliser mon raccourci sublime et obtenir notre plaque chaudière chaudière va.

4
00:00:26,370 --> 00:00:31,010
Donc, lorsque nous sommes confrontés à un projet comme celui-ci il ya quelques endroits que nous pourrions commencer.

5
00:00:31,260 --> 00:00:47,940
Et la première chose que je vais faire est d'ajouter la forme Tagen et puis je vais aussi ajouter ce H1 juste en haut ici et Louis mettre le registre.

6
00:00:48,060 --> 00:00:53,510
Alors allons-y et ouvrez notre formulaire d'inscription ici et déplacez-le.

7
00:00:53,970 --> 00:00:59,580
Ok, pas tout à fait là encore, mais au moins ou Chaque est une bonne mine.

8
00:01:00,060 --> 00:01:07,340
Revenons donc au sublime et laissez-nous le bâton commençons par la chose la plus simple devrait être ces ce niveau supérieur des entrées.

9
00:01:07,500 --> 00:01:11,670
Le prénom et le nom.

10
00:01:11,670 --> 00:01:13,750
Nous allons commencer par les commentaires.

11
00:01:14,400 --> 00:01:20,370
Et ceux-ci sont de type égal à ups de texte.

12
00:01:22,900 --> 00:01:35,640
Et nous allons lui donner un espace réservé qui ressemble à ce que devrait être John laisser faire un autre placeholder Smith et ensuite nous devons donner deux étiquettes.

13
00:01:36,120 --> 00:01:39,270
Nous pourrions donc utiliser la syntaxe pour les étiquettes.

14
00:01:39,270 --> 00:01:42,970
Je vais utiliser les quatre.

15
00:01:43,260 --> 00:01:48,950
Alors je vais appeler cela d'abord et nous allons nous assurer que nous obtenons un ID égal à la première.

16
00:01:50,040 --> 00:01:59,020
Et puis cette étiquette dira le colon du prénom qui nous donnera cela et alors nous devons faire exactement la même chose.

17
00:01:59,220 --> 00:02:14,300
Un autre label pour le dernier de dire un colon de nom de famille et puis nous avons besoin de donner cette ID est égal à la dernière.

18
00:02:15,810 --> 00:02:19,200
Alors, nous allons vérifier et voir ce que nous avons.

19
00:02:19,680 --> 00:02:21,820
Jusqu'ici tout va bien.

20
00:02:21,960 --> 00:02:35,540
Il ya une petite chose que nous manquons, c'est-à-dire que nous n'avons pas donné un nom à ces entrées, il suffit de lui donner le nom d'abord et de nommer le dernier grand.

21
00:02:35,550 --> 00:02:37,950
Passons donc à la partie suivante.

22
00:02:38,090 --> 00:02:41,640
Ce qui nous manque en fait une chose qui est les validations.

23
00:02:41,640 --> 00:02:46,540
Donc, alors que nous sommes ici, rappelez-vous que le prénom et le nom ne sont pas censés être vierges.

24
00:02:46,590 --> 00:02:56,160
Donc, pour ce faire, il est très simple, nous ajoutons simplement l'attribut requis sur les entrées requises et définir cela pour être vrai.

25
00:02:56,340 --> 00:03:01,550
Donc, je vais aller de l'avant et élargir ce juste afin que nous puissions voir un peu plus clair sur ce que nous travaillons.

26
00:03:02,190 --> 00:03:08,320
Donc la prochaine chose si nous consulter le formulaire ici est le bouton radio genre.

27
00:03:08,580 --> 00:03:12,060
Nous avons donc besoin de trois boutons radio.

28
00:03:12,210 --> 00:03:18,940
Donc ceux-ci sont type d'entrée égale la radio.

29
00:03:19,470 --> 00:03:21,600
Trois d'entre eux.

30
00:03:21,600 --> 00:03:32,300
Et si nous jetons un coup d'oeil à ce qui nous donne première chose que vous verrez, c'est qu'ils sont en ligne avec les autres éléments qui n'est pas réellement ce que la forme que je vous ai donné est censé ressembler.

31
00:03:32,460 --> 00:03:36,870
Nous avons donc quelques options pour que les choses se comportent.

32
00:03:36,870 --> 00:03:46,620
Nous pouvons les jeter dans un paragraphe comme ceci juste ajouter un certain espacement.

33
00:03:46,680 --> 00:03:49,710
Maintenant, nous les obtenons sur une ligne distincte.

34
00:03:49,860 --> 00:03:52,840
Je vais juste utiliser un div ici.

35
00:03:54,330 --> 00:03:56,020
Là vous allez dans un div.

36
00:03:56,190 --> 00:03:57,940
N'a pas tout à fait le même espacement.

37
00:03:57,980 --> 00:04:03,600
Un paragraphe a dans la vidéo C S S va vraiment parler de ce que l'espacement est.

38
00:04:03,960 --> 00:04:15,010
Donc, maintenant, nous devons aller de l'avant et d'ajouter ou d'étiquettes et avant que nous ne commençons à leur donner le même nom afin que le nom sera de sexe ici.

39
00:04:15,640 --> 00:04:31,080
Avançons et devrions avoir utilisé mon raccourci ici qui est de commander les curseurs multiples de clic ainsi nous les obtenons nommant le genre croisé et alors donnons-leur chacun une valeur.

40
00:04:31,290 --> 00:04:35,460
Donc le premier, la valeur sera le mâle.

41
00:04:35,460 --> 00:04:37,140
La deuxième sera féminine.

42
00:04:37,140 --> 00:04:40,860
Le dernier est soit et rafraîchir.

43
00:04:41,010 --> 00:04:44,390
Nous ne voyons pas tout cela bien sûr parce que c'est juste dans les coulisses.

44
00:04:44,730 --> 00:04:47,210
Donc, ce que nous devons faire est d'ajouter dans nos étiquettes.

45
00:04:47,580 --> 00:04:51,150
Nous allons donc vouloir trois étiquettes.

46
00:04:51,150 --> 00:05:03,750
Le premier va dire l'étiquette quatre et nous appellerons juste ce mâle teated nous avons ici.

47
00:05:03,900 --> 00:05:09,470
Non, le courrier juste de Colon, puis Id est égal au courrier.

48
00:05:09,940 --> 00:05:11,020
Même chose.

49
00:05:11,010 --> 00:05:13,590
Un autre label ici.

50
00:05:13,600 --> 00:05:15,250
Celui-ci sera femelle.

51
00:05:15,730 --> 00:05:21,150
Et puis nous allons vouloir dire Id me pour vous cause féminine.

52
00:05:21,490 --> 00:05:25,830
Et puis vous continuez à dire ID vous cause féminine.

53
00:05:25,840 --> 00:05:31,130
Ainsi que vous pouvez voir la construction de ces formes, il devient un peu fastidieux parfois.

54
00:05:31,140 --> 00:05:38,940
Vous avez un tas d'étiquettes et beaucoup de choses de gâchis, vous avez juste à être très prudent que vous avez tout correspondant correctement.

55
00:05:38,940 --> 00:05:47,500
Donc, nous voulons pour les autres je veux dire que nous voulons faire des égaux ID soit.

56
00:05:47,710 --> 00:05:50,500
Nous allons vérifier ce que nous avons.

57
00:05:50,620 --> 00:05:50,910
D'accord.

58
00:05:50,940 --> 00:05:51,980
Cela ressemble beaucoup.

59
00:05:52,000 --> 00:05:55,680
Nous ne pouvons en sélectionner qu'un qui est ce que nous voulons.

60
00:05:55,720 --> 00:06:01,940
La prochaine chose que nous pouvons passer à laisser aller de l'avant et ajouter le bouton de soumettre à la fin juste pendant que nous sommes ici.

61
00:06:01,990 --> 00:06:06,480
Donc, cela va être type de saisie égale à soumettre.

62
00:06:07,600 --> 00:06:09,540
Et assurez-vous que la validation fonctionne.

63
00:06:09,730 --> 00:06:13,810
Oui, il fait très bien en bonne forme.

64
00:06:15,250 --> 00:06:17,930
Donc next up, nous avons un e-mail et un champ de mot de passe.

65
00:06:18,310 --> 00:06:20,230
Et ceux qui sont sur la nouvelle ligne ainsi.

66
00:06:20,230 --> 00:06:28,640
Alors allons de l'avant et ajouter un autre div et nous allons faire une entrée et cette fois c'est type est égal à e-mail.

67
00:06:28,660 --> 00:06:42,400
Ce n'est pas seulement du texte et l'espace réservé ici était votre e-mail qui n'est certes pas le meilleur texte réservé mais nous allons nous en tenir à cette image assurez-vous que nous suivons la mission.

68
00:06:42,390 --> 00:06:53,940
Donc, le type d'entrée est e-mail placeholder est votre e-mail et puis nous avons un autre pour le mot de passe et qui nous donne deux entrées.

69
00:06:54,310 --> 00:07:01,550
Ensuite, nous pouvons soit aller avec le nom de façon à juste dire le nom est e-mail ici membre au cas où vous êtes confus.

70
00:07:01,690 --> 00:07:12,480
Ce nom est purement utilisé dans les coulisses pour comprendre comment envoyer les données à quoi devrions-nous envoyer les données dans la requête sous Quel est le nom de celui-ci.

71
00:07:12,580 --> 00:07:16,520
Donc, dans ce cas, tout ce que nous tapons dans ce champ va être appelé e-mail.

72
00:07:16,870 --> 00:07:19,300
Nous ne voyons donc aucun impact au cas où.

73
00:07:19,310 --> 00:07:24,200
Je pense que c'est l'une des parties les plus déroutantes parce que ce n'est pas très visuel.

74
00:07:24,670 --> 00:07:30,750
Donc, celui-ci va dire nom était mot de passe, puis allons-y et ajouter ou des étiquettes.

75
00:07:30,940 --> 00:07:41,390
Donc, juste pour le mélanger ici je vais utiliser l'autre type d'étiquette qui est où nous nicher les données à l'intérieur de l'étiquette elle-même.

76
00:07:41,560 --> 00:07:49,800
Donc, dire e-mail colonnes plutôt que les quatre et la syntaxe Id.

77
00:07:49,810 --> 00:07:56,520
Ils fonctionnent de la même manière que nous allons faire e-mail et mot de passe.

78
00:07:57,060 --> 00:07:58,490
Soyons très précis.

79
00:07:58,690 --> 00:08:00,360
Il y a deux points sur les deux.

80
00:08:00,370 --> 00:08:00,920
Génial.

81
00:08:01,210 --> 00:08:13,330
Mais sauf cela et il ya une autre chose que nous devrions jeter un oeil à et voir les validations sont en place remplissez-le.

82
00:08:13,750 --> 00:08:15,130
Non.

83
00:08:16,060 --> 00:08:20,670
Donc, une chose que nous manquons est que nous devons exiger le courrier électronique.

84
00:08:21,510 --> 00:08:30,170
Donc, nous devons aller à notre e-mail et ajouter des exigences maintenant nous rafraîchir remplir ces.

85
00:08:30,580 --> 00:08:35,000
Nous laissons un e-mail vierge si nous saisissons un e-mail non valide.

86
00:08:35,010 --> 00:08:36,640
Nous recevons cette erreur.

87
00:08:37,260 --> 00:08:39,350
Génial.

88
00:08:39,510 --> 00:08:41,940
Donc, jusqu'à présent tout semble bien.

89
00:08:41,950 --> 00:08:47,670
Nous allons revenir à la validation du mot de passe de bonus à la fin avant d'arriver là.

90
00:08:47,670 --> 00:08:50,780
Passons à la sélection anniversaire.

91
00:08:50,920 --> 00:08:53,140
Donc, trois menus déroulants.

92
00:08:53,500 --> 00:09:02,920
Donc, encore une fois, vous pouvez ajouter un autre div et cette fois dans ce div, nous allons ajouter trois sélections différentes.

93
00:09:02,980 --> 00:09:06,920
Alors un deux trois.

94
00:09:07,240 --> 00:09:13,070
Commençons par cette première qui est de quatre mois et nous allons aller de l'avant et de commencer avec le label.

95
00:09:13,120 --> 00:09:15,620
Il n'y a qu'une étiquette ici pour tout.

96
00:09:16,000 --> 00:09:31,330
Donc, vous savez le faire comme ce label et mettre les trois sujets à l'intérieur et ce label allait dire un anniversaire et ça va ressembler à ça.

97
00:09:31,330 --> 00:09:41,450
Donc, si nous voyons ce que nous obtenons, nous avons nos trois entrées sont trois étiquettes et tout ce que nous devons faire est d'ajouter dans les données correctes à l'intérieur.

98
00:09:41,470 --> 00:09:44,380
C'est donc un tas d'options.

99
00:09:44,400 --> 00:09:49,420
Donc, le premier, allons-y et j'ajouterai que je vais faire deux ou trois ici, donc ce sera pendant des mois.

100
00:09:49,410 --> 00:09:53,950
Nous ferons donc Jan et Mars.

101
00:09:55,760 --> 00:09:58,290
Le suivant fait la même chose.

102
00:09:58,330 --> 00:10:02,240
Juste quelques options et ce sera pour la journée.

103
00:10:02,250 --> 00:10:03,240
Nous allons donc commencer.

104
00:10:03,430 --> 00:10:07,430
Faisons les doubles chiffres à 10 11 et 12.

105
00:10:07,620 --> 00:10:09,600
Et le dernier sera l'année.

106
00:10:10,180 --> 00:10:17,640
Il suffit de faire trois encore et de faire 1999 2000 2001.

107
00:10:19,060 --> 00:10:19,590
Génial.

108
00:10:19,810 --> 00:10:22,310
Et vous pouvez voir que nous avons notre tombé ici.

109
00:10:22,330 --> 00:10:31,220
Il ya une petite différence cependant qui est que notre départ tout de suite avec Janvier et les chiffres et l'année.

110
00:10:31,690 --> 00:10:38,090
Mais celui que je vous ai donné commence avec mois jour et année.

111
00:10:38,320 --> 00:10:40,150
Donc, il ya quelques façons de le faire.

112
00:10:40,180 --> 00:11:01,870
Le plus simple est juste de faire la toute première option de dire mois jour et année et en faisant que HDMI la forme choisit juste la toute première option et il décide que la valeur initiale.

113
00:11:02,080 --> 00:11:05,050
C'est donc la façon la plus courante de le faire.

114
00:11:05,350 --> 00:11:08,040
Donc, maintenant notre entreprise semble assez bonne.

115
00:11:08,050 --> 00:11:38,050
Nous avons juste besoin de notre final Je suis d'accord aux termes et conditions case à cocher pour que nous puissions ajouter encore une autre div ici et puis c'est correctement div final au lieu de celui-ci nous allons commencer avec le label cette fois faisons quatre et celui-ci allons appeler Il faut l'appeler convenu.

116
00:11:38,370 --> 00:12:00,310
J'ai accepté les termes et conditions et puis la prochaine chose que nous avons besoin est notre bande d'entrée tapez checkbox let's lui donner ID parce que j'ai accepté et le nom et aussi convenu.

117
00:12:01,120 --> 00:12:05,970
Et c'est ce que nous obtenons semble bon pour moi.

118
00:12:06,000 --> 00:12:11,690
Donc, une chose que nous devons également ajouter à nos balises de sélection est le nom.

119
00:12:11,910 --> 00:12:22,660
Alors allons juste appeler ce mois-ci et celui-ci de la journée et celui-ci sera ici.

120
00:12:23,590 --> 00:12:36,350
Et rappelez-vous que si nous ne voulions pas en Janvier et fab et Mar pour être ce qui a été réellement envoyé par si il voulait qu'il soit quelque chose de différent comme un nombre correspondant, nous mettre une valeur ici.

121
00:12:36,370 --> 00:12:40,030
Donc, pour Jan, nous pourrions mettre la valeur 1 dans ce cas.

122
00:12:40,090 --> 00:12:41,850
Je suis très bien d'avoir Jan ici.

123
00:12:41,860 --> 00:12:45,130
Je n'ai pas précisé comment il doit se comporter.

124
00:12:45,930 --> 00:12:48,670
Donc nous revenons ici il semble assez bon.

125
00:12:48,660 --> 00:12:50,700
Tout semble le même.

126
00:12:50,710 --> 00:12:57,230
La dernière chose que nous avons vraiment à discuter est la validation de mot de passe.

127
00:12:57,370 --> 00:13:00,680
Donc, je veux juste vous montrer comment vous pourriez aller à trouver cela.

128
00:13:00,700 --> 00:13:09,860
Donc, je vais juste ouvrir la validation de longueur HMO et essayons ça.

129
00:13:10,930 --> 00:13:13,560
Comme vous pouvez le voir, j'ai déjà été ici.

130
00:13:13,840 --> 00:13:17,980
C'est quelque chose que j'ai dû chercher récemment et il semble.

131
00:13:17,980 --> 00:13:21,050
Donc c'est Stack Overflow par la façon dont si vous n'avez pas vu cela avant.

132
00:13:21,070 --> 00:13:23,850
Cela permet à quelqu'un de poser une question.

133
00:13:24,510 --> 00:13:30,000
Existe-t-il un autre attribut l'âge il là-bas avec l'aide de laquelle je peux définir la longueur minimale de la valeur pour les champs.

134
00:13:30,370 --> 00:13:35,160
Et puis les gens fournissent des réponses et les réponses les plus votées apparaissent en premier.

135
00:13:35,530 --> 00:13:40,590
Donc, cette réponse dit que vous pouvez utiliser l'attribut pattern, l'attribut requis est également nécessaire.

136
00:13:40,690 --> 00:13:44,770
Sinon, un champ d'entrée avec une valeur vide sera exclu de la validation de contrainte.

137
00:13:45,000 --> 00:13:45,770
D'ACCORD.

138
00:13:46,210 --> 00:13:48,960
Donc, il semble que c'est tout ce dont nous avons besoin.

139
00:13:49,690 --> 00:13:55,500
Donc, c'est une entrée que nous lui donnons patron égale cette chose bizarre regardant.

140
00:13:56,440 --> 00:13:59,050
Et puis exigé, puis ce titre.

141
00:13:59,110 --> 00:14:05,230
Donc, avant même de nous poser des questions sur ce que cela fait et ce que ce 5 commun 10 fait.

142
00:14:05,230 --> 00:14:06,640
Voyons voir.

143
00:14:06,630 --> 00:14:10,620
Alors allons de l'avant trouver notre mot de passe et c'est beaucoup de quoi.

144
00:14:10,620 --> 00:14:15,940
Être un développeur, c'est beaucoup de copier et coller certaines choses ou trouver du code et le peaufiner.

145
00:14:16,450 --> 00:14:21,250
Donc, nous devons faire ce que nous avons ce qui est un nom d'entrée est le type de mot de passe parce que mot de passe.

146
00:14:21,460 --> 00:14:27,340
Il suffit donc de copier ces trois attributs.

147
00:14:27,340 --> 00:14:33,020
Alors maintenant, nous avons le type de son mot de passe est de cinq et 10 requis.

148
00:14:33,340 --> 00:14:36,670
Et le titre est égal à cinq à dix caractères.

149
00:14:36,760 --> 00:14:41,190
Alors voyons ce que cela rafraîchit.

150
00:14:41,400 --> 00:14:45,180
Assurez-vous d'avoir tout le reste rempli.

151
00:14:45,630 --> 00:14:48,740
Je clique sur soumettre et il me dit s'il vous plaît remplir ce champ.

152
00:14:48,820 --> 00:14:57,310
Cinq à dix caractères et type 2 et type 3 et le type plus de 10 ne fonctionne pas.

153
00:14:57,580 --> 00:15:01,290
Mais si je tape cinq ou six il ne fonctionne.

154
00:15:01,300 --> 00:15:03,520
Alors explorons un peu plus.

155
00:15:03,550 --> 00:15:05,170
Commençons par celui-ci.

156
00:15:05,320 --> 00:15:07,080
Changeons cela.

157
00:15:07,480 --> 00:15:18,450
Le mot de passe doit avoir entre cinq et dix caractères et être actualisé.

158
00:15:18,490 --> 00:15:22,300
Assurez-vous que nous remplissons tout le reste afin que nous puissions obtenir cette erreur.

159
00:15:22,890 --> 00:15:30,670
Et je clique sur soumettre et vous pouvez voir que je reçois que le message que nous définissons le mot de passe doit être entre 5 et 10 caractères.

160
00:15:31,480 --> 00:15:33,620
C'est ce que ce titre fait.

161
00:15:33,820 --> 00:15:36,710
C'est essentiellement le message d'erreur qui s'affiche.

162
00:15:37,410 --> 00:15:52,120
Donc, l'autre partie nouvelle est ce modèle et cela est certes un peu bizarre, mais en utilisant cette syntaxe, nous sommes juste la définition de la longueur d'une gamme de pleine longueur qui est acceptable pour cette entrée.

163
00:15:52,120 --> 00:16:10,670
Donc, si nous changeons cela pour être de deux à trois, je soumets encore pas acceptables non acceptables, mais deux est acceptable.

164
00:16:11,470 --> 00:16:15,460
Il s'agit donc simplement de définir une gamme ou un modèle que nous devons suivre.

165
00:16:15,930 --> 00:16:23,350
Donc, il ya certainement plus à ce que vous pouvez faire d'autres choses en plus d'une longueur minimale ou une gamme de longueurs, mais c'est tout ce dont j'ai besoin que vous trouver ici.

166
00:16:23,350 --> 00:16:27,660
Si vous étiez incapable de trouver qui ne panique pas il est encore très tôt.

167
00:16:27,820 --> 00:16:32,110
Mais il va y avoir plus d'occasions pour vous d'essayer des choses comme ça.

168
00:16:32,160 --> 00:16:45,860
Donc, j'ai une solution complète que j'ai rédigée qui est complète en ce qu'elle a la journée entière et l'année et les entrées de mois et vous pouvez voir c'est un peu un gâchis.

169
00:16:45,900 --> 00:16:50,790
Je n'ai pas écrit ceci à la main et je ne m'attendais pas à ce que vous écriviez ceci à la main non plus.

170
00:16:51,100 --> 00:16:53,940
Nous allons donc voir comment générer cela plus tard dans la classe.

171
00:16:53,950 --> 00:16:58,120
Vous pouvez utiliser javascript pour le faire pour vous afin que vous n'avez pas vraiment à écrire cette off.

172
00:16:58,450 --> 00:16:59,580
Alors jetez un oeil à la solution.