Como crear formularios en paginas web



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 página 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 página 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 página 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 básicos

  • type: Define el tipo de información a capturar, en este caso vamos a usar text, pero existen otros que veremos en otro artículo.
  • name: Define un nombre para este dato, esto será muy importante para la página 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
    <form action="index.html" method="post">
       <input type="text" name="codigo" value="">
    </form>

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

   <form action="index.html" method="post">
       <label>Codigo</label>
       <input type="text" name="codigo" value="">
   </form>

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.

     <form action="index.html" method="post">
       <label>Codigo</label>
       <input type="text" name="codigo" value="">
       <input type="submit" value="Guardar">
     </form>

Intenta agregar el código anterior en la una página web y prueba ingresando 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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *