DOM/accessing-form-elements.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Accessing form elements</title>
  </head>
  <body>
    <div id="output"></div>

    <script>
      const output = document.getElementById("output");
      output.innerHTML = `
      <h1>Accessing form elements</h1>
            </br>
            <form name='order'>
                <label>
                    Name: <input name="fullname" type="text" value="rakib">
                    </label>
                </br>
                <label>
                    Email: <input name="email" type="email">
                    </label>


                </form>
        `;
      const form = document.forms.order;
      console.log(form);

      //   const nameInput = form.elements.fullname;
      const { fullname, email } = form.elements; //using destructuring
      console.log(fullname, email);
      console.log(fullname.value);

      function handleInput(event) {
        console.log(event.target.value); //access value
        console.log(event.target.form); //access form
      }
      fullname.addEventListener("input", handleInput);
    </script>
  </body>
</html>