1
00:00:04,780 --> 00:00:12,019
El ancho, la altura, size, tamaño inicial de control, max, min, valor máximo y mínimo, etc.

2
00:00:12,699 --> 00:00:19,480
Bien, para no eternizarnos en cuanto a este elemento, hay muchos type.

3
00:00:20,500 --> 00:00:31,359
En cuanto al input, ese type puede ser un radio, define un botón de opción, un password, un number, que define un campo de introducción, un número,

4
00:00:31,359 --> 00:00:35,679
month para definir un mes y control del año

5
00:00:35,679 --> 00:00:39,920
hidden define un campo de entrada oculto

6
00:00:39,920 --> 00:00:41,179
yo puedo cambiar

7
00:00:41,179 --> 00:00:47,259
el propio type y en vez de utilizar

8
00:00:47,259 --> 00:00:51,179
submit, puedo poner, bueno, en vez de text

9
00:00:51,179 --> 00:00:55,460
voy a poner number y esto

10
00:00:55,460 --> 00:00:58,719
lo que nos proporcionaría es un, definiría un campo

11
00:00:58,719 --> 00:01:01,280
para introducir únicamente un número

12
00:01:01,280 --> 00:01:22,060
¿Vale? Quitamos el placeholder y lo dejamos vacío en un principio y al darle a ejecutar, al darle a ejecutar nos daría pues el nuevo campo que sería pues para poder introducir un número. Aquí lo tenemos ya y podemos introducir un número.

13
00:01:22,060 --> 00:01:34,239
Bien, pasamos a elementos del formulario. Ya hemos visto todos los inputs, entonces dentro de los elementos del formulario podríamos también añadir el label.

14
00:01:34,239 --> 00:01:46,659
Label sería pues las etiquetas, etiquetas que yo puedo añadir en el mismo. Yo puedo añadir encima de estos componentes, puedo añadir las etiquetas.

15
00:01:46,659 --> 00:02:13,000
Yo puedo añadir estas etiquetas. Las vamos a poner identadas. Aparecen separadas. Vamos a quitar lo que teníamos antes y tendríamos... Bien, ahora ¿qué tenemos? Tenemos una etiqueta y tenemos un input. El input type es de tipo texto.

16
00:02:13,000 --> 00:02:31,639
La etiqueta va a ir delante de lo que es la caja de texto, cada una con su nombre, una será nombre, con su ID, nombre, apellidos y DNI, entre comillas dobles, y un valor, todas ellas con un valor vacío.

17
00:02:31,639 --> 00:02:33,740
de acuerdo, la única

18
00:02:33,740 --> 00:02:35,840
el único input text

19
00:02:35,840 --> 00:02:37,520
que he añadido algo más es el size

20
00:02:37,520 --> 00:02:39,219
el tamaño y el max length

21
00:02:39,219 --> 00:02:41,479
el mayor número de números que puedes meter

22
00:02:41,479 --> 00:02:43,039
para el tipo de n

23
00:02:43,039 --> 00:02:45,599
y delante pues una etiqueta, una etiqueta no es

24
00:02:45,599 --> 00:02:47,939
nada más que, como vemos aquí a continuación

25
00:02:47,939 --> 00:02:56,860
tenemos nombre, tenemos

26
00:02:56,860 --> 00:02:58,360
apellidos y tenemos de n y veis

27
00:02:58,360 --> 00:03:00,759
la etiqueta no es nada más que una etiqueta previa

28
00:03:00,759 --> 00:03:02,939
pues al campo de texto

29
00:03:02,939 --> 00:03:04,800
entonces el label

30
00:03:04,800 --> 00:03:08,219
incluye esta etiqueta

31
00:03:08,219 --> 00:03:09,960
y se utiliza para establecer el título

32
00:03:09,960 --> 00:03:11,979
de cada campo de formulario

33
00:03:11,979 --> 00:03:14,020
así de sencillo, no sirve para

34
00:03:14,020 --> 00:03:15,979
mucho más, bien, pasamos de la

35
00:03:15,979 --> 00:03:16,460
etiqueta

36
00:03:16,460 --> 00:03:19,659
pasamos al textarea

37
00:03:19,659 --> 00:03:21,180
textarea

38
00:03:21,180 --> 00:03:25,400
va a generar un campo

39
00:03:25,400 --> 00:03:27,180
de texto pero ahora va a ser multilínea

40
00:03:27,180 --> 00:03:29,300
en el que podemos introducir textos largos

41
00:03:29,300 --> 00:03:31,159
dentro de él

42
00:03:31,159 --> 00:03:32,860
si nosotros ahora quitamos todo esto

43
00:03:32,860 --> 00:03:36,340
y metemos el

44
00:03:36,340 --> 00:04:09,300
El textarea, vamos a ir a entrar aquí, bien, tendremos aquí las dos etiquetas. Tenemos una etiqueta label, bien, lo del atributo for, que no lo hemos visto anteriormente, es para referirse a un determinado, la etiqueta va asociada a un determinado input, a un campo de formulario.

45
00:04:09,300 --> 00:04:26,600
Entonces, para asociar esta etiqueta a un determinado campo se tiene que asociar a través de for. Y el for, lo que tenemos que meter dentro de for es el nombre, el ID de ese campo. Como el ID es nombre, por eso pone aquí en for nombre, para asociar la etiqueta al propio campo.

46
00:04:27,420 --> 00:04:43,740
Una vez que lo ha asociado, veis la etiqueta en la que está formada por una etiqueta label y una barra label, ha metido dentro de la etiqueta un texto que sería el nombre del producto.

47
00:04:44,220 --> 00:04:54,259
A continuación, como está asociado a este input, que es un campo de tipo texto, pues a continuación vendrá la etiqueta y luego el campo tipo texto.

48
00:04:55,259 --> 00:05:01,500
A continuación, aquí lo que he hecho es que con otra etiqueta de descripción, pues ahora lo que hemos generado es un textarea.

49
00:05:01,860 --> 00:05:09,779
Ahora ya no es un input type text, sino que sería un textarea, en el que también tiene un ID, un nombre y tiene un número de columnas y de filas.

50
00:05:10,160 --> 00:05:18,300
Puesto que va a ser un texto mayor, en el que vamos a poner un texto mayor que el que puede ser una sola línea, como el de un text, un input text,

51
00:05:18,300 --> 00:05:38,620
Pues aquí, en TextArea, veis que ahora TextArea no es como la etiqueta Input, en el que solo tenía una propia etiqueta que se cerraba automáticamente ella misma, sino que tiene, al igual que sucede con la etiqueta Label, tiene una etiqueta TextArea con sus atributos y luego el barra TextArea.

52
00:05:38,620 --> 00:06:03,680
Entonces, si nosotros le damos a ejecutar, le damos a ejecutar, ¿veis? Ahora tengo el nombre del, vamos a poner aquí para que quede esto un poquito mejor, una etiqueta para que nos baje y nos quede mejor.

53
00:06:03,680 --> 00:06:40,839
Si veis, vamos a tener el nombre del producto con una caja de texto y luego la descripción.

54
00:06:41,000 --> 00:06:45,399
Y si veis ya, me permite poner varias líneas porque es un text area.

55
00:06:46,240 --> 00:06:51,459
Bien, ¿qué más? Vamos a pasar a otro componente, el input type radio.

56
00:06:51,939 --> 00:06:55,699
Radio va a ser un control de tipo radio boot button.

57
00:06:56,220 --> 00:06:59,699
Son similares a los controles de tipo teacher's box, pero presentan una diferencia muy importante.

58
00:06:59,819 --> 00:07:01,100
Son mutuamente excluyentes.

59
00:07:01,560 --> 00:07:03,279
Tienes que elegir una opción u otra.

60
00:07:03,279 --> 00:07:13,560
Entonces, si yo pongo un input type aquí, si veis, vamos a poner ahora el sexo y lo añadimos aquí abajo.

61
00:07:15,670 --> 00:07:21,430
Para diferenciarlo, ponemos una línea más abajo y tenemos el input type.

62
00:07:21,430 --> 00:07:41,449
Si veis ahora hemos puesto el input type radio con su nombre, el valor que va a tener junto a este input y luego si ponemos en checked indica cuál de las dos opciones está chequeada, está marcada.

63
00:07:41,449 --> 00:08:42,379
Aquí vamos a elegir que esté chequeada la de hombre. Al darle a ejecutar, tendremos debajo, hemos puesto input type, aquí, sexo, vale, le damos de nuevo y veis aquí, vamos a ponerle para que quede mejor, igual, le damos, bien, ya lo tenemos, tendríamos aquí el radio button en el que podemos elegir uno u otro.

64
00:08:42,379 --> 00:09:00,279
Como hemos dicho que tenía que estar chequeado, check el de hombre, pues aparecerá chequeado el de hombre. Bien, pasamos a otra etiqueta, la etiqueta select. Genera un menú de opciones con la posibilidad de visualizarse como una lista con deslizamiento o un menú desplegable.

65
00:09:00,279 --> 00:09:02,519
este va a tener atributos como size

66
00:09:02,519 --> 00:09:04,340
y como multiple

67
00:09:04,340 --> 00:09:06,539
el size va a ser

68
00:09:06,539 --> 00:09:08,899
para presentar como una lista con desplazamiento

69
00:09:08,899 --> 00:09:10,100
si el elemento

70
00:09:10,100 --> 00:09:12,759
se presenta con una lista con desplazamiento

71
00:09:12,759 --> 00:09:14,620
este atributo especifica el número de opciones

72
00:09:14,620 --> 00:09:16,600
y elementos de la lista que deberían ser

73
00:09:16,600 --> 00:09:17,759
visibles al mismo tiempo

74
00:09:17,759 --> 00:09:20,480
vale, si tenemos

75
00:09:20,480 --> 00:09:22,399
una lista de 5 elementos y

76
00:09:22,399 --> 00:09:24,840
en un principio hay un scroll, pues si nosotros le indicamos

77
00:09:24,840 --> 00:09:26,700
que size va a ser de 5, se va a ver completa

78
00:09:26,700 --> 00:09:28,460
no va a haber scroll, y multiple

79
00:09:28,460 --> 00:09:35,820
es que es un atributo booleano que permite al usuario la posibilidad de seleccionar más de una opción de la lista mediante la tecla de control.

80
00:09:36,480 --> 00:09:47,980
Entonces, vamos a hacer un ejemplo con el select y vamos a poner también con una etiqueta, para que quede un poquito más, y aquí tendríamos un ejemplo de select.

81
00:09:47,980 --> 00:10:20,940
Vamos a indicarlo abajo. Vamos a poner aquí. Vamos a aquí y le ponemos aquí para separarlo. Bien, si veis ahora el select, ¿qué va a llevar dentro? El select, bueno, primero la propia etiqueta, luego vamos a intentar el select y luego el option, que sería pues cada una de las opciones del select.

82
00:10:20,940 --> 00:10:38,669
Aquí, para que quede mejor, vamos a hacerlo igual. Si veis, para que veamos qué componente va dentro de cada componente. Esto sería así y esto sería, este no lo ha llevado, y así.

83
00:10:38,669 --> 00:10:57,169
Bien, entonces veis que aparece una etiqueta, sobre esa etiqueta veis también lleva la etiqueta for, en el que el atributo for para identificarse con el select, con el ID del select, so, so, este so2, so2 con el so3, so3, que sería cada una de las listas.

84
00:10:57,169 --> 00:11:08,950
Entonces, una vez la etiqueta, debajo tendremos el select, en el que dicho select, aparecerá una opción seleccionada. Para ello, esto es lo que tenemos.