1
00:00:00,930 --> 00:00:06,100
Entonces en este video vamos a seguir adelante y crear una solución para este formulario de registro.

2
00:00:06,640 --> 00:00:09,360
Así que tengo un nuevo archivo para guardarlo.

3
00:00:09,540 --> 00:00:17,910
Voy a llamar a este formulario de registro que HDMI usaré mi atajo sublime y pondré en funcionamiento nuestra

4
00:00:22,200 --> 00:00:25,220
placa de la caldera de la caldera.

5
00:00:26,370 --> 00:00:31,010
Entonces, cuando nos enfrentamos a un proyecto como este, hay bastantes lugares donde podríamos comenzar.

6
00:00:31,260 --> 00:00:39,120
Y lo primero que voy a hacer es agregar el formulario Tagen y luego también voy

7
00:00:40,200 --> 00:00:41,160
a agregar

8
00:00:44,160 --> 00:00:47,940
esta H1 arriba y Louis se registra.

9
00:00:48,060 --> 00:00:53,510
Así que adelante, abra nuestro formulario de registro aquí y muévalo.

10
00:00:53,970 --> 00:00:59,580
Ok, todavía no está allí, pero al menos o Cada uno se ve bien.

11
00:01:00,060 --> 00:01:05,730
Así que volvamos a lo sublime y pongámonos, comencemos con lo más simple, debería ser este

12
00:01:05,730 --> 00:01:07,340
este nivel superior de entradas.

13
00:01:07,500 --> 00:01:11,670
El primer nombre y apellido

14
00:01:11,670 --> 00:01:13,750
Entonces comenzaremos con la entrada.

15
00:01:14,400 --> 00:01:20,370
Y esos son tipo igual a texto ups.

16
00:01:22,900 --> 00:01:29,610
ser John, hagamos otro marcador de posición, Smith, y luego tenemos que dar dos etiquetas.

17
00:01:30,020 --> 00:01:35,640
Y vamos a darle un marcador de posición que parece que debería

18
00:01:36,120 --> 00:01:39,270
Entonces podríamos usar cualquier sintaxis para las etiquetas.

19
00:01:39,270 --> 00:01:42,970
Voy a usar los cuatro.

20
00:01:43,260 --> 00:01:48,950
Así que llamaré esto primero y nos aseguraremos de obtener una identificación igual a la primera.

21
00:01:50,040 --> 00:01:57,180
Y luego esta etiqueta dirá el nombre de dos puntos que nos dará eso y luego tenemos

22
00:01:57,180 --> 00:01:59,020
que hacer exactamente lo mismo.

23
00:01:59,220 --> 00:02:12,750
Otra etiqueta para el último de, digamos, un apellido de dos puntos y luego necesitamos dar a esta identificación la última palabra.

24
00:02:15,810 --> 00:02:19,200
Entonces, revisemos y veamos lo que tenemos.

25
00:02:19,680 --> 00:02:21,820
Hasta aquí todo bien.

26
00:02:21,960 --> 00:02:27,650
Hay una pequeña cosa que nos falta, que es que no le hemos

27
00:02:27,660 --> 00:02:35,540
dado un nombre a estas entradas, así que primero dale el nombre y nombra el último gran.

28
00:02:35,550 --> 00:02:37,950
Pasemos al próximo fragmento aquí.

29
00:02:38,090 --> 00:02:41,640
Lo que en realidad nos falta una cosa son las validaciones.

30
00:02:41,640 --> 00:02:46,540
Entonces, mientras estemos aquí, recuerde que el nombre y el apellido no deben estar en blanco.

31
00:02:46,590 --> 00:02:54,000
Entonces, para hacer eso es muy simple, simplemente agregamos el atributo requerido en las entradas requeridas

32
00:02:54,000 --> 00:02:56,160
y lo configuramos como verdadero.

33
00:02:56,340 --> 00:03:00,690
Así que voy a seguir adelante y expandir esto solo para que podamos ver un poco más claro

34
00:03:00,690 --> 00:03:01,550
en qué estamos trabajando.

