Web Forms API in JavaScript

The Web Forms API in JavaScript allows developers to interact with and control HTML forms and their elements (like <input>, <select>, <textarea>, etc.) directly from JavaScript.

It provides a powerful way to validate, access, modify, and submit forms dynamically.

Basic Access to Form Elements

You can access forms using the document.forms collection:

const myForm = document.forms['myForm']; // by name attribute

Or using:

const myForm = document.getElementById('myForm'); // by id

Accessing Form Elements

<form id="loginForm">  <input type="text" name="username" />  <input type="password" name="password" /></form>

const form = document.getElementById('loginForm');const username = form.elements['username'].value;const password = form.elements['password'].value;

Form Validation

HTML5 forms support built-in validation (e.g., required, type="email"). You can access it with JavaScript:

if (form.checkValidity()) {  alert('Form is valid!');} else {  alert('Form is invalid!');}

Prevent Default Form Submission

To handle form submissions with JavaScript:

form.addEventListener('submit', function(e) {  e.preventDefault(); // Prevent page reload  console.log('Username:', form.username.value);});

Reset and Submit Methods

form.reset();   // Clears all fields to default valuesform.submit();  // Submits the form programmatically

Custom Validation Example

const email = form.elements['email'];if (!email.value.includes('@')) {  email.setCustomValidity('Email must contain @');} else {  email.setCustomValidity('');}

Summary

Would you like an example of form validation or AJAX form submission next?