1
00:00:00,560 --> 00:00:06,280
Vale, pues ahora vamos a ver cómo hacer formularios en HTML5.

2
00:00:06,639 --> 00:00:10,300
Un formulario se utiliza básicamente para enviar información, ¿vale?

3
00:00:10,300 --> 00:00:13,859
Normalmente para enviar información a un servidor o a una base de datos.

4
00:00:14,359 --> 00:00:16,640
Esa parte en principio no la vamos a ver, ¿vale?

5
00:00:16,679 --> 00:00:20,260
Pero bueno, vamos a estudiar cómo se hace un formulario, cómo se maqueta

6
00:00:20,260 --> 00:00:26,059
y veremos que si hay algunas cositas que vamos a poder ir haciendo con este formulario, ¿vale?

7
00:00:26,059 --> 00:00:33,340
Entonces, partimos de nuestra estructura, yo he creado un archivo que se llama pruebaformularios.html

8
00:00:33,340 --> 00:00:41,259
Y bueno, hacemos lo de siempre, ponemos html 2.5 y le damos al tabulador, ¿vale?

9
00:00:41,340 --> 00:00:43,179
Para que nos cree nuestra estructura

10
00:00:43,179 --> 00:00:50,899
Ponemos el idioma español y aquí vamos a poner formularios en html, ¿vale?

11
00:00:50,899 --> 00:00:53,700
Nos creamos nuestra etiqueta h1

12
00:00:53,700 --> 00:00:55,799
Que siempre es necesaria para

13
00:00:55,799 --> 00:00:57,679
Explicar

14
00:00:57,679 --> 00:00:58,880
Que es lo que vamos a hacer

15
00:00:58,880 --> 00:01:01,179
Y ponemos como crear

16
00:01:01,179 --> 00:01:03,820
Formularios en html

17
00:01:03,820 --> 00:01:09,819
Ok, entonces

18
00:01:09,819 --> 00:01:13,879
Que es lo primero que vamos a hacer

19
00:01:13,879 --> 00:01:15,540
Para crear un formulario

20
00:01:15,540 --> 00:01:16,819
Pues lo primero que vamos a hacer

21
00:01:16,819 --> 00:01:18,760
Es añadir la etiqueta

22
00:01:18,760 --> 00:01:20,140
Form

23
00:01:20,140 --> 00:01:24,120
Todo lo que esté entre la etiqueta

24
00:01:24,120 --> 00:01:30,239
form van a ser los elementos de nuestro formulario. Y lo primero que vamos a ver es qué atributos

25
00:01:30,239 --> 00:01:36,560
le ponemos a esta etiqueta. En primer lugar le vamos a poner el atributo action. Y dentro

26
00:01:36,560 --> 00:01:42,079
de este atributo pondríamos la URL, es decir, la dirección de nuestra base de datos o el

27
00:01:42,079 --> 00:01:46,840
sitio donde queramos enviar la información. En este caso, como no la vamos a enviar a

28
00:01:46,840 --> 00:01:53,540
ningún sitio, lo vamos a dejar vacío. Es decir, simplemente entre comillas. Luego vamos

29
00:01:53,540 --> 00:01:55,340
a poner el atributo

30
00:01:55,340 --> 00:01:57,540
method ¿vale? y method

31
00:01:57,540 --> 00:01:59,959
tal y como veis aquí nos da dos opciones

32
00:01:59,959 --> 00:02:01,579
o la opción get ¿vale?

33
00:02:02,019 --> 00:02:03,219
que esta se utiliza

34
00:02:03,219 --> 00:02:05,540
tiene un problema y es que

35
00:02:05,540 --> 00:02:07,819
cuando se utiliza toda la información que envía

36
00:02:07,819 --> 00:02:09,520
se ve en la barra de navegación

37
00:02:09,520 --> 00:02:11,259
¿vale? normalmente

38
00:02:11,259 --> 00:02:13,580
este método, este

39
00:02:13,580 --> 00:02:15,960
parámetro del atributo se utiliza

40
00:02:15,960 --> 00:02:17,860
para formularios de búsqueda

41
00:02:17,860 --> 00:02:19,620
cuando queremos buscar algo dentro de una

42
00:02:19,620 --> 00:02:21,180
página web o dentro de

43
00:02:21,180 --> 00:02:23,099
de un servicio ¿vale?

44
00:02:23,539 --> 00:02:29,360
Por lo tanto, lo que nosotros utilizaremos es el atributo post, ¿vale?

45
00:02:29,360 --> 00:02:36,360
Que esto oculta la búsqueda o oculta el envío de información dentro del formulario, ¿vale?

46
00:02:37,759 --> 00:02:47,360
Bueno, pues ahora vamos a empezar a añadir elementos dentro de este formulario.

47
00:02:47,360 --> 00:02:59,050
vale pues entonces lo que vamos a hacer es añadir el primer elemento a nuestro formulario para

48
00:02:59,050 --> 00:03:06,750
añadir ese primer elemento un elemento de entrada vamos a utilizar siempre el elemento y vale

49
00:03:09,270 --> 00:03:17,099
tal que así entonces fijaros que ya aparece una estructura pero nunca vamos a dejar el input

50
00:03:17,099 --> 00:03:19,099
siempre vamos a poner

51
00:03:19,099 --> 00:03:20,479
después del ínculo vamos a poner

52
00:03:20,479 --> 00:03:23,219
un atributo que es el atributo type

53
00:03:23,219 --> 00:03:25,500
y en este caso vamos a poner

54
00:03:25,500 --> 00:03:26,840
atributo

55
00:03:26,840 --> 00:03:29,340
vamos a ponerle como contenido

56
00:03:29,340 --> 00:03:30,639
del atributo type text

57
00:03:30,639 --> 00:03:32,719
para indicar que es

58
00:03:32,719 --> 00:03:35,360
un elemento de entrada

59
00:03:35,360 --> 00:03:36,599
de tipo text

60
00:03:36,599 --> 00:03:38,379
esto va a afectar

61
00:03:38,379 --> 00:03:41,099
texto, tanto texto como

62
00:03:41,099 --> 00:03:43,300
números, va a afectar

63
00:03:43,300 --> 00:03:44,900
contenido alfanumérico

64
00:03:44,900 --> 00:03:58,659
¿Vale? Y vamos a ir asignándole nombres, ¿vale? Es decir, le vamos a asignar, vamos a ponerle, por ejemplo, en primer lugar, el atributo name.

65
00:03:58,659 --> 00:04:16,939
¿Para qué sirve el atributo name? El atributo name sirve para que el formulario, cuando envíe la información, sepa que lo que hay dentro de un elemento llamado nombre va a contener un nombre de una persona, ¿vale?

66
00:04:17,560 --> 00:04:24,980
Es decir, va a ser, para que lo entendamos, va a ser, por ejemplo, el nombre de las variables, como cuando programábamos en Python, ¿vale?

67
00:04:25,420 --> 00:04:32,220
Pues el nombre de una variable que llamábamos nombre igual a pepe, pues para que sepamos que dentro de nombre estará guardado pepe, ¿vale?

68
00:04:34,069 --> 00:04:40,269
Y ahora vamos a añadir un elemento importante, que es la etiqueta label, ¿vale?

69
00:04:42,930 --> 00:04:46,209
Nosotros pondremos label y cerraremos la etiqueta.

70
00:04:46,209 --> 00:04:49,910
Y aquí pondríamos lo que queremos que aparezca por pantalla, ¿vale?

71
00:04:50,069 --> 00:04:57,329
Entonces fijaros que yo pongo nombre dos puntos y me aparece nombre justo antes del elemento de entrada, ¿vale?

72
00:04:57,829 --> 00:05:04,310
Y en label vamos a poner un atributo muy importante que es el elemento, el atributo for, ¿vale?

73
00:05:04,910 --> 00:05:09,750
Y ese atributo, yo le voy a poner ahora su nombre, ¿vale?

74
00:05:09,750 --> 00:05:19,310
Y ese atributo va a identificar de forma única al elemento de entrada, ¿vale?

75
00:05:19,310 --> 00:05:20,410
Al elemento input.

76
00:05:20,610 --> 00:05:26,629
Por lo tanto, yo en el elemento input voy a añadir un atributo que se llama id

77
00:05:26,629 --> 00:05:31,629
y se tiene que llamar exactamente igual que el elemento for, ¿vale?

78
00:05:32,129 --> 00:05:33,290
Exactamente igual.

79
00:05:34,410 --> 00:05:35,750
Para que no haya problema, ¿vale?

80
00:05:35,750 --> 00:05:44,089
Y ahora vamos a seguir añadiendo elementos, añadiendo atributos a este elemento de entrada input, ¿vale?

81
00:05:44,189 --> 00:05:46,730
El primero va a ser size, ¿vale?

82
00:05:47,110 --> 00:05:48,550
Que es para darle un tamaño.

83
00:05:49,389 --> 00:05:55,189
Entonces, fijaros que estáis viendo en pantalla ahora mismo cuánto ocupa ese elemento de entrada.

84
00:05:55,410 --> 00:05:58,269
Si yo pongo 50, fijaros que aumenta.

85
00:05:58,329 --> 00:05:59,870
Si pongo 5, disminuye, ¿vale?

86
00:06:00,430 --> 00:06:04,670
Entonces, con este elemento size podríamos aumentar el número de elementos, ¿vale?

87
00:06:04,670 --> 00:06:24,860
¿Vale? Más cositas que podemos hacer. Podemos añadir, por ejemplo, un elemento, un atributo autocomplete, ¿vale? Fijaros que aparece aquí, ¿vale? Y lo podríamos completar con la opción on, ¿vale?

88
00:06:24,860 --> 00:06:40,670
Y ¿para qué sirve esto? Entonces, es importante mencionar que ese parámetro autocomplete on está habilitado siempre por defecto, ¿vale? Voy a hacer unas pruebas para que veáis cuál sería el resultado.

89
00:06:40,670 --> 00:06:55,930
Bueno, también es importante que sepáis que un aspecto importante de utilizar la etiqueta label es que si yo hago clic sobre el label asociado a este elemento de entrada, fijaros, yo hago clic en nombre, ¿vale?

90
00:06:56,610 --> 00:07:02,209
Me activa automáticamente ese formulario. Esto es especialmente útil para dispositivos móviles, ¿vale?

91
00:07:02,209 --> 00:07:12,889
Entonces, tenemos que recordar siempre que vamos a hacer webs que sean responsables de que se vean exactamente igual de bien en un dispositivo móvil que en una página web, ¿vale?

92
00:07:12,990 --> 00:07:14,709
Entonces, es importante que lo sepamos.

93
00:07:15,649 --> 00:07:20,589
Ok, pues entonces, yo ahora aquí, por ejemplo, pondría Pepito y le daría lente, ¿vale?

94
00:07:22,430 --> 00:07:45,029
Un segundo, que se ha quedado frito. Voy a volver a cerrar. Voy a abrir el navegador de la web.

95
00:07:45,029 --> 00:07:51,319
¿Vale? Y fijaros que ahí me aparece Pepito

96
00:07:51,319 --> 00:07:53,079
Si yo ahora aquí

97
00:07:53,079 --> 00:07:54,860
El autocomplete

98
00:07:54,860 --> 00:07:56,519
Espérate, yo creo que no lo estoy viendo

99
00:07:56,519 --> 00:08:12,149
Bueno, ahora se ve, ¿no?

100
00:08:12,449 --> 00:08:13,850
Fijaros que si yo ahora pongo

101
00:08:13,850 --> 00:08:15,449
El ratón encima

102
00:08:15,449 --> 00:08:17,509
Hago clic encima, aparece Pepito, ¿vale?

103
00:08:18,170 --> 00:08:20,329
Voy ahora a poner autocomplete

104
00:08:20,329 --> 00:08:21,449
Off, ¿vale?

105
00:08:21,589 --> 00:08:22,310
Y guardo

106
00:08:22,310 --> 00:08:25,370
Y si yo pongo el ratón encima

107
00:08:25,370 --> 00:08:27,629
Hago clic, fijaros que ahora no me aparece

108
00:08:27,629 --> 00:08:29,290
Ninguna opción de relleno, ¿vale?

109
00:08:29,290 --> 00:08:57,190
Muy bien, más opciones, más atributos que podemos poner. Por ejemplo, el autofocus, ¿vale? ¿Qué hace la opción de autofocus? Pues la opción autofocus lo que hace es que una vez que carga la página web, automáticamente aparece ese elemento para ser editado, ¿vale?

110
00:08:57,190 --> 00:09:08,909
¿Qué pasa? Que si nosotros ahora mismo hacemos F5 sobre esto, veis que se está habilitando para que yo lo rellene, pero no somos capaces de distinguirlo porque no tenemos más elementos.

111
00:09:09,210 --> 00:09:14,809
Entonces, lo que vamos a hacer ahora es añadir otro elemento más a nuestro formulario, ¿vale?

112
00:09:14,830 --> 00:09:20,629
Vamos a poner un label, y ahora vamos a poner, por ejemplo, para añadir el apellido.

113
00:09:20,629 --> 00:09:25,669
Pues ponemos aquí su apellido y aquí ponemos apellido.

114
00:09:27,149 --> 00:09:34,669
Y debajo ponemos nuestro elemento de entrada de tipo texto, ¿vale?

115
00:09:35,669 --> 00:09:43,690
De name le vamos a poner apellido y de id le vamos a poner su apellido.

116
00:09:43,789 --> 00:09:47,389
Recuerden que el id tiene que ser igual que el for, ¿vale?

117
00:09:47,889 --> 00:09:48,490
Y cerramos.

118
00:09:50,610 --> 00:09:56,929
Y fijaros que aparece justo después, por lo tanto, para evitar que salgan uno debajo del otro, voy a poner saltos de línea, ¿vale?

119
00:09:56,929 --> 00:10:02,049
Que recuerdo que era con la etiqueta B. Voy a poner un par de saltos de línea.

120
00:10:04,070 --> 00:10:11,149
Muy bien, pues entonces fijaros ahora. Voy a poner el autofocus, en vez de ponerlo en el nombre, lo voy a poner en el apellido, ¿vale?

121
00:10:12,330 --> 00:10:18,639
Y voy a darle a actualizar la página, ¿vale?

122
00:10:18,639 --> 00:10:43,590
Ah, y no he puesto el autofocus aquí, he puesto su nombre, autofocus, vale, y ahora le voy a actualizar la página, y fijaros como al darle a actualizar, automáticamente me ha salido apellido para que yo lo rellene, vale, más atributos que podemos poner.

123
00:10:44,590 --> 00:10:49,129
Otro atributo que podemos poner es el atributo de longitud máxima, ¿vale?

124
00:10:49,649 --> 00:10:57,009
Por ejemplo, nos vamos a ir a nombre y aquí vamos a poner max length, ¿vale?

125
00:10:57,129 --> 00:10:59,289
Y vamos a poner, por ejemplo, 10, ¿vale?

126
00:10:59,370 --> 00:11:02,990
Esto es el número de caracteres máximos que podemos poner.

127
00:11:03,090 --> 00:11:07,789
Por lo tanto, a pesar de que el tamaño sea grande, fijaros que si yo dejo la pulsada,

128
00:11:08,389 --> 00:11:11,309
no me deja poner más de 10 caracteres, ¿vale?

129
00:11:11,309 --> 00:11:17,580
Otra etiqueta que podemos poner, otro atributo, perdón

130
00:11:17,580 --> 00:11:21,600
Pues por ejemplo, vamos a crearnos un nuevo elemento aquí debajo

131
00:11:21,600 --> 00:11:22,360
¿Vale?

132
00:11:23,360 --> 00:11:25,080
Nos vamos a quitar el autofocus

133
00:11:25,080 --> 00:11:27,320
Fijaros que lo que he hecho ha sido copiar

134
00:11:27,320 --> 00:11:32,299
Y lo vamos a llamar, en vez de el for su apellido, vamos a poner su dirección

135
00:11:32,299 --> 00:11:34,700
Va a ser un elemento para añadir la dirección

136
00:11:34,700 --> 00:11:45,710
Name, dirección, aquí

137
00:11:45,710 --> 00:11:46,370
¿Vale?

138
00:11:46,370 --> 00:11:53,590
y vamos a añadir un atributo que es placeholder, que esto es para dar una especie de ayuda

139
00:11:53,590 --> 00:11:56,190
sobre cómo completar este campo, ¿vale?

140
00:11:56,889 --> 00:12:01,350
Pondríamos aquí, vamos a ponerle también un tamaño más grande, así, ¿vale?

141
00:12:01,970 --> 00:12:05,649
Y entonces, dentro de placeholder, pues pondríamos, por ejemplo, cómo rellenarlo.

142
00:12:05,649 --> 00:12:17,980
Por ejemplo, si es una dirección, pues pondríamos ejemplo, punto, y ponemos calle, número, ciudad, código postal, ¿vale?

143
00:12:18,000 --> 00:12:24,279
Y fijaros que aparece como en un gris clarito que nos indica cómo rellenarlo.

144
00:12:24,379 --> 00:12:29,519
Si yo hago clic aquí ahora, en dirección, al escribir desaparece, ¿vale?

145
00:12:32,110 --> 00:12:35,470
Más parámetros que podemos escribir.

146
00:12:35,570 --> 00:12:36,769
Por ejemplo, en apellido.

147
00:12:36,909 --> 00:12:38,649
Podríamos escribir una opción, ¿vale?

148
00:12:38,769 --> 00:12:43,409
Pues podríamos poner el atributo value, que es para dar un valor por defecto, ¿vale?

149
00:12:43,929 --> 00:12:49,870
Y entonces, cuando cargara el formulario, fijaros, le voy a dar al F5, ¿vale?

150
00:12:52,789 --> 00:12:55,029
Aparece por defecto la opción Cervantes, ¿vale?

151
00:12:55,110 --> 00:12:57,470
Y yo ya luego la podría cambiar y poner la que yo quisiera.

152
00:12:58,509 --> 00:12:58,730
¿Vale?

153
00:13:00,629 --> 00:13:01,750
Más atributos.

154
00:13:02,750 --> 00:13:07,710
Pues otros elementos que podemos añadir, otros atributos, perdón, pues son, por ejemplo,

155
00:13:09,049 --> 00:13:15,870
pues dentro de aquí, ¿vale? Dentro del apellido, podríamos añadir el atributo Read Only, ¿vale?

156
00:13:16,750 --> 00:13:20,049
Esto lo que hace es que cuando carga la página, ¿vale?

157
00:13:20,149 --> 00:13:21,710
Vamos a cargar el formulario otra vez.

158
00:13:21,909 --> 00:13:23,909
fijaros, no me deja

159
00:13:23,909 --> 00:13:25,830
modificar, yo por mucho que

160
00:13:25,830 --> 00:13:27,970
intento escribir, no me deja modificar el valor

161
00:13:27,970 --> 00:13:29,809
de Cervantes, el valor

162
00:13:29,809 --> 00:13:31,909
del apellido, es decir, es solo de lectura

163
00:13:31,909 --> 00:13:32,490
¿vale?

164
00:13:34,409 --> 00:13:35,929
otra opción, por ejemplo

165
00:13:35,929 --> 00:13:37,649
para aquí en la dirección

166
00:13:37,649 --> 00:13:39,610
sería poner el atributo disable

167
00:13:39,610 --> 00:13:41,850
¿vale? al poner

168
00:13:41,850 --> 00:13:43,269
disable, fijaros

169
00:13:43,269 --> 00:13:45,950
que ahora ni siquiera aparece

170
00:13:45,950 --> 00:13:47,389
igual el formulario

171
00:13:47,389 --> 00:13:49,610
en el campo, es decir, ni siquiera me deja

172
00:13:49,610 --> 00:13:51,309
edición ni nada, ni hacer click

173
00:13:51,309 --> 00:13:56,570
y por último otro atributo que lo vamos a poner en el nombre

174
00:13:56,570 --> 00:13:58,110
que es el atributo require

175
00:13:58,110 --> 00:14:03,070
pero esto no lo vamos a poder ver hasta que añadamos un botón

176
00:14:03,070 --> 00:14:08,490
que nos permita ver el comportamiento del formulario

177
00:14:08,490 --> 00:14:10,090
entonces esto lo vamos a ver al final

178
00:14:10,090 --> 00:14:14,509
mientras tanto vamos a seguir añadiendo elementos a nuestro formulario

179
00:14:14,509 --> 00:14:16,149
vamos a poner un par de saltos de línea

180
00:14:16,149 --> 00:14:23,899
y vamos a añadir un campo de correo electrónico.

181
00:14:24,299 --> 00:14:36,679
Para ello, como siempre, ponemos el atributo label, ponemos email y dentro de label ponemos un for que va a ser su mail.

182
00:14:36,679 --> 00:14:46,559
Y ahora añadiríamos la etiqueta input con un tipo que va a ser el tipo email, ¿vale?

183
00:14:47,460 --> 00:14:55,220
Con el nombre que le vamos a poner, email, y el ID, que recuerdo que tiene que ser el mismo que el del port.

184
00:14:56,600 --> 00:14:57,659
Tal que así, ¿vale?

185
00:14:58,139 --> 00:15:01,120
Y le vamos a poner un tamaño, por ejemplo, de 30.

186
00:15:02,759 --> 00:15:03,240
¿Vale?

187
00:15:03,940 --> 00:15:05,580
Y cerramos la etiqueta.

188
00:15:06,519 --> 00:15:06,759
¿Vale?

189
00:15:10,429 --> 00:15:12,110
Más cositas, más cositas.

190
00:15:12,250 --> 00:15:16,190
Por ejemplo, para ir un poquito más rápido, ¿vale?

191
00:15:16,190 --> 00:15:20,190
Voy a copiar esto y así voy haciendo ediciones sobre esto.

192
00:15:21,309 --> 00:15:23,169
Vamos a poner ahora una contraseña.

193
00:15:23,330 --> 00:15:27,370
Entonces pondríamos su, en vez de su mail, pondríamos su pass.

194
00:15:28,490 --> 00:15:32,950
Aquí vamos a poner un texto que va a ser password o contraseña.

195
00:15:34,090 --> 00:15:37,990
En el tipo del input vamos a poner password, ¿vale?

196
00:15:40,220 --> 00:15:42,620
Donde ponía email vamos a poner pass.

197
00:15:43,139 --> 00:15:46,259
Y en el id recuerdo lo mismo que el for, ¿vale?

198
00:15:46,259 --> 00:15:51,659
Y aquí no vamos a poner site, ¿vale?

199
00:15:51,720 --> 00:15:56,899
Pero vamos a poner también el required para luego relacionarlo con el campo del nombre.

