1
00:00:00,300 --> 00:00:09,720
Bueno, los formularios es uno de los elementos más importantes para pasar información de una página a otra, o a servidores, base de datos, etc.

2
00:00:10,800 --> 00:00:13,580
Entonces sirven para recoger información del usuario.

3
00:00:14,619 --> 00:00:16,879
Y vamos a ver un ejemplo.

4
00:00:17,140 --> 00:00:19,100
La etiqueta principal es la etiqueta form.

5
00:00:19,699 --> 00:00:25,660
Y form, que es esta etiqueta que finaliza aquí, tiene varios parámetros que son habituales.

6
00:00:25,859 --> 00:00:26,199
Acción.

7
00:00:27,100 --> 00:00:28,679
¿A dónde va a ir este formulario?

8
00:00:28,679 --> 00:00:30,800
este formulario que después analizaremos

9
00:00:30,800 --> 00:00:32,579
que está aquí, a dónde lo va a procesar

10
00:00:32,579 --> 00:00:33,520
quién va a procesarlo

11
00:00:33,520 --> 00:00:35,659
en este caso lo va a procesar un fichero

12
00:00:35,659 --> 00:00:37,899
que se llama ejemplo.php

13
00:00:37,899 --> 00:00:40,600
que es un programa en lenguaje PHP

14
00:00:40,600 --> 00:00:42,759
que va a mostrarnos

15
00:00:42,759 --> 00:00:44,719
esta información, no va a hacer mucho más

16
00:00:44,719 --> 00:00:46,840
¿y qué método vamos a utilizar?

17
00:00:47,060 --> 00:00:48,420
¿método get?

18
00:00:48,820 --> 00:00:50,340
¿o método post?

19
00:00:51,200 --> 00:00:52,439
ya veremos la diferencia

20
00:00:52,439 --> 00:00:54,619
posteriormente, que solamente la vamos a

21
00:00:54,619 --> 00:00:56,560
apreciar de verdad cuando estemos trabajando con un

22
00:00:56,560 --> 00:00:57,479
servidor web

23
00:00:57,479 --> 00:01:01,539
Lo siguiente que ponemos es un párrafo

24
00:01:01,539 --> 00:01:03,039
Ha puesto aquí un párrafo

25
00:01:03,039 --> 00:01:04,859
Con una información que es nombre

26
00:01:04,859 --> 00:01:08,060
Y una entrada, un input

27
00:01:08,060 --> 00:01:10,780
De tipo texto

28
00:01:10,780 --> 00:01:13,519
Que tiene un nombre y un tamaño

29
00:01:13,519 --> 00:01:14,400
Es esto de aquí

30
00:01:14,400 --> 00:01:16,459
Esto que aparece aquí es esa entrada

31
00:01:16,459 --> 00:01:18,500
Después el año de nacimiento

32
00:01:18,500 --> 00:01:22,620
En el cual ha puesto un input de tipo number

33
00:01:22,620 --> 00:01:25,519
Y un nombre que es nacido

34
00:01:25,519 --> 00:01:29,540
Y que tiene como valor mínimo 1.900, que es este de aquí.

35
00:01:31,060 --> 00:01:43,879
Otro párrafo en el cual indica sexo, en el cual está establecido un radio, un input de tipo radio, en el cual vemos que son unos botoncitos, en el cual tendremos que elegir o uno u otro.

36
00:01:44,219 --> 00:01:47,000
Los tipos radios es lo que maneja, uno u otro.

37
00:01:47,640 --> 00:01:50,599
Y ha puesto un nombre, el mismo para ambos, y un valor.

38
00:01:50,599 --> 00:01:55,620
En el caso de hombre ha puesto una H, en el caso de mujer ha puesto una M.

39
00:02:00,019 --> 00:02:03,260
Y ya finalmente ha puesto otro párrafo en el cual hay dos inputs.

40
00:02:03,439 --> 00:02:09,340
Un input de tipo submit, el de tipo envíalo y procesa este formulario,

41
00:02:09,560 --> 00:02:11,759
y otro de reset para borrar toda la información.

42
00:02:12,539 --> 00:02:18,060
Voy a escribir, aquí está nuestro programa funcionando, con lo cual voy a escribir exactamente esto de aquí.

43
00:02:18,060 --> 00:02:20,759
podría escribirlo aquí directamente y verlo

44
00:02:20,759 --> 00:02:22,500
pero me parece más interesante

45
00:02:22,500 --> 00:02:23,900
abrir este formulario

46
00:02:23,900 --> 00:02:26,639
en otra ventanita, en esta ventanita

47
00:02:26,639 --> 00:02:28,699
y aquí trabajar en él

48
00:02:28,699 --> 00:02:30,219
entonces vamos a poner

49
00:02:30,219 --> 00:02:32,360
Ana López como nombre

50
00:02:32,360 --> 00:02:34,800
aquí ya vemos que como es

51
00:02:34,800 --> 00:02:36,639
un tipo número, me ha salido esto de aquí

52
00:02:36,639 --> 00:02:38,520
vamos a ver que aparece, efectivamente el menor era

53
00:02:38,520 --> 00:02:40,860
1900, entonces yo lo que voy a

54
00:02:40,860 --> 00:02:42,639
poner aquí es 1987

55
00:02:42,639 --> 00:02:44,599
por ejemplo, y que es

56
00:02:44,599 --> 00:02:46,500
mujer, bien

57
00:02:46,500 --> 00:02:47,759
Voy a enviarlo

58
00:02:47,759 --> 00:02:50,000
Y efectivamente

59
00:02:50,000 --> 00:02:51,740
Este programa PHP

60
00:02:51,740 --> 00:02:53,520
Este programa PHP

61
00:02:53,520 --> 00:02:55,560
Al cual ha ido a trabajar

62
00:02:55,560 --> 00:02:57,800
Ese programa PHP

63
00:02:57,800 --> 00:02:59,379
Nos ha procesado este fichero

64
00:02:59,379 --> 00:03:02,259
Y ha sabido recoger la información

65
00:03:02,259 --> 00:03:04,699
Que nosotros le hemos enviado

66
00:03:04,699 --> 00:03:05,580
¿De acuerdo?

67
00:03:06,000 --> 00:03:08,300
Ha sabido manejarlo perfectamente

68
00:03:08,300 --> 00:03:12,060
Como hemos puesto el método get

69
00:03:12,060 --> 00:03:13,680
Toda esa información

70
00:03:13,680 --> 00:03:15,060
La hemos pasado de esta manera

71
00:03:15,060 --> 00:03:18,520
El nombre del fichero que va a procesarlo

72
00:03:18,520 --> 00:03:20,960
Y hemos puesto nombre es igual a Ana López

73
00:03:20,960 --> 00:03:23,960
Ya vemos que el espacio lo ha puesto con un más

74
00:03:23,960 --> 00:03:29,120
Y nacido en el 87

75
00:03:29,120 --> 00:03:32,819
Y el campo HM vale M

76
00:03:32,819 --> 00:03:35,520
Con toda esta información han sabido manejar esto

77
00:03:35,520 --> 00:03:37,860
Vamos a probar si aquí directamente tocáramos algo

78
00:03:37,860 --> 00:03:39,560
Arturo

79
00:03:39,560 --> 00:03:41,599
Vamos a escribir bien

80
00:03:41,599 --> 00:03:42,400
Arturo

81
00:03:42,400 --> 00:03:44,439
Y de apellido

82
00:03:44,439 --> 00:03:46,539
Mora

83
00:03:46,539 --> 00:03:49,159
Nacido en

84
00:03:49,159 --> 00:03:51,620
1974

85
00:03:51,620 --> 00:03:54,020
Ahí estoy escribiendo muy mal

86
00:03:54,020 --> 00:03:54,439
Pero bueno

87
00:03:54,439 --> 00:03:55,800
74

88
00:03:55,800 --> 00:03:59,000
Y el de tipo

89
00:03:59,000 --> 00:03:59,680
Hombre

90
00:03:59,680 --> 00:04:01,879
Voy a darle aquí directamente al enter

91
00:04:01,879 --> 00:04:04,759
Y efectivamente también

92
00:04:04,759 --> 00:04:06,120
Ha pasado esta información

93
00:04:06,120 --> 00:04:07,539
El método get

94
00:04:07,539 --> 00:04:11,560
Toda la información la pasa a través de la url

95
00:04:11,560 --> 00:04:12,539
Del navegador

96
00:04:12,539 --> 00:04:30,399
¿Vale? ¿Qué nos ocurre con el método POST? Que aquí no lo tenemos implementado en este momento. Que toda esta información estaría oculta, pasaría internamente sin que el navegador la viera. Por lo tanto, generalmente en las aplicaciones lo que hacemos es utilizar el método POST.

97
00:04:30,399 --> 00:04:33,319
Voy a volver a mi formulario, voy a escribir algo

98
00:04:33,319 --> 00:04:36,240
Simplemente quiero que prueben una cosa

99
00:04:36,240 --> 00:04:40,180
Y es que este batón que se llamaba de tipo reset

100
00:04:40,180 --> 00:04:46,899
Lo que hace es limpiarme el formulario para poder escribir otra vez en él

101
00:04:46,899 --> 00:04:52,480
Bueno, voy a volver poco a poco a donde estábamos

102
00:04:52,480 --> 00:04:57,019
Aquí donde teníamos esta plantilla ya se ha cargado

