Manejo de formularios del lado del cliente con JavaScript: explicado con código de ejemplo

Original article: Client-Side Form Handling with JavaScript – Explained with Example Code

Los formularios HTML son componentes esenciales de la mayoría de los sitios web y aplicaciones web. Permiten la interacción entre los usuarios y esos sitios web y son un concepto clave que deben comprender los desarrolladores web.

Esta guía completa cubre varios aspectos de los formularios HTML, desde cómo crear y estructurar formularios hasta la interacción de JavaScript y la validación de formularios.

Comprender cómo trabajar con formularios mediante programación le permite validar y capturar las entradas del usuario, gestionar los envíos y mejorar la experiencia general del usuario.

Si sigue los ejemplos y las mejores prácticas proporcionados en esta guía, obtendrá el conocimiento necesario para crear formularios web sólidos que mejoren la experiencia del usuario y faciliten la recopilación y el envío de datos sin problemas.

Ya sea un desarrollador principiante o experimentado, esta guía constituye un recurso valioso para comprender e implementar formularios HTML de manera efectiva en sus proyectos web.

Requisitos previos:

Se recomienda una comprensión básica de los fundamentos de JavaScript para comprender completamente los conceptos discutidos en este tutorial. La familiaridad con los formularios HTML también será beneficiosa para comprender y aplicar el material cubierto.

Si es nuevo en JavaScript, le recomendamos que se familiarice con las variables, los tipos de datos, las funciones, los bucles y las técnicas básicas de manipulación de DOM antes de sumergirse en este tutorial. Este conocimiento fundamental facilitará una experiencia de aprendizaje más fluida a medida que exploramos temas más avanzados relacionados con el manejo de formularios en JavaScript.

Nota inicial: Para su comodidad, se puede acceder a todos los ejemplos y códigos analizados aquí en GitHub .

Tabla de contenido

Comprensión de los formularios HTML
– Introducción a los elementos del formulario HTML
– JavaScript y manejo de formularios
– Acceso a los campos del formulario
– Ejemplo: formulario de registro
Cómo crear botones de opción
– JavaScript para manejar la selección de botones de opción
– Evento de cambio de botón de opción
Casillas de verificación
– Cómo comprobar si una casilla de verificación está marcada
– Cómo obtener valores de casilla de verificación
– Cómo manejar varias casillas de verificación
– Cómo marcar/desmarcar todas las casillas de verificación
– Cómo generar casillas de verificación dinámicamente
Seleccionar elemento
– Cómo interactuar con un elemento de selección
– Cómo acceder a opciones con JavaScript
– Cómo manejar selecciones múltiples
– Ejemplo: Administrador de tareas
Diferencia entre cambio y evento de entrada
Conclusión

Antes de comenzar, aquí hay algo a tener en cuenta:

Este es un blog de seguimiento de este Manual de eventos y DOM y no cubre la comunicación del lado del servidor ni el manejo de formularios del lado del servidor en este blog, ya que involucra temas avanzados como AJAX (JavaScript asíncrono y XML), promesas, manejo de errores y manejo. Operaciones asincrónicas en JavaScript.

En este tutorial, nos centraremos en cómo trabajar con varios elementos de formulario, incluidos botones de opción, casillas de verificación y elementos de selección, así como en cómo generarlos e interactuar dinámicamente con ellos usando JavaScript.

Profundizar en la comunicación del lado del servidor iría más allá del alcance de este artículo, cuyo objetivo es proporcionar una comprensión integral de la manipulación DOM y el manejo de eventos dentro del contexto de los elementos de formulario.

Comprender los formularios HTML

Los formularios HTML son elementos fundamentales que se utilizan para recopilar y enviar datos de los usuarios en la web. Permiten la interacción entre los usuarios y los sitios web al permitirles ingresar información, realizar selecciones y enviar datos a servidores para su procesamiento.

Introducción a los elementos de formulario HTML

Los formularios HTML se crean utilizando el <form>elemento, que actúa como contenedor para varios elementos de entrada. Los elementos de formulario comunes incluyen campos de texto, casillas de verificación, botones de opción, menús desplegables y botones.

Para hacer referencia a un formulario en JS, puede utilizar métodos DOM como getElementById()o document.forms. document.formsdevuelve una colección de formularios y puede acceder a un formulario específico utilizando un índice, nombre o identificación.

const form = document.getElementById('signup');
const firstForm = document.forms[0]; // accessing first form
const formByName = document.forms['formName']; // accessing form by name
const formById = document.forms['formId']; // accessing form by id

Veamos un ejemplo básico de un formulario HTML:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br>

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

En este ejemplo, tenemos un formulario con dos campos de entrada para nombre de usuario y contraseña, junto con un botón de envío.

Estructura y atributos del formulario

Los formularios HTML pueden tener varios atributos que controlan su comportamiento y apariencia. Algunos atributos comunes incluyen:

acción: Especifica la URL donde se deben enviar los datos del formulario.
método: especifica el método HTTP utilizado para enviar datos del formulario ( posto get).
objetivo : especifica dónde mostrar la respuesta después del envío del formulario (por ejemplo, _self, _blank, _parent) _top.
nombre : Asigna un nombre al formulario con fines de identificación.

A continuación se muestra un ejemplo de un formulario con atributos de acción, método y destino:

<form action="/submit-form" method="POST" name="myForm" target="_blank">
  <!-- Form elements go here -->
</form>

JavaScript y manejo de formularios

JavaScript usa el HTMLFormElementobjeto para representar un formulario. Este objeto tiene propiedades correspondientes a los atributos HTML actiony method.

Métodos como submit()y reset()se utilizan para enviar y restablecer formularios.

const form = document.getElementById('signup');
form.action; // returns the action attribute
form.method; // returns the method attribute
form.submit(); // submits the form

JavaScript proporciona controladores de eventos para agregar interactividad a los formularios HTML. Al aprovechar estos eventos, puede ejecutar scripts personalizados en respuesta a las acciones del usuario dentro del formulario:

Enviar evento : un formulario generalmente tiene un botón de envío que, al hacer clic, envía los datos del formulario al servidor. Esto se logra usando un elemento <input>o <button>con type="submit".

<input type="submit" value="Sign Up">
// or
<button type="submit">Sign Up</button>

Para adjuntar un detector de eventos al evento de envío, utilice el addEventListener()método. He aquí un ejemplo:

const form = document.getElementById('signup');
form.addEventListener('submit', (event) => {
    // Custom validation and submission logic here
});

En muchos casos, es posible que desee interceptar el comportamiento de envío de formulario predeterminado y ejecutar una lógica personalizada antes de permitir que el formulario se envíe al servidor. Puedes usar preventDefault()para esto. Ejemplo:

const form = document.getElementById('signup');
form.addEventListener('submit', (event) => {
    event.preventDefault(); // Prevents the default form submission
    // Custom validation and submission logic here
});

Sin event.preventDefault(), cualquier lógica de envío y validación personalizada aún se ejecutaría dentro del detector de eventos, pero no se impediría el comportamiento de envío de formulario predeterminado.

Restablecer evento : el resetevento se activa cuando el formulario se restablece mediante un botón de reinicio o mediante programación. Usamos reset()un método para borrar todos los campos del formulario y restablecerlos a sus valores predeterminados.

document.querySelector('form').addEventListener('reset', function(event) {
    // Custom form reset logic here
});

Cómo acceder a los campos del formulario

Puede acceder a los campos del formulario utilizando métodos DOM como getElementsByName(),,, etc.getElementById()querySelector()

La form.elementspropiedad almacena una colección de elementos de formulario. Puede acceder a estos Elementos por índice, identificación o nombre. He aquí un ejemplo:

const form = document.getElementById('signup');
const nameField = form.elements['name']; // accessing element by name
const emailField = form.elements['email']; // accessing element by name
const firstElement = form.elements[0]; // accessing first element by index no.

Una vez que haya accedido a un campo de formulario, puede usar la valuepropiedad para acceder a su valor. He aquí un ejemplo:

const nameValue = nameField.value;
const emailValue = emailFieldByName.value;

Validación de formulario

La validación de formularios es un aspecto esencial del desarrollo web que garantiza que los datos enviados por los usuarios sean precisos y cumplan con los criterios específicos antes de ser procesados por el servidor. Las validaciones comunes incluyen la verificación de campos vacíos, formatos de correo electrónico válidos, etc.

Validación de formulario HTML

HTML5 proporciona validación de formularios integrada a través de varios atributos:

obligatorio : Especifica que se debe completar un campo.
patrón : especifica un patrón de expresión regular que el valor de entrada debe coincidir.
min y max : especifique los valores mínimo y máximo para un campo de entrada.
maxlength y minlength : especifican la longitud máxima y mínima de la entrada
tipo : especifica el tipo de entrada esperada (por ejemplo, correo electrónico, número, fecha).

A continuación se muestra un ejemplo de validación de formulario HTML utilizando estos atributos:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required minlength="3" maxlength="15"><br>

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

  <label for="age">Age:</label>
  <input type="number" id="age" name="age" min="18" max="99"><br>

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

En este ejemplo, el campo de nombre de usuario debe tener entre 3 y 15 caracteres, el campo de correo electrónico debe estar completo y en el formato correcto, y la edad debe estar entre 18 y 99 años.

Validación de formularios JavaScript

