¿Cómo creo un formulario en HTML?

Crear un formulario básico en HTML es sencillo. La estructura fundamental se basa en la etiqueta <form>, que englobará todos los campos y el botón de envío. Aquí te muestro los pasos y un ejemplo:

1. La etiqueta <form>:
   Es el contenedor principal.
   Sus atributos más comunes son:
   • action: Especifica la URL a la que se enviarán los datos del formulario cuando se envíe. Si quieres procesarlo en la misma página o con JavaScript, puedes dejarlo vacío o usar "#".
   • method: Indica el método HTTP que se usará para enviar los datos. Los más comunes son GET (los datos se añaden a la URL, útil para búsquedas) y POST (los datos se envían en el cuerpo de la petición, útil para datos sensibles o formularios más largos).
2. Etiquetas (<label>) y campos de entrada (<input>):
   • Cada campo de entrada debe tener una etiqueta <label> asociada para mejorar la accesibilidad. La asociación se hace mediante el atributo for en <label> que coincide con el id del <input>.
   • El atributo name en cada <input> es crucial, ya que será el nombre de la variable que contenga el dato enviado al servidor.
   • El atributo type en <input> define el tipo de campo (texto, email, contraseña, etc.).
3. Botón de envío:
   Se crea con <button type="submit"> o <input type="submit">.

Aquí tienes un ejemplo básico de un formulario de contacto:

<form action="/procesar-formulario" method="post">
  <div>
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="usuario_nombre" required>
  </div>

  <div>
    <label for="email">Correo electrónico:</label>
    <input type="email" id="email" name="usuario_email" required>
  </div>

  <div>
    <label for="mensaje">Mensaje:</label>
    <textarea id="mensaje" name="usuario_mensaje" rows="5" required></textarea>
  </div>

  <div>
    <input type="checkbox" id="suscripcion" name="usuario_suscripcion" value="si">
    <label for="suscripcion">Suscribirme al boletín</label>
  </div>

  <button type="submit">Enviar mensaje</button>
</form>
Lenguaje del código: PHP (php)

En este ejemplo:

• Usamos <div> para agrupar cada par de etiqueta y campo, lo que ayuda a la estructura y al estilo (aunque no es estrictamente necesario para la funcionalidad básica).
• required es un atributo booleano que indica que el campo debe ser rellenado antes de enviar el formulario.
• El textarea permite introducir múltiples líneas de texto.
• El checkbox permite una opción de sí/no.

Este es un punto de partida. Puedes añadir muchos más tipos de campos y atributos para formularios más complejos.