103
00:04:57,019 --> 00:05:01,699
¿De acuerdo? Con lo cual ya vemos cómo funciona un formulario.

104
00:05:05,000 --> 00:05:09,420
Bien, ¿qué datos tenemos? Bueno, pues uno de los atributos que tenemos importantes es type.

105
00:05:09,819 --> 00:05:13,300
Y hay un montón de types posibles, ¿de acuerdo?

106
00:05:14,220 --> 00:05:20,459
Típicamente submit para enviar, reset para limpiar o reiniciar nuestro formulario, text para texto,

107
00:05:21,439 --> 00:05:25,740
password para contraseña, simplemente es como un test pero que no estamos viendo lo que grabamos,

108
00:05:25,740 --> 00:05:28,060
Se escriben unos asteriscos

109
00:05:28,060 --> 00:05:30,500
File para poder enviar imágenes

110
00:05:30,500 --> 00:05:32,680
Ya veremos que el for también tiene que adecuarse

111
00:05:32,680 --> 00:05:33,939
Para poder enviar una imagen

112
00:05:33,939 --> 00:05:36,339
Image del mismo modo

113
00:05:36,339 --> 00:05:38,720
Y hidden o oculto

114
00:05:38,720 --> 00:05:41,300
Que no se va a visualizar

115
00:05:41,300 --> 00:05:43,319
En HTML5

116
00:05:43,319 --> 00:05:44,660
Ya se han añadido un montón

117
00:05:44,660 --> 00:05:46,879
Y poco a poco se irán añadiendo más

118
00:05:46,879 --> 00:05:47,879
Más específicos

119
00:05:47,879 --> 00:05:48,959
Por ejemplo el botón

120
00:05:48,959 --> 00:05:52,100
Y no es un input

121
00:05:52,100 --> 00:05:53,480
Es una etiqueta

122
00:05:53,480 --> 00:05:56,040
es una etiqueta button, también se le puede poner como input

123
00:05:56,040 --> 00:05:57,060
pero también es etiqueta

124
00:05:57,060 --> 00:06:00,079
también hay una etiqueta, un atributo que es number

125
00:06:00,079 --> 00:06:01,699
otro de búsqueda, search

126
00:06:01,699 --> 00:06:04,360
uno de teléfono, otro de dirección web

127
00:06:04,360 --> 00:06:06,540
url, otro de correo

128
00:06:06,540 --> 00:06:08,279
email, que ya comprueba que lo que enviamos

129
00:06:08,279 --> 00:06:10,220
es de tipo email, que tiene su arroba

130
00:06:10,220 --> 00:06:11,579
y sus campos correspondientes

131
00:06:11,579 --> 00:06:13,959
date, para las fechas completas

132
00:06:13,959 --> 00:06:15,339
time, para las horas

133
00:06:15,339 --> 00:06:17,939
color, range, para un rango

134
00:06:17,939 --> 00:06:20,399
y ahora ya se han añadido últimamente

135
00:06:20,399 --> 00:06:22,240
pues month de mes

136
00:06:22,240 --> 00:06:24,579
week de semana y date time local

137
00:06:24,579 --> 00:06:25,839
para hora local

138
00:06:25,839 --> 00:06:27,939
ya vemos que hay un montón

139
00:06:27,939 --> 00:06:30,639
de tipos, son todos muy interesantes

140
00:06:30,639 --> 00:06:32,680
a día de hoy, por aquí en los apuntes

141
00:06:32,680 --> 00:06:34,240
podemos ir a ver información

142
00:06:34,240 --> 00:06:36,100
de algunos de ellos, yo no voy a ver todos

143
00:06:36,100 --> 00:06:36,819
en este vídeo

144
00:06:36,819 --> 00:06:39,500
name le da nombre

145
00:06:39,500 --> 00:06:41,860
al input

146
00:06:41,860 --> 00:06:43,660
o al control en el que estoy

147
00:06:43,660 --> 00:06:45,920
en los

148
00:06:45,920 --> 00:06:48,379
lo habitual

149
00:06:48,379 --> 00:06:50,319
es que no se repitan, pero en los radios

150
00:06:50,319 --> 00:07:01,819
Bueno, los botones de tipo radio, estos que tienen redondelito, sí se repiten para poder seleccionar el que ha sido elegido.

151
00:07:02,300 --> 00:07:05,240
Algo va a ser parecido en los checkbox.

152
00:07:05,720 --> 00:07:15,620
Ya veremos que el problema es que en los checkbox podemos elegir varios y por tanto los problemas que van a requerir es realmente un array de elementos pasados.

153
00:07:15,620 --> 00:07:18,879
Bueno, value es el valor que puede tomar

154
00:07:18,879 --> 00:07:22,639
Cualquiera de los botones inicialmente

155
00:07:22,639 --> 00:07:24,279
El atributo require

156
00:07:24,279 --> 00:07:26,620
Lo que significa es que es obligatorio rellenarlo

157
00:07:26,620 --> 00:07:27,079
¿De acuerdo?

158
00:07:27,180 --> 00:07:29,319
Si yo intento enviar este formulario

159
00:07:29,319 --> 00:07:31,500
Pues me dice que tengo que completar esto

160
00:07:31,500 --> 00:07:35,040
No me deja pasar este formulario

161
00:07:35,040 --> 00:07:38,279
Sin grabar algo ahí

162
00:07:38,279 --> 00:07:39,959
¿De acuerdo?

163
00:07:41,279 --> 00:07:43,779
Placeholder nos permite introducir texto

164
00:07:43,779 --> 00:07:45,319
Dentro de la parte a escribir

165
00:07:45,319 --> 00:07:52,120
Por ejemplo, aquí hacemos un input, decimos el nombre, el size, y después decimos, escribas esos dos apellidos.

166
00:07:52,259 --> 00:07:56,680
Entonces, nos muestra ese mensaje que en el momento que empecemos a escribir, desaparece.

167
00:07:57,759 --> 00:08:00,160
Si borramos el mensaje, vuelve a aparecer.

168
00:08:01,620 --> 00:08:06,560
Size nos indica el tamaño de la información que queremos rellenar.

169
00:08:06,779 --> 00:08:11,560
Y también podemos limitar cuántos caracteres queremos introducir en cualquiera de los elementos.

170
00:08:11,560 --> 00:08:15,000
Con un max length o con un min length.

171
00:08:15,319 --> 00:08:18,100
vamos a escribir un usuario

172
00:08:18,100 --> 00:08:20,199
y ya vemos que aunque yo sigo tecleando

173
00:08:20,199 --> 00:08:21,500
no se ve, pero yo sigo tecleando

174
00:08:21,500 --> 00:08:22,920
de ahí no estoy pasando

175
00:08:22,920 --> 00:08:26,000
bien, disable

176
00:08:26,000 --> 00:08:28,100
significa que permite

177
00:08:28,100 --> 00:08:29,180
deshabilitar el control

178
00:08:29,180 --> 00:08:31,860
lo cual quiere decir que no podemos

179
00:08:31,860 --> 00:08:32,980
entrar en él de ninguna manera

180
00:08:32,980 --> 00:08:36,019
y se ve un poquito ahí como diluido

181
00:08:36,019 --> 00:08:36,899
como dice

182
00:08:36,899 --> 00:08:39,980
como nebuloso

183
00:08:39,980 --> 00:08:41,679
se ve el control correspondiente

184
00:08:41,679 --> 00:08:44,019
read only significa un texto

185
00:08:44,019 --> 00:08:45,740
que no se puede modificar

186
00:08:45,740 --> 00:08:47,000
yo puedo entrar en él

187
00:08:47,000 --> 00:08:49,419
pero yo estoy tecleando la misma y no puedo teclear

188
00:08:49,419 --> 00:08:51,220
mientras que este tampoco

189
00:08:51,220 --> 00:08:53,159
este de aquí tampoco

190
00:08:53,159 --> 00:08:55,940
ninguno de los dos textos se me permite

191
00:08:55,940 --> 00:08:57,659
cambiar, en un caso

192
00:08:57,659 --> 00:08:59,620
tiene playholder y en otro value

193
00:08:59,620 --> 00:09:00,379
directamente

194
00:09:00,379 --> 00:09:03,840
bueno, podemos

195
00:09:03,840 --> 00:09:06,019
ir poniendo orden a los elementos

196
00:09:06,019 --> 00:09:06,980
a los que yo voy

197
00:09:06,980 --> 00:09:09,440
y cuando yo voy con tab o sit tab

198
00:09:09,440 --> 00:09:10,899
voy con tab saltando

199
00:09:10,899 --> 00:09:14,000
pues efectivamente o con sit tab va en orden

200
00:09:14,000 --> 00:09:35,360
¿De acuerdo? Vale. Access Key permite ir a un campo directamente con una tecla. Entonces si yo pincho aquí Alt y la tecla, imagínense que yo estoy aquí y digo Alt U, pues me pongo con la U. Es algo que puede ser interesante para algún tipo de texto.

201
00:09:35,360 --> 00:09:40,730
y después los input

202
00:09:40,730 --> 00:09:42,690
pues tenemos todos los que hemos nombrado

203
00:09:42,690 --> 00:09:45,070
y en el caso de los button

204
00:09:45,070 --> 00:09:47,230
pues ya vemos como es el aspecto

205
00:09:47,230 --> 00:09:48,929
que tiene, que ocurre que a veces

