1
00:00:00,930 --> 00:00:06,100
Então, neste vídeo, vamos seguir em frente e criar uma solução para este formulário de registro.

2
00:00:06,640 --> 00:00:09,360
Então eu tenho um novo arquivo para salvá-lo.

3
00:00:09,540 --> 00:00:17,910
Eu só vou ligar para este formulário de registro que HDMI vou usar meu atalho sublime e obter

4
00:00:22,200 --> 00:00:25,220
a nossa placa de caldeira da caldeira.

5
00:00:26,370 --> 00:00:31,010
Então, quando nos deparamos com um projeto como esse, há alguns lugares que podemos começar.

6
00:00:31,260 --> 00:00:39,120
E a primeira coisa que eu vou fazer é adicionar o formulário Tagen e então também vou adicionar este

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

8
00:00:44,160 --> 00:00:47,940
acima do top aqui e Louis colocar o registro.

9
00:00:48,060 --> 00:00:53,510
Então, vamos em frente e abra nosso formulário de inscrição aqui e mova-o.

10
00:00:53,970 --> 00:00:59,580
Ok, não está bem lá, mas pelo menos ou Cada um está bem.

11
00:01:00,060 --> 00:01:05,730
Então, vamos voltar a sublimar e vamos enfiar, vamos começar com a coisa mais simples deve ser

12
00:01:05,730 --> 00:01:07,340
esse nível superior de insumos.

13
00:01:07,500 --> 00:01:11,670
O primeiro nome e sobrenome.

14
00:01:11,670 --> 00:01:13,750
Então, vamos começar com a entrada.

15
00:01:14,400 --> 00:01:20,370
E esses são tipos iguais ao texto ups.

16
00:01:22,900 --> 00:01:29,610
vamos fazer outro marcador de posição Smith e então precisamos dar dois rótulos.

17
00:01:30,020 --> 00:01:35,640
E vamos dar-lhe um espaço reservado que parece ser John,

18
00:01:36,120 --> 00:01:39,270
Então, podemos usar qualquer sintaxe para rótulos.

19
00:01:39,270 --> 00:01:42,970
Eu vou usar os quatro.

20
00:01:43,260 --> 00:01:48,950
Então, eu vou chamar isso primeiro e nós teremos certeza de que nós obteremos um ID igual a primeiro.

21
00:01:50,040 --> 00:01:57,180
E, em seguida, este rótulo irá dizer o primeiro nome do cólon que nos dará isso e então precisamos

22
00:01:57,180 --> 00:01:59,020
fazer exatamente a mesma coisa.

23
00:01:59,220 --> 00:02:12,750
Outro rótulo para o último de dizer um sobrenome em dois pontos e, em seguida, precisamos dar essa identificação igual a última.

24
00:02:15,810 --> 00:02:19,200
Então, vamos verificar e ver o que temos.

25
00:02:19,680 --> 00:02:21,820
Por enquanto, tudo bem.

26
00:02:21,960 --> 00:02:27,650
Há uma coisa pequena que estamos perdendo, e não temos dado

27
00:02:27,660 --> 00:02:35,540
a essas entradas um nome, então, dê-lhe primeiro o nome e nomeie o último ótimo.

28
00:02:35,550 --> 00:02:37,950
Então, vamos para o próximo pedaço aqui.

29
00:02:38,090 --> 00:02:41,640
O que realmente nos falta uma coisa que é a validade.

30
00:02:41,640 --> 00:02:46,540
Então, enquanto estamos aqui, lembre-se de que o primeiro nome e o sobrenome não devem estar em branco.

31
00:02:46,590 --> 00:02:54,000
Então, para fazer isso, é muito simples, apenas adicionamos o atributo necessário nas entradas necessárias

32
00:02:54,000 --> 00:02:56,160
e definimos isso como verdadeiro.

33
00:02:56,340 --> 00:03:00,690
Então, vou avançar e expandir isso apenas para que possamos ver um pouco mais claro sobre o

34
00:03:00,690 --> 00:03:01,550
que estamos trabalhando.

35
00:03:02,190 --> 00:03:08,320
Então, a próxima coisa se consultarmos o formulário aqui é o botão de rádio de gênero.

36
00:03:08,580 --> 00:03:12,060
Então precisamos ter três botões de rádio.

37
00:03:12,210 --> 00:03:18,940
Então, esses são tipos de entrada igual ao rádio.

38
00:03:19,470 --> 00:03:21,600
Três deles.

39
00:03:21,600 --> 00:03:27,750
E se dar uma olhada com isso nos dá a primeira coisa que você verá, é que eles estão de acordo com

40
00:03:27,750 --> 00:03:32,300
os outros elementos, que na verdade não é o que a forma que eu lhe dei.

41
00:03:32,460 --> 00:03:36,870
Então, temos algumas opções para que as coisas se comportem.

42
00:03:36,870 --> 00:03:38,220
Podemos jogá-los

43
00:03:41,910 --> 00:03:46,620
em um parágrafo como este, apenas adicione algum espaçamento.

44
00:03:46,680 --> 00:03:49,710
Agora, nós os colocamos em uma linha separada.

45
00:03:49,860 --> 00:03:52,840
Eu vou usar uma div aqui.

46
00:03:54,330 --> 00:03:56,020
Lá você entra em uma div.

47
00:03:56,190 --> 00:03:57,940
Não tem o mesmo espaçamento.

48
00:03:57,980 --> 00:04:03,600
Um parágrafo no vídeo C S S realmente falará sobre o que esse espaçamento é.

49
00:04:03,960 --> 00:04:06,580
Então, agora precisamos seguir em frente e adicionar

50
00:04:09,240 --> 00:04:15,010
ou rótulos e antes de fazermos, vamos começar a dar-lhes o mesmo nome, então o nome será gênero aqui.

51
00:04:15,640 --> 00:04:24,660
Vamos seguir em frente e deveria ter usado o meu atalho aqui, que é para mandar clicar em vários cursores

52
00:04:24,660 --> 00:04:31,080
para que os obtenha nomeando gênero cruzado e, em seguida, vamos dar-lhes cada um valor.

53
00:04:31,290 --> 00:04:35,460
Então, o primeiro, o valor será masculino.

54
00:04:35,460 --> 00:04:37,140
A segunda será feminina.

55
00:04:37,140 --> 00:04:40,860
O último é também e atualize.

56
00:04:41,010 --> 00:04:44,390
Nós não vemos nada disso, é claro, porque é só por trás dos bastidores.

57
00:04:44,730 --> 00:04:47,210
Então, o que precisamos fazer é adicionar em nossos rótulos.

58
00:04:47,580 --> 00:04:51,150
Então vamos querer três etiquetas.

59
00:04:51,150 --> 00:04:57,080
O primeiro vai dizer o rótulo quatro e nós vamos chamar isso de

60
00:05:02,090 --> 00:05:03,750
masculinismo que temos aqui.

61
00:05:03,900 --> 00:05:09,470
Não há apenas o correio de Colon e então Id é igual ao correio.

62
00:05:09,940 --> 00:05:11,020
Mesma coisa.

63
00:05:11,010 --> 00:05:13,590
Outro rótulo aqui.

64
00:05:13,600 --> 00:05:15,250
Este será feminino.

65
00:05:15,730 --> 00:05:21,150
E então vamos querer dizer Id me para você, porque feminino.

66
00:05:21,490 --> 00:05:25,830
E então você continua dizendo que você causa sexo feminino.

67
00:05:25,840 --> 00:05:31,130
Então, como você pode ver a construção dessas formas, às vezes é um pouco tedioso.

68
00:05:31,140 --> 00:05:35,800
Você tem um monte de rótulos e muitas coisas de bagunça que você precisa ter

69
00:05:36,220 --> 00:05:38,940
cuidado demais para que você tenha tudo correspondente corretamente.

70
00:05:38,940 --> 00:05:47,500
Então, queremos por outro, quero dizer, queremos fazer identidade igual a qualquer um.

71
00:05:47,710 --> 00:05:50,500
Então, vamos verificar isso, veja o que temos.

72
00:05:50,620 --> 00:05:50,910
Tudo bem.

73
00:05:50,940 --> 00:05:51,980
Isso parece ótimo.

74
00:05:52,000 --> 00:05:55,680
Só podemos selecionar um que é o que queremos.

75
00:05:55,720 --> 00:06:01,860
A seguir, podemos seguir em frente e vamos adicionar o botão de envio no final apenas enquanto estivermos aqui.

76
00:06:01,990 --> 00:06:06,480
Então, esse será o tipo de entrada igual a submeter.

77
00:06:07,600 --> 00:06:09,540
E vamos apenas garantir que a validação funcione.

78
00:06:09,730 --> 00:06:13,810
Sim, é ótimo em boa forma.

79
00:06:15,250 --> 00:06:17,930
Então, em seguida, temos um campo de e-mail e senha.

80
00:06:18,310 --> 00:06:20,230
E esses também estão na linha nova.

81
00:06:20,230 --> 00:06:27,900
Então, vamos em frente e adicione outra div e vamos fazer uma entrada e, desta vez, é um tipo igual ao

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

83
00:06:28,660 --> 00:06:37,710
Não é apenas o texto e o espaço reservado aqui foi o seu e-mail, que certamente não é o melhor texto do espaço

84
00:06:37,720 --> 00:06:42,400
reservado, mas vamos ficar com essa imagem, certifique-se de seguir a tarefa.

85
00:06:42,390 --> 00:06:47,950
Então, o tipo de entrada é o espaço reservado do e-mail é o seu e-mail e, em seguida, temos outro para

86
00:06:51,850 --> 00:06:53,940
a senha e isso nos dá duas entradas.

87
00:06:54,310 --> 00:07:01,390
Em seguida, podemos seguir com o nome para apenas dizer que o nome é o membro do e-mail aqui se você estiver confuso.

88
00:07:01,690 --> 00:07:09,270
descobrir como enviar os dados, o que devemos enviar os dados no pedido sob o que é o nome dele.

89
00:07:09,270 --> 00:07:12,480
Esse nome é puramente usado nos bastidores para

90
00:07:12,580 --> 00:07:16,520
Então, neste caso, o que quer que digamos neste campo, será chamado de e-mail.

91
00:07:16,870 --> 00:07:19,300
Então, não vemos nenhum impacto, pelo caso.

92
00:07:19,310 --> 00:07:24,200
Eu acho que essa é uma das partes mais confusas porque não é muito visual.

93
00:07:24,670 --> 00:07:30,750
Então, este vai dizer que o nome foi senha e, então, vamos continuar e adicionar ou rótulos.

94
00:07:30,940 --> 00:07:40,210
Então, apenas para misturá-lo aqui vou usar o outro tipo de rótulo, onde é onde aninhamos os dados dentro do

95
00:07:40,330 --> 00:07:41,390
próprio rótulo.

96
00:07:41,560 --> 00:07:49,800
Então, dirá o e-mail do cólon do que os quatro e a sintaxe da Id.

97
00:07:49,810 --> 00:07:56,520
Eles funcionam da mesma maneira, façamos o email e a senha.

98
00:07:57,060 --> 00:07:58,490
Vamos ser muito precisos.

99
00:07:58,690 --> 00:08:00,360
Há dois pontos nos dois.

100
00:08:00,370 --> 00:08:00,920
Ótimo.

101
00:08:01,210 --> 00:08:10,090
Mas salve isso e há uma outra coisa que devemos dar uma olhada e ver se as

102
00:08:10,090 --> 00:08:13,330
validações estão em vigor, preencha isso.

103
00:08:13,750 --> 00:08:15,130
Não.

104
00:08:16,060 --> 00:08:20,670
Então, uma coisa que nos falta é que precisamos do e-mail.

105
00:08:21,510 --> 00:08:30,170
Então, precisamos ir ao nosso e-mail e adicionar necessário agora, atualizamos, preencha-os.

106
00:08:30,580 --> 00:08:35,000
Nós deixamos o email vazio se escrevemos um e-mail não válido.

107
00:08:35,010 --> 00:08:36,640
Recebemos esse erro.

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

109
00:08:39,510 --> 00:08:41,940
Então, até agora tudo parece ser bom.

110
00:08:41,950 --> 00:08:47,670
Vamos voltar para a validação da senha de bônus no final antes de chegar lá.

111
00:08:47,670 --> 00:08:50,780
Vamos passar para a seleção de aniversário.

112
00:08:50,920 --> 00:08:53,140
Então, três menus suspensos.

113
00:08:53,500 --> 00:09:02,670
Então, novamente você pode adicionar outra div e desta vez nesta div, vamos adicionar três seleções diferentes.

114
00:09:02,980 --> 00:09:06,920
Então, um dois três.

115
00:09:07,240 --> 00:09:13,070
Vamos começar com este primeiro que é de quatro meses e vamos em frente e comece com o rótulo.

116
00:09:13,120 --> 00:09:15,620
Há apenas um rótulo aqui para tudo.

117
00:09:16,000 --> 00:09:24,300
Então, você sabe fazê-lo como este rótulo e colocar todos os três assuntos dentro

118
00:09:24,310 --> 00:09:31,330
e este rótulo ia dizer um aniversário e isso ficará assim.

119
00:09:31,330 --> 00:09:39,040
Então, se vemos o que recebemos, temos nossas três entradas, são três rótulos e tudo o que precisamos fazer

120
00:09:39,040 --> 00:09:41,450
é adicionar os dados corretos dentro.

121
00:09:41,470 --> 00:09:44,380
Então é um monte de opções.

122
00:09:44,400 --> 00:09:49,230
Então, primeiro, vamos seguir em frente e acrescentar que vou fazer duas ou três aqui, então isso será por meses.

123
00:09:49,410 --> 00:09:53,950
Então vamos fazer janeiro e março.

124
00:09:55,760 --> 00:09:58,290
O próximo faz o mesmo.

125
00:09:58,330 --> 00:10:02,240
Apenas algumas opções e isso será por dia.

126
00:10:02,250 --> 00:10:03,240
Então vamos começar.

127
00:10:03,430 --> 00:10:07,430
Vamos fazer dois dígitos em 10 11 e 12.

128
00:10:07,620 --> 00:10:09,600
E o último será o ano.

129
00:10:10,180 --> 00:10:17,640
Basta fazer três novamente e vamos fazer 1999 2000 2001.

130
00:10:19,060 --> 00:10:19,590
Ótimo.

131
00:10:19,810 --> 00:10:22,310
E você pode ver o nosso caído aqui.

132
00:10:22,330 --> 00:10:29,950
Há uma pequena diferença, porém, que é o nosso começo imediatamente com janeiro e números

133
00:10:29,950 --> 00:10:31,220
e o ano.

134
00:10:31,690 --> 00:10:38,090
Mas o que eu te dei começa com o mês e o ano.

135
00:10:38,320 --> 00:10:40,150
Então, existem algumas maneiras de fazer isso.

136
00:10:40,180 --> 00:10:46,570
formato HDMI apenas escolherá a primeira opção e ele determinará o valor inicial.

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

138
00:10:53,010 --> 00:11:00,980
mais simples é apenas fazer a primeira opção dizer mês dia e ano e, ao fazer

139
00:11:00,980 --> 00:11:01,870
isso, o

140
00:11:02,080 --> 00:11:05,050
Então, essa é a maneira mais comum de fazer isso.

141
00:11:05,350 --> 00:11:08,040
Então agora nossa empresa parece muito boa.

142
00:11:08,050 --> 00:11:16,420
possamos adicionar ainda outra div aqui e, então, esta é devidamente div divina em vez disso,

143
00:11:16,430 --> 00:11:17,320
vamos começar

144
00:11:20,150 --> 00:11:29,290
com o rótulo desta vez, vamos fazer quatro e essa vamos chamar Vamos chamar isso de acordo.

145
00:11:29,330 --> 00:11:38,050
Nós só precisamos de nossa caixa de seleção final de acordo com termos e condições para que

