1
00:00:05,530 --> 00:00:17,309
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.

2
00:00:17,730 --> 00:00:27,609
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,

3
00:00:27,609 --> 00:00:32,590
y que veáis cómo se hace. Para algunos será muy trivial, para otros no lo será tanto.

4
00:00:32,590 --> 00:00:45,549
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.

5
00:00:46,270 --> 00:00:53,409
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.

6
00:00:53,409 --> 00:01:03,490
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.

7
00:01:03,850 --> 00:01:20,709
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.

8
00:01:20,709 --> 00:01:32,730
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.

9
00:01:33,370 --> 00:01:38,969
Esta etiqueta input es la que va a permitir definir varios tipos diferentes de elementos, botones, cuadros de texto.

10
00:01:39,569 --> 00:01:48,930
Entonces, un formulario nos va a permitir enviar datos al servidor, pero para procesar estos datos se utiliza un lenguaje de servidor, claro.

11
00:01:48,930 --> 00:02:12,210
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.

12
00:02:12,210 --> 00:02:34,550
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.

13
00:02:34,550 --> 00:02:55,650
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.

14
00:02:55,650 --> 00:03:22,689
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.

15
00:03:22,689 --> 00:03:27,689
Uno que sea todo campo viene con la palabra input y luego el tipo de campo.

16
00:03:27,930 --> 00:03:30,250
Entonces, el campo puede ser de tipo text.

17
00:03:30,729 --> 00:03:34,150
Estos campos de input es porque vamos a poder introducir datos en él.

18
00:03:34,449 --> 00:03:38,650
O incluso, pues, hacer un evento sobre ellos, etcétera.

19
00:03:39,030 --> 00:03:44,990
Aquí tenemos el input type de tipo texto en el que se va a llamar nombre y va a estar vacío.

20
00:03:45,750 --> 00:03:48,669
Y ya vemos que los atributos son name y value.

21
00:03:48,669 --> 00:03:57,650
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.

22
00:03:57,650 --> 00:04:14,949
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.

23
00:04:14,949 --> 00:04:43,870
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.

24
00:04:44,949 --> 00:05:06,009
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.

25
00:05:06,009 --> 00:05:39,449
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.

26
00:05:39,449 --> 00:05:42,930
Si ahí ponemos el nombre, pues tendremos que escribir el nombre.

27
00:05:44,069 --> 00:05:57,230
¿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.

28
00:05:57,470 --> 00:06:01,670
Tiene bastantes, incluso height, width.