206
00:09:48,929 --> 00:09:50,769
esto se quedaba un poco corto porque value

207
00:09:50,769 --> 00:09:52,450
siempre es de tipo text

208
00:09:52,450 --> 00:09:55,049
entonces a veces queríamos meter en un button

209
00:09:55,049 --> 00:09:56,750
una imagen, en un botón

210
00:09:56,750 --> 00:09:58,509
una imagen, entonces para eso se

211
00:09:58,509 --> 00:10:00,350
creó la etiqueta button

212
00:10:00,350 --> 00:10:02,389
que button permite

213
00:10:02,389 --> 00:10:04,690
meter una imagen

214
00:10:04,690 --> 00:10:06,950
dentro o cualquier elemento

215
00:10:06,950 --> 00:10:09,210
cualquier elemento de cualquier tipo, como si es una tabla

216
00:10:09,210 --> 00:10:11,330
lo que queramos meter aquí dentro

217
00:10:11,330 --> 00:10:13,149
por supuesto

218
00:10:13,149 --> 00:10:14,870
los buttons también pueden ser submits

219
00:10:14,870 --> 00:10:17,070
para enviar directamente el formulario

220
00:10:17,070 --> 00:10:19,450
¿de acuerdo? pueden ser perfectamente

221
00:10:19,450 --> 00:10:21,169
de ese tipo

222
00:10:21,169 --> 00:10:22,350
y

223
00:10:22,350 --> 00:10:24,269
los inputs

224
00:10:24,269 --> 00:10:27,129
de tipo reset, ya hemos visto que limpian

225
00:10:27,129 --> 00:10:28,029
toda la información

226
00:10:28,029 --> 00:10:30,269
y vamos a ver si hay algo

227
00:10:30,269 --> 00:10:33,029
interesante por aquí ya que nos interese

228
00:10:33,029 --> 00:10:35,269
y por supuesto podemos utilizar

229
00:10:35,269 --> 00:10:36,750
dentro de un input

230
00:10:36,750 --> 00:10:39,389
Pues alguno de aquellos métodos que vimos

231
00:10:39,389 --> 00:10:40,970
Para ejecutar pequeñas funciones

232
00:10:40,970 --> 00:10:42,110
Como onclick

233
00:10:42,110 --> 00:10:44,610
Onclick en este caso va a llamar

234
00:10:44,610 --> 00:10:46,309
A una función que se llama mensaje

235
00:10:46,309 --> 00:10:48,789
Que es un pequeño javascript

236
00:10:48,789 --> 00:10:50,250
Que está aquí, la función mensaje

237
00:10:50,250 --> 00:10:52,649
Se le pasa un texto y va a mostrarnos una ventanita

238
00:10:52,649 --> 00:10:54,250
Con ese texto, vamos a pinchar

239
00:10:54,250 --> 00:10:56,210
Y efectivamente dice

240
00:10:56,210 --> 00:10:58,970
Ha pulsado el botón, que es lo que ponía aquí

241
00:10:58,970 --> 00:11:01,070
Lo mismo lo podía hacer

242
00:11:01,070 --> 00:11:02,950
Un poco más bonito con este botón de aquí

243
00:11:02,950 --> 00:11:04,129
Perfectamente

244
00:11:04,129 --> 00:11:07,429
los tipos text

245
00:11:07,429 --> 00:11:09,309
pues ya vemos que podemos escribir algo

246
00:11:09,309 --> 00:11:10,470
podemos hacer un preholder

247
00:11:10,470 --> 00:11:13,710
los passwords, voy a escribir aquí algo para que lo veamos

248
00:11:13,710 --> 00:11:15,730
y efectivamente poner asterisquitos o puntos

249
00:11:15,730 --> 00:11:17,450
los números, pues solo me

250
00:11:17,450 --> 00:11:19,549
puede permitir escribir números, yo estoy escribiendo

251
00:11:19,549 --> 00:11:21,429
una e y la e como coincide que puede ser

252
00:11:21,429 --> 00:11:23,789
un número de estos decimales

253
00:11:23,789 --> 00:11:25,169
largos, pues me lo han permitido

254
00:11:25,169 --> 00:11:27,269
pero si escribo ty o lo que sea

255
00:11:27,269 --> 00:11:28,110
pues no me lo admite

256
00:11:28,110 --> 00:11:31,490
bueno, hay más características

257
00:11:31,490 --> 00:11:33,529
de los números, search para las

258
00:11:33,529 --> 00:11:35,309
búsquedas, no tiene mucho interés

259
00:11:35,309 --> 00:11:37,389
tampoco, teléfonos

260
00:11:37,389 --> 00:11:39,610
urls, correos

261
00:11:39,610 --> 00:11:41,509
electrónicos, este quizá tiene algo más

