Before we dive into JavaScript, let's quickly review what an HTML form looks like:

<form id="myForm">
  <input type="text" name="username" id="usernameInput">
  <input type="password" name="password" id="passwordInput">
  <button type="submit">Submit</button>
</form>

This creates a simple form with a text input for a username, a password input, and a submit button.

1. Form Properties and Methods

Accessing Forms

JavaScript provides several ways to access forms on a webpage:

• Using document.forms:

// Access the first form on the page
let firstForm = document.forms[0];

// Access a form by its name or id
let myForm = document.forms.myForm;
// or
let myForm = document.forms['myForm'];

• Using query selectors:

// Using getElementById
let myForm = document.getElementById('myForm');

// Using querySelector
let myForm = document.querySelector('#myForm');

Accessing Form Elements

Once you have a reference to a form, you can access its elements:

• Using the elements property:

let form = document.forms.myForm;

// Access by name
let usernameInput = form.elements.username;

// Access by index
let passwordInput = form.elements[1];

• Using query selectors on the form:

let usernameInput = form.querySelector('#usernameInput');

Form Properties

Forms have several useful properties:

• form.length: Returns the number of elements in the form.

console.log(form.length);  // Outputs: 3 (2 inputs + 1 button)

• form.name: Gets or sets the name of the form.

console.log(form.name);  // Outputs: "myForm"
form.name = "newFormName";

• form.method: Gets or sets the HTTP method used to submit the form.

console.log(form.method);  // Outputs: "get" (default)
form.method = "post";

• form.action: Gets or sets the URL where the form data will be submitted.

console.log(form.action);  // Outputs: current page URL by default
form.action = "https://example.com/submit";

Form Methods

Forms also have methods you can use:

• form.submit(): Submits the form programmatically.

• form.reset(): Resets all form elements to their default values.

2. Focus

Focus determines which element is ready to accept input from the keyboard. It's an important concept for form usability and accessibility.

Setting Focus

You can set focus to an element using the focus() method:

let usernameInput = document.getElementById('usernameInput');
usernameInput.focus();

This will move the cursor to the username input field, ready for the user to type.

Removing Focus

To remove focus from an element, use the blur() method:

usernameInput.blur();

Checking Focus

You can check if an element has focus using the :focus pseudo-class in CSS, or the document.activeElement property in JavaScript:

if (document.activeElement === usernameInput) {
  console.log('Username input has focus');
}

Focus Events

There are two main focus-related events:

• focus: Fired when an element receives focus.
• blur: Fired when an element loses focus.

Example:

usernameInput.addEventListener('focus', function() {
  console.log('Username input focused');
});

usernameInput.addEventListener('blur', function() {
  console.log('Username input lost focus');
});

3. Form Submission

Form submission is the process of sending form data to a server.

The Submit Event

When a form is submitted (either by clicking a submit button or pressing Enter in a text field), it triggers a submit event. You can listen for this event to perform actions before the form is sent:

form.addEventListener('submit', function(event) {
  // Prevent the form from submitting normally
  event.preventDefault();
  
  console.log('Form is being submitted');
  
  // You can perform validation or other actions here
});

Validating Form Data

Before submitting a form, you often want to check if the data is valid. Here's a simple example:

form.addEventListener('submit', function(event) {
  event.preventDefault();
  
  let username = form.elements.username.value;
  let password = form.elements.password.value;
  
  if (username.length < 3) {
    alert('Username must be at least 3 characters long');
    return;
  }
  
  if (password.length < 6) {
    alert('Password must be at least 6 characters long');
    return;
  }
  
  // If we get here, the form is valid
  console.log('Form is valid, submitting...');
  this.submit();
});