Formularios en HTML: <form>

1.1 Elemento <form>

Los formularios son una parte importante de la interacción del usuario con los sitios web. Con los formularios, los usuarios pueden ingresar datos, que luego se envían al servidor para su procesamiento. En HTML, el elemento <form> se usa para crear formularios.

La etiqueta <form> se utiliza para crear un formulario en una página web. Sirve como contenedor para varios elementos del formulario, como campos de texto, botones, casillas de verificación, etc. Todos los datos ingresados por el usuario se pueden enviar al servidor para su procesamiento.

Ejemplo de uso:

    
      <form action="/submit" method="post">
        <label for="username">Nombre de usuario:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br>
        <button id="submit" type="submit">Enviar</button>
      </form>
      <script>
        const userName = document.getElementById("username");
        const userEmail = document.getElementById("email");
        const submit = document.getElementById("submit");

        submit.addEventListener("click", (e) => {
          if (userName.validity.valid && userEmail.validity.valid) {
            e.preventDefault();
            alert(`Tu nombre: ${userName.value}\n` + `Tu Email: ${userEmail.value}`);
          }
        });
      </script>
    
  

    
      <form action="/submit" method="post">
        <label for="username">Nombre de usuario:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br>
        <button type="submit">Enviar</button>
      </form>
    
  

Atributos de la etiqueta <form>

El atributo action especifica la URL a la que se enviarán los datos del formulario después de hacer clic en el botón de envío. Si no se especifica el atributo action, los datos del formulario se enviarán a la URL actual.

Ejemplo de uso del atributo action:

    
      <form action="https://example.com/submit">
        <!-- elementos del formulario -->
      </form>
    
  

El atributo method especifica el método HTTP que se utilizará para enviar los datos del formulario. Hay dos valores disponibles: GET y POST.

1. GET: los datos del formulario se incluyen en la URL de la solicitud como parámetros. Este método es adecuado para enviar pequeñas cantidades de datos y no debe utilizarse para enviar información confidencial.
2. POST: los datos del formulario se envían en el cuerpo de la solicitud HTTP. Este método es adecuado para enviar grandes cantidades de datos e información confidencial.

Ejemplo de uso del atributo method:

    
      <form action="/submit" method="post">
        <!-- elementos del formulario -->
      </form>
    
  

1.2 Métodos de envío de datos

Método GET

El método GET envía los datos del formulario como parámetros de la URL. Este método se usa de forma predeterminada si no se especifica el atributo method.

Ejemplo de uso del método GET:

    
      <form action="/search" method="get">
        <label for="query">Buscar:</label>
        <input type="text" id="query" name="query" required>
        <button id="submit" type="submit">Buscar</button>
      </form>
      <script>
        const searchField = document.getElementById("query");
        const submit = document.getElementById("submit");

        submit.addEventListener("click", (e) => {
          if (searchField.validity.valid) {
            e.preventDefault();
            alert(`Has buscado: ${searchField.value}`);
          }
        });
      </script>
    
  

    
      <form action="/search" method="get">
        <label for="query">Buscar:</label>
        <input type="text" id="query" name="query">
        <button type="submit">Buscar</button>
      </form>
    
  

Características del método GET

• Los datos del formulario son visibles en la URL, lo que hace que el método no sea adecuado para transmitir información confidencial
• Restricción en el tamaño de los datos, ya que la URL tiene una longitud limitada
• Los datos pueden ser fácilmente almacenados en caché y el marcador puede guardarse en el navegador

Método POST

El método POST envía los datos del formulario en el cuerpo de la solicitud HTTP. Este método se utiliza para transmitir grandes cantidades de datos y información confidencial.

Ejemplo de uso del método POST:

    
      <form action="/submit" method="post">
        <label for="username">Nombre de usuario:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">Contraseña:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button id="submit" type="submit">Enviar</button>
      </form>
      <script>
        const userName = document.getElementById("username");
        const password = document.getElementById("password");
        const submit = document.getElementById("submit");

        submit.addEventListener("click", (e) => {
          if (userName.validity.valid && password.validity.valid) {
            e.preventDefault();
            alert(`¡Bienvenido, ${userName.value}!`);
          }
        });
      </script>
    
  

    
      <form action="/submit" method="post">
        <label for="username">Nombre de usuario:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">Contraseña:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button type="submit">Enviar</button>
      </form>
    
  

Características del método POST

• Los datos del formulario no son visibles en la URL, lo que hace que el método sea adecuado para transmitir información confidencial
• No hay restricciones en el tamaño de los datos, ya que los datos se transmiten en el cuerpo de la solicitud
• Los datos no se almacenan en caché ni se guardan en los marcadores del navegador

1.3 Atributos adicionales

Atributo enctype

El atributo enctype se usa para especificar cómo se codifican los datos del formulario al enviarlos con el método POST. El valor más usado es multipart/form-data, que es necesario para la carga de archivos.

Ejemplo de uso del atributo enctype:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="file">Subir archivo:</label>
        <input type="file" id="file" name="file">
        <button type="submit">Enviar</button>
      </form>
    
  

Atributo target

El atributo target indica dónde se mostrará la respuesta del servidor después de enviar el formulario. Valores posibles:

• _self (por defecto): en la misma ventana o pestaña
• _blank: en una nueva ventana o pestaña
• _parent: en el marco padre
• _top: en el marco superior (si se utilizan marcos)

Ejemplo de uso del atributo target:

    
      <form action="/submit" method="post" target="_blank">
        <!-- elementos del formulario -->
      </form>
    
  

Atributo novalidate

El atributo novalidate desactiva la validación del formulario incorporada en el navegador.

Ejemplo de uso del atributo novalidate:

    
      <form action="/submit" method="post" novalidate>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <button type="submit">Enviar</button>
      </form>
    
  

1.4 Formas de enviar datos

El envío de datos de formulario se realiza a través de un botón de envío: <input type="submit"> o <button type="submit">. Cuando el usuario hace clic en este botón, el navegador envía los datos del formulario al servidor utilizando el método y la URL especificados.

Estas son las formas principales de enviar datos del formulario:

1. Botón de envío: esta es la forma más común de enviar datos de formulario. Un botón de envío se puede crear usando el elemento <input> o <button>.

Ejemplo con <input>:

    
      <input type="submit" value="Submit">
    
  

Ejemplo con <button>:

    
      <button type="submit">Submit</button>
    
  

2. Tecla Enter: en los campos de texto del formulario, presionar la tecla Enter también puede provocar el envío del formulario.

3. JavaScript: un formulario se puede enviar programáticamente utilizando JavaScript. Esto es útil cuando necesitas realizar validaciones adicionales u otras acciones antes de enviar los datos.

Ejemplo de uso de JavaScript para enviar un formulario:

    
      <form id="myForm" action="/submit" method="post">
        <label for="username">Nombre de usuario:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">Contraseña:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button id="submit" type="submit">Enviar</button>
      </form>
      <script>
        const userName = document.getElementById("username");
        const password = document.getElementById("password");
        const submit = document.getElementById("submit");

        submit.addEventListener("click", (e) => {
          if (userName.validity.valid && password.validity.valid) {
            e.preventDefault();
            alert("¡Autorización exitosa!\n" + "\n" + `¡Bienvenido, ${userName.value}!`);
          }
        });
      </script>
    
  

    
      <form id="myForm" action="/submit" method="post">
        <label for="username">Nombre de usuario:</label>
        <input type="text" id="username" name="username">
        <br>
        <label for="password">Contraseña:</label>
        <input type="password" id="password" name="password">
        <br>
        <button type="button" onclick="submitForm()">Enviar</button>
      </form>
    
  

    
      function submitForm() {
        document.getElementById('myForm').submit();
      }