<form action="URL">
  <!-- form controls -->
</form>

<!-- Absolute URL -->
<form action="https://api.example.com/submit">

<!-- Relative URL -->
<form action="/contact/submit">

<!-- Current page (default behavior — action omitted) -->
<form method="post">

<form action="/contact/submit" method="post">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">

  <input type="submit" value="Send">
</form>

<form action="/default-endpoint" method="post">
  <input type="text" name="query">
  <button type="submit">Save draft</button>
  <button type="submit" formaction="/publish-endpoint">Publish</button>
</form>

const form = document.querySelector('form');

// Read
console.log(form.action); // "https://example.com/contact/submit"

// Set dynamically
form.action = '/new-endpoint';

<form method="get | post | dialog">

<form action="/search" method="get">
  <input type="text" name="q" placeholder="Search...">
  <button type="submit">Search</button>
</form>
<!-- Submits to: /search?q=your+query -->

<form action="/login" method="post">
  <input type="email" name="email">
  <input type="password" name="password">
  <button type="submit">Log in</button>
</form>
<!-- Credentials are sent in the request body, not the URL -->

const form = document.querySelector('form');
console.log(form.method); // "get" or "post"
form.method = 'post';

<form method="post" enctype="MIME-type">

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="avatar">Upload profile photo:</label>
  <input type="file" id="avatar" name="avatar" accept="image/*">
  <button type="submit">Upload</button>
</form>

const form = document.querySelector('form');
console.log(form.enctype); // "application/x-www-form-urlencoded"
form.enctype = 'multipart/form-data';

<form action="/submit" method="post" target="_blank">

<form action="/search" method="get" target="_blank">
  <input type="text" name="q">
  <button type="submit">Search in new tab</button>
</form>

const form = document.querySelector('form');
console.log(form.target); // "_self"
form.target = '_blank';

<form action="/submit" method="post" novalidate>

<form novalidate>
<form novalidate="">
<form novalidate="novalidate">

{/* React Hook Form pattern */}
<form onSubmit={handleSubmit(onSubmit)} noValidate>
  <input {...register("email", { required: true, pattern: /^\S+@\S+$/i })} />
  {errors.email && <span>Email is required</span>}
  <button type="submit">Submit</button>
</form>

<form action="/submit" method="post">
  <input type="email" name="email" required>
  <button type="submit">Submit</button>
  <button type="submit" formaction="/save-draft" formnovalidate>Save draft</button>
</form>

const form = document.querySelector('form');
console.log(form.noValidate); // false (note: camelCase in JS)
form.noValidate = true;

<form action="/submit" method="post" autocomplete="on | off">

<form action="/payment" method="post" autocomplete="off">
  <input type="text" name="card-number" placeholder="Card number">
  <input type="text" name="cvv" placeholder="CVV">
  <button type="submit">Pay</button>
</form>

const form = document.querySelector('form');
console.log(form.autocomplete); // "on"
form.autocomplete = 'off';

<form name="contactForm" action="/contact" method="post">

// Via document.forms collection
const form = document.forms['contactForm'];

// Or equivalently
const form = document.forms.contactForm;

// Trigger submission programmatically
form.submit();

const form = document.querySelector('form');
console.log(form.name); // "contactForm"

<form action="https://external.example.com/submit" method="post" rel="noopener noreferrer">

const form = document.querySelector('form');
console.log(form.rel); // "noopener noreferrer"
form.rel = 'noopener';

<form method="post" action="/preferences">
  <fieldset>
    <legend>Do you agree to the terms?</legend>
    <label>
      <input type="radio" name="terms" value="yes"> Yes
    </label>
    <label>
      <input type="radio" name="terms" value="no"> No
    </label>
  </fieldset>
  <button type="submit">Continue</button>
</form>

const form = document.getElementById('myForm');

// Submit without triggering the submit event
form.submit();

// Reset all fields to their default values
form.reset();

// Check validity without submitting
const isValid = form.checkValidity(); // returns boolean
form.reportValidity();               // shows native validation UI

<form action="/api/v1/submit-data" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required />
  <button type="submit">Submit to Server</button>
</form>

// app/actions.ts - Secure Server-Side Logic
'use server'

import { revalidatePath } from 'next/cache';

export async function handleSecureIntake(formData: FormData) {
  const email = formData.get('email');

  // Logic forged in high-stakes environments like BNY Mellon [cite: 62, 98]
  // Process data securely with "correct-by-design" rigor [cite: 70]
  console.log(`Processing secure intake for: ${email}`);

  // Trigger on-demand ISR via your revalidateCache route [cite: 14, 26, 55]
  revalidatePath('/[locale]/marketing-pages'); 
}

// components/ModernForm.tsx - Seamless Frontend Interaction
import { handleSecureIntake } from '../app/actions';

export default function ModernForm() {
  return (
    <form action={handleSecureIntake} className="bg-background-light p-6 rounded-lg">
      <input 
        type="email" 
        name="email" 
        placeholder="Enter NYC Enterprise Email"
        className="border-border text-primary-dark"
      />
      <button type="submit" className="bg-primary hover:bg-primary-dark text-white">
        Execute Server Action
      </button>
    </form>
  );
}