Saltar navegación

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

HTML - Formularios - 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 1 de diciembre de 2020 por Fernando M.

142 visualizaciones

Más información Transcripción

Descargar la transcripción

Vale, pues ahora vamos a ver cómo hacer formularios en HTML5. 00:00:00
Un formulario se utiliza básicamente para enviar información, ¿vale? 00:00:06
Normalmente para enviar información a un servidor o a una base de datos. 00:00:10
Esa parte en principio no la vamos a ver, ¿vale? 00:00:14
Pero bueno, vamos a estudiar cómo se hace un formulario, cómo se maqueta 00:00:16
y veremos que si hay algunas cositas que vamos a poder ir haciendo con este formulario, ¿vale? 00:00:20
Entonces, partimos de nuestra estructura, yo he creado un archivo que se llama pruebaformularios.html 00:00:26
Y bueno, hacemos lo de siempre, ponemos html 2.5 y le damos al tabulador, ¿vale? 00:00:33
Para que nos cree nuestra estructura 00:00:41
Ponemos el idioma español y aquí vamos a poner formularios en html, ¿vale? 00:00:43
Nos creamos nuestra etiqueta h1 00:00:50
Que siempre es necesaria para 00:00:53
Explicar 00:00:55
Que es lo que vamos a hacer 00:00:57
Y ponemos como crear 00:00:58
Formularios en html 00:01:01
Ok, entonces 00:01:03
Que es lo primero que vamos a hacer 00:01:09
Para crear un formulario 00:01:13
Pues lo primero que vamos a hacer 00:01:15
Es añadir la etiqueta 00:01:16
Form 00:01:18
Todo lo que esté entre la etiqueta 00:01:20
form van a ser los elementos de nuestro formulario. Y lo primero que vamos a ver es qué atributos 00:01:24
le ponemos a esta etiqueta. En primer lugar le vamos a poner el atributo action. Y dentro 00:01:30
de este atributo pondríamos la URL, es decir, la dirección de nuestra base de datos o el 00:01:36
sitio donde queramos enviar la información. En este caso, como no la vamos a enviar a 00:01:42
ningún sitio, lo vamos a dejar vacío. Es decir, simplemente entre comillas. Luego vamos 00:01:46
a poner el atributo 00:01:53
method ¿vale? y method 00:01:55
tal y como veis aquí nos da dos opciones 00:01:57
o la opción get ¿vale? 00:01:59
que esta se utiliza 00:02:02
tiene un problema y es que 00:02:03
cuando se utiliza toda la información que envía 00:02:05
se ve en la barra de navegación 00:02:07
¿vale? normalmente 00:02:09
este método, este 00:02:11
parámetro del atributo se utiliza 00:02:13
para formularios de búsqueda 00:02:15
cuando queremos buscar algo dentro de una 00:02:17
página web o dentro de 00:02:19
de un servicio ¿vale? 00:02:21
Por lo tanto, lo que nosotros utilizaremos es el atributo post, ¿vale? 00:02:23
Que esto oculta la búsqueda o oculta el envío de información dentro del formulario, ¿vale? 00:02:29
Bueno, pues ahora vamos a empezar a añadir elementos dentro de este formulario. 00:02:37
vale pues entonces lo que vamos a hacer es añadir el primer elemento a nuestro formulario para 00:02:47
añadir ese primer elemento un elemento de entrada vamos a utilizar siempre el elemento y vale 00:02:59
tal que así entonces fijaros que ya aparece una estructura pero nunca vamos a dejar el input 00:03:09
siempre vamos a poner 00:03:17
después del ínculo vamos a poner 00:03:19
un atributo que es el atributo type 00:03:20
y en este caso vamos a poner 00:03:23
atributo 00:03:25
vamos a ponerle como contenido 00:03:26
del atributo type text 00:03:29
para indicar que es 00:03:30
un elemento de entrada 00:03:32
de tipo text 00:03:35
esto va a afectar 00:03:36
texto, tanto texto como 00:03:38
números, va a afectar 00:03:41
contenido alfanumérico 00:03:43
¿Vale? Y vamos a ir asignándole nombres, ¿vale? Es decir, le vamos a asignar, vamos a ponerle, por ejemplo, en primer lugar, el atributo name. 00:03:44
¿Para qué sirve el atributo name? El atributo name sirve para que el formulario, cuando envíe la información, sepa que lo que hay dentro de un elemento llamado nombre va a contener un nombre de una persona, ¿vale? 00:03:58
Es decir, va a ser, para que lo entendamos, va a ser, por ejemplo, el nombre de las variables, como cuando programábamos en Python, ¿vale? 00:04:17
Pues el nombre de una variable que llamábamos nombre igual a pepe, pues para que sepamos que dentro de nombre estará guardado pepe, ¿vale? 00:04:25
Y ahora vamos a añadir un elemento importante, que es la etiqueta label, ¿vale? 00:04:34
Nosotros pondremos label y cerraremos la etiqueta. 00:04:42
Y aquí pondríamos lo que queremos que aparezca por pantalla, ¿vale? 00:04:46
Entonces fijaros que yo pongo nombre dos puntos y me aparece nombre justo antes del elemento de entrada, ¿vale? 00:04:50
Y en label vamos a poner un atributo muy importante que es el elemento, el atributo for, ¿vale? 00:04:57
Y ese atributo, yo le voy a poner ahora su nombre, ¿vale? 00:05:04
Y ese atributo va a identificar de forma única al elemento de entrada, ¿vale? 00:05:09
Al elemento input. 00:05:19
Por lo tanto, yo en el elemento input voy a añadir un atributo que se llama id 00:05:20
y se tiene que llamar exactamente igual que el elemento for, ¿vale? 00:05:26
Exactamente igual. 00:05:32
Para que no haya problema, ¿vale? 00:05:34
Y ahora vamos a seguir añadiendo elementos, añadiendo atributos a este elemento de entrada input, ¿vale? 00:05:35
El primero va a ser size, ¿vale? 00:05:44
Que es para darle un tamaño. 00:05:47
Entonces, fijaros que estáis viendo en pantalla ahora mismo cuánto ocupa ese elemento de entrada. 00:05:49
Si yo pongo 50, fijaros que aumenta. 00:05:55
Si pongo 5, disminuye, ¿vale? 00:05:58
Entonces, con este elemento size podríamos aumentar el número de elementos, ¿vale? 00:06:00
¿Vale? Más cositas que podemos hacer. Podemos añadir, por ejemplo, un elemento, un atributo autocomplete, ¿vale? Fijaros que aparece aquí, ¿vale? Y lo podríamos completar con la opción on, ¿vale? 00:06:04
Y ¿para qué sirve esto? Entonces, es importante mencionar que ese parámetro autocomplete on está habilitado siempre por defecto, ¿vale? Voy a hacer unas pruebas para que veáis cuál sería el resultado. 00:06:24
Bueno, también es importante que sepáis que un aspecto importante de utilizar la etiqueta label es que si yo hago clic sobre el label asociado a este elemento de entrada, fijaros, yo hago clic en nombre, ¿vale? 00:06:40
Me activa automáticamente ese formulario. Esto es especialmente útil para dispositivos móviles, ¿vale? 00:06:56
Entonces, tenemos que recordar siempre que vamos a hacer webs que sean responsables de que se vean exactamente igual de bien en un dispositivo móvil que en una página web, ¿vale? 00:07:02
Entonces, es importante que lo sepamos. 00:07:12
Ok, pues entonces, yo ahora aquí, por ejemplo, pondría Pepito y le daría lente, ¿vale? 00:07:15
Un segundo, que se ha quedado frito. Voy a volver a cerrar. Voy a abrir el navegador de la web. 00:07:22
¿Vale? Y fijaros que ahí me aparece Pepito 00:07:45
Si yo ahora aquí 00:07:51
El autocomplete 00:07:53
Espérate, yo creo que no lo estoy viendo 00:07:54
Bueno, ahora se ve, ¿no? 00:07:56
Fijaros que si yo ahora pongo 00:08:12
El ratón encima 00:08:13
Hago clic encima, aparece Pepito, ¿vale? 00:08:15
Voy ahora a poner autocomplete 00:08:18
Off, ¿vale? 00:08:20
Y guardo 00:08:21
Y si yo pongo el ratón encima 00:08:22
Hago clic, fijaros que ahora no me aparece 00:08:25
Ninguna opción de relleno, ¿vale? 00:08:27
Muy bien, más opciones, más atributos que podemos poner. Por ejemplo, el autofocus, ¿vale? ¿Qué hace la opción de autofocus? Pues la opción autofocus lo que hace es que una vez que carga la página web, automáticamente aparece ese elemento para ser editado, ¿vale? 00:08:29
¿Qué pasa? Que si nosotros ahora mismo hacemos F5 sobre esto, veis que se está habilitando para que yo lo rellene, pero no somos capaces de distinguirlo porque no tenemos más elementos. 00:08:57
Entonces, lo que vamos a hacer ahora es añadir otro elemento más a nuestro formulario, ¿vale? 00:09:09
Vamos a poner un label, y ahora vamos a poner, por ejemplo, para añadir el apellido. 00:09:14
Pues ponemos aquí su apellido y aquí ponemos apellido. 00:09:20
Y debajo ponemos nuestro elemento de entrada de tipo texto, ¿vale? 00:09:27
De name le vamos a poner apellido y de id le vamos a poner su apellido. 00:09:35
Recuerden que el id tiene que ser igual que el for, ¿vale? 00:09:43
Y cerramos. 00:09:47
Y fijaros que aparece justo después, por lo tanto, para evitar que salgan uno debajo del otro, voy a poner saltos de línea, ¿vale? 00:09:50
Que recuerdo que era con la etiqueta B. Voy a poner un par de saltos de línea. 00:09:56
Muy bien, pues entonces fijaros ahora. Voy a poner el autofocus, en vez de ponerlo en el nombre, lo voy a poner en el apellido, ¿vale? 00:10:04
Y voy a darle a actualizar la página, ¿vale? 00:10:12
Ah, y no he puesto el autofocus aquí, he puesto su nombre, autofocus, vale, y ahora le voy a actualizar la página, y fijaros como al darle a actualizar, automáticamente me ha salido apellido para que yo lo rellene, vale, más atributos que podemos poner. 00:10:18
Otro atributo que podemos poner es el atributo de longitud máxima, ¿vale? 00:10:44
Por ejemplo, nos vamos a ir a nombre y aquí vamos a poner max length, ¿vale? 00:10:49
Y vamos a poner, por ejemplo, 10, ¿vale? 00:10:57
Esto es el número de caracteres máximos que podemos poner. 00:10:59
Por lo tanto, a pesar de que el tamaño sea grande, fijaros que si yo dejo la pulsada, 00:11:03
no me deja poner más de 10 caracteres, ¿vale? 00:11:08
Otra etiqueta que podemos poner, otro atributo, perdón 00:11:11
Pues por ejemplo, vamos a crearnos un nuevo elemento aquí debajo 00:11:17
¿Vale? 00:11:21
Nos vamos a quitar el autofocus 00:11:23
Fijaros que lo que he hecho ha sido copiar 00:11:25
Y lo vamos a llamar, en vez de el for su apellido, vamos a poner su dirección 00:11:27
Va a ser un elemento para añadir la dirección 00:11:32
Name, dirección, aquí 00:11:34
¿Vale? 00:11:45
y vamos a añadir un atributo que es placeholder, que esto es para dar una especie de ayuda 00:11:46
sobre cómo completar este campo, ¿vale? 00:11:53
Pondríamos aquí, vamos a ponerle también un tamaño más grande, así, ¿vale? 00:11:56
Y entonces, dentro de placeholder, pues pondríamos, por ejemplo, cómo rellenarlo. 00:12:01
Por ejemplo, si es una dirección, pues pondríamos ejemplo, punto, y ponemos calle, número, ciudad, código postal, ¿vale? 00:12:05
Y fijaros que aparece como en un gris clarito que nos indica cómo rellenarlo. 00:12:18
Si yo hago clic aquí ahora, en dirección, al escribir desaparece, ¿vale? 00:12:24
Más parámetros que podemos escribir. 00:12:32
Por ejemplo, en apellido. 00:12:35
Podríamos escribir una opción, ¿vale? 00:12:36
Pues podríamos poner el atributo value, que es para dar un valor por defecto, ¿vale? 00:12:38
Y entonces, cuando cargara el formulario, fijaros, le voy a dar al F5, ¿vale? 00:12:43
Aparece por defecto la opción Cervantes, ¿vale? 00:12:52
Y yo ya luego la podría cambiar y poner la que yo quisiera. 00:12:55
¿Vale? 00:12:58
Más atributos. 00:13:00
Pues otros elementos que podemos añadir, otros atributos, perdón, pues son, por ejemplo, 00:13:02
pues dentro de aquí, ¿vale? Dentro del apellido, podríamos añadir el atributo Read Only, ¿vale? 00:13:09
Esto lo que hace es que cuando carga la página, ¿vale? 00:13:16
Vamos a cargar el formulario otra vez. 00:13:20
fijaros, no me deja 00:13:21
modificar, yo por mucho que 00:13:23
intento escribir, no me deja modificar el valor 00:13:25
de Cervantes, el valor 00:13:27
del apellido, es decir, es solo de lectura 00:13:29
¿vale? 00:13:31
otra opción, por ejemplo 00:13:34
para aquí en la dirección 00:13:35
sería poner el atributo disable 00:13:37
¿vale? al poner 00:13:39
disable, fijaros 00:13:41
que ahora ni siquiera aparece 00:13:43
igual el formulario 00:13:45
en el campo, es decir, ni siquiera me deja 00:13:47
edición ni nada, ni hacer click 00:13:49
y por último otro atributo que lo vamos a poner en el nombre 00:13:51
que es el atributo require 00:13:56
pero esto no lo vamos a poder ver hasta que añadamos un botón 00:13:58
que nos permita ver el comportamiento del formulario 00:14:03
entonces esto lo vamos a ver al final 00:14:08
mientras tanto vamos a seguir añadiendo elementos a nuestro formulario 00:14:10
vamos a poner un par de saltos de línea 00:14:14
y vamos a añadir un campo de correo electrónico. 00:14:16
Para ello, como siempre, ponemos el atributo label, ponemos email y dentro de label ponemos un for que va a ser su mail. 00:14:24
Y ahora añadiríamos la etiqueta input con un tipo que va a ser el tipo email, ¿vale? 00:14:36
Con el nombre que le vamos a poner, email, y el ID, que recuerdo que tiene que ser el mismo que el del port. 00:14:47
Tal que así, ¿vale? 00:14:56
Y le vamos a poner un tamaño, por ejemplo, de 30. 00:14:58
¿Vale? 00:15:02
Y cerramos la etiqueta. 00:15:03
¿Vale? 00:15:06
Más cositas, más cositas. 00:15:10
Por ejemplo, para ir un poquito más rápido, ¿vale? 00:15:12
Voy a copiar esto y así voy haciendo ediciones sobre esto. 00:15:16
Vamos a poner ahora una contraseña. 00:15:21
Entonces pondríamos su, en vez de su mail, pondríamos su pass. 00:15:23
Aquí vamos a poner un texto que va a ser password o contraseña. 00:15:28
En el tipo del input vamos a poner password, ¿vale? 00:15:34
Donde ponía email vamos a poner pass. 00:15:40
Y en el id recuerdo lo mismo que el for, ¿vale? 00:15:43
Y aquí no vamos a poner site, ¿vale? 00:15:46
Pero vamos a poner también el required para luego relacionarlo con el campo del nombre. 00:15:51
Fijaros que ahora, si yo edito el password, lo que aparece son puntitos, ¿vale? 00:15:57
Porque está codificando o está ocultando esa contraseña, ¿vale? 00:16:02
Más opciones, más opciones. 00:16:09
Por ejemplo, una URL, ¿vale? Una dirección web. 00:16:11
Lo mismo, pego lo que ya tenía copiado, copio esto, perdón, lo pego, ¿vale? 00:16:15
Y vamos a poner aquí su URL, ¿vale? 00:16:23
Y ponemos aquí dirección web. 00:16:29
Vamos a poner aquí, y de tipo vamos a poner URL. 00:16:34
de nombre va a ser 00:16:37
url 00:16:40
web y en el id 00:16:42
pues lo mismo que en el 00:16:44
port, ¿vale? y eliminamos 00:16:46
la etiqueta type y vamos a poner 00:16:48
un tamaño mayor, ¿vale? 00:16:50
porque las urls son un poco grandes 00:16:52
tal que así, ¿vale? 00:16:54
y aquí pondríamos nuestra página 00:16:56
web, ¿vale? y ahora vamos a 00:16:58
empezar a ver 00:17:03
algunos tipos de entradas 00:17:04
un poquito diferentes, ¿vale? 00:17:07
Que van a dar bastante fuego en lo que es un formulario. 00:17:09
La característica de esto es que no tiene un label asociado, ¿vale? 00:17:16
¿Por qué? Porque no tiene un elemento de entrada de texto principalmente, ¿vale? 00:17:21
Entonces, lo que nosotros vamos a hacer aquí es poner directamente una etiqueta de párrafo, 00:17:26
le vamos a poner edad, ¿vale? 00:17:32
Y ahora justo debajo de la edad vamos a poner una entrada, un input, ¿vale? 00:17:34
y de tipo vamos a poner 00:17:40
radio 00:17:43
¿vale? 00:17:45
fijaros que hasta que no cierro no sale 00:17:47
entonces en el nombre 00:17:49
recuerdo que esto va a ser 00:17:51
el nombre de la varilla 00:17:52
entonces vamos a poner, por ejemplo vamos a poner 00:17:54
hacer unas opciones para el usuario 00:17:57
para decirle radio, vamos a poner 00:17:59
edad barra baja usuario 00:18:00
¿vale? y el valor 00:18:02
que va a tomar si se selecciona 00:18:05
esta opción va a ser 00:18:07
menor 00:18:08
de 18 00:18:09
¿vale? 00:18:12
lo cerramos, fijaros que ha aparecido 00:18:16
un puntito, ¿vale? lo veis aquí 00:18:18
y ahora vamos a poner un 00:18:20
texto asociado a este botón 00:18:22
¿vale? a ese pulsador que va a ser 00:18:24
menor de 18 00:18:26
¿vale? 00:18:28
y ahora 00:18:31
añadimos un salto de línea 00:18:32
porque vamos a poner 00:18:34
más opciones justo debajo 00:18:36
lo pegamos 00:18:38
tres veces por ejemplo y ahora 00:18:40
a la segunda opción le vamos a poner joven 00:18:42
y en el texto 00:18:44
en vez de poner menor de 18 años 00:18:47
vamos a poner entre 00:18:49
18 y 60 años 00:18:50
y en el tercero 00:18:53
en el value vamos a poner 00:18:55
adulto y vamos a poner 00:18:57
mayor de 60 00:18:58
años 00:19:03
¿vale? y fijaros 00:19:04
que al crear esto nosotros podemos 00:19:07
seleccionar cualquiera de las opciones 00:19:09
y no se seleccionan varias, sino que elige una entre las tres posibles, ¿vale? 00:19:10
Esto es porque hemos fijado el name, el mismo name para las tres variables, ¿vale? 00:19:17
Fijaros que si yo ahora aquí, por casualidad, me hubiera equivocado y hubiera puesto el nombre usuario, ¿vale? 00:19:24
Si yo ahora marco, se me queda hecha marcada siempre porque no pertenece al mismo grupo de elementos, ¿vale? 00:19:32
Así que lo dejo marcado. 00:19:38
y fijaros que cuando yo actualizo la página, este elemento sale sin marcar. 00:19:42
Si yo quiero dejar un elemento marcado por defecto, pues me lo escogería el que yo quisiera, por ejemplo, joven, 00:19:49
y aquí pondría check, ¿vale? 00:19:55
Y si yo actualizo la página, por defecto, al actualizar, aparece esa opción marcada, ¿vale? 00:19:58
Más elementos para el formulario. 00:20:07
Vamos a utilizar de base el de la edad 00:20:09
¿Vale? Entonces lo voy a copiar 00:20:12
Voy a poner un salto de línea más 00:20:13
Y lo voy a pegar aquí abajo 00:20:15
¿Vale? Y ahora en vez de ser edad 00:20:17
Vamos a poner 00:20:19
Hobbies 00:20:20
¿Vale? Y en vez de poner 00:20:22
En el nombre edad usuario 00:20:25
Voy a poner 00:20:28
Pasatiempo 00:20:29
Lo voy a copiar 00:20:31
Y lo voy a pegar en todo ¿Vale? 00:20:33
Tal que así 00:20:36
Y lo mismo, le voy a dar aquí unos valores, que el primer valor de value va a ser leer, el segundo va a ser deporte y el tercero música. 00:20:37
Y le pongo una etiqueta asociada, que va a ser lectura, deporte y escuchar música. 00:20:48
Hacer deporte, ¿vale? 00:21:07
¿Qué pasa? Que tal y como está configurado, que está como una opción de... 00:21:12
Voy a quitar el check también, ¿vale? Que está como una opción de radio, solo me deja elegir un elemento, ¿vale? ¿Cómo podríamos arreglar esto? Pues de varias formas. La más correcta es utilizar, en vez de tipo radio, utilizar tipo checkbox, ¿vale? Checkbox. Y lo ponemos en todo, ¿vale? 00:21:17
Y ahora fijaros que si puedo marcar y desmarcar elementos, ¿vale? Incluso puedo marcar varios, ¿vale? Pero en este caso es importante para que no haya sobre escritura de variables darle un elemento diferente a cada uno, ¿vale? 00:21:45
Entonces, nosotros lo que pondremos aquí será pasatiempo 1, pasatiempo 2 y pasatiempo 3, ¿vale? 00:22:08
¿Ok? Así tendríamos nuestra lista. 00:22:24
¿Qué más, qué más, qué más? 00:22:30
Vale, vamos a meter otro salto de línea, BR, y vamos a añadir un elemento para elegir cantidades, por ejemplo, ¿vale? Entonces ponemos mi etiqueta P y ponemos selecciona una cantidad de kilómetros recorridos este año, por ejemplo, ¿vale? 00:22:32
Y dentro vamos a añadir un elemento input, como siempre, y de tipo vamos a poner number. 00:23:00
Le vamos a dar un nombre a esta variable, que va a ser cantidad, ¿vale? o kilómetro, ¿vale? 00:23:13
Y dentro vamos a darle un valor por defecto. 00:23:20
Por ejemplo, va a ser el valor 0, ¿vale? Hemos recorrido 0 kilómetros. 00:23:29
Si cerramos la etiqueta fijaros que aparece aquí un valor 0 y como es número, numérica, aparecen aquí las opciones para subir y aumentar. 00:23:34
Y aumentaríamos de kilómetro en kilómetro positivo o en negativo. 00:23:49
No tendría sentido poner negativo. 00:23:54
Entonces, como no tendría sentido poner negativo en nuestro caso, pues nos venimos aquí y vamos a poner una etiqueta, un atributo 1000. 00:23:56
Y como valor le vamos a poner el 0, ¿vale? 00:24:05
Por lo tanto, si yo ahora actualizo la página, veis que aparece 0. 00:24:09
Si le doy para abajo, no me baja del 0, ¿vale? 00:24:14
Y lo mismo puedo poner para un atributo max, ¿vale? 00:24:18
Por ejemplo, 10 kilómetros, ¿vale? O menos aún, 3 kilómetros. 00:24:23
Entonces yo ahora me vendría aquí y podría aumentar y más de 3 no lleva, ¿vale? 00:24:29
Y si resulta que nosotros no corremos o no andamos a kilómetro por kilómetro, sino que lo hacemos por cada 100 metros, 00:24:34
pues entonces simplemente aquí pondríamos el paso en el que queremos aumentar ese valor. 00:24:45
Pues en este ponemos 0,01 cada 10 metros, ¿vale? 00:24:50
Y ahora nos venimos aquí y fijaros, ¿vale? 00:24:57
Yo podría cambiar este valor de forma manual, ¿vale? Yo podría poner aquí 1,5. 00:25:05
sin problema 00:25:09
¿vale? 00:25:11
bien 00:25:13
eso en cuanto a 00:25:16
en cuanto a 00:25:19
el input de tipo 00:25:23
número, ahora vamos a meter 00:25:24
una fecha ¿vale? por ejemplo 00:25:26
vamos a poner la fecha de nacimiento 00:25:28
y aquí si que podemos poner 00:25:31
un label ¿vale? entonces vamos a 00:25:33
poner un salto de línea 00:25:35
para asegurar que quede un poquito 00:25:36
bien estéticamente y vamos a poner 00:25:38
label 00:25:40
y vamos a poner fecha de nacimiento 00:25:42
voy a poner otro salto de línea más 00:25:47
que quede mejor 00:25:49
dentro de label 00:25:50
vamos a poner el form y lo vamos a llamar 00:25:53
subfecha 00:25:55
¿vale? y ahora añadimos 00:25:56
un elemento input 00:25:59
de tipo 00:26:00
date ¿vale? 00:26:02
para fecha 00:26:05
y el nombre de la variable va a ser 00:26:06
fecha barra baja nacimiento 00:26:09
y en el id 00:26:12
pues recuerdo que ponemos 00:26:14
lo mismo que en el atributo for 00:26:15
así 00:26:17
¿vale? 00:26:19
y vamos a ponerle 00:26:22
vamos a aumentarle el tamaño a 50 00:26:24
y fijaros que cuando 00:26:26
lo cierro me sale el campo 00:26:29
tal que así con la configuración 00:26:31
día mes y año y 00:26:33
me aparece esta opción para hacer clic 00:26:35
y elegir yo la fecha 00:26:37
que yo quiera ¿vale? 00:26:39
Me podría mover por meses, me podría mover también por año, etc. 00:26:40
¿Vale? 00:26:45
Y me daría fuego a elegir la fecha o el año que yo quise. 00:26:46
¿Vale? 00:26:51
Más elementos que podamos añadir. 00:26:52
Vamos a añadir, por ejemplo, un elemento para definir rango. 00:26:55
¿Vale? 00:27:01
Entonces, de nuevo, vamos a poner dos saltos de línea. 00:27:02
Uno ahí y otro aquí. 00:27:06
y ahora añadimos una etiqueta P 00:27:08
donde vamos a poner 00:27:11
define un rango de 00:27:12
de altura 00:27:15
de altura no, un rango de 00:27:19
salario deseado 00:27:23
¿vale? 00:27:26
vamos a añadir un elemento input 00:27:30
de tipo 00:27:33
vamos a poner range 00:27:34
¿vale? que es de rango 00:27:37
la variable 00:27:39
donde se va a guardar todo eso va a ser 00:27:41
rango salarial 00:27:43
¿vale? y vamos a poner un tamaño 00:27:44
de 50 00:27:47
¿vale? y fijaros 00:27:49
que si yo cierro 00:27:51
pues sale un valor 00:27:52
¿vale? 00:27:55
con un deslizador donde yo puedo elegir 00:27:57
el valor que quiera ¿vale? 00:27:59
si yo pongo en vez de 50 pongo 100 00:28:01
pues realmente aquí como podéis ver 00:28:04
no hay ningún 00:28:07
ningún cambio muy 00:28:08
sustancial, ¿vale? Simplemente que 00:28:11
hay más 00:28:13
elementos donde elegir, ¿vale? Si yo pongo, por ejemplo, 00:28:15
solo tres, 00:28:17
¿vale? 00:28:20
Los altos son más bruscos, 00:28:23
¿vale? Simplemente eso. 00:28:25
Vale. 00:28:29
Más cositas, más cositas 00:28:31
que podemos hacer aquí. 00:28:33
Más tipos de etiquetas, quiero decir. 00:28:35
¡Ah! Etiquetas para 00:28:37
juntar un archivo, ¿vale? 00:28:39
Imaginaros que queremos adjuntar un archivo, pues entonces nos vendríamos, ponemos de nuevo, vamos a poner santos de línea, que siempre se me olvidan, br, br, etiqueta p y ponemos adjunta to cv, tu currículum, ¿vale? 00:28:41
Y ahora aquí ponemos una entrada, un elemento de tipo input y el tipo de input va a ser file, ¿vale? 00:29:01
Y vamos a poner como nombre, la variable va a ser archivo y entre paréntesis y ponemos dos corchetes, ¿vale? 00:29:11
Y ponemos y cerramos, ¿vale? 00:29:24
Y fijaros que se nos abre esta opción donde da a seleccionar un archivo. Si nosotros pulsásemos, pues se nos abriría una ventana emergente donde podemos elegir el archivo a apuntar, ¿vale? 00:29:27
Otra opción que tenemos dentro de este elemento de entrada del fichero es poner un atributo justo después que se llama multiple, ¿vale? 00:29:41
Y esto permite que utilizando la tecla control añadamos más de un fichero dentro de esta opción, ¿vale? 00:29:53
Y por eso es necesario, cuando añadimos ese multiple, es necesario añadir en el atributo name los dos corchetes, ¿vale? 00:30:01
Para que él luego sepa que hay varios archivos dentro de esa variable archivo, ¿vale? 00:30:11
Que no se olvide, por favor. 00:30:18
Antes de guardar los cambios y hacer este operativo, también es importante que sepáis que en nuestro formulario, 00:30:21
Aquí arriba, donde definíamos el formulario, tenemos que guardar la etiqueta, o tenemos que poner el atributo en type, ¿vale? 00:30:29
Que es este. 00:30:38
Y lo completaremos con esta opción, multipar form data, ¿vale? 00:30:40
Que es necesario para juntar varios archivos. 00:30:46
Lo voy a poner con comentarios, ¿vale? 00:30:49
Este último atributo enc type es necesario para apuntar varios archivos, ¿vale? Que no se olvide, por favor. 00:30:50
Vale, ahora vamos a continuar haciendo una lista para que el usuario, por ejemplo, eleja elementos sobre esa lista, ¿vale? Voy a poner un par de saltos de línea, los pongo aquí. 00:31:11
que me está quedando un archivo muy largo 00:31:21
¿vale? 00:31:24
y esa opción va a ser por ejemplo para elegir 00:31:26
el país ¿vale? 00:31:28
entonces, dos puntos 00:31:33
para añadir esto 00:31:34
vamos a poner 00:31:37
una etiqueta que es la etiqueta 00:31:38
select ¿vale? esto nos va a abrir 00:31:41
una lista desplegable 00:31:43
y dentro de name 00:31:44
pondremos la variable país 00:31:46
¿vale? 00:31:49
y cerramos 00:31:51
Y fijaros que él automáticamente nos rellena con la etiqueta final del seller. 00:31:52
Y ahora, dentro del seller vamos a poner las diferentes opciones. 00:31:58
Entonces, la primera opción, eso lo hacemos con la etiqueta option, ¿vale? 00:32:03
Tal que así. Yo pondría aquí, por ejemplo, la primera opción España. 00:32:08
Y para darle valor a esa variable, pondría el valor Spain, ¿vale? 00:32:13
Es decir, cuando yo elija España, dentro de la variable país, dentro de la variable country, me aparecerá el contenido Spain, ¿vale? 00:32:18
Y ahora lo que voy a hacer es copiar esto, por ejemplo, unas 3 o 4 veces más, ¿vale? 00:32:30
Y voy a modificar los países, ¿vale? 00:32:37
Por ejemplo, EU, si ponemos Estados Unidos, Rusia, si ponemos Rusia, Italia, si ponemos Italia, Francia, si ponemos Francia, ¿vale? 00:32:41
Y fijaros que lo que nosotros vemos es aquí una opción, un desplegable, que al hacer clic, pues me deja elegir los diferentes países, ¿vale? 00:33:05
Estados Unidos, Italia, Francia, España, ¿vale? 00:33:14
Pero solo me deja elegir un país. 00:33:19
Si nosotros quisiéramos elegir varios, pues porque el formulario en vez de ser país, pues puede ser lo que sea, ¿cómo lo hacemos? 00:33:22
Pues muy sencillo. 00:33:30
En el select, lo primero que hacemos es añadir la etiqueta multiple, ¿vale? 00:33:32
Y fijaros que al añadir el multiple me ha parecido esto completamente diferente, ¿vale? 00:33:36
Y ya me deja elegir varios, ¿vale? 00:33:41
Dejando pulsado la tecla Control, ¿vale? 00:33:44
Si dejo la tecla Control, pues fijaros que aquí tengo España, Estados Unidos y Rusia. 00:33:47
Y ahora elijo también Italia. 00:33:51
Y ahora elijo también Francia. 00:33:52
Y deselecciono Estados Unidos, ¿vale? 00:33:54
Pero, para hacerlo correctamente, no solo hay que hacer eso, sino que también en el nombre de la variable tenemos que añadir dos corchetes, ¿vale? 00:33:57
Igual que hacíamos con el archivo, ¿vale? 00:34:06
Ok. 00:34:12
Y vamos a poner dos saltos de línea más aquí. 00:34:12
y vamos al último elemento de entrada de que el contenido del formulario que va a ser un 00:34:15
elemento de comentario y va a ser un elemento de texto y vamos a poner como nombre de esa 00:34:25
variable va a ser el mensaje esa va a ser el nombre de la variable y ahora 00:34:36
Lo que vamos a poner es el número de filas y el número de columnas que queremos que tenga ese elemento 00:34:42
Con los atributos rows y columns, ¿vale? 00:34:50
Pues 10 filas por 80 columnas, ¿vale? 00:34:53
Y cerramos 00:34:57
Y fijaros que me aparece este elemento donde yo podría introducirte 00:34:58
¿Vale? 00:35:05
Eso en cuanto a elementos para añadir contenido es formulario, ¿vale? 00:35:08
Ahora vamos a empezar a añadir botón. 00:35:13
Entonces, vamos a añadir un primer botón, que va a ser el botón de envío de datos. 00:35:16
Ese botón se pone también con el atributo, con la etiqueta, perdón, input, ¿vale? 00:35:24
Solo que ahora en el atributo type lo que vamos a poner es un submit, ¿vale? 00:35:29
Y aquí le vamos a poner un nombre de esa variable, un name, ¿vale? 00:35:35
Que va a ser enviar para bajar datos. 00:35:43
Y por último, un valor que va a ser el texto que aparezca encima del botón. 00:35:48
En este caso va a ser dale y envía, por una exclamación final. 00:35:53
Y fijaros que me aparece aquí el botón dale y envía, ¿vale? 00:36:00
Voy a poner saltos de línea aquí para que quede más centradito, ¿vale? 00:36:04
Y le doy, ¿vale? 00:36:11
Y fijaros, interesante, ¿veis el navegador? 00:36:16
Me está dando un error, ¿por qué? 00:36:19
Pues porque yo en el campo nombre había puesto el atributo require 00:36:22
y como no he puesto contenido, cuando yo le doy a enviar me dice 00:36:28
oye, completa este campo, que es un campo requerido. 00:36:32
Entonces, si yo pongo texto, ahora sí me deja enviarlo, ¿vale? 00:36:36
Ah, pues no, no me deja enviarlo. ¿Por qué? Porque también lo había puesto en el password, ¿vale? 00:36:44
Ponemos contraseña y ahora sí, ¿vale? Me da un error, pero porque no está habilitado el posteo, ¿vale? 00:36:48
Pero bueno, la idea que veis es que se puede enviar, ¿vale? 00:36:56
vale, voy a volver a cargar la web 00:37:02
que si no se queda bloqueada 00:37:07
un segundito, creo que 00:37:09
la estáis viendo 00:37:17
vale 00:37:19
pues continuamos, vamos a añadir 00:37:22
un botón más, vamos a añadir 00:37:25
un botón, por ejemplo 00:37:27
para limpiar todo el contenido 00:37:29
del formulario, vale 00:37:31
imaginaros que hemos puesto contenido y cuando lo tenemos todo escrito 00:37:33
nos damos cuenta de que está todo mal, que lo queremos borrar 00:37:35
vale, entonces 00:37:37
esto sería, para no hacernos un lío 00:37:39
Voy a poner aquí comentario, botón de envío de datos, ¿vale? 00:37:41
Aquí voy a poner otro comentario que va a ser botón para reseteo de datos, ¿vale? 00:37:48
¿Y cómo se pone este botón? 00:37:56
Pues se pone poniendo de nuevo la etiqueta input, ¿vale? 00:38:00
Pero en el tipo, en vez de poner submit, vamos a poner reset, ¿vale? 00:38:03
Como nombre de la variable, esto no es realmente muy importante para botones, pero bueno, siempre es bueno ponerlo, limpiar, barra baja campo, ¿vale? 00:38:09
Y como value, que es el texto que va a aparecer en el botón, vamos a poner limpiar formulario, ¿vale? 00:38:16
Y ahora cerramos la etiqueta y fijaros que aparece aquí el contenido, ¿vale? 00:38:26
Entonces, si yo ahora seleccionara una fecha, un valor, marcara todo esto como yo quisiera, ¿vale? 00:38:32
Yo pusiera aquí valores, como estáis viendo, ¿vale? 00:38:40
Y le doy a limpiar formulario. 00:38:43
Fijaros que todo vuelve al estado de fecha, ¿vale? 00:38:50
¿Qué más cositas? 00:38:56
Botones genéricos, ¿vale? 00:38:57
Los botones genéricos hay que configurarlos. 00:39:00
No vamos a entrar en eso ahora mismo porque no estamos haciendo envío de datos, ¿vale? 00:39:02
Si podemos, avanzaremos esto al final del curso. 00:39:10
Pero explico ahora cómo hacer, cómo introducir botones genéricos. 00:39:13
Porque lo bueno de los botones genéricos es que son más personalizables, ¿vale? 00:39:17
Lo que es la estética, quiero decir. 00:39:23
Entonces, ¿cómo lo hacemos? 00:39:25
Pues añadimos otro input, ¿vale? 00:39:26
Y en el tipo, en vez de poner submit o poner reset, vamos a poner tipo button, ¿vale? 00:39:28
en el nombre de la variable botón 00:39:34
genérico, ¿vale? 00:39:37
siempre sencillo, y como valor 00:39:39
los botón 00:39:41
genérico 00:39:43
¿vale? y fijaros que aparece aquí 00:39:45
este botón 00:39:49
¿vale? y otra forma 00:39:50
de meter botones genéricos 00:39:56
es utilizando la etiqueta 00:39:58
button, ¿vale? 00:39:59
dentro de button ponemos un tipo 00:40:02
que hay que volver a poner button 00:40:04
¿vale? 00:40:06
y ponemos un nombre 00:40:06
de la variable 00:40:09
que va a ser 00:40:10
los patos de otra vez 00:40:11
¿vale? 00:40:13
y lo bueno de este botón 00:40:15
es que si yo ahora aquí pongo un texto 00:40:18
digo, este es 00:40:20
un botón 00:40:22
muy personalizable 00:40:23
¿vale? fijaros que conforme 00:40:26
yo voy editando eso, el texto de aquí también 00:40:28
se me personaliza y yo incluso 00:40:30
podría poner parte de este 00:40:32
texto en negrita 00:40:34
por ejemplo podría poner personalizable en negrita 00:40:36
y veis aquí como aparece la palabra personalizable en negrita 00:40:43
bueno pues hasta aquí la parte de formularios 00:40:48
como veis es muy extensa porque con los formularios hay muchos campos 00:40:54
y se pueden hacer muchas cosas 00:40:57
pero bueno yo creo que con eso es más que suficiente 00:40:59
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
142
Fecha:
1 de diciembre de 2020 - 19:58
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
41′ 04″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
119.48 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid