HTML form

La etiqueta <form> en HTML es utilizada para crear un formulario en una página web. Los formularios son una manera de recopilar información del usuario a través de campos de entrada, como texto, números, fechas, archivos, entre otros.

Los campos de entrada se pueden vincular a través de etiquetas de etiquetado, como <label>, para describir lo que el campo espera que el usuario ingrese.

El atributo action especifica el script o el destino que manejará los datos del formulario una vez que el usuario los ha enviado. El atributo method especifica cómo se envían los datos del formulario al script o destino especificado en el atributo action. Los métodos comunes son GET y POST. El método GET envía los datos como parte de la URL, mientras que el método POST los envía en el cuerpo de la solicitud HTTP.

Atributos

Además, la etiqueta <form> también tiene algunos atributos como:

• autocomplete: Permite o desactiva la autocompleción automática de campos de entrada

• enctype: Especifica el tipo de codificación de los datos del formulario

• name: Especifica el nombre del formulario

• novalidate: especifica que el formulario no debe ser validado al enviarlo

• target: define dónde se debe abrir el resultado de enviar el formulario.

Es importante tener en cuenta que el atributo name es obligatorio en los campos de entrada para que los datos puedan ser enviados y procesados ​​correctamente.

Ejemplo de uso

Aquí tienes un ejemplo de un formulario sencillo en HTML:

<form action="enviar_formulario.php" method="post">
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre" name="nombre"><br>
  <label for="email">Correo:</label>
  <input type="email" id="email" name="email"><br>
  <input type="submit" value="Enviar">
</form>

Lenguaje del código: HTML, XML (xml)

En este ejemplo se utiliza la etiqueta <form> para crear un formulario con dos campos de entrada, uno para el nombre y otro para el correo.

El atributo action especifica que una vez que el usuario haga clic en el botón de “Enviar”, los datos del formulario se enviarán a un script llamado “enviar_formulario.php” y el atributo method especifica que los datos se enviarán mediante el método post.

También se usan las etiquetas <label> para describir lo que se espera que el usuario ingrese en cada campo de entrada. El atributo for en las etiquetas de etiquetado está vinculado al atributo id de los campos de entrada correspondientes, lo que permite a los usuarios hacer clic en las etiquetas para activar los campos de entrada.

Es importante tener en cuenta que los formularios solo pueden ser usados dentro de una etiqueta <form> y que es importante validar los datos del formulario en el lado del servidor para garantizar que se reciben los datos correctos y para prevenir ataques de inyección de código.

Más ejemplos

Un ejemplo completo de un formulario de HTML podría verse así:

<form action="enviar_formulario.php" method="post">
  <fieldset>
    <legend>Información personal</legend>
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre" required><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required><br>

    <label for="telefono">Teléfono:</label>
    <input type="tel" id="telefono" name="telefono" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br>
  </fieldset>

  <fieldset>
    <legend>Información de la compra</legend>
    <label for="producto">Producto:</label>
    <select id="producto" name="producto">
      <option value="opcion1">Opción 1</option>
      <option value="opcion2">Opción 2</option>
      <option value="opcion3">Opción 3</option>
    </select>

    <label for="cantidad">Cantidad:</label>
    <input type="number" id="cantidad" name="cantidad" min="1" max="10"><br>
  </fieldset>

  <input type="submit" value="Enviar">
</form>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, se utilizan dos etiquetas <fieldset> para agrupar los campos de entrada relacionados. La primera etiqueta <fieldset> tiene una etiqueta <legend> que describe el grupo de campos y contiene campos de entrada para el nombre, correo electrónico y número de teléfono del usuario.

La segunda etiqueta <fieldset> tiene una etiqueta <legend> que describe el grupo de campos y contiene un menú desplegable para seleccionar el producto y un campo de entrada para ingresar la cantidad deseada.

Finalmente, se agrega un botón de “Enviar” para enviar los datos del formulario al script especificado en el atributo action.