200
00:15:57,000 --> 00:16:02,419
Fijaros que ahora, si yo edito el password, lo que aparece son puntitos, ¿vale?

201
00:16:02,620 --> 00:16:07,039
Porque está codificando o está ocultando esa contraseña, ¿vale?

202
00:16:09,000 --> 00:16:10,639
Más opciones, más opciones.

203
00:16:11,159 --> 00:16:15,399
Por ejemplo, una URL, ¿vale? Una dirección web.

204
00:16:15,399 --> 00:16:23,039
Lo mismo, pego lo que ya tenía copiado, copio esto, perdón, lo pego, ¿vale?

205
00:16:23,379 --> 00:16:29,059
Y vamos a poner aquí su URL, ¿vale?

206
00:16:29,440 --> 00:16:32,860
Y ponemos aquí dirección web.

207
00:16:34,480 --> 00:16:37,679
Vamos a poner aquí, y de tipo vamos a poner URL.

208
00:16:37,679 --> 00:16:40,559
de nombre va a ser

209
00:16:40,559 --> 00:16:42,120
url

210
00:16:42,120 --> 00:16:44,700
web y en el id

211
00:16:44,700 --> 00:16:46,620
pues lo mismo que en el

212
00:16:46,620 --> 00:16:48,720
port, ¿vale? y eliminamos

213
00:16:48,720 --> 00:16:50,399
la etiqueta type y vamos a poner

214
00:16:50,399 --> 00:16:52,519
un tamaño mayor, ¿vale?

215
00:16:52,559 --> 00:16:54,399
porque las urls son un poco grandes

216
00:16:54,399 --> 00:16:56,279
tal que así, ¿vale?

217
00:16:56,720 --> 00:16:58,720
y aquí pondríamos nuestra página

218
00:16:58,720 --> 00:17:03,929
web, ¿vale? y ahora vamos a

219
00:17:03,929 --> 00:17:04,690
empezar a ver

220
00:17:04,690 --> 00:17:07,849
algunos tipos de entradas

221
00:17:07,849 --> 00:17:09,630
un poquito diferentes, ¿vale?

222
00:17:09,630 --> 00:17:14,630
Que van a dar bastante fuego en lo que es un formulario.

223
00:17:16,950 --> 00:17:21,289
La característica de esto es que no tiene un label asociado, ¿vale?

224
00:17:21,430 --> 00:17:25,750
¿Por qué? Porque no tiene un elemento de entrada de texto principalmente, ¿vale?

225
00:17:26,950 --> 00:17:31,809
Entonces, lo que nosotros vamos a hacer aquí es poner directamente una etiqueta de párrafo,

226
00:17:32,029 --> 00:17:33,450
le vamos a poner edad, ¿vale?

227
00:17:34,170 --> 00:17:40,880
Y ahora justo debajo de la edad vamos a poner una entrada, un input, ¿vale?

228
00:17:40,880 --> 00:17:43,119
y de tipo vamos a poner

229
00:17:43,119 --> 00:17:45,279
radio

230
00:17:45,279 --> 00:17:46,319
¿vale?

231
00:17:47,380 --> 00:17:49,160
fijaros que hasta que no cierro no sale

232
00:17:49,160 --> 00:17:51,299
entonces en el nombre

233
00:17:51,299 --> 00:17:52,420
recuerdo que esto va a ser

234
00:17:52,420 --> 00:17:54,480
el nombre de la varilla

235
00:17:54,480 --> 00:17:57,000
entonces vamos a poner, por ejemplo vamos a poner

236
00:17:57,000 --> 00:17:59,299
hacer unas opciones para el usuario

237
00:17:59,299 --> 00:18:00,700
para decirle radio, vamos a poner

238
00:18:00,700 --> 00:18:02,859
edad barra baja usuario

239
00:18:02,859 --> 00:18:05,299
¿vale? y el valor

240
00:18:05,299 --> 00:18:07,299
que va a tomar si se selecciona

241
00:18:07,299 --> 00:18:08,880
esta opción va a ser

242
00:18:08,880 --> 00:18:09,900
menor

243
00:18:09,900 --> 00:18:12,519
de 18

244
00:18:12,519 --> 00:18:14,099
¿vale?

245
00:18:16,380 --> 00:18:18,460
lo cerramos, fijaros que ha aparecido

246
00:18:18,460 --> 00:18:20,259
un puntito, ¿vale? lo veis aquí

247
00:18:20,259 --> 00:18:22,460
y ahora vamos a poner un

248
00:18:22,460 --> 00:18:24,640
texto asociado a este botón

249
00:18:24,640 --> 00:18:26,019
¿vale? a ese pulsador que va a ser

250
00:18:26,019 --> 00:18:28,059
menor de 18

251
00:18:28,059 --> 00:18:30,460
¿vale?

252
00:18:31,680 --> 00:18:32,619
y ahora

253
00:18:32,619 --> 00:18:34,740
añadimos un salto de línea

254
00:18:34,740 --> 00:18:36,400
porque vamos a poner

255
00:18:36,400 --> 00:18:38,299
más opciones justo debajo

256
00:18:38,299 --> 00:18:40,319
lo pegamos

257
00:18:40,319 --> 00:18:42,740
tres veces por ejemplo y ahora

258
00:18:42,740 --> 00:18:44,859
a la segunda opción le vamos a poner joven

259
00:18:44,859 --> 00:18:47,079
y en el texto

260
00:18:47,079 --> 00:18:49,000
en vez de poner menor de 18 años

261
00:18:49,000 --> 00:18:50,819
vamos a poner entre

262
00:18:50,819 --> 00:18:53,200
18 y 60 años

263
00:18:53,200 --> 00:18:55,400
y en el tercero

264
00:18:55,400 --> 00:18:57,039
en el value vamos a poner

265
00:18:57,039 --> 00:18:58,920
adulto y vamos a poner

266
00:18:58,920 --> 00:19:03,410
mayor de 60

267
00:19:03,410 --> 00:19:04,730
años

268
00:19:04,730 --> 00:19:07,109
¿vale? y fijaros

269
00:19:07,109 --> 00:19:09,170
que al crear esto nosotros podemos

270
00:19:09,170 --> 00:19:10,769
seleccionar cualquiera de las opciones

271
00:19:10,769 --> 00:19:17,069
y no se seleccionan varias, sino que elige una entre las tres posibles, ¿vale?

272
00:19:17,390 --> 00:19:22,950
Esto es porque hemos fijado el name, el mismo name para las tres variables, ¿vale?

273
00:19:24,089 --> 00:19:31,670
Fijaros que si yo ahora aquí, por casualidad, me hubiera equivocado y hubiera puesto el nombre usuario, ¿vale?

274
00:19:32,069 --> 00:19:38,289
Si yo ahora marco, se me queda hecha marcada siempre porque no pertenece al mismo grupo de elementos, ¿vale?

275
00:19:38,809 --> 00:19:42,380
Así que lo dejo marcado.

276
00:19:42,400 --> 00:19:48,759
y fijaros que cuando yo actualizo la página, este elemento sale sin marcar.

277
00:19:49,220 --> 00:19:55,519
Si yo quiero dejar un elemento marcado por defecto, pues me lo escogería el que yo quisiera, por ejemplo, joven,

278
00:19:55,519 --> 00:19:58,599
y aquí pondría check, ¿vale?

279
00:19:58,940 --> 00:20:06,039
Y si yo actualizo la página, por defecto, al actualizar, aparece esa opción marcada, ¿vale?

280
00:20:07,519 --> 00:20:09,460
Más elementos para el formulario.

281
00:20:09,460 --> 00:20:12,000
Vamos a utilizar de base el de la edad

282
00:20:12,000 --> 00:20:13,859
¿Vale? Entonces lo voy a copiar

