Saltar navegación

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

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

109 visualizaciones

Tutorial HTML formularios

Más información Transcripción

Descargar la transcripción

Hola a todos. Este vídeo lo voy a realizar para explicar un poquito lo que es la creación de páginas web, pero a través de formularios. 00:00:05
Vamos a repasar con Visual Studio Code, aquí lo tengo abierto, y vamos a introducir cada una de las etiquetas para ir creando distintos componentes de un formulario, 00:00:17
y que veáis cómo se hace. Para algunos será muy trivial, para otros no lo será tanto. 00:00:27
Bien, decir que los formularios se utilizan para recoger datos de los usuarios. Nos van a servir para realizar un pedido de una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir preguntas, etc. 00:00:32
Entonces, una vez el usuario rellena los datos y pulsa el botón para enviar el formulario, se arrancará un programa que recibirá los datos y hará el tratamiento correspondiente. 00:00:46
Entonces, vamos a ver cómo crear un formulario, cómo insertar campos, cómo botones de formulario y la parte de tratamiento de datos y si nos da tiempo, pues un poquito de JavaScript. 00:00:53
Entonces, con respecto a formulario, primero necesitamos de las etiquetas form y variclina form, que ya las tenemos aquí, y dentro voy a ir insertando cada uno de los componentes que puede tener un formulario. 00:01:03
Entonces, lo primero que vamos a hacer, aparte de estas etiquetas form, que lo que van a hacer es encerrar todos los contenidos del formulario, o sea, los botones, los cuadros de texto, las listas desplegables y la etiqueta input. 00:01:20
Esta etiqueta input es la que va a permitir definir varios tipos diferentes de elementos, botones, cuadros de texto. 00:01:33
Entonces, un formulario nos va a permitir enviar datos al servidor, pero para procesar estos datos se utiliza un lenguaje de servidor, claro. 00:01:39
Entonces, vamos a ver qué atributos tiene la etiqueta form. Tendríamos el atributo ID, que sería el identificador, el action, que sería la URL que se va a cargar de procesar esos datos. Bueno, aquí lo hemos puesto ejemplo.php. Luego tenemos el método en el que se van a enviar los datos, que será o post o get. 00:01:48
Y, bueno, pues tenemos también en type, hace, pero bueno, básicamente serían esos. Bien, una vez que tenemos, bueno, todo el mundo sabe la diferencia de get y post, ya lo vimos, pues, en la videoconferencia, en el que con post podemos enviar con mayor cantidad de datos y es más seguro que con get, puesto que se ven en la URL, etc. 00:02:12
Entonces, vamos a hacer el primer formulario y sería pues, vamos a introducir pues dos campos input. Entonces, vamos a ponernos aquí dentro y vamos a poner entonces, bien, importante la indentación para saber qué componente está dentro de cada cual. 00:02:34
Entonces, si yo ejecuto esto y le doy a control F5, vamos a darle aquí, básicamente lo que voy a tener no es nada más que el texto que aparece previo, que sería introduzca su nombre, aparece previo a los dos tipos de campos. 00:02:55
Uno que sea todo campo viene con la palabra input y luego el tipo de campo. 00:03:22
Entonces, el campo puede ser de tipo text. 00:03:27
Estos campos de input es porque vamos a poder introducir datos en él. 00:03:30
O incluso, pues, hacer un evento sobre ellos, etcétera. 00:03:34
Aquí tenemos el input type de tipo texto en el que se va a llamar nombre y va a estar vacío. 00:03:39
Y ya vemos que los atributos son name y value. 00:03:45
Y luego tenemos input type subnet, que sería cuando queremos enviar el formulario. Y eso es lo que nos va a aparecer en el propio formulario. El campo de texto y luego el botón de enviar. 00:03:48
Bien, pasamos a complicar esto un poquito más. ¿Qué tenemos en cuanto a, bueno, primero decir que aparte de value, que es el valor inicial del control, y el type, pues podemos tener más atributos. 00:03:57
Un atributo puede ser SRC, que permite crear botones con imágenes. Step, que sería llave en HTML5, que permite establecer la cantidad de valores posibles dentro de un rango. Autofocus, para que aparezca el foco en el mismo, dentro del campo. Required, que sería también de HTML5, en el que tendríamos que es un atributo que se aplica a un campo de entrada y obliga al usuario a escribir un valor en dicho campo. 00:04:14
Y luego Placeholder, que muestra un texto por defecto. Yo puedo poner aquí Placeholder, él ya me lo indica aquí Visual Studio Code, es muy listo, y ponemos que añade algo. 00:04:44
Y veis que cuando yo ejecuto la página, pues aparecerá, porque lo he puesto en el texto, sí. Aquí le damos y aparece aquí, bueno, como he puesto la ñ, pues me va a parecer mal, bueno, pero si veis aquí aparece el texto dentro del campo para que yo escriba lo que sea. 00:05:06
Si ahí ponemos el nombre, pues tendremos que escribir el nombre. 00:05:39
¿Qué más? Pues aparece también autocomplete, también para HTML5, ALP, que utiliza cuando el tipo es una imagen y no se puede cargar en la interfaz del usuario, etcétera, etcétera. 00:05:44
Tiene bastantes, incluso height, width. 00:05: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:
109
Fecha:
18 de diciembre de 2024 - 13:33
Visibilidad:
Público
Centro:
IES CIFP a Distancia Ignacio Ellacuría
Duración:
06′ 02″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
166.53 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid