Submit HTML form on self page

Action attribute demystified

The action attribute leads where to send form data when a form is submitted. In line with HTML5 specifications, removing the action attribute causes the form to be submitted on the same document. This translates to the fact that setting action as an empty string is enough to submit a form and remain on the same page.

Avoid the common but technically incorrect practice of using action="#", which is interpreted to link to an anchor of the same name. Absent in most cases, this might result in an unexpected jump to the top of the page or other browser-related issues.

For a PHP environment, use:

<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post">
  <!-- We expect nothing less than perfection -->
</form>


The htmlspecialchars function sanitizes the PHP_SELF variable to prevent XSS attacks. (Cleanliness is next to godliness, right?)

Strong fort security

For form submissions, always validate input to dodge those security gaps:

• On the server-side, take precautions to process data: sanitize user input to avert SQL injection, apply correct form validation methods, and make use of parameterized queries.
• For sensitive forms (like login or payment forms), always ensure you are using HTTPS to protect transmitted data. (Safety first!)

State-less submission tricks

When there's no luxury of server-side scripting or working on a static site, third-party services like Formspree provide relief by handling form submissions. But, if you're just planning to manage input without a backend, JavaScript's Fetch API comes to the rescue to tackle data client-side:

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault();
  let formData = new FormData(this);
  
  // processData with JavaScript
  // Now you see me... console.log, store in localStorage, etc.
});


Checking compatibility across browsers

Adhering to standards is crucial for cross-browser compatibility. Align with the latest HTML specification for best practices. Although modern browsers are lenient, earlier versions might demand a full URL in the action attribute. (Talk about being high-maintenance!)

Best practices in form submission

• POST vs. GET: Use the POST method for form submission to hide sensitive data from being visible in the URL and to allow larger data payloads. (Perfect hide and seek!)
• Semantic elements usage: Aid users and search engines to understand your form by enclosing input fields within <label> tags.
• Progressive enhancement: Ensure basic functionality operates without JavaScript, to enhance the experience for users with capable browsers.