283
00:20:13,859 --> 00:20:15,299
Voy a poner un salto de línea más

284
00:20:15,299 --> 00:20:17,220
Y lo voy a pegar aquí abajo

285
00:20:17,220 --> 00:20:19,759
¿Vale? Y ahora en vez de ser edad

286
00:20:19,759 --> 00:20:20,559
Vamos a poner

287
00:20:20,559 --> 00:20:22,619
Hobbies

288
00:20:22,619 --> 00:20:25,980
¿Vale? Y en vez de poner

289
00:20:25,980 --> 00:20:28,000
En el nombre edad usuario

290
00:20:28,000 --> 00:20:29,039
Voy a poner

291
00:20:29,039 --> 00:20:31,539
Pasatiempo

292
00:20:31,539 --> 00:20:33,700
Lo voy a copiar

293
00:20:33,700 --> 00:20:35,420
Y lo voy a pegar en todo ¿Vale?

294
00:20:36,779 --> 00:20:37,579
Tal que así

295
00:20:37,579 --> 00:20:47,779
Y lo mismo, le voy a dar aquí unos valores, que el primer valor de value va a ser leer, el segundo va a ser deporte y el tercero música.

296
00:20:48,140 --> 00:21:06,769
Y le pongo una etiqueta asociada, que va a ser lectura, deporte y escuchar música.

297
00:21:07,170 --> 00:21:11,789
Hacer deporte, ¿vale?

298
00:21:12,569 --> 00:21:17,549
¿Qué pasa? Que tal y como está configurado, que está como una opción de...

299
00:21:17,549 --> 00:21:45,839
Voy a quitar el check también, ¿vale? Que está como una opción de radio, solo me deja elegir un elemento, ¿vale? ¿Cómo podríamos arreglar esto? Pues de varias formas. La más correcta es utilizar, en vez de tipo radio, utilizar tipo checkbox, ¿vale? Checkbox. Y lo ponemos en todo, ¿vale?

300
00:21:45,839 --> 00:22:08,019
Y ahora fijaros que si puedo marcar y desmarcar elementos, ¿vale? Incluso puedo marcar varios, ¿vale? Pero en este caso es importante para que no haya sobre escritura de variables darle un elemento diferente a cada uno, ¿vale?

301
00:22:08,019 --> 00:22:21,359
Entonces, nosotros lo que pondremos aquí será pasatiempo 1, pasatiempo 2 y pasatiempo 3, ¿vale?

302
00:22:24,119 --> 00:22:29,579
¿Ok? Así tendríamos nuestra lista.

303
00:22:30,859 --> 00:22:32,359
¿Qué más, qué más, qué más?

304
00:22:32,359 --> 00:23:00,240
Vale, vamos a meter otro salto de línea, BR, y vamos a añadir un elemento para elegir cantidades, por ejemplo, ¿vale? Entonces ponemos mi etiqueta P y ponemos selecciona una cantidad de kilómetros recorridos este año, por ejemplo, ¿vale?

305
00:23:00,240 --> 00:23:11,700
Y dentro vamos a añadir un elemento input, como siempre, y de tipo vamos a poner number.

306
00:23:13,960 --> 00:23:20,299
Le vamos a dar un nombre a esta variable, que va a ser cantidad, ¿vale? o kilómetro, ¿vale?

307
00:23:20,779 --> 00:23:28,380
Y dentro vamos a darle un valor por defecto.

308
00:23:29,240 --> 00:23:34,339
Por ejemplo, va a ser el valor 0, ¿vale? Hemos recorrido 0 kilómetros.

309
00:23:34,339 --> 00:23:48,940
Si cerramos la etiqueta fijaros que aparece aquí un valor 0 y como es número, numérica, aparecen aquí las opciones para subir y aumentar.

310
00:23:49,380 --> 00:23:54,180
Y aumentaríamos de kilómetro en kilómetro positivo o en negativo.

311
00:23:54,559 --> 00:23:56,559
No tendría sentido poner negativo.

312
00:23:56,559 --> 00:24:05,440
Entonces, como no tendría sentido poner negativo en nuestro caso, pues nos venimos aquí y vamos a poner una etiqueta, un atributo 1000.

313
00:24:05,839 --> 00:24:09,160
Y como valor le vamos a poner el 0, ¿vale?

314
00:24:09,740 --> 00:24:13,680
Por lo tanto, si yo ahora actualizo la página, veis que aparece 0.

315
00:24:14,440 --> 00:24:17,619
Si le doy para abajo, no me baja del 0, ¿vale?

316
00:24:18,160 --> 00:24:23,380
Y lo mismo puedo poner para un atributo max, ¿vale?

317
00:24:23,799 --> 00:24:27,700
Por ejemplo, 10 kilómetros, ¿vale? O menos aún, 3 kilómetros.

318
00:24:29,299 --> 00:24:34,500
Entonces yo ahora me vendría aquí y podría aumentar y más de 3 no lleva, ¿vale?

319
00:24:34,500 --> 00:24:45,230
Y si resulta que nosotros no corremos o no andamos a kilómetro por kilómetro, sino que lo hacemos por cada 100 metros,

320
00:24:45,569 --> 00:24:50,470
pues entonces simplemente aquí pondríamos el paso en el que queremos aumentar ese valor.

321
00:24:50,930 --> 00:24:56,930
Pues en este ponemos 0,01 cada 10 metros, ¿vale?

322
00:24:57,329 --> 00:25:05,269
Y ahora nos venimos aquí y fijaros, ¿vale?

323
00:25:05,410 --> 00:25:09,309
Yo podría cambiar este valor de forma manual, ¿vale? Yo podría poner aquí 1,5.

324
00:25:09,650 --> 00:25:11,490
sin problema

325
00:25:11,490 --> 00:25:12,029
¿vale?

326
00:25:13,589 --> 00:25:13,869
ok

327
00:25:13,869 --> 00:25:16,970
bien

328
00:25:16,970 --> 00:25:19,049
eso en cuanto a

329
00:25:19,049 --> 00:25:23,049
en cuanto a

330
00:25:23,049 --> 00:25:24,930
el input de tipo

331
00:25:24,930 --> 00:25:26,609
número, ahora vamos a meter

332
00:25:26,609 --> 00:25:28,670
una fecha ¿vale? por ejemplo

333
00:25:28,670 --> 00:25:31,250
vamos a poner la fecha de nacimiento

334
00:25:31,250 --> 00:25:33,089
y aquí si que podemos poner

335
00:25:33,089 --> 00:25:35,049
un label ¿vale? entonces vamos a

336
00:25:35,049 --> 00:25:36,690
poner un salto de línea

337
00:25:36,690 --> 00:25:38,069
para asegurar que quede un poquito

338
00:25:38,069 --> 00:25:40,769
bien estéticamente y vamos a poner

339
00:25:40,769 --> 00:25:42,509
label

340
00:25:42,509 --> 00:25:47,829
y vamos a poner fecha de nacimiento

341
00:25:47,829 --> 00:25:49,789
voy a poner otro salto de línea más

342
00:25:49,789 --> 00:25:50,470
que quede mejor

343
00:25:50,470 --> 00:25:53,349
dentro de label

344
00:25:53,349 --> 00:25:55,609
vamos a poner el form y lo vamos a llamar

345
00:25:55,609 --> 00:25:56,269
subfecha

346
00:25:56,269 --> 00:25:59,529
¿vale? y ahora añadimos

347
00:25:59,529 --> 00:26:00,650
un elemento input

348
00:26:00,650 --> 00:26:02,289
de tipo

349
00:26:02,289 --> 00:26:04,890
date ¿vale?

350
00:26:05,470 --> 00:26:06,109
para fecha

351
00:26:06,109 --> 00:26:09,529
y el nombre de la variable va a ser

352
00:26:09,529 --> 00:26:12,269
fecha barra baja nacimiento

353
00:26:12,269 --> 00:26:14,170
y en el id

354
00:26:14,170 --> 00:26:15,950
pues recuerdo que ponemos

355
00:26:15,950 --> 00:26:17,910
lo mismo que en el atributo for

356
00:26:17,910 --> 00:26:19,349
así

357
00:26:19,349 --> 00:26:21,509
¿vale?

358
00:26:22,670 --> 00:26:24,210
y vamos a ponerle

359
00:26:24,210 --> 00:26:26,410
vamos a aumentarle el tamaño a 50

360
00:26:26,410 --> 00:26:29,579
y fijaros que cuando

361
00:26:29,579 --> 00:26:31,579
lo cierro me sale el campo

362
00:26:31,579 --> 00:26:33,420
tal que así con la configuración

363
00:26:33,420 --> 00:26:35,420
día mes y año y

364
00:26:35,420 --> 00:26:37,119
me aparece esta opción para hacer clic

365
00:26:37,119 --> 00:26:39,660
y elegir yo la fecha

366
00:26:39,660 --> 00:26:40,660
que yo quiera ¿vale?

367
00:26:40,839 --> 00:26:44,720
Me podría mover por meses, me podría mover también por año, etc.

368
00:26:45,140 --> 00:26:45,339
¿Vale?

369
00:26:46,000 --> 00:26:49,960
Y me daría fuego a elegir la fecha o el año que yo quise.

370
00:26:51,099 --> 00:26:51,640
¿Vale?

371
00:26:52,980 --> 00:26:54,920
Más elementos que podamos añadir.

372
00:26:55,380 --> 00:27:01,319
Vamos a añadir, por ejemplo, un elemento para definir rango.

373
00:27:01,619 --> 00:27:01,799
¿Vale?

374
00:27:02,480 --> 00:27:05,599
Entonces, de nuevo, vamos a poner dos saltos de línea.

375
00:27:06,960 --> 00:27:08,220
Uno ahí y otro aquí.

376
00:27:08,220 --> 00:27:11,160
y ahora añadimos una etiqueta P

377
00:27:11,160 --> 00:27:12,279
donde vamos a poner

378
00:27:12,279 --> 00:27:15,240
define un rango de

379
00:27:15,240 --> 00:27:19,400
de altura

380
00:27:19,400 --> 00:27:23,680
de altura no, un rango de

381
00:27:23,680 --> 00:27:26,839
salario deseado

382
00:27:26,839 --> 00:27:28,680
¿vale?

383
00:27:29,819 --> 00:27:30,619
y

384
00:27:30,619 --> 00:27:33,119
vamos a añadir un elemento input

385
00:27:33,119 --> 00:27:34,299
de tipo

386
00:27:34,299 --> 00:27:37,839
vamos a poner range

387
00:27:37,839 --> 00:27:39,319
¿vale? que es de rango

388
00:27:39,319 --> 00:27:41,839
la variable

389
00:27:41,839 --> 00:27:43,619
donde se va a guardar todo eso va a ser

390
00:27:43,619 --> 00:27:44,859
rango salarial

391
00:27:44,859 --> 00:27:47,839
¿vale? y vamos a poner un tamaño

392
00:27:47,839 --> 00:27:49,619
de 50

393
00:27:49,619 --> 00:27:51,660
¿vale? y fijaros

394
00:27:51,660 --> 00:27:52,799
que si yo cierro

395
00:27:52,799 --> 00:27:55,660
pues sale un valor

396
00:27:55,660 --> 00:27:56,940
¿vale?

397
00:27:57,539 --> 00:27:59,779
con un deslizador donde yo puedo elegir

398
00:27:59,779 --> 00:28:01,420
el valor que quiera ¿vale?

399
00:28:01,859 --> 00:28:04,000
si yo pongo en vez de 50 pongo 100

400
00:28:04,000 --> 00:28:07,759
pues realmente aquí como podéis ver

401
00:28:07,759 --> 00:28:08,880
no hay ningún

402
00:28:08,880 --> 00:28:11,519
ningún cambio muy

403
00:28:11,519 --> 00:28:13,319
sustancial, ¿vale? Simplemente que

404
00:28:13,319 --> 00:28:15,680
hay más

405
00:28:15,680 --> 00:28:17,779
elementos donde elegir, ¿vale? Si yo pongo, por ejemplo,

406
00:28:17,920 --> 00:28:19,200
solo tres,

407
00:28:20,880 --> 00:28:21,119
¿vale?

408
00:28:23,619 --> 00:28:25,440
Los altos son más bruscos,

409
00:28:25,680 --> 00:28:26,960
¿vale? Simplemente eso.

410
00:28:29,640 --> 00:28:29,940
Vale.

411
00:28:31,339 --> 00:28:33,240
Más cositas, más cositas

412
00:28:33,240 --> 00:28:34,359
que podemos hacer aquí.

413
00:28:35,079 --> 00:28:36,839
Más tipos de etiquetas, quiero decir.

414
00:28:37,619 --> 00:28:39,140
¡Ah! Etiquetas para

415
00:28:39,140 --> 00:28:41,140
juntar un archivo, ¿vale?

416
00:28:41,140 --> 00:29:01,339
Imaginaros que queremos adjuntar un archivo, pues entonces nos vendríamos, ponemos de nuevo, vamos a poner santos de línea, que siempre se me olvidan, br, br, etiqueta p y ponemos adjunta to cv, tu currículum, ¿vale?

417
00:29:01,339 --> 00:29:10,279
Y ahora aquí ponemos una entrada, un elemento de tipo input y el tipo de input va a ser file, ¿vale?

418
00:29:11,960 --> 00:29:23,579
Y vamos a poner como nombre, la variable va a ser archivo y entre paréntesis y ponemos dos corchetes, ¿vale?

419
00:29:24,079 --> 00:29:27,819
Y ponemos y cerramos, ¿vale?

420
00:29:27,819 --> 00:29:41,039
Y fijaros que se nos abre esta opción donde da a seleccionar un archivo. Si nosotros pulsásemos, pues se nos abriría una ventana emergente donde podemos elegir el archivo a apuntar, ¿vale?

421
00:29:41,759 --> 00:29:52,559
Otra opción que tenemos dentro de este elemento de entrada del fichero es poner un atributo justo después que se llama multiple, ¿vale?

422
00:29:53,299 --> 00:30:01,619
Y esto permite que utilizando la tecla control añadamos más de un fichero dentro de esta opción, ¿vale?

423
00:30:01,619 --> 00:30:11,539
Y por eso es necesario, cuando añadimos ese multiple, es necesario añadir en el atributo name los dos corchetes, ¿vale?

424
00:30:11,559 --> 00:30:17,779
Para que él luego sepa que hay varios archivos dentro de esa variable archivo, ¿vale?

425
00:30:18,799 --> 00:30:20,380
Que no se olvide, por favor.

426
00:30:21,960 --> 00:30:29,839
Antes de guardar los cambios y hacer este operativo, también es importante que sepáis que en nuestro formulario,

427
00:30:29,839 --> 00:30:38,660
Aquí arriba, donde definíamos el formulario, tenemos que guardar la etiqueta, o tenemos que poner el atributo en type, ¿vale?

428
00:30:38,740 --> 00:30:39,319
Que es este.

429
00:30:40,220 --> 00:30:45,759
Y lo completaremos con esta opción, multipar form data, ¿vale?

430
00:30:46,559 --> 00:30:49,000
Que es necesario para juntar varios archivos.

431
00:30:49,119 --> 00:30:50,759
Lo voy a poner con comentarios, ¿vale?

432
00:30:50,759 --> 00:31:08,799
Este último atributo enc type es necesario para apuntar varios archivos, ¿vale? Que no se olvide, por favor.

433
00:31:11,140 --> 00:31:21,099
Vale, ahora vamos a continuar haciendo una lista para que el usuario, por ejemplo, eleja elementos sobre esa lista, ¿vale? Voy a poner un par de saltos de línea, los pongo aquí.

434
00:31:21,099 --> 00:31:24,579
que me está quedando un archivo muy largo

435
00:31:24,579 --> 00:31:25,039
¿vale?

436
00:31:26,039 --> 00:31:28,720
y esa opción va a ser por ejemplo para elegir

437
00:31:28,720 --> 00:31:29,700
el país ¿vale?

438
00:31:33,019 --> 00:31:34,539
entonces, dos puntos

439
00:31:34,539 --> 00:31:37,039
para añadir esto

440
00:31:37,039 --> 00:31:38,720
vamos a poner

441
00:31:38,720 --> 00:31:41,099
una etiqueta que es la etiqueta

442
00:31:41,099 --> 00:31:43,240
select ¿vale? esto nos va a abrir

443
00:31:43,240 --> 00:31:44,359
una lista desplegable

444
00:31:44,359 --> 00:31:46,220
y dentro de name

445
00:31:46,220 --> 00:31:49,079
pondremos la variable país

446
00:31:49,079 --> 00:31:50,140
¿vale?

447
00:31:51,140 --> 00:31:52,160
y cerramos

448
00:31:52,160 --> 00:31:57,779
Y fijaros que él automáticamente nos rellena con la etiqueta final del seller.

449
00:31:58,339 --> 00:32:03,279
Y ahora, dentro del seller vamos a poner las diferentes opciones.

450
00:32:03,759 --> 00:32:08,380
Entonces, la primera opción, eso lo hacemos con la etiqueta option, ¿vale?

451
00:32:08,960 --> 00:32:12,839
Tal que así. Yo pondría aquí, por ejemplo, la primera opción España.

452
00:32:13,240 --> 00:32:18,799
Y para darle valor a esa variable, pondría el valor Spain, ¿vale?

453
00:32:18,799 --> 00:32:29,960
Es decir, cuando yo elija España, dentro de la variable país, dentro de la variable country, me aparecerá el contenido Spain, ¿vale?

454
00:32:30,259 --> 00:32:36,819
Y ahora lo que voy a hacer es copiar esto, por ejemplo, unas 3 o 4 veces más, ¿vale?

455
00:32:37,339 --> 00:32:41,279
Y voy a modificar los países, ¿vale?

456
00:32:41,279 --> 00:33:05,140
Por ejemplo, EU, si ponemos Estados Unidos, Rusia, si ponemos Rusia, Italia, si ponemos Italia, Francia, si ponemos Francia, ¿vale?

457
00:33:05,759 --> 00:33:14,099
Y fijaros que lo que nosotros vemos es aquí una opción, un desplegable, que al hacer clic, pues me deja elegir los diferentes países, ¿vale?

458
00:33:14,099 --> 00:33:19,220
Estados Unidos, Italia, Francia, España, ¿vale?

459
00:33:19,759 --> 00:33:22,240
Pero solo me deja elegir un país.

460
00:33:22,660 --> 00:33:30,460
Si nosotros quisiéramos elegir varios, pues porque el formulario en vez de ser país, pues puede ser lo que sea, ¿cómo lo hacemos?

461
00:33:30,980 --> 00:33:31,799
Pues muy sencillo.

462
00:33:32,259 --> 00:33:36,599
En el select, lo primero que hacemos es añadir la etiqueta multiple, ¿vale?

463
00:33:36,859 --> 00:33:41,420
Y fijaros que al añadir el multiple me ha parecido esto completamente diferente, ¿vale?

464
00:33:41,420 --> 00:33:43,420
Y ya me deja elegir varios, ¿vale?

465
00:33:44,839 --> 00:33:46,980
Dejando pulsado la tecla Control, ¿vale?

466
00:33:47,259 --> 00:33:50,579
Si dejo la tecla Control, pues fijaros que aquí tengo España, Estados Unidos y Rusia.

467
00:33:51,319 --> 00:33:52,279
Y ahora elijo también Italia.

468
00:33:52,880 --> 00:33:53,960
Y ahora elijo también Francia.

469
00:33:54,599 --> 00:33:56,299
Y deselecciono Estados Unidos, ¿vale?

470
00:33:57,299 --> 00:34:06,099
Pero, para hacerlo correctamente, no solo hay que hacer eso, sino que también en el nombre de la variable tenemos que añadir dos corchetes, ¿vale?

471
00:34:06,980 --> 00:34:09,940
Igual que hacíamos con el archivo, ¿vale?

472
00:34:12,380 --> 00:34:12,820
Ok.

473
00:34:12,820 --> 00:34:15,579
Y vamos a poner dos saltos de línea más aquí.

474
00:34:15,800 --> 00:34:25,360
y vamos al último elemento de entrada de que el contenido del formulario que va a ser un

475
00:34:25,360 --> 00:34:36,239
elemento de comentario y va a ser un elemento de texto y vamos a poner como nombre de esa

476
00:34:36,239 --> 00:34:42,880
variable va a ser el mensaje esa va a ser el nombre de la variable y ahora

477
00:34:42,880 --> 00:34:50,440
Lo que vamos a poner es el número de filas y el número de columnas que queremos que tenga ese elemento

478
00:34:50,440 --> 00:34:53,099
Con los atributos rows y columns, ¿vale?

479
00:34:53,599 --> 00:34:57,460
Pues 10 filas por 80 columnas, ¿vale?

480
00:34:57,940 --> 00:34:58,960
Y cerramos

481
00:34:58,960 --> 00:35:05,179
Y fijaros que me aparece este elemento donde yo podría introducirte

482
00:35:05,179 --> 00:35:06,420
¿Vale?

483
00:35:08,980 --> 00:35:13,739
Eso en cuanto a elementos para añadir contenido es formulario, ¿vale?

484
00:35:13,739 --> 00:35:16,019
Ahora vamos a empezar a añadir botón.

485
00:35:16,500 --> 00:35:23,199
Entonces, vamos a añadir un primer botón, que va a ser el botón de envío de datos.

486
00:35:24,320 --> 00:35:28,880
Ese botón se pone también con el atributo, con la etiqueta, perdón, input, ¿vale?

487
00:35:29,239 --> 00:35:35,369
Solo que ahora en el atributo type lo que vamos a poner es un submit, ¿vale?

488
00:35:35,369 --> 00:35:42,769
Y aquí le vamos a poner un nombre de esa variable, un name, ¿vale?

489
00:35:43,110 --> 00:35:47,369
Que va a ser enviar para bajar datos.

490
00:35:48,670 --> 00:35:53,769
Y por último, un valor que va a ser el texto que aparezca encima del botón.

491
00:35:53,949 --> 00:35:59,030
En este caso va a ser dale y envía, por una exclamación final.

492
00:36:00,130 --> 00:36:04,369
Y fijaros que me aparece aquí el botón dale y envía, ¿vale?

493
00:36:04,369 --> 00:36:11,619
Voy a poner saltos de línea aquí para que quede más centradito, ¿vale?

494
00:36:11,900 --> 00:36:15,360
Y le doy, ¿vale?

495
00:36:16,119 --> 00:36:19,260
Y fijaros, interesante, ¿veis el navegador?

496
00:36:19,679 --> 00:36:21,460
Me está dando un error, ¿por qué?

497
00:36:22,059 --> 00:36:28,619
Pues porque yo en el campo nombre había puesto el atributo require

