Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Formularios HTML y CSS. Parte3 - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 18 de diciembre de 2024 por Francisco J. G.

73 visualizaciones

Formularios HTML y CSS

Más información Transcripción

Descargar la transcripción

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. 00:00:04
Si veis aquí, cada una tiene un valor y luego dentro de cada componente option tendrá lo que se va a ver. 00:00:12
Entonces, si nosotros le damos a ejecutar, le damos a ejecutar. 00:00:20
Ahora veis, tenemos primero la primera de las listas, la primera de las listas, 00:00:33
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. 00:00:38
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. 00:00:52
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. 00:01:04
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. 00:01:24
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í. 00:01:45
Bien, hemos visto el atributo label, hemos abierto el atributo valor y el selected que indicaba quién estaba preseleccionado de origen. 00:01:59
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. 00:02:12
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. 00:02:39
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. 00:03:10
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? 00:03:30
es, ya hemos dicho que cuando tenemos la lista de experimentos, las listas de experimentos 00:04:00
permiten agrupar sus opciones de forma que el usuario puede encontrar fácilmente las 00:04:07
opciones cuando la lista es muy larga mediante la etiqueta off-group. Entonces, las etiquetas 00:04:10
off-group, ¿cuál serán aquí? Si nos fijamos, las etiquetas off-group, cuando yo le abro, 00:04:15
a ver si me deja, si vemos la etiqueta off-group, lo que vemos al abrirlo, hemos definido la 00:04:22
etiqueta off-group como sistemas operativos y la etiqueta off-group a través de su atributo 00:04:36
label como navegadores. Esto es lo que nos permite, el único atributo que suele utilizarse 00:04:43
con la etiqueta off-group es label, que indica el nombre de cada agrupación. Los navegadores 00:04:49
muestran de forma destacada el título de cada agrupación, de forma que el usuario 00:04:54
pueda localizar más fácilmente la opción deseada. Agrupa todos estos elementos, que 00:04:58
que sería Windows, Mac, Linux y Other, 00:05:04
y Other, pues, a través de qué? 00:05:07
De Outgroup, que sería esta que está aquí, 00:05:08
a través de la etiqueta Label. 00:05:10
Y aquí, como tendría otro Outgroup, 00:05:13
etiquetaría todos estos o agruparía todos estos 00:05:17
con respecto a los que tiene por medio de Label Navegadores. 00:05:19
Bien, y para terminar este primer vídeo, 00:05:25
no vamos a... 00:05:29
No quiero hacer un repaso de todos los Input Types, 00:05:31
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. 00:05:34
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, 00:05:51
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. 00:06:02
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. 00:06:29
¿Veis? Ahora ya he añadido fill set, bueno, primero lo voy a ejecutar y luego os lo explico cómo queda. 00:06:46
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. 00:06:51
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. 00:07:11
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. 00:07:39
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. 00:07:47
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. 00:08:16
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. 00:08:48
Esta sería la primera parte y nos vemos en la siguiente. Hasta luego. 00:09:07
Idioma/s:
es
Materias:
Informática
Niveles educativos:
▼ Mostrar / ocultar niveles
  • Formación Profesional
    • Ciclo formativo de grado superior
      • Primer Curso
      • Segundo Curso
Autor/es:
Francisco J. González Constanza
Subido por:
Francisco J. G.
Licencia:
Todos los derechos reservados
Visualizaciones:
73
Fecha:
18 de diciembre de 2024 - 14:37
Visibilidad:
Público
Centro:
IES CIFP a Distancia Ignacio Ellacuría
Duración:
09′ 13″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
250.96 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid