Accessing form elements

RakibRahman · RakibRahman · commit a6a387126436 · 2021-04-30T05:59:41.000+06:00
diff --git a/DOM/accessing-form-elements.html b/DOM/accessing-form-elements.html
@@ -0,0 +1,44 @@
+<!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>