35
00:03:02,190 --> 00:03:08,320
Entonces, lo siguiente que consultamos aquí es el botón de selección de género.

36
00:03:08,580 --> 00:03:12,060
Entonces necesitamos tener tres botones de radio.

37
00:03:12,210 --> 00:03:18,940
Entonces esos son tipos de entrada iguales a la radio.

38
00:03:19,470 --> 00:03:21,600
Tres de ellos.

39
00:03:21,600 --> 00:03:27,750
Y si echamos un vistazo con eso, lo primero que veremos es que están en línea con los otros elementos, que

40
00:03:27,750 --> 00:03:32,300
en realidad no es lo que se supone que debe ser la forma que le di.

41
00:03:32,460 --> 00:03:36,870
Entonces tenemos algunas opciones para que las cosas se comporten.

42
00:03:36,870 --> 00:03:38,220
Podemos incluirlos en

43
00:03:41,910 --> 00:03:46,620
un párrafo como este solo agregue un poco de espacio.

44
00:03:46,680 --> 00:03:49,710
Ahora los tenemos en una línea separada.

45
00:03:49,860 --> 00:03:52,840
Solo voy a usar un div aquí.

46
00:03:54,330 --> 00:03:56,020
Ahí vas en un div.

47
00:03:56,190 --> 00:03:57,940
No tiene el mismo espaciado

48
00:03:57,980 --> 00:04:03,600
Un párrafo en el video de C S S hablará en realidad sobre lo que es el espaciado.

49
00:04:03,960 --> 00:04:06,580
Así que ahora tenemos que seguir y agregar o

50
00:04:09,240 --> 00:04:15,010
etiquetas y antes de hacerlo comencemos a darles el mismo nombre, así que el nombre será de género aquí.

51
00:04:15,640 --> 00:04:24,660
Avancemos y deberíamos haber usado mi atajo aquí, que consiste en hacer clic en múltiples cursores para que les den

52
00:04:24,660 --> 00:04:31,080
un nombre de género cruzado y luego les demos a cada uno un valor.

53
00:04:31,290 --> 00:04:35,460
Entonces, el primero, el valor será masculino.

54
00:04:35,460 --> 00:04:37,140
El segundo será femenino.

55
00:04:37,140 --> 00:04:40,860
El último es o bien y actualiza.

56
00:04:41,010 --> 00:04:44,390
No vemos nada de eso, por supuesto, porque eso es solo detrás de las escenas.

57
00:04:44,730 --> 00:04:47,210
Entonces, lo que tenemos que hacer es agregar en nuestras etiquetas.

58
00:04:47,580 --> 00:04:51,150
Entonces vamos a querer tres etiquetas.

59
00:04:51,150 --> 00:04:57,080
Primero, vamos a decir la etiqueta cuatro y llamaremos a este macho

60
00:05:02,090 --> 00:05:03,750
que tenemos aquí.

61
00:05:03,900 --> 00:05:09,470
No, el correo de Colon es tan simple y, luego, el Id es igual al correo.

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

63
00:05:11,010 --> 00:05:13,590
Otra etiqueta aquí.

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

65
00:05:15,730 --> 00:05:21,150
Y luego vamos a querer decir "Id me for you cause female".

66
00:05:21,490 --> 00:05:25,830
Y luego dices ID que causas mujer.

67
00:05:25,840 --> 00:05:31,130
Entonces, como puedes ver construyendo estas formas, a veces es un poco tedioso.

68
00:05:31,140 --> 00:05:35,800
Tienes un montón de etiquetas y muchas cosas desordenadas, solo tienes que tener

69
00:05:36,220 --> 00:05:38,940
mucho cuidado para que todo funcione correctamente.

70
00:05:38,940 --> 00:05:47,500
Entonces queremos otro, quiero decir que también queremos ID.

71
00:05:47,710 --> 00:05:50,500
Así que solo revisemos esto para ver lo que tenemos.

72
00:05:50,620 --> 00:05:50,910
Todo bien.

73
00:05:50,940 --> 00:05:51,980
Eso se ve genial.

74
00:05:52,000 --> 00:05:55,680
Solo podemos seleccionar uno que es lo que queremos.

75
00:05:55,720 --> 00:06:01,860
Lo siguiente que podemos hacer es avanzar y agregar el botón de enviar al final mientras estamos aquí.

76
00:06:01,990 --> 00:06:06,480
Entonces ese será el tipo de entrada igual a enviar.

77
00:06:07,600 --> 00:06:09,540
Y asegurémonos de que la validación funcione.

78
00:06:09,730 --> 00:06:13,810
Sí, está muy bien en buena forma.

79
00:06:15,250 --> 00:06:17,930
Así que, luego, tenemos un correo electrónico y un campo de contraseña.

80
00:06:18,310 --> 00:06:20,230
Y esos también están en línea nueva.

81
00:06:20,230 --> 00:06:27,900
Entonces continuemos y agreguemos otro div y vamos a hacer una entrada y esta vez es un tipo igual al correo

82
00:06:28,100 --> 00:06:28,640
electrónico.

83
00:06:28,660 --> 00:06:37,710
No se trata solo de texto y el marcador de posición aquí fue su correo electrónico, que no es el mejor texto de marcador de

84
00:06:37,720 --> 00:06:42,400
posición, pero vamos a seguir con esa imagen, asegúrese de seguir la tarea.

85
00:06:42,390 --> 00:06:47,950
Entonces, el tipo de entrada es el marcador de posición de correo electrónico es su correo electrónico y luego tenemos otro para

86
00:06:51,850 --> 00:06:53,940
la contraseña y eso nos da dos entradas.

87
00:06:54,310 --> 00:07:01,390
A continuación, podemos ir con el nombre para decir simplemente el nombre es correo electrónico aquí miembro en caso de que esté confundido.

88
00:07:01,690 --> 00:07:09,270
descubrir cómo enviar los datos, ¿qué deberíamos enviar a los datos en la solicitud en Cómo se llama?

89
00:07:09,270 --> 00:07:12,480
Ese nombre se usa puramente entre bastidores para

90
00:07:12,580 --> 00:07:16,520
Entonces, en este caso, lo que escribamos en este campo se llamará correo electrónico.

91
00:07:16,870 --> 00:07:19,300
Entonces, no vemos ningún impacto por las dudas.

92
00:07:19,310 --> 00:07:24,200
Creo que esta es una de las partes más confusas porque no es muy visual.

93
00:07:24,670 --> 00:07:30,750
Así que este dirá que el nombre fue una contraseña y luego continuemos y agreguemos o etiquetas.

94
00:07:30,940 --> 00:07:40,210
Entonces, para mezclarlo aquí, usaré el otro tipo de etiqueta, que es donde anidamos los datos dentro de

95
00:07:40,330 --> 00:07:41,390
la etiqueta.

96
00:07:41,560 --> 00:07:49,800
Entonces diré dos puntos de correo electrónico en lugar de los cuatro y la sintaxis de Id.

97
00:07:49,810 --> 00:07:56,520
Funcionan de la misma manera que nosotros hacemos correo electrónico y contraseña.

98
00:07:57,060 --> 00:07:58,490
Seamos muy precisos.

99
00:07:58,690 --> 00:08:00,360
Hay dos puntos en ambos.

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

101
00:08:01,210 --> 00:08:10,090
Pero guarda eso y hay otra cosa que deberíamos echarle un vistazo y ver si las validaciones

102
00:08:10,090 --> 00:08:13,330
están en su lugar llene esto.

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

104
00:08:16,060 --> 00:08:20,670
Entonces, una cosa que nos falta es que necesitamos solicitar el correo electrónico.

105
00:08:21,510 --> 00:08:30,170
Entonces, necesitamos ir a nuestro correo electrónico y agregar el requerido ahora que actualizamos los completan.

106
00:08:30,580 --> 00:08:35,000
Dejamos el correo electrónico en blanco si escribimos un correo electrónico no válido.

107
00:08:35,010 --> 00:08:36,640
Obtenemos este error.

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

109
00:08:39,510 --> 00:08:41,940
Hasta ahora, todo se ve bien.

110
00:08:41,950 --> 00:08:47,670
Vamos a volver a la validación de la contraseña de bonificación al final antes de llegar allí.

111
00:08:47,670 --> 00:08:50,780
Pasemos a la selección de cumpleaños.

112
00:08:50,920 --> 00:08:53,140
Entonces tres menús desplegables.

113
00:08:53,500 --> 00:09:02,670
Así que de nuevo puedes agregar otro div y esta vez en este div vamos a agregar tres selecciones diferentes.

114
00:09:02,980 --> 00:09:06,920
Entonces uno dos tres.

115
00:09:07,240 --> 00:09:13,070
Comencemos con este primero que es de cuatro meses y sigamos adelante y comencemos con la etiqueta.

116
00:09:13,120 --> 00:09:15,620
Solo hay una etiqueta aquí para todo.

117
00:09:16,000 --> 00:09:24,300
Así que sabes hacerlo como esta etiqueta y poner los tres temas en el interior

118
00:09:24,310 --> 00:09:31,330
y esta etiqueta iba a decir un cumpleaños y va a ser así.

119
00:09:31,330 --> 00:09:39,040
Entonces, si vemos lo que tenemos, nuestras tres entradas son tres etiquetas y todo lo que tenemos que hacer

120
00:09:39,040 --> 00:09:41,450
es agregar adentro los datos correctos.

121
00:09:41,470 --> 00:09:44,380
Entonces eso es un montón de opciones.

122
00:09:44,400 --> 00:09:49,230
Entonces, el primero vamos y agrego que voy a hacer dos o tres aquí, así será durante meses.

123
00:09:49,410 --> 00:09:53,950
Así que haremos enero y marzo.

124
00:09:55,760 --> 00:09:58,290
El siguiente hace lo mismo.

125
00:09:58,330 --> 00:10:02,240
Solo unas pocas opciones y esto será por un día.

126
00:10:02,250 --> 00:10:03,240
Entonces comenzaremos.

127
00:10:03,430 --> 00:10:07,430
Hagamos dos dígitos a 10 11 y 12.

128
00:10:07,620 --> 00:10:09,600
Y el último será el año.

129
00:10:10,180 --> 00:10:17,640
Solo haga tres de nuevo y hagamos 1999 2000 2001.

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

131
00:10:19,810 --> 00:10:22,310
Y puedes ver que bajamos aquí.

132
00:10:22,330 --> 00:10:29,950
Hay una pequeña diferencia, sin embargo, es que comenzamos de inmediato con enero y los números

133
00:10:29,950 --> 00:10:31,220
y el año.

134
00:10:31,690 --> 00:10:38,090
Pero el que te di comienza con mes, día y año.

135
00:10:38,320 --> 00:10:40,150
Entonces hay algunas maneras de hacerlo.

136
00:10:40,180 --> 00:10:46,570
HDMI el formulario simplemente escoge la primera opción y decide el valor inicial.

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

138
00:10:53,010 --> 00:11:00,980
más simple es solo para hacer que la primera opción diga mes día y año y al

139
00:11:00,980 --> 00:11:01,870
hacer eso

140
00:11:02,080 --> 00:11:05,050
Entonces esa es la forma más común de hacer eso.

141
00:11:05,350 --> 00:11:08,040
Entonces, ahora nuestra firma se ve bastante bien.

142
00:11:08,050 --> 00:11:16,420
podamos agregar otro div aquí y entonces esa es la div adecuada en vez de esta.

143
00:11:16,430 --> 00:11:17,320
Vamos a

144
00:11:20,150 --> 00:11:29,290
comenzar con la etiqueta. Esta vez hagamos cuatro y esta vez vamos a llamar lo llamaremos acordado.

145
00:11:29,330 --> 00:11:38,050
Solo necesitamos nuestra casilla de verificación Estoy de acuerdo con los términos y condiciones para que

146
00:11:38,370 --> 00:11:41,320
Estuve de acuerdo con los términos

147
00:11:44,290 --> 00:11:54,460
y condiciones y luego lo siguiente que necesitamos es nuestra casilla de verificación de las casillas de entrada. Démosle

148
00:11:56,200 --> 00:12:00,310
ID porque acepté y nombré, y también acepté.

149
00:12:01,120 --> 00:12:05,970
Y eso es lo que vemos que se ve bien para mí.

150
00:12:06,000 --> 00:12:11,690
Entonces, una cosa que también debemos agregar a nuestras etiquetas de selección es el nombre.

151
00:12:11,910 --> 00:12:13,440
Así que llamemos este

152
00:12:18,610 --> 00:12:22,660
mes y este del día y este estará aquí.

153
00:12:23,590 --> 00:12:30,910
Y recuerde que si no quisiéramos en enero y Fab y Mar fueran lo que realmente se envió

154
00:12:30,900 --> 00:12:36,350
si quisiera que fuera algo diferente, como un número correspondiente, pondríamos un valor aquí.

155
00:12:36,370 --> 00:12:40,030
Entonces para enero podríamos poner el valor 1 en este caso.

156
00:12:40,090 --> 00:12:41,850
Estoy bien con solo tener a Jan allí.

157
00:12:41,860 --> 00:12:45,130
No especifiqué cómo se debe comportar.

158
00:12:45,930 --> 00:12:48,670
Así que volvemos aquí, se ve bastante bien.

159
00:12:48,660 --> 00:12:50,700
Todo se ve igual.

160
00:12:50,710 --> 00:12:57,230
Lo último que realmente tenemos que discutir es la validación de la contraseña real.

161
00:12:57,370 --> 00:13:00,680
Entonces quiero mostrarte cómo podrías encontrar eso.

162
00:13:00,700 --> 00:13:09,860
Así que voy a abrir la validación de la longitud HMO y probemos eso.

163
00:13:10,930 --> 00:13:13,560
Como puedes ver, ya he estado aquí.

164
00:13:13,840 --> 00:13:17,980
Esto es algo que tuve que buscar recientemente y parece.

165
00:13:17,980 --> 00:13:21,050
Así que esto es Stack Overflow por cierto si no has visto esto antes.

166
00:13:21,070 --> 00:13:23,850
Esto permite que alguien haga una pregunta.

167
00:13:24,510 --> 00:13:29,140
¿Hay algún otro atributo que lo destaque con la ayuda de la cual puedo establecer un valor mínimo

168
00:13:29,130 --> 00:13:30,000
para los campos?

169
00:13:30,370 --> 00:13:35,160
Y luego las personas proporcionan respuestas y las respuestas más votadas aparecen primero.

170
00:13:35,530 --> 00:13:40,590
Entonces, esta respuesta dice que puedes usar el atributo de patrón. También se necesita el atributo requerido.

171
00:13:40,690 --> 00:13:44,770
De lo contrario, un campo de entrada con un valor vacío se excluirá de la validación de la restricción.

172
00:13:45,000 --> 00:13:45,770
DE ACUERDO.

173
00:13:46,210 --> 00:13:48,960
Entonces parece que esto es todo lo que necesitamos.

174
00:13:49,690 --> 00:13:55,500
Entonces, esta es una entrada que le damos, el patrón es igual a esta cosa que parece extraña.

175
00:13:56,440 --> 00:13:59,050
Y luego se requiere y luego este título.

176
00:13:59,110 --> 00:14:05,230
Entonces, incluso antes de siquiera preguntar qué hace esto y qué hace este cinco 10 común.

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

178
00:14:06,630 --> 00:14:10,620
Así que vamos a buscar nuestra contraseña y esto es mucho de lo que.

179
00:14:10,620 --> 00:14:15,340
Ser desarrollador es mucho copiar y pegar algunas cosas o encontrar algún código

180
00:14:15,340 --> 00:14:15,940
y ajustarlo.