262
00:11:41,509 --> 00:11:43,370
voy a escribir amadeomora

263
00:11:43,370 --> 00:11:45,110
arroba

264
00:11:45,110 --> 00:11:47,090
gmail, por ejemplo

265
00:11:47,090 --> 00:11:49,590
escribirá esto y finalizará en enviar

266
00:11:49,590 --> 00:11:51,250
pues efectivamente

267
00:11:51,250 --> 00:11:53,350
me la está emitiendo, de acuerdo, en el momento

268
00:11:53,350 --> 00:11:55,230
que ha visto el arroba, después

269
00:11:55,230 --> 00:11:57,149
las cajas de texto para escribir

270
00:11:57,149 --> 00:11:59,570
cajas de texto para fechas

271
00:11:59,570 --> 00:12:01,269
en las cuales pues yo aquí

272
00:12:01,269 --> 00:12:03,389
puedo pinchar aquí y ver

273
00:12:03,389 --> 00:12:05,230
mi información

274
00:12:05,230 --> 00:12:07,669
o mes, simplemente mes

275
00:12:07,669 --> 00:12:09,990
en el cual me aparecen los meses correspondientes

276
00:12:09,990 --> 00:12:10,929
etc, etc

277
00:12:10,929 --> 00:12:12,990
por supuesto aquí lo indica y es verdad

278
00:12:12,990 --> 00:12:15,529
cada navegador puede estar o no adecuado

279
00:12:15,529 --> 00:12:17,590
totalmente a esto, la mayoría sí

280
00:12:17,590 --> 00:12:19,269
¿de acuerdo? la hora

281
00:12:19,269 --> 00:12:21,710
muy interesante lo de la hora

282
00:12:21,710 --> 00:12:23,309
o incluso

283
00:12:23,309 --> 00:12:25,110
información completa

284
00:12:25,110 --> 00:12:28,490
es decir yo a las 16.46

285
00:12:28,490 --> 00:12:30,269
me hago la información

286
00:12:30,269 --> 00:12:30,830
¿vale?

287
00:12:30,830 --> 00:12:35,610
los checkbox lo que hacen es pinchar o no una casilla

288
00:12:35,610 --> 00:12:39,350
podemos decirle checked para decir que está marcada o que no

289
00:12:39,350 --> 00:12:42,490
¿qué ocurre con esto? que hay veces que están agrupadas

290
00:12:42,490 --> 00:12:44,850
cuando están agrupadas pues ya veremos que según el lenguaje

291
00:12:44,850 --> 00:12:48,509
se le suele poner aquí alguna característica aquí ante la comilla

292
00:12:48,509 --> 00:12:50,750
para indicar que todos son del mismo grupo

293
00:12:50,750 --> 00:12:54,330
los radios que ya los hemos visto pues tienen la característica

294
00:12:54,330 --> 00:12:56,470
cuando tienen el mismo nombre como es el caso

295
00:12:56,470 --> 00:12:58,950
en que si yo pincho otra desaparece esta

296
00:12:58,950 --> 00:13:01,850
porque solo puedo seleccionar una de ellas

297
00:13:01,850 --> 00:13:05,110
los colores

298
00:13:05,110 --> 00:13:07,129
puedo elegir colores

299
00:13:07,129 --> 00:13:07,990
cualquier color

300
00:13:07,990 --> 00:13:08,870
y enviar

301
00:13:08,870 --> 00:13:10,950
porque lo que envía es su código de color

302
00:13:10,950 --> 00:13:11,970
que es de este formato

303
00:13:11,970 --> 00:13:14,509
en el cual el formato se llama RGB

304
00:13:14,509 --> 00:13:16,809
Red, Green, Blue

305
00:13:16,809 --> 00:13:20,230
de tipo rango

306
00:13:20,230 --> 00:13:21,509
miren que bonito

307
00:13:21,509 --> 00:13:23,990
una línea que se puede desplazar

308
00:13:23,990 --> 00:13:27,429
y de tipo file

309
00:13:27,429 --> 00:13:30,929
que ya veremos que además nos toca también cambiar la etiqueta form

310
00:13:30,929 --> 00:13:35,250
pero que nos permite manejar y pedir un fichero para subir

311
00:13:35,250 --> 00:13:38,809
voy a ver el código fuente de este marco

312
00:13:38,809 --> 00:13:43,590
bueno, aquí es que realmente solo ha introducido el input

313
00:13:43,590 --> 00:13:47,389
solamente ha introducido el input, no ha introducido lo que yo quería ver

314
00:13:47,389 --> 00:13:49,269
que era el formulario completo

315
00:13:49,269 --> 00:13:51,929
entonces no nos va a servir para lo que queríamos ver

316
00:13:51,929 --> 00:13:55,990
bueno, por supuesto tenemos también input type image

317
00:13:55,990 --> 00:13:58,350
una imagen, entonces aquí imagínense

318
00:13:58,350 --> 00:14:00,149
que esta es la imagen

319
00:14:00,149 --> 00:14:02,409
que tenemos, y además tiene una característica

320
00:14:02,409 --> 00:14:03,730
que nos devuelve

321
00:14:03,730 --> 00:14:05,789
la posición en que yo he

322
00:14:05,789 --> 00:14:08,250
pulsado el punto, eso es una posibilidad

323
00:14:08,250 --> 00:14:10,169
que yo tengo dentro de

324
00:14:10,169 --> 00:14:12,110
esta etiqueta, los campos

325
00:14:12,110 --> 00:14:13,889
hidden, este campo dice

326
00:14:13,889 --> 00:14:16,049
input type hidden, nombre

327
00:14:16,049 --> 00:14:18,129
valor pepito, no lo vemos por

328
00:14:18,129 --> 00:14:20,110
ningún sitio, pero sin embargo está pasando

329
00:14:20,110 --> 00:14:21,850
de un sitio a otro, vale

330
00:14:21,850 --> 00:14:23,690
esto cuando aprendan

331
00:14:23,690 --> 00:14:25,389
en desarrollo web

332
00:14:25,389 --> 00:14:27,610
aprendan a pasar formularios, pues ya verán

333
00:14:27,610 --> 00:14:29,450
cómo se recoge exactamente igual

334
00:14:29,450 --> 00:14:31,309
¿de acuerdo? se guarda y ya está

335
00:14:31,309 --> 00:14:33,289
tenemos los campos textarea

336
00:14:33,289 --> 00:14:35,429
los campos textarea que son campos de texto

337
00:14:35,429 --> 00:14:37,649
generalmente en casi todo navegador se pueden ampliar

338
00:14:37,649 --> 00:14:39,470
o modificar en tiempo real

339
00:14:39,470 --> 00:14:41,549
¿de acuerdo? pero yo puedo indicarles

340
00:14:41,549 --> 00:14:43,690
por defecto filas y columnas que pueden

341
00:14:43,690 --> 00:14:45,289
tener ¿vale?

342
00:14:45,570 --> 00:14:47,169
y por supuesto se puede aplicar

343
00:14:47,169 --> 00:14:49,269
playholder, se puede aplicar cualquiera de las etiquetas

344
00:14:49,269 --> 00:14:50,210
que hemos visto antes

345
00:14:50,210 --> 00:14:52,990
después tenemos los

346
00:14:52,990 --> 00:14:54,830
select, y los select

347
00:14:54,830 --> 00:14:56,909
lo que nos permiten

348
00:14:56,909 --> 00:14:59,230
es seleccionar en lista de desplegables

349
00:14:59,230 --> 00:15:00,730
el elemento correspondiente

350
00:15:00,730 --> 00:15:02,250
en este caso

351
00:15:02,250 --> 00:15:05,269
1 valdrá 1

352
00:15:05,269 --> 00:15:06,230
en este caso

353
00:15:06,230 --> 00:15:08,889
2 valdrá 2

354
00:15:08,889 --> 00:15:10,730
pero podría ocurrir como aquí donde

355
00:15:10,730 --> 00:15:12,629
1 vale 1 en letras

356
00:15:12,629 --> 00:15:14,509
y 2 vale 2 de esta manera

357
00:15:14,509 --> 00:15:16,789
y 3 vale 3, que eso es lo que

358
00:15:16,789 --> 00:15:18,710
recogerá cualquiera de estos valores

359
00:15:18,710 --> 00:15:19,649
vamos a darle al 2

360
00:15:19,649 --> 00:15:22,809
y efectivamente es 2, en este caso 2

361
00:15:22,809 --> 00:15:24,529
de esta manera

362
00:15:24,529 --> 00:15:27,090
podemos cambiar la selección

363
00:15:27,090 --> 00:15:28,149
por defecto va al primero

364
00:15:28,149 --> 00:15:29,750
pero podemos decir que el que esté seleccionado

365
00:15:29,750 --> 00:15:31,950
automáticamente sea el correspondiente

366
00:15:31,950 --> 00:15:33,850
al que tenga la etiqueta selected

367
00:15:33,850 --> 00:15:39,799
bueno, aquí tenemos muchos de ellos

368
00:15:39,799 --> 00:15:41,240
muchas posibilidades

369
00:15:41,240 --> 00:15:42,720
y lo más importante

370
00:15:42,720 --> 00:15:45,340
es que también podemos decir

371
00:15:45,340 --> 00:15:46,320
una selección

372
00:15:46,320 --> 00:15:49,179
en la cual se muestra solo una línea

