1
00:00:00,210 --> 00:00:01,650
Bien, continuemos con el manejo formulario.

2
00:00:01,710 --> 00:00:06,120
Vamos a ver otro campo, por ejemplo, una lista desplegable SELECT, un combobox.

3
00:00:06,180 --> 00:00:09,390
También se le llama donde seleccionamos un elemento de una lista.

4
00:00:09,660 --> 00:00:11,670
Nos vamos a ir a la lista, al HTML.

5
00:00:12,030 --> 00:00:15,690
Entonces por acá index vamos a agregar 1 campo.

6
00:00:16,020 --> 00:00:24,630
Entonces al final, por ejemplo, por acá debajo de email, bajamos y vamos a tener un nuevo div dentro

7
00:00:24,720 --> 00:00:31,560
un label bajamos otro div con tab y dentro este elemento.

8
00:00:31,620 --> 00:00:36,510
Pero no es un input común y corriente, es un elemento de formulario del tipo SELECT.

9
00:00:36,840 --> 00:00:41,790
Entonces con las etiquetas select va a tener un name.

10
00:00:42,750 --> 00:00:53,370
Igual le podríamos llamar por ejemplo país, una lista países también con el Heidy igual país y cerramos.

11
00:00:54,090 --> 00:00:56,630
Vamos a bajar por acá, faltaría el for.

12
00:00:57,330 --> 00:00:59,700
El mismo que Leidy en este caso país también.

13
00:01:00,900 --> 00:01:03,180
Entonces un select olita plegable.

14
00:01:03,300 --> 00:01:04,230
Quiero tener opciones.

15
00:01:04,410 --> 00:01:11,160
Cada elemento, en este caso cada país va a ser una opción option que al final es un mapa.

16
00:01:11,280 --> 00:01:14,580
Es un diccionario que está basado en un nombre y un valor.

17
00:01:14,640 --> 00:01:17,100
El valor de esta opción y el nombre de esta opción.

18
00:01:17,160 --> 00:01:22,770
Por ejemplo, el valor podría ser un código, un Heidy del país y el nombre, el nombre el país.

19
00:01:22,950 --> 00:01:27,870
El nombre sería lo que se muestra el label y el valor es lo que se envía en el recuesto.

20
00:01:28,080 --> 00:01:33,570
Vamos a partir con una opción por defecto que diga seleccionar dos guiones, por ejemplo seleccionar

21
00:01:36,180 --> 00:01:41,520
guiones y en Valeo por acá valor válido lo dejamos sin valor.

22
00:01:41,700 --> 00:01:49,110
Eso sería por defecto bien, pero vamos a tener más, vamos a bajar otro option value por ejemplo,

23
00:01:49,280 --> 00:01:55,560
ese en mayúsculas o minúsculas de lo mismo da lo mismo simplemente un código país y como nombre España

24
00:01:56,700 --> 00:01:57,570
vamos a duplicar.

25
00:02:00,930 --> 00:02:02,280
Vamos a subir por acá.

26
00:02:02,370 --> 00:02:19,650
Seleccionamos México MX, por acá, céle Chile, Argentina y por acá AR Perú.

27
00:02:24,800 --> 00:02:35,930
Colombia C.O Venezuela listo, hoy tenemos una lista paisa 12, cada uno va a tener un nombre, asocia

28
00:02:35,930 --> 00:02:36,350
un valor.

29
00:02:36,470 --> 00:02:38,870
El nombre es lo que se muestra en esta lista desplegable.

30
00:02:39,000 --> 00:02:45,140
Solamente un tema visual es un label o etiqueta y el valor es el código que se envía del país.

31
00:02:45,230 --> 00:02:53,050
Podría ser un código así como s mx o un identificador, un Heidy por ejemplo España sea el 1, México

32
00:02:53,060 --> 00:02:56,780
sea el 2, Chile es el 3, Argentina el 4 y así algún código.

33
00:02:57,320 --> 00:03:01,850
Ya tenemos nuestra lista desplegable, vamos a tener otro más, otro elemento.

34
00:03:01,880 --> 00:03:06,590
Entonces por acá vamos a bajar y vamos a crear otro grupo.

35
00:03:06,710 --> 00:03:12,590
Vamos a tener ahora una lista desplegable muy parecido, pero en vez de poder seleccionar uno solo puedo

36
00:03:12,590 --> 00:03:16,970
seleccionar múltiples elementos, por ejemplo una lista con lenguajes de programación.

37
00:03:17,000 --> 00:03:19,220
Bueno, y cuáles son los lenguajes que domino?

38
00:03:19,250 --> 00:03:23,290
Por ejemplo Yaba ya he Springwood, se fijan.

39
00:03:23,300 --> 00:03:25,940
Voy seleccionando todo aquello que domino, pero son varios.

40
00:03:26,090 --> 00:03:28,130
Es una lista múltiple en realidad.

41
00:03:28,130 --> 00:03:38,330
Parecío vamos a tener un div dentro, un label te vamos a llamar lenguajes acá también lenguajes de

42
00:03:38,330 --> 00:03:38,990
programación.

43
00:03:41,950 --> 00:03:51,440
Arriba faltó el label, vamos a subir por acá paìses en el label vamos a colocar páis esto, bajamos,

44
00:03:51,620 --> 00:04:01,470
faltaba eso, bajamos, vamos a tener otro div acá el select select con tab se fijan de forma automática.

45
00:04:01,470 --> 00:04:09,530
El tag me genera el nombre name lenguajes y también el Heidy Lenguajes.

46
00:04:10,190 --> 00:04:23,240
Abajo las opciones Option vamos a partir con Yaba Option Yakarta e también vamos a colocar los nombres

47
00:04:23,450 --> 00:04:34,010
acá, vamos a colocar Jakarta E9 por ejemplo acá vamos a colocar Yaba s o ya están redicho.

48
00:04:34,730 --> 00:04:42,230
Bajamos otra opción con el Valeo Sprint acá por ejemplo Spring Buto.

49
00:04:46,060 --> 00:04:47,530
10 JavaScript

50
00:04:54,400 --> 00:04:59,970
angular, recto, recto.

51
00:05:00,310 --> 00:05:04,570
Ahora, claro, se fijan atormento, es muy parecido el Selleck que tenemos arriba.

52
00:05:04,660 --> 00:05:09,550
De hecho, en realidad esto no es un select multiple hasta que coloquemos una bandera.

53
00:05:10,030 --> 00:05:16,020
Entonces dentro del select por acá colocamos una bandera multiple, colocamos simplemente multiple.

54
00:05:16,240 --> 00:05:19,600
De esta forma nos permite seleccionar varios elementos en vez de uno.

55
00:05:19,660 --> 00:05:23,020
Acá uno solo no es múltiple y acá sería múltiple.

56
00:05:23,260 --> 00:05:25,690
Por esta bandera que le colocamos en el SELECT.

57
00:05:25,960 --> 00:05:33,010
Bien, por último, vamos a tener otra lista más o elemento, pero en vez de ser una lista desplegable,

58
00:05:33,100 --> 00:05:36,160
un combobox va a ser una lista de este boxes.

59
00:05:36,310 --> 00:05:40,430
Es decir, que podamos marcar con un check, con un ticket, se fijan.

60
00:05:40,450 --> 00:05:41,830
También podemos tener varias opciones.

61
00:05:41,920 --> 00:05:46,370
Entonces vamos a crear otro campo por acá debajo div.

62
00:05:46,990 --> 00:05:53,050
Vamos a bajar label roles, roles.

63
00:05:53,620 --> 00:05:55,620
Bajamos div.

64
00:05:56,320 --> 00:05:58,400
Acá vamos a tener el elemento y déjenme.

65
00:05:58,420 --> 00:06:01,480
Todo está formado por un input y por un label.

