HTML forms provide a structure for users to input data. Forms are used to gather user information, collect feedback, process orders, and more.

<form id="myForm" action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />
  <button type="submit">Submit</button>
</form>

Form Elements

Forms consist of various elements, each designed for a specific purpose. Some common form elements include:

• <input>: Text fields, checkboxes, radio buttons, file uploads
• <textarea>: Multi-line text input
• <select>: Dropdown menus
• <button>: Submit, reset, or custom buttons

Form Events

JavaScript allows us to interact with form elements using events. Key events include:

• onsubmit: Triggered when the form is submitted.
• oninput: Triggered when the value of an input element changes.
• onchange: Triggered when the value of a select or textarea element changes.

const myForm = document.getElementById('myForm');
myForm.addEventListener('submit', (event) => {
  event.preventDefault(); // Prevent default form submission
  // Your form handling logic here
);

Form Validation

Form validation ensures that user input meets specific requirements. We can implement validation using JavaScript:

const nameInput = document.getElementById('name');
nameInput.addEventListener('input', () => {
  if (nameInput.value.length < 3) {
    nameInput.classList.add('is-invalid');
    // Display an error message
  } else {
    nameInput.classList.remove('is-invalid');
  }
);

FormData API

Creating a FormData Object

The FormData API provides a convenient way to collect and send form data. You can create a FormData object using the `FormData()` constructor.

const formData = new FormData();

Appending Data

Use the `append()` method to add data to the FormData object. The first argument is the name of the field, and the second argument is the value.

formData.append('name', 'John Doe');
formData.append('email', 'john.doe@example.com');
formData.append('file', fileInput.files[0]); // For file uploads

Retrieving Data

You can retrieve data from a FormData object using the `get()` method, specifying the field name.

const name = formData.get('name');
console.log(name); // Outputs: 'John Doe'

Sending Data

The FormData object is perfect for sending form data to a server using AJAX requests. Here's how to use the `fetch()` API:

fetch('/submit', {
  method: 'POST',
  body: formData
}).then(response => {
  // Handle the response from the server
);

Form API

Form API Basics

The Form API provides a more structured way to handle form data, particularly in modern JavaScript applications. It allows you to manage form elements, validate inputs, and control form submission.

const form = document.getElementById('myForm');
const nameInput = form.elements.name; // Access form elements

Form Control Properties

Form controls (like input elements) have properties that you can use for validation and data manipulation.

• value: The current value of the input.
• checked (for checkboxes and radio buttons): Whether the input is checked or not.
• validity: An object containing information about the input's validity state.

if (nameInput.validity.valid) {
  // Input is valid
} else {
  // Input is invalid, display an error message
);

Summary

• Forms are essential for collecting data from users.
• JavaScript allows you to handle form events, perform input validation, and submit data.
• The FormData API offers a convenient way to collect and send form data.