1
00:00:00,930 --> 00:00:06,100
Quindi in questo video andremo avanti e creeremo una soluzione per questo modulo di registrazione.

2
00:00:06,640 --> 00:00:09,360
Quindi ho un nuovo file per salvarlo.

3
00:00:09,540 --> 00:00:17,910
Chiamerò questo modulo di registrazione che HDMI userò la mia scorciatoia sublime e farò

4
00:00:22,200 --> 00:00:25,220
funzionare la piastra della caldaia.

5
00:00:26,370 --> 00:00:31,010
Quindi, quando ci troviamo di fronte a un progetto come questo, ci sono alcuni punti in cui potremmo iniziare.

6
00:00:31,260 --> 00:00:39,120
E la prima cosa che farò è aggiungere il modulo Tagen e poi aggiungerò

7
00:00:40,200 --> 00:00:41,160
questo H1

8
00:00:44,160 --> 00:00:47,940
qui sopra e Louis metterà il registro.

9
00:00:48,060 --> 00:00:53,510
Andiamo avanti e apriamo il nostro modulo di registrazione qui e spostiamolo.

10
00:00:53,970 --> 00:00:59,580
Ok, non ancora lì, ma almeno o Ognuno ha un bell'aspetto.

11
00:01:00,060 --> 00:01:05,730
Quindi torniamo al sublime e continuiamo, iniziamo con la cosa più semplice dovrebbe essere questi questo

12
00:01:05,730 --> 00:01:07,340
alto livello di input.

13
00:01:07,500 --> 00:01:11,670
Il nome e il cognome.

14
00:01:11,670 --> 00:01:13,750
Quindi inizieremo con l'input.

15
00:01:14,400 --> 00:01:20,370
E quelli sono di tipo uguale a testi.

16
00:01:22,900 --> 00:01:29,610
un altro segnaposto Smith e poi dobbiamo dare due etichette.

17
00:01:30,020 --> 00:01:35,640
E diamo un segnaposto che dovrebbe essere John, facciamo

18
00:01:36,120 --> 00:01:39,270
Quindi potremmo usare la sintassi per le etichette.

19
00:01:39,270 --> 00:01:42,970
Userò i quattro.

20
00:01:43,260 --> 00:01:48,950
Quindi chiamerò prima questo e ci assicureremo di ottenere un ID uguale al primo.

21
00:01:50,040 --> 00:01:57,180
E poi questa etichetta dirà il primo nome due punti che ci darà quello e quindi abbiamo bisogno di

22
00:01:57,180 --> 00:01:59,020
fare esattamente la stessa cosa.

23
00:01:59,220 --> 00:02:12,750
Un'altra etichetta per l'ultimo di dire due punti di cognome e quindi dobbiamo dare questo ID è uguale a scorso.

24
00:02:15,810 --> 00:02:19,200
Quindi controlliamo e vediamo cosa abbiamo.

25
00:02:19,680 --> 00:02:21,820
Fin qui tutto bene.

26
00:02:21,960 --> 00:02:27,650
C'è una piccola cosa che ci manca e che non abbiamo

27
00:02:27,660 --> 00:02:35,540
dato a questi input un nome, quindi basta dargli il nome prima e nominare l'ultimo grande.

28
00:02:35,550 --> 00:02:37,950
Quindi passiamo al prossimo pezzo qui.

29
00:02:38,090 --> 00:02:41,640
In realtà ci manca una cosa che è la validazione.

30
00:02:41,640 --> 00:02:46,540
Quindi, mentre siamo qui, ricordiamo che il nome e il cognome non dovrebbero essere vuoti.

31
00:02:46,590 --> 00:02:54,000
Quindi per farlo è molto semplice, basta aggiungere l'attributo richiesto sugli input richiesti e impostare

32
00:02:54,000 --> 00:02:56,160
quello per essere vero.

33
00:02:56,340 --> 00:03:00,690
Quindi andrò avanti ed espanderò questo solo per poter vedere un po 'più chiaramente su

34
00:03:00,690 --> 00:03:01,550
cosa stiamo lavorando.

35
00:03:02,190 --> 00:03:08,320
Quindi la prossima cosa se consultiamo il modulo qui è il pulsante radio di genere.

36
00:03:08,580 --> 00:03:12,060
Quindi abbiamo bisogno di avere tre pulsanti radio.

37
00:03:12,210 --> 00:03:18,940
Quindi quelli sono tipo di input uguale alla radio.

38
00:03:19,470 --> 00:03:21,600
Tre di loro.

39
00:03:21,600 --> 00:03:27,750
E se diamo un'occhiata a ciò che ci dà la prima cosa che vedrai è che sono in linea con gli altri

40
00:03:27,750 --> 00:03:32,300
elementi che in realtà non è ciò che la forma che ti ho dato dovrebbe essere.

41
00:03:32,460 --> 00:03:36,870
Quindi abbiamo alcune opzioni per fare in modo che le cose si comportino.

42
00:03:36,870 --> 00:03:38,220
Possiamo buttarli in

43
00:03:41,910 --> 00:03:46,620
un paragrafo come questo, basta aggiungere un po 'di spaziatura.

44
00:03:46,680 --> 00:03:49,710
Ora li prendiamo su una linea separata.

45
00:03:49,860 --> 00:03:52,840
Sto solo andando a usare un div qui.

46
00:03:54,330 --> 00:03:56,020
Lì vai in un div.

47
00:03:56,190 --> 00:03:57,940
Non ha esattamente la stessa spaziatura.

48
00:03:57,980 --> 00:04:03,600
Un paragrafo ha nel video C S S in realtà parlerà di cosa sia questa spaziatura.

49
00:04:03,960 --> 00:04:06,580
Quindi ora dobbiamo andare avanti e aggiungere o etichette

50
00:04:09,240 --> 00:04:15,010
e prima di farlo iniziamo effettivamente a dare loro lo stesso nome, quindi il nome sarà di genere qui.

51
00:04:15,640 --> 00:04:24,660
Andiamo avanti e avremmo dovuto usare il mio collegamento qui, che è quello di fare clic su più cursori in

52
00:04:24,660 --> 00:04:31,080
modo da ottenere loro la denominazione del cross-gender e quindi diamo ad ognuno un valore.

53
00:04:31,290 --> 00:04:35,460
Quindi il primo sarà il valore del maschio.

54
00:04:35,460 --> 00:04:37,140
Il secondo sarà femminile.

55
00:04:37,140 --> 00:04:40,860
L'ultimo è o e aggiorna.

56
00:04:41,010 --> 00:04:44,390
Non vediamo nulla di tutto ciò ovviamente perché è solo dietro le quinte.

57
00:04:44,730 --> 00:04:47,210
Quindi quello che dobbiamo fare è aggiungere le nostre etichette.

58
00:04:47,580 --> 00:04:51,150
Quindi vorremmo tre etichette.

59
00:04:51,150 --> 00:04:57,080
Il primo dirà l'etichetta numero quattro e chiameremo questo tettone

60
00:05:02,090 --> 00:05:03,750
che abbiamo qui.

61
00:05:03,900 --> 00:05:09,470
No Colon è così semplice e quindi Id è uguale alla posta.

62
00:05:09,940 --> 00:05:11,020
Stessa cosa.

63
00:05:11,010 --> 00:05:13,590
Un'altra etichetta qui.

64
00:05:13,600 --> 00:05:15,250
Questo sarà femminile.

65
00:05:15,730 --> 00:05:21,150
E poi vorremmo dire Id me per te causa femmina.

66
00:05:21,490 --> 00:05:25,830
E poi continui a dire ID che fai femmina.

67
00:05:25,840 --> 00:05:31,130
Quindi, come puoi vedere costruendo queste forme, a volte diventa un po 'noioso.

68
00:05:31,140 --> 00:05:35,800
Hai un sacco di etichette e un sacco di cose di disordine devi solo stare

69
00:05:36,220 --> 00:05:38,940
attento a fare in modo che tutto corrisponda correttamente.

70
00:05:38,940 --> 00:05:47,500
Quindi vogliamo per gli altri voglio dire che vogliamo fare ID uguale sia.

71
00:05:47,710 --> 00:05:50,500
Quindi vediamo su questo vediamo cosa abbiamo.

72
00:05:50,620 --> 00:05:50,910
Tutto ok.

73
00:05:50,940 --> 00:05:51,980
Sembra fantastico.

74
00:05:52,000 --> 00:05:55,680
Possiamo selezionarne solo uno che è ciò che vogliamo.

75
00:05:55,720 --> 00:06:01,860
Quindi possiamo andare avanti e aggiungere il pulsante di invio alla fine mentre siamo qui.

76
00:06:01,990 --> 00:06:06,480
Quindi questo sarà il tipo di input uguale a submit.

77
00:06:07,600 --> 00:06:09,540
E assicuriamoci solo che la validazione funzioni.

78
00:06:09,730 --> 00:06:13,810
Sì, lo fa benissimo.

79
00:06:15,250 --> 00:06:17,930
Quindi il prossimo abbiamo un indirizzo e-mail e una password.

80
00:06:18,310 --> 00:06:20,230
E quelli sono anche su una nuova linea.

81
00:06:20,230 --> 00:06:27,900
Quindi andiamo avanti e aggiungiamo un altro div e faremo un input e questa volta il tipo è uguale a

82
00:06:28,100 --> 00:06:28,640
e-mail.

83
00:06:28,660 --> 00:06:37,710
Non è solo testo e il segnaposto era la tua e-mail che non è certamente il miglior testo segnaposto,

84
00:06:37,720 --> 00:06:42,400
ma ci atteniamo a quell'immagine assicurandoci di seguire il compito.

85
00:06:42,390 --> 00:06:47,950
Quindi, il tipo di input è e-mail placeholder è la tua email e quindi ne abbiamo un altro per la

86
00:06:51,850 --> 00:06:53,940
password e questo ci dà due input.

87
00:06:54,310 --> 00:07:01,390
Prossimo possiamo o andare con il nome così per dire semplicemente che il nome è email qui membro nel caso in cui sei confuso.

88
00:07:01,690 --> 00:07:09,270
per capire come inviare i dati cosa dovremmo inviare i dati nella richiesta sotto Qual è il nome di esso.

89
00:07:09,270 --> 00:07:12,480
Quel nome è puramente utilizzato dietro le quinte

90
00:07:12,580 --> 00:07:16,520
Quindi in questo caso qualunque cosa scriviamo in questo campo verrà chiamata e-mail.

91
00:07:16,870 --> 00:07:19,300
Quindi non vediamo alcun impatto nel caso in cui.

92
00:07:19,310 --> 00:07:24,200
Penso che questa sia una delle parti più confuse perché non è molto visiva.

93
00:07:24,670 --> 00:07:30,750
Quindi questo dirà che il nome era password e quindi andiamo avanti e aggiungiamo o etichette.

94
00:07:30,940 --> 00:07:40,210
Quindi, per mescolarlo qui userò l'altro tipo di etichetta che è il punto in cui annidiamo i dati all'interno

95
00:07:40,330 --> 00:07:41,390
dell'etichetta stessa.

96
00:07:41,560 --> 00:07:49,800
Quindi dirà i due punti e-mail piuttosto che la sintassi quattro e Id.

97
00:07:49,810 --> 00:07:56,520
Funzionano allo stesso modo, facciamo e-mail e password.

98
00:07:57,060 --> 00:07:58,490
Siamo molto precisi.

99
00:07:58,690 --> 00:08:00,360
Ci sono due punti su entrambi.

100
00:08:00,370 --> 00:08:00,920
Grande.

101
00:08:01,210 --> 00:08:10,090
Ma salva questo e c'è un'altra cosa che dovremmo dare un'occhiata e

102
00:08:10,090 --> 00:08:13,330
vedere sono valide le validazioni.

103
00:08:13,750 --> 00:08:15,130
No.

104
00:08:16,060 --> 00:08:20,670
Quindi una cosa che ci manca è che abbiamo bisogno di richiedere l'e-mail.

105
00:08:21,510 --> 00:08:30,170
Quindi abbiamo bisogno di andare alla nostra e-mail e aggiungere richiesto ora ci aggiorniamo riempire questi.

106
00:08:30,580 --> 00:08:35,000
Lasciamo vuoto l'e-mail se scriviamo una e-mail non valida.

107
00:08:35,010 --> 00:08:36,640
Otteniamo questo errore.

108
00:08:37,260 --> 00:08:39,350
Grande.

109
00:08:39,510 --> 00:08:41,940
Quindi finora tutto sembra a posto.

110
00:08:41,950 --> 00:08:47,670
Torneremo alla convalida della password bonus alla fine prima di arrivarci.

111
00:08:47,670 --> 00:08:50,780
Passiamo alla selezione del compleanno.

112
00:08:50,920 --> 00:08:53,140
Quindi tre menu a discesa.

113
00:08:53,500 --> 00:09:02,670
Quindi di nuovo puoi aggiungere un altro div e questa volta in questo div aggiungeremo tre differenti selezioni.

114
00:09:02,980 --> 00:09:06,920
Quindi uno due tre.

115
00:09:07,240 --> 00:09:13,070
Iniziamo con questo primo che è di quattro mesi e andiamo avanti e iniziamo con l'etichetta.

116
00:09:13,120 --> 00:09:15,620
C'è solo un'etichetta qui per tutto.

117
00:09:16,000 --> 00:09:24,300
Quindi sai come fare con questa etichetta e mettere tutti e tre i soggetti

118
00:09:24,310 --> 00:09:31,330
dentro e questa etichetta stava per dire un compleanno e sembrerà così.

119
00:09:31,330 --> 00:09:39,040
Quindi se vediamo cosa otteniamo abbiamo i nostri tre input sono tre etichette e tutto ciò che dobbiamo fare

120
00:09:39,040 --> 00:09:41,450
è aggiungere dentro i dati corretti.

121
00:09:41,470 --> 00:09:44,380
Quindi questo è un mucchio di opzioni.

122
00:09:44,400 --> 00:09:49,230
Quindi il primo andiamo avanti e aggiungo che farò due o tre qui, quindi sarà per mesi.

123
00:09:49,410 --> 00:09:53,950
Quindi faremo gennaio e marzo.

124
00:09:55,760 --> 00:09:58,290
Il prossimo fa la stessa cosa.

125
00:09:58,330 --> 00:10:02,240
Solo poche opzioni e questo sarà per il giorno.

126
00:10:02,250 --> 00:10:03,240
Quindi inizieremo.

127
00:10:03,430 --> 00:10:07,430
Facciamo due cifre a 10 11 e 12.

128
00:10:07,620 --> 00:10:09,600
E l'ultimo sarà l'anno.

129
00:10:10,180 --> 00:10:17,640
Basta fare ancora tre e facciamo 1999 1999 2001.

130
00:10:19,060 --> 00:10:19,590
Grande.

131
00:10:19,810 --> 00:10:22,310
E puoi vedere che veniamo fatti scendere qui.

132
00:10:22,330 --> 00:10:29,950
C'è una piccola differenza, tuttavia, che è il nostro inizio subito con gennaio e numeri

133
00:10:29,950 --> 00:10:31,220
e l'anno.

134
00:10:31,690 --> 00:10:38,090
Ma quello che ti ho dato inizia con il giorno e l'anno del mese.

135
00:10:38,320 --> 00:10:40,150
Quindi ci sono alcuni modi per farlo.

136
00:10:40,180 --> 00:10:46,570
il modulo sceglierà la prima opzione e deciderà il valore iniziale.

137
00:10:49,650 --> 00:10:50,130
Il

138
00:10:53,010 --> 00:11:00,980
più semplice è solo per fare la prima opzione dire mese giorno e anno e,

139
00:11:00,980 --> 00:11:01,870
facendo ciò,

140
00:11:02,080 --> 00:11:05,050
Questo è il modo più comune per farlo.

141
00:11:05,350 --> 00:11:08,040
Quindi ora la nostra azienda sembra piuttosto buona.

142
00:11:08,050 --> 00:11:16,420
controllo in modo da poter aggiungere ancora un altro div qui e quindi è

143
00:11:16,430 --> 00:11:17,320
correttamente

144
00:11:20,150 --> 00:11:29,290
div finale invece di questa inizieremo con l'etichetta questa volta facciamo quattro e chiamiamo chiamiamolo d'accordo.

145
00:11:29,330 --> 00:11:38,050
Abbiamo solo bisogno della nostra finale Accetto i termini e le condizioni casella di