373
00:15:49,179 --> 00:15:50,960
o en este caso que vamos a mostrar

374
00:15:50,960 --> 00:15:52,480
las tres primeras líneas

375
00:15:52,480 --> 00:15:54,440
en este tipo

376
00:15:54,440 --> 00:15:57,840
nada más dentro de estos casos tenemos múltiple

377
00:15:57,840 --> 00:16:02,919
y entonces múltiple lo que nos indica es que podemos elegir varios casos de estos

378
00:16:02,919 --> 00:16:09,659
por ejemplo 2 y con el control, con el carácter pensando control y pensando ratón

379
00:16:09,659 --> 00:16:13,980
podemos elegir el 2 o el 4, el 2 y el 4 lo vemos aquí

380
00:16:13,980 --> 00:16:17,480
en este caso solo podemos elegir 1, no podemos marcar 2 de ninguna manera

381
00:16:17,480 --> 00:16:20,019
entonces ya tenemos este de aquí

382
00:16:20,019 --> 00:16:22,600
y después existe una etiqueta para agrupar

383
00:16:22,600 --> 00:16:25,200
Entonces, si nosotros viéramos cómo queda esto

384
00:16:25,200 --> 00:16:27,440
Pues efectivamente queda grupo 1 estar de aquí

385
00:16:27,440 --> 00:16:29,179
Grupo 2 estar de aquí, ¿de acuerdo?

386
00:16:30,379 --> 00:16:32,480
Fieldset es para hacer estos cuadraditos

387
00:16:32,480 --> 00:16:34,580
O estos, agrupar la información por trozos

388
00:16:34,580 --> 00:16:37,519
Entonces, bueno, muchas veces puede ser muy interesante

389
00:16:37,519 --> 00:16:38,759
Porque tenemos el campo Legend

390
00:16:38,759 --> 00:16:41,460
Que nos dice una pequeña etiqueta

391
00:16:41,460 --> 00:16:45,879
Para un grupo de entradas dentro de nuestro formulario

392
00:16:45,879 --> 00:16:48,879
Label es muy interesante porque asocia

393
00:16:48,879 --> 00:16:50,539
a un elemento

394
00:16:50,539 --> 00:16:53,600
una etiqueta

395
00:16:53,600 --> 00:16:55,340
por ejemplo, tenemos esto de aquí

396
00:16:55,340 --> 00:16:56,799
si yo pincho en casilla 1

397
00:16:56,799 --> 00:16:59,159
vemos que no pasa nada, pincha una vez

398
00:16:59,159 --> 00:17:01,139
no ha hecho nada, pincho 2, ya pues sí

399
00:17:01,139 --> 00:17:03,220
seleccionamos, pero no es nuestra intención

400
00:17:03,220 --> 00:17:05,380
sin embargo, si estamos aquí con label

401
00:17:05,380 --> 00:17:07,299
que ocupa todo esto, si yo pincho

402
00:17:07,299 --> 00:17:08,839
en casilla, vemos que ya

403
00:17:08,839 --> 00:17:11,099
se ilumina o no se ilumina

404
00:17:11,099 --> 00:17:13,660
el check correspondiente

405
00:17:13,660 --> 00:17:15,259
por ejemplo, tenemos nombre

406
00:17:15,259 --> 00:17:17,160
pues yo estoy en nombre, y aunque yo pinche

407
00:17:17,160 --> 00:17:18,160
aquí no pasa nada

408
00:17:18,160 --> 00:17:20,359
si yo tengo esta información de esta manera

409
00:17:20,359 --> 00:17:23,119
yo pincho el nombre y ya se me ha puesto el cursor ahí

410
00:17:23,119 --> 00:17:23,799
para escribir

411
00:17:23,799 --> 00:17:26,059
hay veces que podemos hacer

412
00:17:26,059 --> 00:17:28,880
que esto sea

413
00:17:28,880 --> 00:17:31,220
la etiqueta para el campo

414
00:17:31,220 --> 00:17:32,859
que se llama casilla 1

415
00:17:32,859 --> 00:17:34,440
entonces yo doy aquí

416
00:17:34,440 --> 00:17:36,420
el campo para casilla 1

417
00:17:36,420 --> 00:17:39,559
bueno, las etiquetas son muy interesantes

418
00:17:39,559 --> 00:17:41,460
muy interesantes

419
00:17:41,460 --> 00:17:44,970
bueno

420
00:17:44,970 --> 00:17:46,910
esto es un poco todo lo que queríamos

421
00:17:46,910 --> 00:17:48,410
contar de todos los formularios

422
00:17:48,410 --> 00:17:51,930
y realmente su interés de verdad cuando estamos con un lenguaje de programación

423
00:17:51,930 --> 00:17:56,049
que va a obtener estos datos y va a procesarlos.