498
00:36:28,619 --> 00:36:32,599
y como no he puesto contenido, cuando yo le doy a enviar me dice

499
00:36:32,599 --> 00:36:36,000
oye, completa este campo, que es un campo requerido.

500
00:36:36,000 --> 00:36:42,099
Entonces, si yo pongo texto, ahora sí me deja enviarlo, ¿vale?

501
00:36:44,519 --> 00:36:48,340
Ah, pues no, no me deja enviarlo. ¿Por qué? Porque también lo había puesto en el password, ¿vale?

502
00:36:48,519 --> 00:36:56,039
Ponemos contraseña y ahora sí, ¿vale? Me da un error, pero porque no está habilitado el posteo, ¿vale?

503
00:36:56,599 --> 00:37:02,760
Pero bueno, la idea que veis es que se puede enviar, ¿vale?

504
00:37:02,760 --> 00:37:07,559
vale, voy a volver a cargar la web

505
00:37:07,559 --> 00:37:09,139
que si no se queda bloqueada

506
00:37:09,139 --> 00:37:17,960
un segundito, creo que

507
00:37:17,960 --> 00:37:19,179
la estáis viendo

508
00:37:19,179 --> 00:37:22,480
vale

509
00:37:22,480 --> 00:37:25,360
pues continuamos, vamos a añadir

510
00:37:25,360 --> 00:37:27,460
un botón más, vamos a añadir

511
00:37:27,460 --> 00:37:29,219
un botón, por ejemplo

512
00:37:29,219 --> 00:37:31,699
para limpiar todo el contenido

513
00:37:31,699 --> 00:37:33,019
del formulario, vale

514
00:37:33,019 --> 00:37:35,500
imaginaros que hemos puesto contenido y cuando lo tenemos todo escrito

515
00:37:35,500 --> 00:37:37,820
nos damos cuenta de que está todo mal, que lo queremos borrar

516
00:37:37,820 --> 00:37:39,579
vale, entonces

517
00:37:39,579 --> 00:37:41,860
esto sería, para no hacernos un lío

518
00:37:41,860 --> 00:37:48,179
Voy a poner aquí comentario, botón de envío de datos, ¿vale?

519
00:37:48,179 --> 00:37:55,920
Aquí voy a poner otro comentario que va a ser botón para reseteo de datos, ¿vale?

520
00:37:56,699 --> 00:38:00,079
¿Y cómo se pone este botón?

521
00:38:00,400 --> 00:38:03,599
Pues se pone poniendo de nuevo la etiqueta input, ¿vale?

522
00:38:03,900 --> 00:38:08,599
Pero en el tipo, en vez de poner submit, vamos a poner reset, ¿vale?

523
00:38:09,199 --> 00:38:16,760
Como nombre de la variable, esto no es realmente muy importante para botones, pero bueno, siempre es bueno ponerlo, limpiar, barra baja campo, ¿vale?

524
00:38:16,960 --> 00:38:25,699
Y como value, que es el texto que va a aparecer en el botón, vamos a poner limpiar formulario, ¿vale?

525
00:38:26,579 --> 00:38:32,000
Y ahora cerramos la etiqueta y fijaros que aparece aquí el contenido, ¿vale?

526
00:38:32,000 --> 00:38:38,980
Entonces, si yo ahora seleccionara una fecha, un valor, marcara todo esto como yo quisiera, ¿vale?

527
00:38:40,000 --> 00:38:43,260
Yo pusiera aquí valores, como estáis viendo, ¿vale?

528
00:38:43,760 --> 00:38:45,360
Y le doy a limpiar formulario.

529
00:38:50,090 --> 00:38:53,929
Fijaros que todo vuelve al estado de fecha, ¿vale?

530
00:38:56,559 --> 00:38:57,440
¿Qué más cositas?

531
00:38:57,960 --> 00:38:59,599
Botones genéricos, ¿vale?

532
00:39:00,360 --> 00:39:02,940
Los botones genéricos hay que configurarlos.

533
00:39:02,940 --> 00:39:09,579
No vamos a entrar en eso ahora mismo porque no estamos haciendo envío de datos, ¿vale?

534
00:39:10,460 --> 00:39:13,079
Si podemos, avanzaremos esto al final del curso.

535
00:39:13,300 --> 00:39:16,840
Pero explico ahora cómo hacer, cómo introducir botones genéricos.

536
00:39:17,059 --> 00:39:21,119
Porque lo bueno de los botones genéricos es que son más personalizables, ¿vale?

537
00:39:23,130 --> 00:39:24,530
Lo que es la estética, quiero decir.

538
00:39:25,010 --> 00:39:25,869
Entonces, ¿cómo lo hacemos?

539
00:39:26,110 --> 00:39:27,630
Pues añadimos otro input, ¿vale?

540
00:39:28,130 --> 00:39:34,170
Y en el tipo, en vez de poner submit o poner reset, vamos a poner tipo button, ¿vale?

541
00:39:34,250 --> 00:39:37,510
en el nombre de la variable botón

542
00:39:37,510 --> 00:39:38,929
genérico, ¿vale?

543
00:39:39,110 --> 00:39:41,469
siempre sencillo, y como valor

544
00:39:41,469 --> 00:39:43,769
los botón

545
00:39:43,769 --> 00:39:45,010
genérico

546
00:39:45,010 --> 00:39:49,889
¿vale? y fijaros que aparece aquí

547
00:39:49,889 --> 00:39:50,469
este botón

548
00:39:50,469 --> 00:39:56,380
¿vale? y otra forma

549
00:39:56,380 --> 00:39:58,280
de meter botones genéricos

550
00:39:58,280 --> 00:39:59,599
es utilizando la etiqueta

551
00:39:59,599 --> 00:40:01,760
button, ¿vale?

552
00:40:02,480 --> 00:40:04,400
dentro de button ponemos un tipo

553
00:40:04,400 --> 00:40:06,139
que hay que volver a poner button

554
00:40:06,139 --> 00:40:06,619
¿vale?

555
00:40:06,619 --> 00:40:09,000
y ponemos un nombre

556
00:40:09,000 --> 00:40:10,760
de la variable

557
00:40:10,760 --> 00:40:11,739
que va a ser

558
00:40:11,739 --> 00:40:13,460
los patos de otra vez

559
00:40:13,460 --> 00:40:15,119
¿vale?

560
00:40:15,860 --> 00:40:18,719
y lo bueno de este botón

561
00:40:18,719 --> 00:40:20,480
es que si yo ahora aquí pongo un texto

562
00:40:20,480 --> 00:40:22,780
digo, este es

563
00:40:22,780 --> 00:40:23,860
un botón

564
00:40:23,860 --> 00:40:26,239
muy personalizable

565
00:40:26,239 --> 00:40:28,619
¿vale? fijaros que conforme

566
00:40:28,619 --> 00:40:30,519
yo voy editando eso, el texto de aquí también

567
00:40:30,519 --> 00:40:32,579
se me personaliza y yo incluso

568
00:40:32,579 --> 00:40:34,599
podría poner parte de este

569
00:40:34,599 --> 00:40:36,099
texto en negrita

570
00:40:36,099 --> 00:40:43,059
por ejemplo podría poner personalizable en negrita

571
00:40:43,059 --> 00:40:48,480
y veis aquí como aparece la palabra personalizable en negrita

572
00:40:48,480 --> 00:40:54,340
bueno pues hasta aquí la parte de formularios

573
00:40:54,340 --> 00:40:57,840
como veis es muy extensa porque con los formularios hay muchos campos

574
00:40:57,840 --> 00:40:59,380
y se pueden hacer muchas cosas

575
00:40:59,380 --> 00:41:02,960
pero bueno yo creo que con eso es más que suficiente