Saltar al contenido principal

Creación de Formularios (<form>)

Los formularios son la forma principal en que los usuarios interactúan con sitios web y aplicaciones web enviando información al servidor.

La etiqueta fundamental para crear un formulario es <form>. Al igual que <html> o <body>, <form> actúa como un contenedor que agrupa todos los elementos de entrada de datos (campos de texto, botones, menús desplegables) que los usuarios llenan y luego envían.

Atributos Principales de <form>​

Dos atributos fundamentales dictan cómo un formulario envía sus datos.

1. action​

El atributo action especifica el destino hacia el que se enviarán los datos del formulario una vez que el usuario presiona el botón "Enviar".

  • Puede ser una URL absoluta (es decir, una dirección web completa como https://www.misitio.com/procesar_login.php)
  • O una URL relativa (un archivo local en tu servidor como /procesar_login)
<form action="/procesar-formulario">
    <!-- Aquí van los campos de entrada -->
</form>

2. method​

El atributo method indica qué método HTTP utilizará el navegador para enviar los datos de este formulario al servidor especificado en action. Los dos métodos más comunes son GET y POST.

  • GET: (El predeterminado si no se especifica). Agrega los datos del formulario a la URL (como .../buscar?query=HTML) de forma visible. Es ideal para búsquedas o datos no confidenciales, pero no es seguro para contraseñas.
  • POST: Envía los datos de forma oculta al usuario, en el cuerpo de la petición HTTP. Se utiliza de manera casi exclusiva cuando se envía información confidencial y siempre que se trate de grandes cantidades de datos.
<form action="/login" method="POST">
    <!-- Aquí van los campos de entrada -->
</form>

Elementos de un Formulario​

Un formulario en sí mismo solo es el contenedor. Los campos que lo componen se crean en su interior, generalmente usando las etiquetas <label>, <input> y <button>.

Ejemplo de formulario de contacto básico:

<form action="/enviar-mensaje" method="POST">
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre" name="nombre_usuario">
  
  <label for="mensaje">Mensaje:</label>
  <textarea id="mensaje" name="texto_mensaje"></textarea>

  <button type="submit">Enviar</button>
</form>