Saltar navegación

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

Formularios HTML y CSS. Parte2 - 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.

70 visualizaciones

Formularios HTML y CSS

Más información Transcripción

Descargar la transcripción

El ancho, la altura, size, tamaño inicial de control, max, min, valor máximo y mínimo, etc. 00:00:04
Bien, para no eternizarnos en cuanto a este elemento, hay muchos type. 00:00:12
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, 00:00:20
month para definir un mes y control del año 00:00:31
hidden define un campo de entrada oculto 00:00:35
yo puedo cambiar 00:00:39
el propio type y en vez de utilizar 00:00:41
submit, puedo poner, bueno, en vez de text 00:00:47
voy a poner number y esto 00:00:51
lo que nos proporcionaría es un, definiría un campo 00:00:55
para introducir únicamente un número 00:00:58
¿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. 00:01:01
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. 00:01:22
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. 00:01:34
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. 00:01:46
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. 00:02:13
de acuerdo, la única 00:02:31
el único input text 00:02:33
que he añadido algo más es el size 00:02:35
el tamaño y el max length 00:02:37
el mayor número de números que puedes meter 00:02:39
para el tipo de n 00:02:41
y delante pues una etiqueta, una etiqueta no es 00:02:43
nada más que, como vemos aquí a continuación 00:02:45
tenemos nombre, tenemos 00:02:47
apellidos y tenemos de n y veis 00:02:56
la etiqueta no es nada más que una etiqueta previa 00:02:58
pues al campo de texto 00:03:00
entonces el label 00:03:02
incluye esta etiqueta 00:03:04
y se utiliza para establecer el título 00:03:08
de cada campo de formulario 00:03:09
así de sencillo, no sirve para 00:03:11
mucho más, bien, pasamos de la 00:03:14
etiqueta 00:03:15
pasamos al textarea 00:03:16
textarea 00:03:19
va a generar un campo 00:03:21
de texto pero ahora va a ser multilínea 00:03:25
en el que podemos introducir textos largos 00:03:27
dentro de él 00:03:29
si nosotros ahora quitamos todo esto 00:03:31
y metemos el 00:03:32
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. 00:03:36
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. 00:04:09
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. 00:04:27
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. 00:04:44
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. 00:04:55
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. 00:05:01
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, 00:05:10
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. 00:05:18
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. 00:05:38
Si veis, vamos a tener el nombre del producto con una caja de texto y luego la descripción. 00:06:03
Y si veis ya, me permite poner varias líneas porque es un text area. 00:06:41
Bien, ¿qué más? Vamos a pasar a otro componente, el input type radio. 00:06:46
Radio va a ser un control de tipo radio boot button. 00:06:51
Son similares a los controles de tipo teacher's box, pero presentan una diferencia muy importante. 00:06:56
Son mutuamente excluyentes. 00:06:59
Tienes que elegir una opción u otra. 00:07:01
Entonces, si yo pongo un input type aquí, si veis, vamos a poner ahora el sexo y lo añadimos aquí abajo. 00:07:03
Para diferenciarlo, ponemos una línea más abajo y tenemos el input type. 00:07:15
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. 00:07:21
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. 00:07:41
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. 00:08:42
este va a tener atributos como size 00:09:00
y como multiple 00:09:02
el size va a ser 00:09:04
para presentar como una lista con desplazamiento 00:09:06
si el elemento 00:09:08
se presenta con una lista con desplazamiento 00:09:10
este atributo especifica el número de opciones 00:09:12
y elementos de la lista que deberían ser 00:09:14
visibles al mismo tiempo 00:09:16
vale, si tenemos 00:09:17
una lista de 5 elementos y 00:09:20
en un principio hay un scroll, pues si nosotros le indicamos 00:09:22
que size va a ser de 5, se va a ver completa 00:09:24
no va a haber scroll, y multiple 00:09:26
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. 00:09:28
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. 00:09:36
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. 00:09:47
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í. 00:10:20
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. 00:10:38
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. 00:10:57
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:
70
Fecha:
18 de diciembre de 2024 - 14:20
Visibilidad:
Público
Centro:
IES CIFP a Distancia Ignacio Ellacuría
Duración:
11′ 09″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
264.26 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid