1
00:00:00,210 --> 00:00:06,180
Bien, sigamos, entonces vamos a crear la plantilla, nos vamos acá Recursos Templates, vamos a crear

2
00:00:06,270 --> 00:00:07,020
una nueva vista.

3
00:00:07,110 --> 00:00:08,400
Entonces nos vamos a otro.

4
00:00:08,490 --> 00:00:13,660
Por acá buscamos HTML, por acá web y acá en web buscamos html.

5
00:00:13,810 --> 00:00:14,640
HTML, file.

6
00:00:15,030 --> 00:00:17,730
Siguiente bien form.

7
00:00:18,660 --> 00:00:19,440
Punto html.

8
00:00:19,920 --> 00:00:23,220
Finalizar acá lo tenemos dentro de templates.

9
00:00:23,460 --> 00:00:26,650
Le vamos a cambiar acá un Tf8 bien.

10
00:00:26,760 --> 00:00:30,900
Y recuerden que opcionalmente podemos agregar acá el n'est pas de Tamlin.

11
00:00:32,520 --> 00:00:36,120
Entonces XML en tenés dos punto th.

12
00:00:40,030 --> 00:00:42,190
Tim Lif Funtor Ven y voy.

13
00:00:42,310 --> 00:00:43,690
Vamos a tener el formulario.

14
00:00:44,470 --> 00:00:50,650
Entonces la etiqueta form y tienes que tener un target, es decir, una ruta °l a la cual vamos a enviar

15
00:00:50,680 --> 00:00:51,310
este formulario.

16
00:00:51,370 --> 00:00:58,120
Una vez que creamos y hacemos clic en el botón bueno, este target se especifica se indica con la etiqueta

17
00:00:58,210 --> 00:01:00,430
action que propio del formulario.

18
00:01:00,490 --> 00:01:03,250
Si, de hecho con control barra espacio completamos.

19
00:01:03,580 --> 00:01:08,770
Acá tenemos action este atributo, pero tiene que ser el de Tamlin usando el TH.

20
00:01:09,220 --> 00:01:12,250
Entonces acá indicamos TH 2 punto action.

21
00:01:12,340 --> 00:01:14,690
Muy importante porque es una ruta de Spring.

22
00:01:14,860 --> 00:01:19,150
Recuerden que toda ruta Spring va con el Arruà y las llaves igual que siempre.

23
00:01:19,390 --> 00:01:20,980
Y acá indicamos la ruta target.

24
00:01:21,310 --> 00:01:22,150
Es decir, form.

25
00:01:22,870 --> 00:01:25,510
Es decir, si nos vamos a controlador nos vamos acá.

26
00:01:25,600 --> 00:01:27,970
Form del tipo post es del tipo post.

27
00:01:28,090 --> 00:01:29,200
Acá lo tenemos que indicar.

28
00:01:29,290 --> 00:01:36,460
Entonces por acá tenemos el atributo method, se fijan method por defecto y get lo dejamos en post y

29
00:01:36,550 --> 00:01:36,910
listo.

30
00:01:37,120 --> 00:01:38,710
Entonces Post y la ruta.

31
00:01:38,800 --> 00:01:40,900
Con eso vamos a caer acá.

32
00:01:42,040 --> 00:01:43,480
Bueno, lo siguiente los campos.

33
00:01:44,030 --> 00:01:49,090
Bueno, vamos a partir primero simple, sin tanto estilos, aunque podríamos implementar vostra para

34
00:01:49,150 --> 00:01:50,830
agregar estilos de formulario.

35
00:01:50,890 --> 00:01:55,780
Bueno, eso quizás después lo podamos hacer también es simple, no tiene tanto costo en tiempo, es

36
00:01:55,780 --> 00:01:57,880
fácil de implementar, pero lo dejamos para final.

37
00:01:57,910 --> 00:02:04,210
Por ahora nos centramos en el formulario, vamos a tener campos, lo vamos a anidar en div solamente

38
00:02:04,210 --> 00:02:06,100
para que quede ordenado, organizado.

39
00:02:06,190 --> 00:02:10,030
Después lavamos estilos y dentro de cada campo.

40
00:02:10,120 --> 00:02:16,290
Bueno, el campo también está asociado a un nombre, etiqueta o nombre campo, un label.

41
00:02:16,600 --> 00:02:22,720
Y por acá vamos a tener entonces el campo, pero el campo dentro de un div, porque así también se le

42
00:02:22,720 --> 00:02:24,250
puede aplicar estilo al input.

43
00:02:25,390 --> 00:02:26,380
Perfecto input.

44
00:02:26,560 --> 00:02:28,930
Esta etiqueta es para indicar un campo formulario.

45
00:02:29,110 --> 00:02:32,560
Tiene atributos, por ejemplo el name y el atributo name.

46
00:02:33,310 --> 00:02:35,200
También muy importante el Heidy.

47
00:02:35,830 --> 00:02:39,880
Bueno, en realidad no es tan tan importante, pero le podemos agregar alguna funcionalidad, sobre

48
00:02:39,880 --> 00:02:44,080
todo si queremos trabajar con ya scrip algunas funcionalidades al cliente.

49
00:02:44,170 --> 00:02:45,280
En fin, aquí faltaría.

50
00:02:45,310 --> 00:02:51,880
Bueno, lo más importante, indicar qué tipo de contenido, por ejemplo, puede ser del tipo puede ser

51
00:02:51,940 --> 00:02:58,150
todo esto del tipo button, check box, dato, una fecha, un email, un file given.

52
00:02:58,340 --> 00:03:04,420
Bueno, pero lo normal o lo estándar del tipo texto del tipo tex también podría ser un Amper o el tipo

53
00:03:04,420 --> 00:03:04,840
password.

54
00:03:05,020 --> 00:03:11,710
Lo dejamos como texto bien, le damos un nombre de parámetro, por ejemplo y yussef n de este campo

55
00:03:11,710 --> 00:03:15,040
hacer de nombre usuario y Leydi igual, exactamente igual.

56
00:03:15,280 --> 00:03:22,840
De hecho, le copiamos, lo pegamos y en el label colocamos Yussef o nombre usuario como queramos juzgen

57
00:03:22,990 --> 00:03:26,110
y también podríamos agregar en el label el for.

58
00:03:26,200 --> 00:03:31,450
El for es una etiqueta que para mapear o asignar el Heidy del input.

59
00:03:31,570 --> 00:03:33,930
Por lo tanto en el for va el Chosen.

60
00:03:33,940 --> 00:03:35,740
En el Heidy siempre Leydi.

61
00:03:36,940 --> 00:03:38,080
Bueno, y para qué sirve?

62
00:03:38,200 --> 00:03:41,410
Más que nada para usabilidad, nada más que usabilidad.

63
00:03:41,440 --> 00:03:47,200
Por ejemplo, si hacemos clic, un clic con el mouse en el label en el nombre, el campo automáticamente

64
00:03:47,200 --> 00:03:51,160
va a ser foco y se va a posicionar el cursor dentro del input.

65
00:03:51,250 --> 00:03:51,790
Eso es todo.

66
00:03:51,910 --> 00:03:54,490
Algo funcional de HTML y lo tenemos listo.

67
00:03:54,670 --> 00:03:58,420
Bueno, voy a organizar con clic derecho source format.

68
00:04:00,070 --> 00:04:03,130
Ahí tenemos el primer campo, pudiéramos tener otro más.

69
00:04:05,360 --> 00:04:09,740
Para el password acá también sería password.

70
00:04:12,970 --> 00:04:16,070
Acá también, y en el foro también se copió mal.

71
00:04:16,250 --> 00:04:17,740
Bueno, se copió con las comillas.

72
00:04:19,070 --> 00:04:19,670
Acá también.

73
00:04:20,060 --> 00:04:20,660
Cuidado con eso.

74
00:04:20,750 --> 00:04:22,220
Un detalle bien, ahí lo tenemos.

75
00:04:22,260 --> 00:04:26,540
Password también del tipo text o mejor del tipo password, por ejemplo password.

76
00:04:26,680 --> 00:04:29,840
Ahí voy a copiar otro campo.

77
00:04:31,250 --> 00:04:32,210
Y lo pegamos acá.

78
00:04:33,470 --> 00:04:33,560
Y.

79
00:04:34,100 --> 00:04:40,430
Voy a copiar este si la comilla ahora, si no me equivoco, se la comilla y lo pegamos acá en el Naïve.

80
00:04:41,780 --> 00:04:43,130
Y también en el Heidy.

81
00:04:43,730 --> 00:04:48,680
En el tipo lo dejamos del tipo texto, de tipo texto, igual que el Yousef.

82
00:04:48,950 --> 00:04:50,630
Bueno, también podría ser del tipo y mail.

83
00:04:50,690 --> 00:04:56,180
Por ejemplo, acá también tiene el tipo de mail, lo que hace validar que sea un formato de correo electrónico,

84
00:04:56,270 --> 00:04:56,720
nada más.

85
00:04:56,810 --> 00:04:58,760
Es propio de este tml 5.

86
00:04:58,880 --> 00:05:02,870
De ahí vemos la diferencia, pero por ahora mejor lo dejamos en texto, aunque da lo mismo.

87
00:05:03,730 --> 00:05:11,810
Bien nombre y mail Heidy mail y fore email y acá email o correo, correo, mail como queramos y listo.

88
00:05:11,900 --> 00:05:12,650
Pero qué faltaría?

89
00:05:12,710 --> 00:05:13,250
Qué nos faltaría?

90
00:05:13,250 --> 00:05:17,120
Formulario para que realmente lo podamos enviar el botón.

91
00:05:17,540 --> 00:05:18,680
Entonces vamos a copiar.

92
00:05:20,070 --> 00:05:21,000
Lo pegamos acá.

93
00:05:22,540 --> 00:05:25,750
El botón no tiene label, solamente un botón nada más.

94
00:05:26,230 --> 00:05:28,630
Así que quitamos eso y lo jamo de esta forma.

95
00:05:28,680 --> 00:05:34,420
Pero el tipo en vez de texto sería el tipo submit submit de enviar.

96
00:05:35,790 --> 00:05:37,420
El Heidy no va, lo quitamos.

97
00:05:37,480 --> 00:05:43,540
No es necesario Leydi solamente lo estamos usando por el FOR para esa funcionalidad de hacer un click

98
00:05:43,600 --> 00:05:45,760
que se posicione en el campo en el input.

99
00:05:46,570 --> 00:05:51,700
El name da lo mismo, lo podemos dejar sin nombre porque no es un parámetro que vayamos a enviar.

100
00:05:51,760 --> 00:05:54,310
Es un botón, así que lo quitamos también.

101
00:05:54,550 --> 00:05:59,320
Pero si le podemos dar un texto con Balbino, entonces con Baley le damos el texto.

102
00:05:59,350 --> 00:06:02,230
Por ejemplo, enviar y guardamos bien.

103
00:06:02,350 --> 00:06:05,740
Y también voy a guardar, controlar que se me olvide guardarlo la vez pasada.

104
00:06:05,950 --> 00:06:06,400
Listo.

105
00:06:06,520 --> 00:06:06,960
Oita.

106
00:06:07,090 --> 00:06:13,090
Faltaría implementar, procesar este método, que reciba los datos y también faltaría la vista ha resultado

107
00:06:13,180 --> 00:06:14,740
mostrar estos datos que enviamos.

108
00:06:14,810 --> 00:06:17,800
Bueno, faltaría todo eso, pero lo vemos en la siguiente clase.