146
00:11:38,370 --> 00:11:41,320
Eu concordei com os termos e

147
00:11:44,290 --> 00:11:54,460
condições e, em seguida, a próxima coisa que precisamos é nossa caixa de seleção de chamadas de fita, vamos dar uma

148
00:11:56,200 --> 00:12:00,310
ID porque eu concordei e nomeei e também concordei.

149
00:12:01,120 --> 00:12:05,970
E isso é o que conseguimos parece ser bom para mim.

150
00:12:06,000 --> 00:12:11,690
Então, uma coisa que também precisamos adicionar às nossas tags selecionadas é o nome.

151
00:12:11,910 --> 00:12:13,440
Então, ligue para este

152
00:12:18,610 --> 00:12:22,660
mês e este do dia e este estará aqui.

153
00:12:23,590 --> 00:12:30,910
E lembre-se que, se não quisesse em janeiro e fab e Mar para ser o que realmente foi enviado,

154
00:12:30,900 --> 00:12:36,350
se ele quisesse ser algo diferente, como um número correspondente, colocaríamos um valor aqui.

155
00:12:36,370 --> 00:12:40,030
Então, para janeiro, podemos colocar o valor 1 neste caso.

156
00:12:40,090 --> 00:12:41,850
Estou bem com apenas ter Jan lá.

157
00:12:41,860 --> 00:12:45,130
Não especifique como ele precisa se comportar.

158
00:12:45,930 --> 00:12:48,670
Então nós voltamos aqui, parece muito bom.

159
00:12:48,660 --> 00:12:50,700
Tudo parece o mesmo.

160
00:12:50,710 --> 00:12:57,230
A última coisa que realmente temos que discutir é a validação de senha real.

161
00:12:57,370 --> 00:13:00,680
Então, eu quero apenas mostrar-lhe como você poderia encontrar isso.

162
00:13:00,700 --> 00:13:09,860
Então, eu vou abrir a validação do comprimento HMO e vamos tentar isso.

163
00:13:10,930 --> 00:13:13,560
Como você pode ver, eu já estive aqui.

164
00:13:13,840 --> 00:13:17,980
Isso é algo que eu tive que procurar recentemente e parece ser.

165
00:13:17,980 --> 00:13:21,050
Então, este é o estouro de pilha, caso não tenha visto isso antes.

166
00:13:21,070 --> 00:13:23,850
Isso permite que alguém faça uma pergunta.

167
00:13:24,510 --> 00:13:29,140
Existe algum outro atributo que ele está lá, com a ajuda da qual eu posso definir um tamanho mínimo de

168
00:13:29,130 --> 00:13:30,000
valor para os campos.

169
00:13:30,370 --> 00:13:35,160
E, em seguida, as pessoas fornecem respostas e as respostas votadas mais altas aparecem primeiro.

170
00:13:35,530 --> 00:13:40,590
Então, esta resposta diz que você pode usar o atributo do padrão, o atributo necessário também é necessário.

171
00:13:40,690 --> 00:13:44,770
Caso contrário, um campo de entrada com um valor vazio será excluído da validação de restrições.

172
00:13:45,000 --> 00:13:45,770
ESTÁ BEM.

173
00:13:46,210 --> 00:13:48,960
Então, parece que isso é tudo o que precisamos.

174
00:13:49,690 --> 00:13:55,500
Então, esta é uma entrada que lhe damos padrão é igual a essa coisa estranha.

175
00:13:56,440 --> 00:13:59,050
E, em seguida, necessário e, em seguida, este título.

176
00:13:59,110 --> 00:14:05,230
Então, antes mesmo de perguntar sobre o que isso faz e o que esses cinco comuns 10 fazem.

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

178
00:14:06,630 --> 00:14:10,620
Então, vamos em frente, encontre nossa senha e isso é muito do que.

179
00:14:10,620 --> 00:14:15,340
Ser um desenvolvedor é que é uma grande quantidade de copiar e colar algumas coisas ou encontrar algum código