181
00:14:16,450 --> 00:14:21,250
Entonces tenemos que hacer que esto se ajuste a lo que tenemos, que es un nombre de entrada, es el tipo de contraseña porque la contraseña.

182
00:14:21,460 --> 00:14:27,340
Así que solo voy a copiar estos tres atributos.

183
00:14:27,340 --> 00:14:33,020
Así que ahora tenemos que escribir su patrón de contraseña: se requieren cinco y 10.

184
00:14:33,340 --> 00:14:36,670
Y el título equivale a cinco a 10 caracteres.

185
00:14:36,760 --> 00:14:41,190
Así que vamos a ver qué refresca esto.

186
00:14:41,400 --> 00:14:45,180
Asegúrate de tener todo lo demás completado.

187
00:14:45,630 --> 00:14:48,740
Hago clic en enviar y me dice que complete este campo.

188
00:14:48,820 --> 00:14:57,310
De cinco a 10 caracteres y tipo 2 y tipo 3 y escribe más de 10 no funciona.

189
00:14:57,580 --> 00:15:01,290
Pero si escribo cinco o seis, funciona.

190
00:15:01,300 --> 00:15:03,520
Exploremos un poco más.

191
00:15:03,550 --> 00:15:05,170
Comencemos con este aquí.

192
00:15:05,320 --> 00:15:07,080
Cambiemos esto para ser.

193
00:15:07,480 --> 00:15:13,710
La contraseña debe tener entre cinco y 10 caracteres

194
00:15:16,960 --> 00:15:18,450
y actualizarse.

195
00:15:18,490 --> 00:15:22,300
Asegúrate de completar todo lo demás para que podamos obtener este error.

196
00:15:22,890 --> 00:15:29,200
Y hago clic en enviar y puede ver que recibo el mensaje de que establecemos la contraseña debe tener

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

198
00:15:31,480 --> 00:15:33,620
Así que eso es lo que hace este título.

199
00:15:33,820 --> 00:15:36,710
Básicamente es el mensaje de error que se muestra.

200
00:15:37,410 --> 00:15:45,120
sintaxis solo estamos definiendo la longitud de un rango de longitud completa que es aceptable para esta entrada.

201
00:15:45,180 --> 00:15:52,120
Entonces la otra parte nueva es este patrón y esto es un poco raro, pero usando esta

202
00:15:52,120 --> 00:15:56,740
Entonces, si cambiamos esto para que sea de dos

203
00:16:03,420 --> 00:16:10,670
a tres, aún no se aceptan aceptables, pero no son aceptables, pero dos son aceptables.

204
00:16:11,470 --> 00:16:15,460
Entonces esto es solo definir un rango o patrón que debemos seguir.

205
00:16:15,930 --> 00:16:20,990
Así que definitivamente hay más en esto que puede hacer otras cosas además de una longitud mínima o un rango de longitudes, pero

206
00:16:21,390 --> 00:16:23,350
eso es todo lo que necesitaba que encuentre aquí.

207
00:16:23,350 --> 00:16:27,660
Si no pudo encontrar eso, no entre en pánico, es muy temprano.

208
00:16:27,820 --> 00:16:32,110
Pero habrá más oportunidades para que intentes cosas como esas.

209
00:16:32,160 --> 00:16:42,370
Así que tengo una solución completa que escribí, que está completa porque tiene las entradas de día completo y año y mes y

210
00:16:42,700 --> 00:16:45,860
se puede ver que es un desastre.

211
00:16:45,900 --> 00:16:50,790
No escribí esto a mano y tampoco esperaba que escribieras esto a mano.

212
00:16:51,100 --> 00:16:53,940
Veremos cómo generar esto más adelante en la clase.

213
00:16:53,950 --> 00:16:58,120
Puede usar javascript para hacerlo por usted, así que no tiene que escribirlo.

214
00:16:58,450 --> 00:16:59,580
Así que eche un vistazo a la solución.

215
00:16:59,590 --> 00:17:00,670
Si tienes alguna pregunta