1
00:00:00,930 --> 00:00:06,100
Dus in deze video gaan we om verder te gaan en een oplossing voor dit inschrijfformulier.

2
00:00:06,640 --> 00:00:09,360
Dus ik heb een nieuw bestand gaan om het op te slaan.

3
00:00:09,540 --> 00:00:25,220
Ik ga gewoon dit inschrijfformulier noemen HDMI ik mijn sublieme snelkoppeling zult gebruiken en onze boiler ketel plaat gaan.

4
00:00:26,370 --> 00:00:31,010
Dus als we geconfronteerd met een project als dit is er een flink aantal plaatsen die we konden beginnen.

5
00:00:31,260 --> 00:00:47,940
En het eerste wat ik ga doen is de vorm Tagen en dan ga ik ook naar deze H1 gewoon top hier toevoegen en Louis gezet te registreren.

6
00:00:48,060 --> 00:00:53,510
Dus laten we gaan door en opent ons inschrijfformulier hier en verplaats het over.

7
00:00:53,970 --> 00:00:59,580
Ok, nog niet, maar in ieder geval of Ieder ziet er goed uit niet helemaal.

8
00:01:00,060 --> 00:01:07,340
Dus laten we terug naar subliem te gaan en laten we steken laten we beginnen met de eenvoudigste ding dienen deze dit hoogste niveau van ingangen.

9
00:01:07,500 --> 00:01:11,670
De voornaam en achternaam.

10
00:01:11,670 --> 00:01:13,750
Dus we beginnen met input.

11
00:01:14,400 --> 00:01:20,370
En dat zijn soort gelijken tekst ups.

12
00:01:22,900 --> 00:01:35,640
En laten we het eens een placeholder die eruit ziet zoals het hoort John laten we nog een placeholder Smith en dan moeten we twee labels geven.

13
00:01:36,120 --> 00:01:39,270
Dus konden we ofwel syntax voor labels gebruiken.

14
00:01:39,270 --> 00:01:42,970
Ik ga naar de vier te gebruiken.

15
00:01:43,260 --> 00:01:48,950
Dus ik zal dit eerst bellen en we zullen ervoor zorgen dat we een ID gelijk is aan de eerste.

16
00:01:50,040 --> 00:01:59,020
En dan is dit label zal zeggen voornaam colon die ons dat zal geven en dan moeten we precies hetzelfde doen.

17
00:01:59,220 --> 00:02:14,300
Een ander label voor de laatste van zeggen een achternaam dikke darm en dan moeten we geven dit ID is gelijk aan de laatste.

18
00:02:15,810 --> 00:02:19,200
Dus laten we in te checken en te zien wat we hebben.

19
00:02:19,680 --> 00:02:21,820
So far so good.

20
00:02:21,960 --> 00:02:35,540
Er is een klein ding dat we missen wat we niet deze ingangen een naam hebt gegeven, zodat geef het eerst de naam en de naam van de laatste grote.

21
00:02:35,550 --> 00:02:37,950
Dus laten we verder gaan naar het volgende stuk hier.

22
00:02:38,090 --> 00:02:41,640
Wat we eigenlijk ontbreekt een ding dat is de validaties.

23
00:02:41,640 --> 00:02:46,540
Dus terwijl we hier niet vergeten dat de voornaam en achternaam niet verondersteld leeg te zijn.

24
00:02:46,590 --> 00:02:56,160
Dus om dat te doen is het heel simpel we de vereiste attribuut toe te voegen aan de vereiste inputs en zet dat om waar te zijn.

25
00:02:56,340 --> 00:03:01,550
Dus ik ga om verder te gaan en uit te breiden dit gewoon zo dat we een beetje duidelijker waar we mee bezig zijn kunnen zien.

26
00:03:02,190 --> 00:03:08,320
Dus de volgende ding als we het formulier hier te raadplegen is het geslacht radioknop.

27
00:03:08,580 --> 00:03:12,060
Dus moeten we drie radio knoppen.

28
00:03:12,210 --> 00:03:18,940
Dus dat zijn input type gelijk radio.

29
00:03:19,470 --> 00:03:21,600
Drie van hen.

30
00:03:21,600 --> 00:03:32,300
En als we een kijkje te nemen bij dat geeft ons eerst wat je ziet is dat ze in lijn met de andere elementen die niet is eigenlijk wat de vorm die ik je gaf verondersteld wordt te lijken.

31
00:03:32,460 --> 00:03:36,870
Dus we hebben een paar opties om dingen te gedragen te krijgen.

32
00:03:36,870 --> 00:03:46,620
We kunnen ze gooien in een paragraaf als deze slechts enkele afstand toe te voegen.

33
00:03:46,680 --> 00:03:49,710
Nu krijgen we ze op een aparte regel.

34
00:03:49,860 --> 00:03:52,840
Ik ga gewoon naar een div hier te gebruiken.

35
00:03:54,330 --> 00:03:56,020
Daar ga je in een div.

36
00:03:56,190 --> 00:03:57,940
Niet helemaal dezelfde afstand.

37
00:03:57,980 --> 00:04:03,600
Een paragraaf heeft in de C S video daadwerkelijk zal praten over wat die afstand is.

38
00:04:03,960 --> 00:04:15,010
Dus nu moeten we verder gaan en toe te voegen of etiketten en voordat we dat doen laten we daadwerkelijk beginnen geef ze dezelfde naam, zodat naam geslacht hier zal zijn.

39
00:04:15,640 --> 00:04:31,080
Laten we doorgaan en moet mijn shortcut heb gebruikt hier namelijk het commando klik op meerdere cursors zodat we ze benoemen van cross-gender en dan laten we geven ze elk een waarde.

40
00:04:31,290 --> 00:04:35,460
Zodat de eerste de waarde mannelijk.

41
00:04:35,460 --> 00:04:37,140
Tweede zal vrouwelijk zijn.

42
00:04:37,140 --> 00:04:40,860
De laatste is ofwel en refresh.

43
00:04:41,010 --> 00:04:44,390
We zien niet een van die natuurlijk, want dat is net achter de schermen.

44
00:04:44,730 --> 00:04:47,210
Dus wat we moeten doen is aan onze labels.

45
00:04:47,580 --> 00:04:51,150
Dus we gaan drie labels willen.

46
00:04:51,150 --> 00:05:03,750
Eerste één gaan label vier te zeggen en we zullen gewoon noemen mannelijke teated we hier hebben.

47
00:05:03,900 --> 00:05:09,470
Geen Colon's dus gewoon mailen en dan Id gelijk mail.

48
00:05:09,940 --> 00:05:11,020
Hetzelfde.

49
00:05:11,010 --> 00:05:13,590
Een ander label hier.

50
00:05:13,600 --> 00:05:15,250
Deze zal vrouwelijk zijn.

51
00:05:15,730 --> 00:05:21,150
En dan gaan we willen zeggen Id me voor u vrouwelijke veroorzaken.

52
00:05:21,490 --> 00:05:25,830
En dan ga je naar ID zeggen dat je vrouwelijke veroorzaken.

53
00:05:25,840 --> 00:05:31,130
Dus zoals je kunt zien de bouw van deze formulieren wordt het soms een beetje vervelend.

54
00:05:31,140 --> 00:05:38,940
Je hebt een heleboel labels en een heleboel rotzooi dingen die je alleen maar extra voorzichtig zijn dat je alles goed overeenkomt met zijn.

55
00:05:38,940 --> 00:05:47,500
Daarom willen wij voor andere Ik bedoel, we willen ID doen gelijken niet.

56
00:05:47,710 --> 00:05:50,500
Dus laten we gewoon inchecken op dit te zien wat we hebben.

57
00:05:50,620 --> 00:05:50,910
Okee.

58
00:05:50,940 --> 00:05:51,980
Dat ziet er goed uit.

59
00:05:52,000 --> 00:05:55,680
We kunnen alleen maar kiezen een die is wat we willen.

60
00:05:55,720 --> 00:06:01,940
Volgende wat kunnen we overgaan tot laten we gaan door en voeg de submit knop op het einde net terwijl we hier zijn.

61
00:06:01,990 --> 00:06:06,480
Dus dat gaat input type zijn gelijk aan te leggen.

62
00:06:07,600 --> 00:06:09,540
En laten we maar zorg ervoor dat de validatie werken.

63
00:06:09,730 --> 00:06:13,810
Ja, het doet grote in goede vorm.

64
00:06:15,250 --> 00:06:17,930
Dus de volgende up hebben we een e-mail en een wachtwoord veld.

65
00:06:18,310 --> 00:06:20,230
En die zijn op de nieuwe lijn ook.

66
00:06:20,230 --> 00:06:28,640
Dus laten we gaan door en voeg een andere div en we gaan op een ingang te doen en dit keer is het soort gelijk aan e-mail.

67
00:06:28,660 --> 00:06:42,400
Het is niet alleen tekst en placeholder was hier uw e-mail, die weliswaar niet de beste placeholder tekst maar we gaan vast te houden aan dat het ervoor zorgen dat we de opdracht te volgen.

68
00:06:42,390 --> 00:06:53,940
Dus input type is e-mail placeholder is uw e-mail en dan hebben we een andere voor het wachtwoord en dat geeft ons twee ingangen.

69
00:06:54,310 --> 00:07:01,550
Next up kunnen we ofwel gaan met de naam dus om gewoon te zeggen naam email hier lid voor het geval dat je in de war bent.

70
00:07:01,690 --> 00:07:12,480
Die naam wordt uitsluitend gebruikt achter de schermen om erachter te komen hoe u de gegevens wat moeten we de gegevens in het verzoek op grond Wat is de naam van het te verzenden stuur.

71
00:07:12,580 --> 00:07:16,520
Dus in dit geval wat we typen op dit gebied zal worden genoemd e-mail.

72
00:07:16,870 --> 00:07:19,300
Dus we hebben geen gevolgen voor het geval zien.

73
00:07:19,310 --> 00:07:24,200
Ik denk dat dit een van de meest verwarrende delen, want het is niet erg visueel.

74
00:07:24,670 --> 00:07:30,750
Dus dit zal men zeggen naam was vergeten en laten we dan ga je gang en toe te voegen of labels.

75
00:07:30,940 --> 00:07:41,390
Dus gewoon om het te mengen hier zal ik de andere soort label te gebruiken dat is waar we het nest van de gegevens in het label zelf.

76
00:07:41,560 --> 00:07:49,800
Dus zal zeggen e-mail colon in plaats van de vier en Id syntax.

77
00:07:49,810 --> 00:07:56,520
Ze werken op dezelfde manier laten we het e-mailadres en wachtwoord te doen.

78
00:07:57,060 --> 00:07:58,490
Laten we zeer nauwkeurig.

79
00:07:58,690 --> 00:08:00,360
Er zijn zuilen op beide.

80
00:08:00,370 --> 00:08:00,920
Grote.

81
00:08:01,210 --> 00:08:13,330
Maar behalve dat en er is een ander ding dat we een kijkje nemen op moet nemen en te zien zijn validaties worden op hun plaats deze in te vullen.

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

83
00:08:16,060 --> 00:08:20,670
Dus een ding dat we missen is dat we nodig hebben om de e-mail nodig.

84
00:08:21,510 --> 00:08:30,170
Dus moeten we naar onze e-mail en voeg nu verplicht we frissen vullen deze uit.

85
00:08:30,580 --> 00:08:35,000
We verlaten e-mail leeg als we type in een niet-valide e-mail.

86
00:08:35,010 --> 00:08:36,640
Wij krijgen deze fout.

87
00:08:37,260 --> 00:08:39,350
Grote.

88
00:08:39,510 --> 00:08:41,940
Tot nu toe ziet alles er goed uit.

89
00:08:41,950 --> 00:08:47,670
We gaan terug naar de bonus wachtwoord validatie komen aan het einde voordat we er zijn.

90
00:08:47,670 --> 00:08:50,780
Laten we verder gaan om de verjaardag te selecteren.

91
00:08:50,920 --> 00:08:53,140
Dus drie dropdown menu's.

92
00:08:53,500 --> 00:09:02,920
Dus nogmaals kunt u een andere div en deze keer toe te voegen in deze div gaan we drie verschillende selecteert toe te voegen.

93
00:09:02,980 --> 00:09:06,920
Dus een twee drie.

94
00:09:07,240 --> 00:09:13,070
Laten we beginnen met de eerste die vier maanden en laten gaan en beginnen met het label.

95
00:09:13,120 --> 00:09:15,620
Er is maar één label hier voor alles.

96
00:09:16,000 --> 00:09:31,330
Zo weet u doen als dit label en zet alle drie onderwerpen binnen en dit label zou gaan om een ​​verjaardag te zeggen en het gaat om te kijken als dat.

97
00:09:31,330 --> 00:09:41,450
Dus als we zien wat we krijgen hebben we onze drie ingangen zijn drie labels en alles wat we moeten doen is toe te voegen in de juiste gegevens in.

98
00:09:41,470 --> 00:09:44,380
Dus dat is een heleboel opties.

99
00:09:44,400 --> 00:09:49,420
Dus de eerste laten we gaan door en voeg ik ga gewoon doen twee of drie hier dus dit zal zijn voor maanden.

100
00:09:49,410 --> 00:09:53,950
Dus we zullen doen Jan en maart.

101
00:09:55,760 --> 00:09:58,290
De volgende hetzelfde doen.

102
00:09:58,330 --> 00:10:02,240
Slechts een paar opties en dit zal voor de dag.

103
00:10:02,250 --> 00:10:03,240
Dus we beginnen.

104
00:10:03,430 --> 00:10:07,430
Laten we de dubbele cijfers bij 10 11 en 12.

105
00:10:07,620 --> 00:10:09,600
En de laatste zal het jaar.

106
00:10:10,180 --> 00:10:17,640
Gewoon doen drie opnieuw en laten we het doen 1999 2000 2001.

107
00:10:19,060 --> 00:10:19,590
Grote.

108
00:10:19,810 --> 00:10:22,310
En je kunt zien we onze daalde hier naar beneden.

109
00:10:22,330 --> 00:10:31,220
Er is een klein verschil maar die is dat onze start meteen met januari en cijfers en het jaar.

110
00:10:31,690 --> 00:10:38,090
Maar degene die ik je gaf begint met de dag en het jaar maand.

111
00:10:38,320 --> 00:10:40,150
Dus er is een paar manieren om dat te doen.

112
00:10:40,180 --> 00:11:01,870
De eenvoudigste is gewoon om de eerste optie zeggen dag en jaar maand en door dat te doen HDMI zal de vorm gewoon pakt de eerste optie en het besluit dat de oorspronkelijke waarde.

113
00:11:02,080 --> 00:11:05,050
Dus dat is de meest voorkomende manier om dat te doen.

114
00:11:05,350 --> 00:11:08,040
Dus nu ons kantoor ziet er goed uit.

115
00:11:08,050 --> 00:11:38,050
We hoeven alleen maar onze laatste Ik ga akkoord met de voorwaarden checkbox zo kunnen we nog een andere div hier toe te voegen en dan is dat de juiste uiteindelijke div in plaats van deze ene we gaan laten we beginnen met het label deze keer laten we de vier en noemen dit één laten we het laten we noemen overeengekomen.

116
00:11:38,370 --> 00:12:00,310
Ik ingestemd met de voorwaarden en dan de volgende ding dat we nodig hebben is onze inbreng tape noemt checkbox laten we het ID, omdat ik afgesproken en de naam en het ook eens.

117
00:12:01,120 --> 00:12:05,970
En dat is wat we krijgen er goed uitziet voor mij.

118
00:12:06,000 --> 00:12:11,690
Dus een ding dat we moeten ook toe te voegen aan onze select-tags is de naam.

119
00:12:11,910 --> 00:12:22,660
Dus laten we deze maand bellen en dit een van de dag en dit zal men hier te zijn.

120
00:12:23,590 --> 00:12:36,350
En vergeet niet dat als we niet willen dat in januari en fab en Mar te zijn wat was eigenlijk verzonden via als hij wilde dat het iets anders als een getal dat overeenkomt we zouden een waarde zetten hier te zijn.

121
00:12:36,370 --> 00:12:40,030
Dus voor Jan kunnen we de waarde 1 gezet in dit geval.

122
00:12:40,090 --> 00:12:41,850
Ik ben prima met gewoon Jan daar.

123
00:12:41,860 --> 00:12:45,130
Ik wilde niet aangeven hoe het moet gedragen.

124
00:12:45,930 --> 00:12:48,670
Zo komen we weer hier het ziet er goed uit.

125
00:12:48,660 --> 00:12:50,700
Alles ziet er hetzelfde uit.

126
00:12:50,710 --> 00:12:57,230
Het laatste wat we echt moeten bespreken, is de werkelijke wachtwoord validatie.

127
00:12:57,370 --> 00:13:00,680
Dus ik wil je gewoon laten zien hoe je zou kunnen gaan over het vinden van dat.

128
00:13:00,700 --> 00:13:09,860
Dus ik ga gewoon om open te stellen HMO lengte validatie en laten we proberen dat.

129
00:13:10,930 --> 00:13:13,560
Zoals je kunt zien heb ik eigenlijk al hier geweest.

130
00:13:13,840 --> 00:13:17,980
Dit is iets wat ik moest onlangs opzoeken en het lijkt erop dat.

131
00:13:17,980 --> 00:13:21,050
Dus dit is stack overflow door de manier als je dit niet eerder hebben gezien.

132
00:13:21,070 --> 00:13:23,850
Hierdoor kan iemand om een ​​vraag te stellen.

133
00:13:24,510 --> 00:13:30,000
Is er een ander attribuut ouder hem daar met behulp waarvan ik een minimale lengte van waarde kunt instellen voor velden.

134
00:13:30,370 --> 00:13:35,160
En dan zullen de mensen geven antwoord en de hoogste gestemd antwoorden eerst verschijnen.

135
00:13:35,530 --> 00:13:40,590
Dus dit antwoord zegt dat je kunt gebruik maken van het patroon schrijven de benodigde attribuut is ook nodig.

136
00:13:40,690 --> 00:13:44,770
Anders is een invoerveld met een lege waarde zal worden uitgesloten van de beperking validatie.

137
00:13:45,000 --> 00:13:45,770
OK.

138
00:13:46,210 --> 00:13:48,960
Dus het lijkt erop dat dit is alles wat we nodig hebben.

139
00:13:49,690 --> 00:13:55,500
Dus dit is een input die we geven het patroon evenaart dit vreemd uitziende ding.

140
00:13:56,440 --> 00:13:59,050
En dan is deze titel nodig is en vervolgens.

141
00:13:59,110 --> 00:14:05,230
Dus voordat we zelfs vragen over wat dit ook doet en wat deze vijf gemeenschappelijke 10 doet.

142
00:14:05,230 --> 00:14:06,640
Laten we gewoon zien.

143
00:14:06,630 --> 00:14:10,620
Dus laten we doorgaan vinden onze wachtwoord en dit is veel van wat.

144
00:14:10,620 --> 00:14:15,940
Als een ontwikkelaar is het is een stuk van kopiëren en plakken van een aantal dingen of het vinden van een code en tweaken het.

145
00:14:16,450 --> 00:14:21,250
Dus moeten we dit fit wat we hebben die een input naam te maken met een wachtwoord is het type want wachtwoord.

146
00:14:21,460 --> 00:14:27,340
Dus gewoon gaan deze drie eigenschappen te kopiëren.

147
00:14:27,340 --> 00:14:33,020
Dus nu hebben we typt zijn wachtwoord patroon is vijf en 10 nodig.

148
00:14:33,340 --> 00:14:36,670
En titel is gelijk aan vijf tot 10 tekens.

149
00:14:36,760 --> 00:14:41,190
Dus laten we eens kijken wat dat betekent dit vernieuwen.

150
00:14:41,400 --> 00:14:45,180
Zorg ervoor dat we alles anders ingevuld.

151
00:14:45,630 --> 00:14:48,740
Ik klik op Verzenden en het vertelt me ​​vul dan dit veld.

152
00:14:48,820 --> 00:14:57,310
Vijf tot 10 tekens en type 2 en type 3 en type meer dan 10 werkt niet.

153
00:14:57,580 --> 00:15:01,290
Maar als ik typ vijf of zes het werkt.

154
00:15:01,300 --> 00:15:03,520
Dus laten we verkennen een beetje meer.

155
00:15:03,550 --> 00:15:05,170
Laten we beginnen met deze hier.

156
00:15:05,320 --> 00:15:07,080
Laten we dit veranderen zijn.

157
00:15:07,480 --> 00:15:18,450
Wachtwoord moet tussen de vijf en 10 tekens en refresh.

158
00:15:18,490 --> 00:15:22,300
Zorg ervoor dat we invullen alles, zodat we deze fout kunnen krijgen.

159
00:15:22,890 --> 00:15:30,670
En ik klik op versturen en je kunt zien dat ik die boodschap dat we stellen wachtwoord moet tussen de 5 en 10 tekens te krijgen.

160
00:15:31,480 --> 00:15:33,620
Dus dat is wat deze titel doet het.

161
00:15:33,820 --> 00:15:36,710
Het is eigenlijk het foutbericht dat wordt weergegeven.

162
00:15:37,410 --> 00:15:52,120
Dus dan de andere nieuwe deel is dit patroon en dit is weliswaar een beetje raar, maar met behulp van deze syntaxis we gewoon het definiëren van de lengte van een reeks van volledige lengte die aanvaardbaar zijn voor deze ingang is.

163
00:15:52,120 --> 00:16:10,670
Dus als we dit veranderen om 02:58 in te dienen ik nog steeds niet aanvaardbaar die niet acceptabel, maar twee is aanvaardbaar.

164
00:16:11,470 --> 00:16:15,460
Dus dit is gewoon het definiëren van een bereik of patroon dat we moeten volgen.

165
00:16:15,930 --> 00:16:23,350
Er is dus zeker meer van deze kun je andere dingen te doen naast een minimale lengte of een reeks van lengtes, maar dat is alles wat ik je nodig om hier te vinden.

166
00:16:23,350 --> 00:16:27,660
Als u niet in staat om uit te vinden waren die niet in paniek het is nog erg vroeg op.

167
00:16:27,820 --> 00:16:32,110
Maar er zullen meer mogelijkheden voor u om dat soort dingen te proberen.

168
00:16:32,160 --> 00:16:45,860
Dus ik heb een volledige oplossing die ik schreef dat is voltooid in dat het de hele dag en het jaar en de maand ingangen en je kunt zien dat het een soort van een puinhoop.

169
00:16:45,900 --> 00:16:50,790
Ik heb dit niet schrijven met de hand en ik had niet verwacht dat je dit ofwel te schrijven met de hand.

170
00:16:51,100 --> 00:16:53,940
Dus we zullen zien hoe dit daadwerkelijk te genereren later op in de klas.

171
00:16:53,950 --> 00:16:58,120
Je zou kunnen javascript gebruiken om het voor u doen, zodat je niet daadwerkelijk naar deze af te schrijven.

172
00:16:58,450 --> 00:16:59,580
Dus neem een ​​kijkje op de oplossing.