1
00:00:04,660 --> 00:00:12,160
Tendrá un atributo que se llama selected en el que nos indica que esa es la que va a aparecer seleccionada de toda la lista.

2
00:00:12,160 --> 00:00:19,699
Si veis aquí, cada una tiene un valor y luego dentro de cada componente option tendrá lo que se va a ver.

3
00:00:20,219 --> 00:00:27,679
Entonces, si nosotros le damos a ejecutar, le damos a ejecutar.

4
00:00:33,920 --> 00:00:38,799
Ahora veis, tenemos primero la primera de las listas, la primera de las listas,

5
00:00:38,799 --> 00:00:52,719
Teníamos la opción seleccionada, era selecciona, bueno, el hecho de selected está indicando que va a estar cerrada y que selecciona es lo que va a aparecer seleccionado.

6
00:00:52,719 --> 00:01:04,040
Entonces, cada uno de los valores, cada una de las opciones que va a tener serán las que aparecen ahí, que serán Windows, Mac, Linux y otro.

7
00:01:04,040 --> 00:01:24,959
La otra lista aparece con un tamaño de 5, con lo cual va a hacer que todos los componentes se vean a la vez, todos los de la lista se ven a la vez y al poner Selected en Windows aparecerá seleccionado Windows.

8
00:01:24,959 --> 00:01:45,840
Veis, como son cuatro componentes, aparece un hueco, por eso que hemos puesto que son cinco. En cambio, en el último está haciendo que sea múltiple. En múltiple ya hemos visto que múltiple indicaba que era un atributo booleano que permitía al usuario la posibilidad de seleccionar uno o más opciones.

9
00:01:45,840 --> 00:01:59,340
Entonces, al yo irme aquí, yo puedo seleccionar con el control más opciones de las que yo cambio en este otro. Yo solo puedo irme, por más que doy al control, no me permite seleccionar dos de ellas. Y en este sí.

10
00:01:59,340 --> 00:02:12,000
Bien, hemos visto el atributo label, hemos abierto el atributo valor y el selected que indicaba quién estaba preseleccionado de origen.

11
00:02:12,000 --> 00:02:39,189
Y esto sería en cuanto a select o lo que son listas. Bien, hay un tipo de lista, por otra parte, listas desplegables, permiten agrupar sus opciones de forma que el usuario pueda encontrar fácilmente las opciones cuando la lista sea muy larga, sea muy larga mediante la etiqueta optgroup, O-P-T-G-R-O-U-P, optgroup.

12
00:02:39,189 --> 00:03:10,449
Si yo pongo una lista ahora con el Outgroup, vamos a ponerlo aquí. Vamos a quitar estas para que no tengamos tantas. Vamos a quitar estas y vamos a poner con el Outgroup. Ahora tenemos aquí igual, lo vamos a llevar para adentro. Vamos a ponerlo aquí. El Outgroup lo vamos a meter para adentro y este también.

13
00:03:10,449 --> 00:03:30,759
Y luego las opciones las metemos para adentro. Si veis, la única diferencia ahora es que hemos metido antes como antes la lista llevaba el select, llevaba option, pero ahora lleva select, upgroup y option.

14
00:03:30,759 --> 00:04:00,680
Bien, entonces, vamos a ver primero cómo queda esto. Vamos a ejecutarlo. Vale, y aquí tenemos el, si veis, yo cuando abra Internet Explorer, ¿qué es lo que sucede ahora con el, pues, lo que estamos haciendo ahora con este ejemplo?

15
00:04:00,680 --> 00:04:07,099
es, ya hemos dicho que cuando tenemos la lista de experimentos, las listas de experimentos

16
00:04:07,099 --> 00:04:10,479
permiten agrupar sus opciones de forma que el usuario puede encontrar fácilmente las

17
00:04:10,479 --> 00:04:15,740
opciones cuando la lista es muy larga mediante la etiqueta off-group. Entonces, las etiquetas

18
00:04:15,740 --> 00:04:22,160
off-group, ¿cuál serán aquí? Si nos fijamos, las etiquetas off-group, cuando yo le abro,

19
00:04:22,500 --> 00:04:36,980
a ver si me deja, si vemos la etiqueta off-group, lo que vemos al abrirlo, hemos definido la

20
00:04:36,980 --> 00:04:43,519
etiqueta off-group como sistemas operativos y la etiqueta off-group a través de su atributo

21
00:04:43,519 --> 00:04:49,600
label como navegadores. Esto es lo que nos permite, el único atributo que suele utilizarse

22
00:04:49,600 --> 00:04:54,879
con la etiqueta off-group es label, que indica el nombre de cada agrupación. Los navegadores

23
00:04:54,879 --> 00:04:58,360
muestran de forma destacada el título de cada agrupación, de forma que el usuario

24
00:04:58,360 --> 00:05:04,779
pueda localizar más fácilmente la opción deseada. Agrupa todos estos elementos, que

25
00:05:04,779 --> 00:05:06,680
que sería Windows, Mac, Linux y Other,

26
00:05:07,019 --> 00:05:08,439
y Other, pues, a través de qué?

27
00:05:08,740 --> 00:05:10,480
De Outgroup, que sería esta que está aquí,

28
00:05:10,600 --> 00:05:12,439
a través de la etiqueta Label.

29
00:05:13,399 --> 00:05:15,899
Y aquí, como tendría otro Outgroup,

30
00:05:17,240 --> 00:05:19,899
etiquetaría todos estos o agruparía todos estos

31
00:05:19,899 --> 00:05:23,959
con respecto a los que tiene por medio de Label Navegadores.

32
00:05:25,300 --> 00:05:29,139
Bien, y para terminar este primer vídeo,

33
00:05:29,720 --> 00:05:31,259
no vamos a...

34
00:05:31,259 --> 00:05:34,019
No quiero hacer un repaso de todos los Input Types,

35
00:05:34,019 --> 00:05:51,100
como son reset, image, submit, porque son fáciles, button, nos, hidden, file, bueno, los vimos, tan solo lo que voy a pasar a lo que serían ya formularios avanzados.

36
00:05:51,540 --> 00:06:02,560
Y lo que vamos a pasar es en cuanto a la etiqueta fieldset y legend. Utilizando solamente las etiquetas form e input es posible diseñar la mayoría de los formularios de la aplicación web,

37
00:06:02,560 --> 00:06:29,819
Pero, no obstante, HTML define algunos elementos adicionales para mejorar la estructura de los formularios creados. Entonces, la imagen, vamos a hacer un formulario donde ya todos estos componentes aparezcan de una manera un poco más organizada y no tan apelotonada como aparecen como los que estoy viendo.

38
00:06:29,819 --> 00:06:46,360
Entonces, para ello, lo que hacemos ahora es con fill set, voy a poner otro ejemplo, vamos a quitar todo esto y vamos a poner esto otro.

39
00:06:46,759 --> 00:06:51,420
¿Veis? Ahora ya he añadido fill set, bueno, primero lo voy a ejecutar y luego os lo explico cómo queda.

40
00:06:51,420 --> 00:07:11,660
Si veis aquí, bueno, tiene Legend y Fieldset. Legend, aquí, vamos a ponerlo para que quede este un poquito mejor, vamos a ponerlo aquí, que esté un poco mejor, y este también.

41
00:07:11,660 --> 00:07:39,019
Bien, el field set tendrá, field set lo que hace es agrupar de una manera pues organizada pues varios campos. Aquí está agrupando tres tipos de campos texto junto con sus etiquetas, bueno, no las pone como etiqueta, pero, y lo está agrupando con una leyenda que los va a agrupar. Esa leyenda a través de la etiqueta leyenda será datos personales.

42
00:07:39,019 --> 00:07:47,480
Y el de abajo ha unido también uno de tipo texto, uno de tipo password y dos de tipo password los ha unido a través de la leyenda datos de Conesia.

43
00:07:47,480 --> 00:08:16,250
Si nosotros guardamos esto y le damos a actualizar, si veis, hemos quitado el anterior, vamos a cerrarlo y le damos a ejecutar, nos aparecerá cómo está redistribuido, nos aparecen, si veis aquí, es que no quiero que aparezca todo lo anterior.

44
00:08:16,250 --> 00:08:48,120
Ah, ya no la he quitado. Voy a quitarlo aquí. Vale. Le damos a guardar y a ejecutar. Bien. Si veis, hemos organizado dichos campos, los hemos organizado de tal manera que a través de una leyenda, que esa leyenda está recorrida a través de una línea continua, agrupa varios componentes.

45
00:08:48,120 --> 00:09:07,120
Quedando de una manera mucho más organizada y mucho más estética. Para eso se utiliza Fieldset y Legend. Y con esto terminamos este primer tutorial de los componentes de HTML básicos y un poco avanzados que veremos.

46
00:09:07,519 --> 00:09:11,620
Esta sería la primera parte y nos vemos en la siguiente. Hasta luego.