66
00:06:01,570 --> 00:06:05,340
El input va a ser del tipo checkbox input.

67
00:06:06,010 --> 00:06:10,390
En vez de texto vamos a autocompletar acá y buscamos check boxes.

68
00:06:10,690 --> 00:06:19,540
Lo tenemos type checkbox va a tener un neith, le vamos a llamar roles y a su vez va a tener un valor,

69
00:06:20,020 --> 00:06:24,460
un palio, por ejemplo, como un código rol mayúscula.

70
00:06:24,970 --> 00:06:27,670
Guión bajo admin perfecto.

71
00:06:27,820 --> 00:06:28,480
Bajamos.

72
00:06:28,600 --> 00:06:30,540
Va a tener una etiqueta, un label.

73
00:06:30,760 --> 00:06:32,530
Si en el for el solo lo vamos a quitar.

74
00:06:34,090 --> 00:06:39,910
De hecho el acá también lo quitamos porque no está enlazado a ningún campo, solamente una lista de

75
00:06:39,910 --> 00:06:40,350
este epoxy.

76
00:06:40,570 --> 00:06:48,880
Vamos a seleccionando entonces el label roles y acá el label le vamos a colocar administrador perfecto

77
00:06:48,970 --> 00:06:49,630
administrador.

78
00:06:49,790 --> 00:06:56,770
Bien, vamos a subir, vamos a copiar este input, este top box completo, incluyendo el input y el

79
00:06:56,770 --> 00:07:00,010
label y lo pegamos dos veces porque vamos a tener dos más.

80
00:07:00,190 --> 00:07:07,900
Entonces rol administrador rol usuario y rol moderador vamos a subir el name se mantiene name roles

81
00:07:08,020 --> 00:07:16,900
porque es una lista, podemos tener varios y acá en vez de admin user bajamos acá, quitamos usuario,

82
00:07:18,250 --> 00:07:28,690
bajamos y lo mismo acá rol moderador en inglés Moderato en mayúscula moderador bajamos y acá moderador

83
00:07:29,860 --> 00:07:31,660
moderador se fijan entonces una lista.

84
00:07:31,780 --> 00:07:36,010
Cada input va a tener mismo nombre de roles, roles, roles, roles.

85
00:07:36,250 --> 00:07:40,600
Por lo tanto hacer un arreglo, un arreglo, roles con los elementos que seleccionamos y acá también

86
00:07:40,600 --> 00:07:45,940
va a ser un arreglo de lenguajes, porque múltiple con todos los elementos que seleccionamos.

87
00:07:46,480 --> 00:07:52,270
Entonces básicamente serían dos forma de tener elemento múltiple, ya sea con bóxers o bien con una

88
00:07:52,270 --> 00:07:52,920
lista SELECT.

89
00:07:53,050 --> 00:07:53,980
Tienen todo alternativa.

90
00:07:54,050 --> 00:07:56,620
Ya tenemos una lista SELECT solamente de un solo elemento.

91
00:07:56,710 --> 00:07:59,290
Bien, pero veamos cómo quedaría en nuestra página web.

92
00:07:59,380 --> 00:08:00,220
Vamos a desplegar.

93
00:08:00,280 --> 00:08:01,930
Primero tenemos que levantar el servidor.

94
00:08:02,050 --> 00:08:03,190
Lo tengo abajo.

95
00:08:03,520 --> 00:08:05,530
Entonces Startup levantamos.

96
00:08:06,800 --> 00:08:07,990
Hacemos el despliegue.

97
00:08:15,040 --> 00:08:16,810
Hacemos un clic en la ruta.

98
00:08:18,680 --> 00:08:21,410
Lo tenemos entonces usuario, password y email.

99
00:08:21,800 --> 00:08:26,060
País se fijan, una lista desplegable dice Seleccionar y acá seleccionamos El País.

100
00:08:27,570 --> 00:08:30,510
Acá tenemos lenguajes de programación múltiple.

101
00:08:31,630 --> 00:08:38,440
Entonces, con un clic y con cheff podemos seleccionar No clic y marcamos TIFF y por ejemplo podría

102
00:08:38,440 --> 00:08:45,970
tener acá pero con control, no con cheff, con React puedo tener Spring Boot, Yakarta E y ya entonces

103
00:08:45,970 --> 00:08:51,790
con control voy seleccionando los elementos que quiera y los roles administrador, usuario, moderador

104
00:08:52,090 --> 00:08:53,410
puedo ir marcando, se fijan?

105
00:08:54,570 --> 00:08:57,690
No voy a enviar porque no lo están capturando después.

106
00:08:57,780 --> 00:09:00,180
La siguiente clase vamos a capturar estos elementos.

107
00:09:00,510 --> 00:09:06,750
Estos dos serían del tipo arreglo, roles y lenguaje, porque son múltiples y este sería uno solo.

108
00:09:06,810 --> 00:09:08,280
Por qué seleccionó un solo país?

109
00:09:09,090 --> 00:09:10,380
Ahora también cómo puedo dejar?

110
00:09:10,410 --> 00:09:12,930
Porque, por ejemplo, se actualizo la página.

111
00:09:14,160 --> 00:09:19,440
Cómo puedo dejar seleccionado algún elemento por defecto se fija en país, por defecto pudiera dejar

112
00:09:19,440 --> 00:09:20,850
seleccionado cualquiera, se fijan.

113
00:09:21,060 --> 00:09:22,350
Por ejemplo, Chile.

114
00:09:23,620 --> 00:09:31,120
Puedo dejar seleccionado el Spring Boot acá y en roles puedo dejar seleccionado administrador usuario,

115
00:09:31,420 --> 00:09:31,960
se fijan.

116
00:09:32,470 --> 00:09:36,250
Veamos como volvamos al código, vamos a bajar acá.

117
00:09:36,820 --> 00:09:37,420
Muy simple.

118
00:09:37,480 --> 00:09:44,560
Si querés seleccionar, por ejemplo, Chile, en la lista países colocábamos Selected Selected de seleccionado.

119
00:09:44,620 --> 00:09:50,380
Pero como no es múltiple, puedo seleccionar uno solo, pero acá como es múltiple, puedo seleccionar

120
00:09:50,380 --> 00:09:50,680
varios.

121
00:09:50,710 --> 00:09:59,770
Por ejemplo, voy a dejar seleccionado yaba s e y también angulas, por poner un ejemplo esos dos.

122
00:10:00,340 --> 00:10:02,080
Bueno, y por supuesto, Yakarta.

123
00:10:03,300 --> 00:10:08,590
Ya vamos a seleccionar esos tres elementos y de acá solamente usuario.

124
00:10:09,000 --> 00:10:12,240
Entonces en el input vamos a colocar checked.

125
00:10:13,390 --> 00:10:14,590
Porque el tipo es checkbox.

126
00:10:14,680 --> 00:10:16,910
Entonces lo dejamos como chequeado, como marcado.

127
00:10:17,140 --> 00:10:19,900
Entonces de esa forma seleccionamos elemento por defecto.

128
00:10:20,050 --> 00:10:20,320
Bien.

129
00:10:21,280 --> 00:10:22,300
Volvemos a desplegar.

130
00:10:29,930 --> 00:10:31,340
Hacemos un rifeño con él.

131
00:10:31,630 --> 00:10:33,800
Acá se fijan usuario.

132
00:10:34,220 --> 00:10:42,440
Acá aparece marcado país, Chile llega, tenemos ya base y Yakarta 9 y angulas marcado por defecto perfecto.

133
00:10:42,440 --> 00:10:49,100
Lo dejamos así y continuamos la siguiente clase capturando estos elementos y procesando los en el bitcoin

134
00:10:49,250 --> 00:10:50,780
en el chalet nos vemos.