180
00:14:15,340 --> 00:14:15,940
e ajustá-lo.

181
00:14:16,450 --> 00:14:21,250
Então, precisamos fazer isso caber o que temos qual é um nome de entrada é o tipo de senha porque a senha.

182
00:14:21,460 --> 00:14:27,340
Então, apenas vou copiar esses três atributos.

183
00:14:27,340 --> 00:14:33,020
Então, agora temos um tipo de senha, o padrão é cinco e 10 necessários.

184
00:14:33,340 --> 00:14:36,670
E o título é igual a cinco a 10 caracteres.

185
00:14:36,760 --> 00:14:41,190
Então, vamos ver o que isso atualiza.

186
00:14:41,400 --> 00:14:45,180
Certifique-se de que temos tudo o mais preenchido.

187
00:14:45,630 --> 00:14:48,740
Eu clique em enviar e ele me diz, por favor preencha este campo.

188
00:14:48,820 --> 00:14:57,310
Cinco a 10 caracteres e tipo 2 e tipo 3 e digite mais de 10 não funciona.

189
00:14:57,580 --> 00:15:01,290
Mas se eu digitar cinco ou seis funciona.

190
00:15:01,300 --> 00:15:03,520
Então, vamos explorar um pouco mais.

191
00:15:03,550 --> 00:15:05,170
Vamos começar com este aqui.

192
00:15:05,320 --> 00:15:07,080
Vamos mudar isso para ser.

193
00:15:07,480 --> 00:15:13,710
A senha deve ter entre cinco e 10 caracteres

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

195
00:15:18,490 --> 00:15:22,300
Certifique-se de preencher tudo o resto para que possamos obter esse erro.

196
00:15:22,890 --> 00:15:29,200
E eu clicar em enviar e você pode ver que recebo essa mensagem que definimos a senha deve ter

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

198
00:15:31,480 --> 00:15:33,620
Então é isso que este título está fazendo.

199
00:15:33,820 --> 00:15:36,710
É basicamente a mensagem de erro que está sendo exibida.

200
00:15:37,410 --> 00:15:45,120
usando essa sintaxe, estamos apenas definindo o comprimento de uma extensão de comprimento total aceitável para essa entrada.

201
00:15:45,180 --> 00:15:52,120
Então, a outra parte nova é esse padrão e isso é certo um pouco estranho, mas

202
00:15:52,120 --> 00:15:56,740
Então, se mudarmos isso para ser dois ou

203
00:16:03,420 --> 00:16:10,670
três eu envio ainda não aceitos não aceitáveis, mas dois são aceitáveis.

204
00:16:11,470 --> 00:16:15,460
Então, isso é apenas definir um intervalo ou padrão que precisamos seguir.

205
00:16:15,930 --> 00:16:20,990
Então, definitivamente há mais isso, você pode fazer outras coisas, além de um comprimento mínimo ou uma série de comprimentos, mas isso

206
00:16:21,390 --> 00:16:23,350
é tudo que eu precisava que você achasse aqui.

207
00:16:23,350 --> 00:16:27,660
Se você não conseguiu descobrir que não entra em pânico, ainda é muito cedo.

208
00:16:27,820 --> 00:16:32,110
Mas haverá mais oportunidades para você tentar coisas assim.

209
00:16:32,160 --> 00:16:42,370
Então eu tenho uma solução completa que eu escrevi o que é completo na medida em que tem o dia inteiro e as insumos de ano e mês e

210
00:16:42,700 --> 00:16:45,860
você pode ver que é uma espécie de bagunça.

211
00:16:45,900 --> 00:16:50,790
Eu não escrevi isso à mão e não esperava que você escrevesse isso também.

212
00:16:51,100 --> 00:16:53,940
Então, veremos como gerar isso mais tarde na classe.

213
00:16:53,950 --> 00:16:58,120
Você poderia usar o javascript para fazê-lo por você, então você não precisa escrever isso.

214
00:16:58,450 --> 00:16:59,580
Então dê uma olhada na solução.

215
00:16:59,590 --> 00:17:00,670
Se você tiver quaisquer perguntas