1
00:00:00,690 --> 00:00:07,790
Dentro del módulo de lenguaje de marcas vamos a ver hoy el código HTML aplicado a un formulario web.

2
00:00:08,289 --> 00:00:12,289
Aquí tenemos el ejemplo de un formulario, vamos a ver los elementos que contiene.

3
00:00:12,810 --> 00:00:21,089
Tenemos un título arriba y después tenemos dos áreas delimitadas por cuadrados y además por un título.

4
00:00:21,710 --> 00:00:24,649
Son datos de la incidencia y botones de reset y envío.

5
00:00:24,649 --> 00:00:29,989
En la primera sección lo que vemos son cuatro datos que el usuario debe rellenar.

6
00:00:29,989 --> 00:00:52,229
Por ejemplo este sería el usuario, aquí tenemos una lista desplegable donde tenemos que elegir una de las opciones, aquí tenemos un text area donde podemos poner por ejemplo las observaciones o lo que sea, la contraseña que tiene la particularidad de que no se ve el texto al escribir y tenemos después los botones de resetear y de enviar.

7
00:00:52,229 --> 00:01:00,229
Si damos a resetear, se borran los datos previamente introducidos y si damos a enviar, todos los datos que hemos introducido, si son correctos, se enviarán.

8
00:01:04,250 --> 00:01:14,489
Para ver el código HTML que ha generado este formulario, podemos pulsar con el botón derecho, ver código fuente y acceder al código HTML.

9
00:01:16,879 --> 00:01:25,319
Este sería el código HTML, empezando por la etiqueta HTML y vamos a fijarnos especialmente en la parte del formulario que es la que estamos hablando.

10
00:01:26,319 --> 00:01:29,599
La etiqueta form es todo esto con todo su contenido.

11
00:01:30,379 --> 00:01:34,760
Si nos fijamos, hay dos atributos básicos en esta etiqueta, como es el ation.

12
00:01:35,340 --> 00:01:40,599
La etiqueta ation lo que hace es mandar los datos al servidor que le indiquemos.

13
00:01:40,599 --> 00:01:45,359
En este caso está vacío, porque no tenemos previsto ningún servidor que recoja esa información.

14
00:01:46,099 --> 00:01:49,560
Y después el método, que puede ser método get o post, normalmente.

15
00:01:49,799 --> 00:01:51,219
En este caso hemos elegido el get.

16
00:01:51,219 --> 00:01:56,780
Las dos áreas que hemos visto anteriormente son dos field sets

17
00:01:56,780 --> 00:01:59,299
Tenemos aquí el primero y aquí tenemos el segundo

18
00:01:59,299 --> 00:02:02,640
Cada uno de ellos tiene un título que es un legend

19
00:02:02,640 --> 00:02:07,400
El primero es datos de la incidencia y el segundo es botones de reset y envío

20
00:02:07,400 --> 00:02:10,419
Si nos fijamos en el primer field set

21
00:02:10,419 --> 00:02:16,099
Lo que vemos es que tenemos un input de tipo test para introducir el usuario

22
00:02:16,099 --> 00:02:26,719
Después tenemos una lista desplegable que le hemos dado a ese dato el nombre de departamento con tres posibles opciones que son informática, marketing y ventas

23
00:02:26,719 --> 00:02:35,520
Después tendríamos el text area, es decir, la zona de texto donde podemos explayarnos un poquito más escribiendo las observaciones o lo que queramos

24
00:02:35,520 --> 00:02:45,340
Y por último tenemos otro input más, en este caso es de tipo password, de manera que al escribir no va a ser visible las letras que estamos tecleando

25
00:02:45,340 --> 00:02:49,680
en el segundo field set simplemente tenemos dos botones

26
00:02:49,680 --> 00:02:55,039
el botón del tipo reset que lo que hace es borrar los datos que hemos introducido previamente

27
00:02:55,039 --> 00:02:56,539
por si queremos volver a empezar

28
00:02:56,539 --> 00:03:02,699
y el botón de tipo submit que lo que va a hacer es enviar los datos al servidor

29
00:03:02,699 --> 00:03:09,000
que hayamos indicado aquí en este atributo, aquí el atributo action