146
00:11:38,370 --> 00:11:41,320
Ho accettato i termini e le condizioni

147
00:11:44,290 --> 00:11:54,460
e quindi la prossima cosa di cui abbiamo bisogno è la nostra casella di controllo delle chiamate su nastro in ingresso, diamo

148
00:11:56,200 --> 00:12:00,310
loro ID perché ho concordato e nominato e concordato.

149
00:12:01,120 --> 00:12:05,970
Ed è quello che ci sembra buono per me.

150
00:12:06,000 --> 00:12:11,690
Quindi una cosa che dobbiamo anche aggiungere ai nostri tag selezionati è il nome.

151
00:12:11,910 --> 00:12:13,440
Chiamiamo questo mese

152
00:12:18,610 --> 00:12:22,660
e questo del giorno e questo sarà qui.

153
00:12:23,590 --> 00:12:30,910
E ricorda che se non avessimo voluto a gennaio e Fab e Mar fossero ciò che è stato effettivamente inviato

154
00:12:30,900 --> 00:12:36,350
se volesse che fosse qualcosa di diverso come un numero corrispondente, metterei un valore qui.

155
00:12:36,370 --> 00:12:40,030
Quindi per Jan potremmo mettere il valore 1 in questo caso.

156
00:12:40,090 --> 00:12:41,850
Sto bene solo con Jan lì.

157
00:12:41,860 --> 00:12:45,130
Non ho specificato come deve comportarsi.

158
00:12:45,930 --> 00:12:48,670
Quindi torniamo qui sembra abbastanza buono.

159
00:12:48,660 --> 00:12:50,700
Tutto sembra uguale.

160
00:12:50,710 --> 00:12:57,230
L'ultima cosa che dobbiamo davvero discutere è l'effettiva convalida della password.

161
00:12:57,370 --> 00:13:00,680
Quindi voglio solo mostrarti come puoi andare a trovarlo.

162
00:13:00,700 --> 00:13:09,860
Quindi aprirò la convalida della lunghezza HMO e proviamo a farlo.

163
00:13:10,930 --> 00:13:13,560
Come puoi vedere, in realtà sono già stato qui.

164
00:13:13,840 --> 00:13:17,980
Questo è qualcosa che ho dovuto cercare di recente e sembra.

165
00:13:17,980 --> 00:13:21,050
Quindi questo è Stack Overflow tra l'altro se non l'hai visto prima.

166
00:13:21,070 --> 00:13:23,850
Questo permette a qualcuno di porre una domanda.

167
00:13:24,510 --> 00:13:29,140
C'è qualche altro attributo che lo invecchia con l'aiuto di cui posso impostare una lunghezza minima del valore

168
00:13:29,130 --> 00:13:30,000
per i campi.

169
00:13:30,370 --> 00:13:35,160
E poi le persone forniscono risposte e le risposte votate più alte appaiono per prime.

170
00:13:35,530 --> 00:13:40,590
Quindi questa risposta dice che puoi usare l'attributo pattern anche l'attributo richiesto.

171
00:13:40,690 --> 00:13:44,770
In caso contrario, un campo di input con un valore vuoto verrà escluso dalla convalida del vincolo.

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

173
00:13:46,210 --> 00:13:48,960
Quindi sembra che questo sia tutto ciò di cui abbiamo bisogno.

174
00:13:49,690 --> 00:13:55,500
Quindi questo è un input che diamo che il pattern è uguale a questa strana cosa.

175
00:13:56,440 --> 00:13:59,050
E poi richiesto e poi questo titolo.

176
00:13:59,110 --> 00:14:05,230
Quindi, prima ancora che ci chiediamo cosa fa e cosa fa questo 5 comune.

177
00:14:05,230 --> 00:14:06,640
Vediamo.

178
00:14:06,630 --> 00:14:10,620
Quindi andiamo avanti trova la nostra password e questo è un sacco di cosa.

179
00:14:10,620 --> 00:14:15,340
Essendo uno sviluppatore è un sacco di copiare e incollare alcune cose o trovare un codice

180
00:14:15,340 --> 00:14:15,940
e modificarlo.

181
00:14:16,450 --> 00:14:21,250
Quindi dobbiamo fare in modo che ciò corrisponda a quello che abbiamo, che è un nome di input è il tipo di password perché la password.

182
00:14:21,460 --> 00:14:27,340
Quindi basta copiare questi tre attributi.

183
00:14:27,340 --> 00:14:33,020
Quindi ora dobbiamo digitare il suo modello di password è cinque e 10 richiesti.

184
00:14:33,340 --> 00:14:36,670
E il titolo equivale a cinque a 10 caratteri.

185
00:14:36,760 --> 00:14:41,190
Quindi vediamo cosa aggiorna questo.

186
00:14:41,400 --> 00:14:45,180
Assicurati di aver compilato tutto il resto.

187
00:14:45,630 --> 00:14:48,740
Faccio clic su Invia e mi dice per favore compila questo campo.

188
00:14:48,820 --> 00:14:57,310
Da 5 a 10 caratteri e tipo 2 e tipo 3 e tipo più di 10 non funzionano.

189
00:14:57,580 --> 00:15:01,290
Ma se digito cinque o sei, funziona.

190
00:15:01,300 --> 00:15:03,520
Quindi esploriamo un po 'di più.

191
00:15:03,550 --> 00:15:05,170
Iniziamo con questo qui.

192
00:15:05,320 --> 00:15:07,080
Cambiamo questo per essere.

193
00:15:07,480 --> 00:15:13,710
La password deve essere compresa tra 5 e 10 caratteri

194
00:15:16,960 --> 00:15:18,450
e aggiornata.

195
00:15:18,490 --> 00:15:22,300
Assicurati di compilare tutto il resto in modo che possiamo ottenere questo errore.

196
00:15:22,890 --> 00:15:29,200
E faccio clic su Invia e puoi vedere che ricevo quel messaggio che impostiamo la password deve essere tra

197
00:15:29,200 --> 00:15:30,670
5 e 10 caratteri.

198
00:15:31,480 --> 00:15:33,620
Quindi questo è ciò che questo titolo sta facendo.

199
00:15:33,820 --> 00:15:36,710
In pratica è il messaggio di errore che viene visualizzato.

200
00:15:37,410 --> 00:15:45,120
questa sintassi stiamo solo definendo la lunghezza di un intervallo di lunghezza accettabile per questo input.

201
00:15:45,180 --> 00:15:52,120
Quindi l'altra nuova parte è questo pattern e questo è un po 'strano ma usando

202
00:15:52,120 --> 00:15:56,740
Quindi se cambiamo questo per due o

203
00:16:03,420 --> 00:16:10,670
tre, invio ancora non accettabili quelli non accettabili ma due è accettabile.

204
00:16:11,470 --> 00:16:15,460
Quindi questo è solo la definizione di una gamma o un modello che dobbiamo seguire.

205
00:16:15,930 --> 00:16:20,990
Quindi c'è sicuramente di più in questo puoi fare altre cose oltre a una lunghezza minima o una gamma di lunghezze, ma questo è tutto

206
00:16:21,390 --> 00:16:23,350
ciò di cui avevo bisogno che tu trovassi qui.

207
00:16:23,350 --> 00:16:27,660
Se non sei riuscito a scoprire che non ti preoccupare è ancora molto presto.

208
00:16:27,820 --> 00:16:32,110
Ma ci saranno più opportunità per te di provare cose del genere.

209
00:16:32,160 --> 00:16:42,370
Quindi ho una soluzione completa che ho scritto che è completa in quanto ha il giorno intero e gli input di anno e mese e

210
00:16:42,700 --> 00:16:45,860
puoi vedere che è un po 'un casino.

211
00:16:45,900 --> 00:16:50,790
Non l'ho scritto a mano e non mi aspettavo che lo scrivessi a mano.

212
00:16:51,100 --> 00:16:53,940
Quindi vedremo come generarlo in seguito nella classe.

213
00:16:53,950 --> 00:16:58,120
Potresti usare javascript per farlo per te, quindi non devi assolutamente scriverlo.

214
00:16:58,450 --> 00:16:59,580
Quindi dai un'occhiata alla soluzione.

215
00:16:59,590 --> 00:17:00,670
Se hai qualche domanda