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 28 de diciembre de 2020 por Amadeo M.

127 visualizaciones

Más información Transcripción

Descargar la transcripción

Bueno, los formularios es uno de los elementos más importantes para pasar información de una página a otra, o a servidores, base de datos, etc. 00:00:00
Entonces sirven para recoger información del usuario. 00:00:10
Y vamos a ver un ejemplo. 00:00:14
La etiqueta principal es la etiqueta form. 00:00:17
Y form, que es esta etiqueta que finaliza aquí, tiene varios parámetros que son habituales. 00:00:19
Acción. 00:00:25
¿A dónde va a ir este formulario? 00:00:27
este formulario que después analizaremos 00:00:28
que está aquí, a dónde lo va a procesar 00:00:30
quién va a procesarlo 00:00:32
en este caso lo va a procesar un fichero 00:00:33
que se llama ejemplo.php 00:00:35
que es un programa en lenguaje PHP 00:00:37
que va a mostrarnos 00:00:40
esta información, no va a hacer mucho más 00:00:42
¿y qué método vamos a utilizar? 00:00:44
¿método get? 00:00:47
¿o método post? 00:00:48
ya veremos la diferencia 00:00:51
posteriormente, que solamente la vamos a 00:00:52
apreciar de verdad cuando estemos trabajando con un 00:00:54
servidor web 00:00:56
Lo siguiente que ponemos es un párrafo 00:00:57
Ha puesto aquí un párrafo 00:01:01
Con una información que es nombre 00:01:03
Y una entrada, un input 00:01:04
De tipo texto 00:01:08
Que tiene un nombre y un tamaño 00:01:10
Es esto de aquí 00:01:13
Esto que aparece aquí es esa entrada 00:01:14
Después el año de nacimiento 00:01:16
En el cual ha puesto un input de tipo number 00:01:18
Y un nombre que es nacido 00:01:22
Y que tiene como valor mínimo 1.900, que es este de aquí. 00:01:25
Otro párrafo en el cual indica sexo, en el cual está establecido un radio, un input de tipo radio, en el cual vemos que son unos botoncitos, en el cual tendremos que elegir o uno u otro. 00:01:31
Los tipos radios es lo que maneja, uno u otro. 00:01:44
Y ha puesto un nombre, el mismo para ambos, y un valor. 00:01:47
En el caso de hombre ha puesto una H, en el caso de mujer ha puesto una M. 00:01:50
Y ya finalmente ha puesto otro párrafo en el cual hay dos inputs. 00:02:00
Un input de tipo submit, el de tipo envíalo y procesa este formulario, 00:02:03
y otro de reset para borrar toda la información. 00:02:09
Voy a escribir, aquí está nuestro programa funcionando, con lo cual voy a escribir exactamente esto de aquí. 00:02:12
podría escribirlo aquí directamente y verlo 00:02:18
pero me parece más interesante 00:02:20
abrir este formulario 00:02:22
en otra ventanita, en esta ventanita 00:02:23
y aquí trabajar en él 00:02:26
entonces vamos a poner 00:02:28
Ana López como nombre 00:02:30
aquí ya vemos que como es 00:02:32
un tipo número, me ha salido esto de aquí 00:02:34
vamos a ver que aparece, efectivamente el menor era 00:02:36
1900, entonces yo lo que voy a 00:02:38
poner aquí es 1987 00:02:40
por ejemplo, y que es 00:02:42
mujer, bien 00:02:44
Voy a enviarlo 00:02:46
Y efectivamente 00:02:47
Este programa PHP 00:02:50
Este programa PHP 00:02:51
Al cual ha ido a trabajar 00:02:53
Ese programa PHP 00:02:55
Nos ha procesado este fichero 00:02:57
Y ha sabido recoger la información 00:02:59
Que nosotros le hemos enviado 00:03:02
¿De acuerdo? 00:03:04
Ha sabido manejarlo perfectamente 00:03:06
Como hemos puesto el método get 00:03:08
Toda esa información 00:03:12
La hemos pasado de esta manera 00:03:13
El nombre del fichero que va a procesarlo 00:03:15
Y hemos puesto nombre es igual a Ana López 00:03:18
Ya vemos que el espacio lo ha puesto con un más 00:03:20
Y nacido en el 87 00:03:23
Y el campo HM vale M 00:03:29
Con toda esta información han sabido manejar esto 00:03:32
Vamos a probar si aquí directamente tocáramos algo 00:03:35
Arturo 00:03:37
Vamos a escribir bien 00:03:39
Arturo 00:03:41
Y de apellido 00:03:42
Mora 00:03:44
Nacido en 00:03:46
1974 00:03:49
Ahí estoy escribiendo muy mal 00:03:51
Pero bueno 00:03:54
Y el de tipo 00:03:55
Hombre 00:03:59
Voy a darle aquí directamente al enter 00:03:59
Y efectivamente también 00:04:01
Ha pasado esta información 00:04:04
El método get 00:04:06
Toda la información la pasa a través de la url 00:04:07
Del navegador 00:04:11
¿Vale? ¿Qué nos ocurre con el método POST? Que aquí no lo tenemos implementado en este momento. Que toda esta información estaría oculta, pasaría internamente sin que el navegador la viera. Por lo tanto, generalmente en las aplicaciones lo que hacemos es utilizar el método POST. 00:04:12
Voy a volver a mi formulario, voy a escribir algo 00:04:30
Simplemente quiero que prueben una cosa 00:04:33
Y es que este batón que se llamaba de tipo reset 00:04:36
Lo que hace es limpiarme el formulario para poder escribir otra vez en él 00:04:40
Bueno, voy a volver poco a poco a donde estábamos 00:04:46
Aquí donde teníamos esta plantilla ya se ha cargado 00:04:52
¿De acuerdo? Con lo cual ya vemos cómo funciona un formulario. 00:04:57
Bien, ¿qué datos tenemos? Bueno, pues uno de los atributos que tenemos importantes es type. 00:05:05
Y hay un montón de types posibles, ¿de acuerdo? 00:05:09
Típicamente submit para enviar, reset para limpiar o reiniciar nuestro formulario, text para texto, 00:05:14
password para contraseña, simplemente es como un test pero que no estamos viendo lo que grabamos, 00:05:21
Se escriben unos asteriscos 00:05:25
File para poder enviar imágenes 00:05:28
Ya veremos que el for también tiene que adecuarse 00:05:30
Para poder enviar una imagen 00:05:32
Image del mismo modo 00:05:33
Y hidden o oculto 00:05:36
Que no se va a visualizar 00:05:38
En HTML5 00:05:41
Ya se han añadido un montón 00:05:43
Y poco a poco se irán añadiendo más 00:05:44
Más específicos 00:05:46
Por ejemplo el botón 00:05:47
Y no es un input 00:05:48
Es una etiqueta 00:05:52
es una etiqueta button, también se le puede poner como input 00:05:53
pero también es etiqueta 00:05:56
también hay una etiqueta, un atributo que es number 00:05:57
otro de búsqueda, search 00:06:00
uno de teléfono, otro de dirección web 00:06:01
url, otro de correo 00:06:04
email, que ya comprueba que lo que enviamos 00:06:06
es de tipo email, que tiene su arroba 00:06:08
y sus campos correspondientes 00:06:10
date, para las fechas completas 00:06:11
time, para las horas 00:06:13
color, range, para un rango 00:06:15
y ahora ya se han añadido últimamente 00:06:17
pues month de mes 00:06:20
week de semana y date time local 00:06:22
para hora local 00:06:24
ya vemos que hay un montón 00:06:25
de tipos, son todos muy interesantes 00:06:27
a día de hoy, por aquí en los apuntes 00:06:30
podemos ir a ver información 00:06:32
de algunos de ellos, yo no voy a ver todos 00:06:34
en este vídeo 00:06:36
name le da nombre 00:06:36
al input 00:06:39
o al control en el que estoy 00:06:41
en los 00:06:43
lo habitual 00:06:45
es que no se repitan, pero en los radios 00:06:48
Bueno, los botones de tipo radio, estos que tienen redondelito, sí se repiten para poder seleccionar el que ha sido elegido. 00:06:50
Algo va a ser parecido en los checkbox. 00:07:02
Ya veremos que el problema es que en los checkbox podemos elegir varios y por tanto los problemas que van a requerir es realmente un array de elementos pasados. 00:07:05
Bueno, value es el valor que puede tomar 00:07:15
Cualquiera de los botones inicialmente 00:07:18
El atributo require 00:07:22
Lo que significa es que es obligatorio rellenarlo 00:07:24
¿De acuerdo? 00:07:26
Si yo intento enviar este formulario 00:07:27
Pues me dice que tengo que completar esto 00:07:29
No me deja pasar este formulario 00:07:31
Sin grabar algo ahí 00:07:35
¿De acuerdo? 00:07:38
Placeholder nos permite introducir texto 00:07:41
Dentro de la parte a escribir 00:07:43
Por ejemplo, aquí hacemos un input, decimos el nombre, el size, y después decimos, escribas esos dos apellidos. 00:07:45
Entonces, nos muestra ese mensaje que en el momento que empecemos a escribir, desaparece. 00:07:52
Si borramos el mensaje, vuelve a aparecer. 00:07:57
Size nos indica el tamaño de la información que queremos rellenar. 00:08:01
Y también podemos limitar cuántos caracteres queremos introducir en cualquiera de los elementos. 00:08:06
Con un max length o con un min length. 00:08:11
vamos a escribir un usuario 00:08:15
y ya vemos que aunque yo sigo tecleando 00:08:18
no se ve, pero yo sigo tecleando 00:08:20
de ahí no estoy pasando 00:08:21
bien, disable 00:08:22
significa que permite 00:08:26
deshabilitar el control 00:08:28
lo cual quiere decir que no podemos 00:08:29
entrar en él de ninguna manera 00:08:31
y se ve un poquito ahí como diluido 00:08:32
como dice 00:08:36
como nebuloso 00:08:36
se ve el control correspondiente 00:08:39
read only significa un texto 00:08:41
que no se puede modificar 00:08:44
yo puedo entrar en él 00:08:45
pero yo estoy tecleando la misma y no puedo teclear 00:08:47
mientras que este tampoco 00:08:49
este de aquí tampoco 00:08:51
ninguno de los dos textos se me permite 00:08:53
cambiar, en un caso 00:08:55
tiene playholder y en otro value 00:08:57
directamente 00:08:59
bueno, podemos 00:09:00
ir poniendo orden a los elementos 00:09:03
a los que yo voy 00:09:06
y cuando yo voy con tab o sit tab 00:09:06
voy con tab saltando 00:09:09
pues efectivamente o con sit tab va en orden 00:09:10
¿De acuerdo? Vale. Access Key permite ir a un campo directamente con una tecla. Entonces si yo pincho aquí Alt y la tecla, imagínense que yo estoy aquí y digo Alt U, pues me pongo con la U. Es algo que puede ser interesante para algún tipo de texto. 00:09:14
y después los input 00:09:35
pues tenemos todos los que hemos nombrado 00:09:40
y en el caso de los button 00:09:42
pues ya vemos como es el aspecto 00:09:45
que tiene, que ocurre que a veces 00:09:47
esto se quedaba un poco corto porque value 00:09:48
siempre es de tipo text 00:09:50
entonces a veces queríamos meter en un button 00:09:52
una imagen, en un botón 00:09:55
una imagen, entonces para eso se 00:09:56
creó la etiqueta button 00:09:58
que button permite 00:10:00
meter una imagen 00:10:02
dentro o cualquier elemento 00:10:04
cualquier elemento de cualquier tipo, como si es una tabla 00:10:06
lo que queramos meter aquí dentro 00:10:09
por supuesto 00:10:11
los buttons también pueden ser submits 00:10:13
para enviar directamente el formulario 00:10:14
¿de acuerdo? pueden ser perfectamente 00:10:17
de ese tipo 00:10:19
los inputs 00:10:22
de tipo reset, ya hemos visto que limpian 00:10:24
toda la información 00:10:27
y vamos a ver si hay algo 00:10:28
interesante por aquí ya que nos interese 00:10:30
y por supuesto podemos utilizar 00:10:33
dentro de un input 00:10:35
Pues alguno de aquellos métodos que vimos 00:10:36
Para ejecutar pequeñas funciones 00:10:39
Como onclick 00:10:40
Onclick en este caso va a llamar 00:10:42
A una función que se llama mensaje 00:10:44
Que es un pequeño javascript 00:10:46
Que está aquí, la función mensaje 00:10:48
Se le pasa un texto y va a mostrarnos una ventanita 00:10:50
Con ese texto, vamos a pinchar 00:10:52
Y efectivamente dice 00:10:54
Ha pulsado el botón, que es lo que ponía aquí 00:10:56
Lo mismo lo podía hacer 00:10:58
Un poco más bonito con este botón de aquí 00:11:01
Perfectamente 00:11:02
los tipos text 00:11:04
pues ya vemos que podemos escribir algo 00:11:07
podemos hacer un preholder 00:11:09
los passwords, voy a escribir aquí algo para que lo veamos 00:11:10
y efectivamente poner asterisquitos o puntos 00:11:13
los números, pues solo me 00:11:15
puede permitir escribir números, yo estoy escribiendo 00:11:17
una e y la e como coincide que puede ser 00:11:19
un número de estos decimales 00:11:21
largos, pues me lo han permitido 00:11:23
pero si escribo ty o lo que sea 00:11:25
pues no me lo admite 00:11:27
bueno, hay más características 00:11:28
de los números, search para las 00:11:31
búsquedas, no tiene mucho interés 00:11:33
tampoco, teléfonos 00:11:35
urls, correos 00:11:37
electrónicos, este quizá tiene algo más 00:11:39
voy a escribir amadeomora 00:11:41
arroba 00:11:43
gmail, por ejemplo 00:11:45
escribirá esto y finalizará en enviar 00:11:47
pues efectivamente 00:11:49
me la está emitiendo, de acuerdo, en el momento 00:11:51
que ha visto el arroba, después 00:11:53
las cajas de texto para escribir 00:11:55
cajas de texto para fechas 00:11:57
en las cuales pues yo aquí 00:11:59
puedo pinchar aquí y ver 00:12:01
mi información 00:12:03
o mes, simplemente mes 00:12:05
en el cual me aparecen los meses correspondientes 00:12:07
etc, etc 00:12:09
por supuesto aquí lo indica y es verdad 00:12:10
cada navegador puede estar o no adecuado 00:12:12
totalmente a esto, la mayoría sí 00:12:15
¿de acuerdo? la hora 00:12:17
muy interesante lo de la hora 00:12:19
o incluso 00:12:21
información completa 00:12:23
es decir yo a las 16.46 00:12:25
me hago la información 00:12:28
¿vale? 00:12:30
los checkbox lo que hacen es pinchar o no una casilla 00:12:30
podemos decirle checked para decir que está marcada o que no 00:12:35
¿qué ocurre con esto? que hay veces que están agrupadas 00:12:39
cuando están agrupadas pues ya veremos que según el lenguaje 00:12:42
se le suele poner aquí alguna característica aquí ante la comilla 00:12:44
para indicar que todos son del mismo grupo 00:12:48
los radios que ya los hemos visto pues tienen la característica 00:12:50
cuando tienen el mismo nombre como es el caso 00:12:54
en que si yo pincho otra desaparece esta 00:12:56
porque solo puedo seleccionar una de ellas 00:12:58
los colores 00:13:01
puedo elegir colores 00:13:05
cualquier color 00:13:07
y enviar 00:13:07
porque lo que envía es su código de color 00:13:08
que es de este formato 00:13:10
en el cual el formato se llama RGB 00:13:11
Red, Green, Blue 00:13:14
de tipo rango 00:13:16
miren que bonito 00:13:20
una línea que se puede desplazar 00:13:21
y de tipo file 00:13:23
que ya veremos que además nos toca también cambiar la etiqueta form 00:13:27
pero que nos permite manejar y pedir un fichero para subir 00:13:30
voy a ver el código fuente de este marco 00:13:35
bueno, aquí es que realmente solo ha introducido el input 00:13:38
solamente ha introducido el input, no ha introducido lo que yo quería ver 00:13:43
que era el formulario completo 00:13:47
entonces no nos va a servir para lo que queríamos ver 00:13:49
bueno, por supuesto tenemos también input type image 00:13:51
una imagen, entonces aquí imagínense 00:13:55
que esta es la imagen 00:13:58
que tenemos, y además tiene una característica 00:14:00
que nos devuelve 00:14:02
la posición en que yo he 00:14:03
pulsado el punto, eso es una posibilidad 00:14:05
que yo tengo dentro de 00:14:08
esta etiqueta, los campos 00:14:10
hidden, este campo dice 00:14:12
input type hidden, nombre 00:14:13
valor pepito, no lo vemos por 00:14:16
ningún sitio, pero sin embargo está pasando 00:14:18
de un sitio a otro, vale 00:14:20
esto cuando aprendan 00:14:21
en desarrollo web 00:14:23
aprendan a pasar formularios, pues ya verán 00:14:25
cómo se recoge exactamente igual 00:14:27
¿de acuerdo? se guarda y ya está 00:14:29
tenemos los campos textarea 00:14:31
los campos textarea que son campos de texto 00:14:33
generalmente en casi todo navegador se pueden ampliar 00:14:35
o modificar en tiempo real 00:14:37
¿de acuerdo? pero yo puedo indicarles 00:14:39
por defecto filas y columnas que pueden 00:14:41
tener ¿vale? 00:14:43
y por supuesto se puede aplicar 00:14:45
playholder, se puede aplicar cualquiera de las etiquetas 00:14:47
que hemos visto antes 00:14:49
después tenemos los 00:14:50
select, y los select 00:14:52
lo que nos permiten 00:14:54
es seleccionar en lista de desplegables 00:14:56
el elemento correspondiente 00:14:59
en este caso 00:15:00
1 valdrá 1 00:15:02
en este caso 00:15:05
2 valdrá 2 00:15:06
pero podría ocurrir como aquí donde 00:15:08
1 vale 1 en letras 00:15:10
y 2 vale 2 de esta manera 00:15:12
y 3 vale 3, que eso es lo que 00:15:14
recogerá cualquiera de estos valores 00:15:16
vamos a darle al 2 00:15:18
y efectivamente es 2, en este caso 2 00:15:19
de esta manera 00:15:22
podemos cambiar la selección 00:15:24
por defecto va al primero 00:15:27
pero podemos decir que el que esté seleccionado 00:15:28
automáticamente sea el correspondiente 00:15:29
al que tenga la etiqueta selected 00:15:31
bueno, aquí tenemos muchos de ellos 00:15:33
muchas posibilidades 00:15:39
y lo más importante 00:15:41
es que también podemos decir 00:15:42
una selección 00:15:45
en la cual se muestra solo una línea 00:15:46
o en este caso que vamos a mostrar 00:15:49
las tres primeras líneas 00:15:50
en este tipo 00:15:52
nada más dentro de estos casos tenemos múltiple 00:15:54
y entonces múltiple lo que nos indica es que podemos elegir varios casos de estos 00:15:57
por ejemplo 2 y con el control, con el carácter pensando control y pensando ratón 00:16:02
podemos elegir el 2 o el 4, el 2 y el 4 lo vemos aquí 00:16:09
en este caso solo podemos elegir 1, no podemos marcar 2 de ninguna manera 00:16:13
entonces ya tenemos este de aquí 00:16:17
y después existe una etiqueta para agrupar 00:16:20
Entonces, si nosotros viéramos cómo queda esto 00:16:22
Pues efectivamente queda grupo 1 estar de aquí 00:16:25
Grupo 2 estar de aquí, ¿de acuerdo? 00:16:27
Fieldset es para hacer estos cuadraditos 00:16:30
O estos, agrupar la información por trozos 00:16:32
Entonces, bueno, muchas veces puede ser muy interesante 00:16:34
Porque tenemos el campo Legend 00:16:37
Que nos dice una pequeña etiqueta 00:16:38
Para un grupo de entradas dentro de nuestro formulario 00:16:41
Label es muy interesante porque asocia 00:16:45
a un elemento 00:16:48
una etiqueta 00:16:50
por ejemplo, tenemos esto de aquí 00:16:53
si yo pincho en casilla 1 00:16:55
vemos que no pasa nada, pincha una vez 00:16:56
no ha hecho nada, pincho 2, ya pues sí 00:16:59
seleccionamos, pero no es nuestra intención 00:17:01
sin embargo, si estamos aquí con label 00:17:03
que ocupa todo esto, si yo pincho 00:17:05
en casilla, vemos que ya 00:17:07
se ilumina o no se ilumina 00:17:08
el check correspondiente 00:17:11
por ejemplo, tenemos nombre 00:17:13
pues yo estoy en nombre, y aunque yo pinche 00:17:15
aquí no pasa nada 00:17:17
si yo tengo esta información de esta manera 00:17:18
yo pincho el nombre y ya se me ha puesto el cursor ahí 00:17:20
para escribir 00:17:23
hay veces que podemos hacer 00:17:23
que esto sea 00:17:26
la etiqueta para el campo 00:17:28
que se llama casilla 1 00:17:31
entonces yo doy aquí 00:17:32
el campo para casilla 1 00:17:34
bueno, las etiquetas son muy interesantes 00:17:36
muy interesantes 00:17:39
bueno 00:17:41
esto es un poco todo lo que queríamos 00:17:44
contar de todos los formularios 00:17:46
y realmente su interés de verdad cuando estamos con un lenguaje de programación 00:17:48
que va a obtener estos datos y va a procesarlos. 00:17:51
Idioma/s:
es
Autor/es:
Amadeo Mora
Subido por:
Amadeo M.
Licencia:
Dominio público
Visualizaciones:
127
Fecha:
28 de diciembre de 2020 - 14:53
Visibilidad:
Público
Centro:
IES CLARA DEL REY
Duración:
17′ 58″
Relación de aspecto:
1.78:1
Resolución:
1364x768 píxeles
Tamaño:
113.02 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid