import ‘./assets/css/style.css‘; const app = document.getElementById(‘app‘); app.innerHTML = ` <h1>JavaScript DOM</h1> <form name="order"> <label> Your name <input type="text" name="fullname"> </label> <label> Your email <input type="text" name="email"> </label> </form> `; const form = document.forms.order; const {fullname, email} = form.elements; function handleInput(event) { // access the value console.log(event.target.value); // access the form console.log(event.target.form); } fullname.addEventListener(‘input‘, handleInput);
1. You can use document.forms to access form, by given form a name, you can access that form by name
const form = document.forms.order;
2. Inside event handler, you can also get form reference by:
// access the form console.log(event.target.form);
3. Access the elements of the form:
const {fullname, email} = form.elements;