JavaScript permite a los desarrolladores realizar una lógica de validación más sofisticada más allá de lo que ofrecen los atributos HTML. Los detectores de eventos se pueden adjuntar a elementos de formulario para manejar la validación dinámicamente.

A continuación se muestra un ejemplo básico de validación de formularios JavaScript:

const form = document.querySelector('form');

form.addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent form submission

    // Perform custom validation logic
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;

    if (!emailIsValid(email)) {
        alert('Please enter a valid email address.');
        return;
    }

    if (password.length < 6) {
        alert('Password must be at least 6 characters long.');
        return;
    }

    // If validation passes, submit the form
    form.submit();
});

function emailIsValid(email) {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

En este ejemplo, la función JavaScript emailIsValid()utiliza una expresión regular para validar el formato del correo electrónico. El submitdetector de eventos evita que se envíe el formulario si falla la validación y se muestran mensajes de error personalizados al usuario.

Veamos un ejemplo: Formulario de registro

Ahora, combinemos todos los conceptos que hemos cubierto en un ejemplo completo de un formulario de registro con validación del lado del cliente usando JavaScript:

<!DOCTYPE html>
<html>
  <body>
    <h2>User Registration</h2>
    <form id="registrationForm">
      <div>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" />
      </div>
      <div>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" />
      </div>
      <div>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" />
      </div>
      <div>
        <input type="submit" value="Register" />
      </div>
    </form>

    <div id="errorMessages"></div>
    <script src="script.js"></script>
  </body>
</html>

Estructura HTML : Tenemos un formulario de registro simple con campos para nombre de usuario, correo electrónico, contraseña y un botón de envío. También hay un contenedor div ( errorMessages) para mostrar mensajes de error de validación.

Ahora escribamos código JavaScript para manejar el envío de formularios y realizar la validación del lado del cliente:

const registrationForm = document.getElementById("registrationForm");
const errorMessages = document.getElementById("errorMessages");

registrationForm.addEventListener("submit", function (event) {
  event.preventDefault();

  const { username, email, password } = registrationForm.elements;

  errorMessages.innerHTML = "";

  if (!username.value.trim()) {
    displayError("Username is required.");
    return;
  }

  if (!email.value.trim() || !isValidEmail(email.value)) {
    displayError("Please enter a valid email address.");
    return;
  }

  if (!password.value.trim() || !isStrongPassword(password.value)) {
    displayError(
      "Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter, one digit, and one special character."
    );
    return;
  }

  alert("Registration successful!");
  registrationForm.reset();
});

function displayError(message) {
  errorMessages.innerHTML += `<div class="error">${message}</div>`;
}

function isValidEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

function isStrongPassword(password) {
  return /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{8,}$/.test(password);
}

Manejo de JavaScript : Seleccionamos el formulario y el contenedor del mensaje de error usando getElementById. Adjuntamos un detector de eventos al evento de envío del formulario. Cuando se envía el formulario, evitamos su comportamiento predeterminado utilizando event.preventDefault()para manejar el envío del formulario manualmente.

Validación de formulario : Recuperamos los valores de nombre de usuario, correo electrónico y contraseña.

Realizamos una validación básica: el nombre de usuario no debe estar vacío, el correo electrónico debe tener un formato válido, la contraseña debe tener al menos 8 caracteres y contener al menos una letra mayúscula, una letra minúscula, un dígito y un carácter especial.

Manejo de errores : si alguna validación falla, mostramos el mensaje de error correspondiente. Los mensajes de error se muestran en el errorMessagesdiv.

Restablecer formulario : tras el registro exitoso (en este caso, una alerta simple), restablecemos el formulario usandoregistrationForm.reset()

Actualmente, el código utiliza un alertpara indicar un registro exitoso. En un escenario real, es posible que desee implementar una llamada AJAX para enviar los datos a un servidor para su procesamiento y manejar la respuesta en consecuencia. Pero eso no es lo que vamos a discutir, como se mencionó al comienzo de este tutorial.

En general, este ejemplo cubre la creación de formularios, el manejo de formularios con JavaScript, la validación de formularios mediante expresiones regulares y la visualización dinámica de mensajes de error personalizados, lo que demuestra un formulario de registro de usuario básico con validación del lado del cliente.

Botones de radio

Los botones de opción son un elemento de formulario común que se utiliza para seleccionar una opción de un conjunto de opciones. En JavaScript, puede manipular botones de opción para recuperar selecciones de usuario y realizar acciones basadas en esas selecciones.

Cómo crear botones de radio

Puede utilizar botones de opción para que los usuarios seleccionen solo una opción de un conjunto de opciones. En HTML, puede crear botones de opción utilizando el <input>elemento con el typeatributo establecido en "radio". Un grupo de botones de opción con el mismo nameatributo forma un grupo de opción.

He aquí un ejemplo:

<!DOCTYPE html>
<html>
  <body>
    <form id="languageForm">
      <p>Select your favorite programming language:</p>
      <div>
        <input type="radio" name="language" value="JavaScript" id="js" />
        <label for="js">JavaScript</label>
      </div>
      <div>
        <input type="radio" name="language" value="Python" id="python" />
        <label for="python">Python</label>
      </div>
      <div>
        <input type="radio" name="language" value="Java" id="java" />
        <label for="java">Java</label>
      </div>
      <!-- More language options can be added here -->
    </form>
  </body>
</html>

En este ejemplo, name="language" agrupa los botones de radio con sus respectivos valores

Utilice los atributos idy forpara accesibilidad, vinculando la etiqueta al botón de opción correspondiente.

Cómo recuperar el valor del botón de opción seleccionado

Ahora, analicemos cómo recuperar el valor del botón de opción seleccionado usando JavaScript.

    <!-- HTML -->
    <button id="btn">Show Selected Language</button>
    <p id="output"></p>

    <script>
      const btn = document.querySelector("#btn");
      const radioButtons = document.querySelectorAll('input[name="language"]');
      const output = document.getElementById("output");

      btn.addEventListener("click", () => {
        let selectedLanguage;
        for (const radioButton of radioButtons) {
          if (radioButton.checked) {
            selectedLanguage = radioButton.value;
            break;
          }
        }
        // Displaying the output:
        output.innerText = selectedLanguage
          ? `You selected ${selectedLanguage}`
          : `You haven't selected any language`;
      });
    </script>

Dentro del detector de eventos, iteramos sobre los botones de opción para encontrar el seleccionado y mostrar su valor.

Así es como funciona el código: el código JavaScript se inicializa seleccionando el botón, los botones de opción y los elementos de salida del documento HTML. Agregamos un detector de eventos de clic al elemento del botón. Cuando se hace clic en el botón, se ejecuta la función dentro del detector de eventos.

Dentro del detector de eventos de clic, iteramos sobre todos los botones de opción de la radioButtonscolección. Verificamos si un botón de opción está marcado usando su checkedpropiedad. Si un botón de opción está marcado, asignamos su valor a la selectedLanguagevariable y salimos del bucle usando break.

Actualizamos el contenido del elemento de salida ( <p>etiqueta con id output) en función de si se selecciona un idioma. Si se selecciona un idioma ( selectedLanguagees veraz), mostramos un mensaje indicando el idioma seleccionado. De lo contrario, le solicitamos al usuario que seleccione un idioma.

Evento de cambio de botón de opción

Cuando un botón de opción está marcado o desmarcado, activa un changeevento. Puedes escuchar este evento usando addEventListener(). Dentro del controlador de eventos, puede acceder al estado marcado y al valor del botón de opción usando this.checkedy this.value.

radioButton.addEventListener('change', function (e) {
  if (this.checked) {
    console.log(this.value);
  }
});

Cómo generar dinámicamente botones de radio

Ahora, exploremos cómo generar dinámicamente botones de opción usando JavaScript. Esto es útil cuando desea crear opciones de botones de opción dinámicamente según ciertos criterios o datos.

Supongamos que tenemos una variedad de idiomas y queremos generar dinámicamente botones de opción para cada opción de idioma:

<!DOCTYPE html>
<html>
  <body>
    <div id="languages"></div>

    <script>
      const languageOptions = ["Python", "Javascript", "C++", "Java"];

      // Generate the radio buttons
      const languages = document.querySelector("#languages");
      languages.innerHTML = languageOptions.map((language) => `
          <div>
              <input type="radio" name="language" value="${language}" id="${language}">
              <label for="${language}">${language}</label>
          </div>`).join(' ');
    </script>
  </body>
</html>

Usamos el map()método para iterar sobre cada idioma en la matriz y generar HTML para el botón de opción y su etiqueta correspondiente.

Genera dinámicamente botones de opción basados en la languageOptionsmatriz y los inserta en el elemento contenedor ( <div id="languages"></div>). Cada botón de opción tiene una identificación única y un valor correspondiente al nombre del idioma, y las etiquetas están asociadas con sus respectivos botones de opción mediante el foratributo.

Después de generar dinámicamente los botones de opción, ahora agreguemos changedetectores de eventos para manejar los cambios en la selección.

    <!-- HTML -->
    <div id="languages"></div>
    <div id="languageOutput"></div> // we create this one to fetch our selected language output
    
    <!-- Generate the radio buttons -->

// Attaching Change Event Listeners
const radioButtons = document.querySelectorAll('input[name="language"]');
for (const radioButton of radioButtons) {
    radioButton.addEventListener('change', showSelectedlanguage);
}        

// Handling the Change Event
function showSelectedlanguage() {
    if (this.checked) {
        document.querySelector('#languageOutput').innerText = `You selected ${this.value}`;
    }
}

Esto es lo que está pasando:

Seleccionamos todos los botones de opción con el nameatributo establecido en "language".
Usamos un for...ofbucle para iterar sobre cada botón de opción y agregamos un changedetector de eventos a cada botón de opción. Este oyente escucha los cambios en el estado de los botones de opción, es decir, cuando se selecciona o deselecciona un botón de opción.
Definimos una función nombrada showSelectedLanguagepara manejar el evento de cambio desencadenado al seleccionar un botón de opción.
Dentro de la showSelectedLanguagefunción, primero verificamos si el botón de opción actual ( this) está marcado usando la checkedpropiedad. Si el botón de opción está marcado, actualizamos el contenido de texto de un elemento con la identificación languageOutputusando document.querySelector('#languageOutput'). Este elemento sirve como marcador de posición para mostrar el idioma seleccionado.

Esta configuración garantiza que los botones de opción generados dinámicamente tengan changedetectores de eventos adjuntos, lo que permite el manejo dinámico de las selecciones del usuario.

Casillas de verificación

Cómo crear una casilla de verificación HTML

Primero creemos una casilla de verificación usando el <input>elemento y escriba el atributo establecido en "casilla de verificación". asociémoslo con la etiqueta para una mejor accesibilidad.

<label for="agree">
   <input type="checkbox" id="agree" name="agree" value="yes"> I agree to the terms
</label>

Cómo comprobar si una casilla de verificación está marcada

Una casilla de verificación en HTML puede existir en dos estados: marcada y sin marcar. Y podemos determinar cuál está activo usando checkedla propiedad. Si es así true, la casilla de verificación está marcada; de lo contrario, no está marcada. Ejemplo:

<!DOCTYPE html>
<html>
<body>
    <label for="agree">
        <input type="checkbox" id="agree" name="agree"> I agree to the terms
    </label>

    <script>
        const checkbox = document.getElementById('agree');
        console.log(checkbox.checked);
    </script>
</body>
</html>

marque o desmarque las casillas y actualice la página para ver el resultado

Cómo obtener valores de casilla de verificación

En los formularios HTML, cuando se marca una casilla de verificación y se envía el formulario, el navegador incluye la casilla de verificación en los datos del formulario con su nameatributo como clave y el valueatributo (si se especifica) como valor. Pero si la casilla de verificación no está marcada, no se incluye en absoluto en los datos del formulario.

<label for="agree">
    <input type="checkbox" id="agree" name="agree"> I agree to the terms
</label>

<button id="btn">Show Value</button>
<script>
    const checkbox = document.querySelector('#agree');
    const btn = document.querySelector('#btn');
    btn.onclick = () => {
       alert(checkbox.value);
    };
</script>

Marque o desmarque, siempre mostrará el valor 'on'ya que no hay ningún atributo de valor

Básicamente, el punto es: cuando se marca una casilla de verificación y se incluye en los envíos de formularios, el navegador envía 'on'de forma predeterminada el valor si no valuese define explícitamente ningún atributo para el elemento de entrada de la casilla de verificación. Para manejar con precisión el estado marcado de una casilla de verificación usando JavaScript, use la checkedpropiedad en lugar de confiar únicamente en el valueatributo.

Cómo manejar varias casillas de verificación

A veces, es posible que necesite trabajar con varias casillas de verificación con el mismo nombre y desee recuperar los valores de las casillas de verificación seleccionadas. He aquí un ejemplo:

<!DOCTYPE html>
<html>
  <body>
    <p>Select your preferred languages:</p>
    <label for="l1">
      <input type="checkbox" name="language" value="C++" id="l1" />C++
    </label>
    <label for="l2">
      <input type="checkbox" name="language" value="Python" id="l2" />Python
    </label>
    <label for="l3">
      <input type="checkbox" name="language" value="Java" id="l3" />Java
    </label>
    <p>
      <button id="btn">Get Selected Languages</button>
    </p>

    <script>
      const btn = document.querySelector("#btn");
      btn.addEventListener("click", () => {
        const checkboxes = document.querySelectorAll(
          'input[name="language"]:checked'
        );
        const selectedLanguages = Array.from(checkboxes).map(
          (checkbox) => checkbox.value
        );
        alert("Selected Languages: " + selectedLanguages.join(", "));
      });
    </script>
  </body>
</html>

Este enfoque permite a los usuarios seleccionar múltiples opciones y recuperar sus valores colectivamente.

En este ejemplo, tenemos casillas de verificación para seleccionar lenguajes de programación preferidos.

Cuando se hace clic en el botón, se activa un detector de eventos. Dentro del detector de eventos, seleccionamos todas las casillas con el atributo de nombre "idioma" que estén marcadas.
Luego convertimos la NodeList devuelta por querySelectorAll()en una matriz usando Array.from().
Finalmente, asignamos la matriz para recuperar los valores de las casillas de verificación seleccionadas y mostrarlos usando alert().

Cómo marcar/desmarcar todas las casillas de verificación

Ahora, creemos una funcionalidad para marcar o desmarcar todas las casillas a la vez:

<!DOCTYPE html>
<html>
  <body>
    <p>
      <button id="btn">Check / Uncheck All</button>
    </p>
    <p>Select your preferred languages:</p>
    <label for="l1">
      <input type="checkbox" name="language" value="C++" id="l1" />C++
    </label>
    <label for="l2">
      <input type="checkbox" name="language" value="Python" id="l2" />Python
    </label>
    <label for="l3">
      <input type="checkbox" name="language" value="Java" id="l3" />Java
    </label>
    <script src="script.js"></script>
  </body>
</html>

Código javascript:

// function to check or uncheck all checkboxes
function check(checked = true) {
  const checkboxes = document.querySelectorAll('input[name="language"]');

  // Iterate through each checkbox
  checkboxes.forEach((checkbox) => {
    // Set the checked property of each checkbox to the value of the 'checked' parameter
    checkbox.checked = checked;
  });
}

// function to check all checkboxes and change button behavior to uncheck all
function checkAll() {
  check();
  this.onclick = uncheckAll;
}

// function to uncheck all checkboxes and change button behavior to check all
function uncheckAll() {
  check(false);
  this.onclick = checkAll;
}

const btn = document.querySelector("#btn");

btn.onclick = checkAll;

En este ejemplo, tenemos un botón llamado "Marcar/Desmarcar todo".

Cuando se hace clic en el botón por primera vez, se pretende marcar todas las casillas de verificación. Por lo tanto, checkAllse asigna la función para manejar esta acción ( const btn = document.querySelector("#btn");).
Si se vuelve a hacer clic en el botón, se desmarcan todas las casillas de verificación. Definimos funciones check(), checkAll()y uncheckAll()para manejar la marcación y desmarcación de casillas de verificación.
Inicialmente asignamos checkAll()el evento del botón onclicky luego cambiamos entre checkAll()y uncheckAll()según el estado actual de las casillas de verificación.

El enfoque alternativo podría ser:

function checkAll(checked = true) {
  const checkboxes = document.querySelectorAll('input[name="language"]');
  checkboxes.forEach((checkbox) => {
    checkbox.checked = checked;
  });
}

const btn = document.querySelector("#btn");

btn.addEventListener("click", () => {
  // Find the first checkbox with the name attribute set to 'language'
  const firstCheckbox = document.querySelector('input[name="language"]');
  // Check if the first checkbox is checked
  const isChecked = firstCheckbox.checked;
  // Call the checkAll function with the opposite state of the first checkbox
  checkAll(!isChecked);
});

Aquí, seleccionamos la primera casilla de verificación con el nombre "idioma" para determinar su estado actual marcado. Luego llamamos checkAll()con el estado opuesto.

Cómo generar casillas de verificación dinámicamente

<!DOCTYPE html>
<html>
  <body>
    <div id="languages"></div>

    <script>
      const languageOptions = ["Python", "Javascript", "C++", "Java"];

      // Generate the checkboxes
      const html = languageOptions
        .map(
          (language) => `<label for="language-${language}">
                <input type="checkbox" name="language" id="language-${language}" value="${language}"> ${language}
            </label>`
        )
        .join(" ");
      document.querySelector("#languages").innerHTML = html;
    </script>
  </body>
</html>

Cuando se carga la página, JavaScript genera dinámicamente las casillas de verificación basadas en la languageOptionsmatriz y las inserta en el divelemento con la identificación languages.

Así es como funciona:

Definimos una matriz languageOptionsque contiene nombres de idiomas.
Usamos el map()método para recorrer la languageOptionsmatriz y generar una matriz de cadenas HTML para cada idioma.
Cada cadena HTML comprende un labelelemento asociado con una inputcasilla de verificación. La inputcasilla de verificación incluye atributos apropiados como type, name, idy value, derivados dinámicamente del nombre del idioma.
Unimos la matriz de cadenas HTML en una sola cadena usando join(' ').
Finalmente, configuramos la innerHTMLpropiedad del <div>elemento raíz con la identificación languagesde la cadena HTML generada, representando así casillas de verificación para cada lenguaje de programación.

Seleccionar elemento:

El <select>elemento en HTML proporciona una lista desplegable de opciones para que los usuarios elijan. Permite selecciones únicas o múltiples. Ejemplo:

<select id="cities">
    <option value="JAI">Jaipur</option>
    <option value="DEL">New Delhi</option>
    <option value="UDR">Udaipur</option>
    <option value="MUM">Mumbai</option>
</select>

En este ejemplo, los usuarios pueden seleccionar una ciudad de la lista desplegable.

Por defecto, un <select>elemento permite una única selección. Para habilitar selecciones múltiples, agregue el multipleatributo.

<select id="cities" multiple>

Los usuarios ahora pueden seleccionar varias frutas manteniendo presionada la tecla Ctrl (o Cmd en Mac) mientras hacen clic.

Cómo interactuar con un elemento seleccionado:

Para interactuar con un <select>elemento usando JavaScript, usamos el HTMLSelectElementtipo, que proporciona propiedades útiles como selectedIndexy value. Ejemplo:

<script>
const selectElement = document.getElementById('cities');
console.log(selectElement.selectedIndex); // Returns the index of the selected option
console.log(selectElement.value); // Returns the value of the selected option
console.log(selectElement.multiple); // Returns true if multiple selections are allowed
</script>

Estas propiedades ayudan a recuperar información sobre las opciones seleccionadas y el estado del <select>elemento.

JavaScript le permite manejar eventos en el <select>elemento, como cuando un usuario selecciona una opción. Ejemplo:

<button id="btn">Get Selected City</button>
    <script>
      const btn = document.querySelector("#btn");
      const selectElement = document.getElementById("cities");
      btn.onclick = (event) => {
        event.preventDefault();
        const selectedCity =
          selectElement.options[selectElement.selectedIndex].text;
        alert(`Selected city: ${selectedCity}, 
        Index: ${selectElement.selectedIndex}`);
      };
    </script>

Este script muestra la ciudad seleccionada y su índice cuando se hace clic en un botón.

Usando la valuepropiedad: La valuepropiedad representa el valor de la opción seleccionada. Entendámoslo con el ejemplo:

<select id="cities">
    <option value="">Jaipur</option> 
    <option value="DEL">New Delhi</option>
    <option value="UDR">Udaipur</option>
    <option>Mumbai</option>
</select>

const btn = document.querySelector("#btn");
const selectElement = document.querySelector("#cities");

btn.onclick = (event) => {
    event.preventDefault();
    alert(selectElement.value);
};

Si se selecciona "Jaipur", esto significa que tenemos una cadena vacía ya que el atributo de valor está vacío en nuestro HTML.
Si una opción carece de un atributo de valor, la propiedad de valor del cuadro de selección se convierte en el texto de la opción seleccionada. Ejemplo: si se selecciona "Mumbai", la propiedad de valor es "Mumbai".
Si se seleccionan varias opciones, la valuepropiedad del cuadro de selección se deriva de la primera opción seleccionada según las reglas anteriores.

Cómo acceder a las opciones con JavaScript

El HTMLOptionElementtipo representa <option>elementos individuales dentro de un <select>elemento en JavaScript. Proporciona propiedades como index, selected, texty valuepara acceder a información sobre cada opción.

const selectElement = document.getElementById('cities');
const secondOptionText = selectElement.options[1].text; // Accessing text of the second option
const secondOptionValue = selectElement.options[1].value; // Accessing value of the second option

Cómo manejar selecciones múltiples:

Cuando un <select>elemento permite selecciones múltiples, puede recorrer sus opciones para encontrar cuáles están seleccionadas y recuperar sus valores de texto.

const selectElement = document.getElementById('cities');
const selectedOptions = Array.from(selectElement.options).filter(option => option.selected);
const selectedValues = selectedOptions.map(option => option.text);

El resultado será una matriz que contiene texto de las opciones seleccionadas. En su lugar, podemos usarlo option.valuepara obtener una matriz de valores. Ejemplo:

<!DOCTYPE html>
<html>
  <body>
    <select id="cities" multiple>
      <option value="JAI">Jaipur</option>
      <option value="DEL">New Delhi</option>
      <option value="UDR">Udaipur</option>
      <option value="MUM">Mumbai</option>
    </select>

    <button id="btn">Get Selected Cities</button>
    <script>
      const btn = document.querySelector("#btn");
      const selectElement = document.querySelector("#cities");

      btn.onclick = (event) => {
        event.preventDefault();
        const selectedOptions = Array.from(selectElement.options)
          .filter((option) => option.selected)
          .map((option) => option.text);
        alert("Selected City: " + selectedOptions.join(", "));
      };
    </script>
  </body>
</html>

Cuando se hace clic en el botón, el script recopila las opciones seleccionadas filtrando las opciones según la selectedpropiedad. Luego asigna las opciones seleccionadas para recuperar su contenido de texto.
Finalmente, muestra los idiomas seleccionados en un mensaje de alerta.

Veamos un ejemplo: Administrador de tareas (Agregar y quitar tareas)

<!DOCTYPE html>
<html>
  <style>
    #container {
      max-width: 540px;
      margin: 50px auto;
    }

    form {
      display: flex;
      flex-direction: column;
    }
  </style>
  <body>
    <div id="container">
      <form>
        <label for="task">Task:</label>
        <input
          type="text"
          id="task"
          placeholder="Enter a task"
          autocomplete="off"
        />

        <button id="btnAdd">Add Task</button>

        <label for="taskList">Task List:</label>
        <select id="taskList" name="taskList" multiple></select>

        <button id="btnRemove">Remove Selected Tasks</button>
      </form>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Esta estructura HTML incluye campos de entrada para ingresar descripciones de tareas, botones para agregar y eliminar tareas y un <select>elemento para mostrar la lista de tareas. Agregamos un poco de CSS para mayor claridad. Veamos el código Javascript ahora:

const btnAdd = document.querySelector('#btnAdd');
const btnRemove = document.querySelector('#btnRemove');
const taskList = document.querySelector('#taskList');
const taskInput = document.querySelector('#task');

btnAdd.onclick = (e) => {
    e.preventDefault();

    // Validate the task input
    if (taskInput.value.trim() === '') {
        alert('Please enter a task description.');
        return;
    }

    // Create a new task option
    const option = new Option(taskInput.value, taskInput.value);
    taskList.add(option, undefined);

    // Reset the task input
    taskInput.value = '';
    taskInput.focus();
};

btnRemove.onclick = (e) => {
    e.preventDefault();

    // Save the selected tasks
    let selectedTasks = [];

    for (let i = 0; i < taskList.options.length; i++) {
        selectedTasks[i] = taskList.options[i].selected;
    }

    // Remove selected tasks
    let index = taskList.options.length;
    while (index--) {
        if (selectedTasks[index]) {
            taskList.remove(index);
        }
    }
};

Explicación: seleccionamos los elementos necesarios del HTML y adjuntamos detectores de eventos a los botones "Agregar tarea" y "Eliminar tareas seleccionadas". Cuando se hace clic en el botón "Agregar tarea", creamos una nueva opción de tarea basada en el valor del campo de entrada y la agregamos al <select>elemento. Cuando se hace clic en el botón "Eliminar tareas seleccionadas", eliminamos las tareas seleccionadas del <select>elemento.

Diferencia entre cambio y evento de entrada

El evento de entrada en JavaScript se activa cada vez que cambia el valor de una entrada, <select>o <textarea>elemento. A diferencia del evento de cambio, que espera a que se confirme un valor (por ejemplo, cuando una entrada pierde el foco), el evento de entrada se activa continuamente a medida que cambia el valor. El evento de entrada básicamente proporciona una forma de responder a la entrada del usuario en tiempo real. Ejemplo:

<!DOCTYPE html>
<html>
<body>
    <label for="userInput">Enter Your Name:</label>
    <input type="text" id="userInput" placeholder="Your name">
    <p>Your name is: <span id="displayName"></span></p>
</body>
</html>

Este HTML configura una página web simple con un campo de entrada para que el usuario ingrese su nombre y un elemento de párrafo donde mostraremos el nombre ingresado dinámicamente.

<script>
    const userInput = document.getElementById('userInput');
    const Name = document.getElementById('displayName');

    userInput.addEventListener('input', function() {
        Name.textContent = userInput.value || 'Guest!';
    });
</script>

Este código JavaScript selecciona el campo de entrada con el ID "userInput" y el elemento span con el ID "displayName".
Se adjunta un detector de eventos al evento de entrada del campo userInput.
Cuando se activa el evento de entrada (por ejemplo, al escribir en el campo de entrada), el controlador de eventos actualiza el contenido de texto del displayNameintervalo dinámicamente para reflejar el nombre ingresado, o muestra "Anónimo" si el campo de entrada está vacío.
Ahora, si cambia 'entrada' por 'cambiar' aquí userInput.addEventListener('input', function()de esta manera: userInput.addEventListener('change', function(), el detector de eventos se activará solo cuando el campo de entrada pierda el foco después de que se haya ingresado un valor (en lugar de hacerlo continuamente mientras el valor se cambia en realidad). tiempo).

Conclusión

Al comprender los fundamentos de los elementos, atributos y eventos de los formularios HTML, puede crear formularios web dinámicos y fáciles de usar que mejoran la experiencia del usuario.

JavaScript juega un papel crucial en el manejo de envíos de formularios, validar las entradas de los usuarios y proporcionar comentarios en tiempo real a los usuarios.

A través de ejemplos prácticos y explicaciones detalladas, en esta guía ha aprendido a trabajar con botones de opción, casillas de verificación, elementos de selección y a manejar selecciones múltiples.

Continúe explorando y experimentando con los conceptos presentados aquí para crear formularios sólidos e intuitivos para sus aplicaciones web.