Curso HTML: Formularios en paginas web

2/Sep/2018 Curso-html

Los formularios se utilizan para capturar información, como en las pantallas de inicio de sesión o las pantallas de datos personales.

A pesar de que puedes capturar información usando HTML, no hay forma de guardarla o procesarla usando solo HTML, por eso los formularios se procesan con algún lenguaje de programación como PHP, sin embargo HTML es la base con la que se captura información.

Para crear un formulario utilizamos las etiquetas <form> </form> y dentro de ellas se colocan otras etiquetas para mostrar cuadros de textos, etiquetas, botones, etc. Existen dos atributos básicos en la etiqueta <form> action y method

Atributo action

Este define la pagina que va a procesar las entradas, cuando alguien hace clic sobre el botón guardar o enviar, los datos del formulario se envían a la pagina que definamos en este atributo para que los procese.

Atributo method

Este define el método que se usará para enviar los datos a la pagina que los procese, existen dos métodos GET y PUT.

El método get envía los parámetros a través de la URL o dirección web, añadiendo un signo ? y luego agrega los datos del formulario.

Usando el método GET en formularios HTML
Método GET

En cambio el método PUT envía los datos en una forma más discreta, en la que no podemos ver los datos que se envían de forma directa, solo pueden verse usando programas especiales.

Como capturar un texto usando formularios HTML

Ahora vamos a ver el elemento más común en todo formulario, y es un campo para capturar un texto. Para esto usamos la etiqueta <input>, esta etiqueta no necesita cerrarse y tiene 3 atributos basicos

  • type: Define el tipo de información a capturar, en este caso vamos a usar text, pero existen otros que veremos en otro articulo.
  • name: Define un nombre para este dato, esto será muy importante para la pagina que procese esta información
  • value: Es el valor para este campo, aquí se guarda lo que el usuario digite en el formulario, pero se puede usar también para proveer un valor predeterminado

Mostrar una caja de texto no es de mucha ayuda si no sabemos que hay que ingresar ahí, para eso se agrega una etiqueta que describa el contenido esperado en esa caja de texto y esto se hace con la etiqueta <label> </label>, veamos un ejemplo

Ahora el paso final es agregar un botón para poder enviar la información que agregamos en el formulario, esto se hace con la etiqueta <input> pero ahora el atributo type será submit. En este caso el atributo value se usa para dar una etiqueta a este botón.

Intenta agregar el código anterior en la una pagina web y prueba llenado datos y presionando el botón guardar, y luego cambia el método a get y observa las diferencias en la barra de direcciones de tu navegador

Elige tu siguiente tema

Versión en video



Ir a la barra de herramientas