Why Form Submission is Obsolete

Traditional HTML form submission has several limitations that degrade user experience and make modern web development cumbersome. Below is an example of a standard contact form:

<!DOCTYPE html>
<html>
<head>
    <title>Contact Form</title>
</head>
<body>
    <h1>Contact Us</h1>
    <form action="/contact" method="post">
        Name: <input type="text" name="name" required><br>
        Email: <input type="email" name="email" required><br>
        Message: <br><textarea name="message" rows="4" cols="50" required></textarea><br>        
        <input type="submit" value="Submit">
    </form>
</body>
</html>

Challenges of Traditional Form Submission

Poor User Experience – After submission, the page reloads, losing all entered data. If the user wants to submit another message, they must re-enter their name and email.
Limited Feedback Mechanism – Displaying a success message requires additional server-side logic and page refreshes.
Event Restrictions – Form submission only works on button clicks (submit event) and does not support other interactions like mouseover, keypress, or dynamic validations.
No Partial Updates – The entire page must reload, slowing down interactions and increasing server load.

Modern Solutions: JavaScript and Front-End Frameworks

To overcome these limitations, developers use JavaScript and front-end frameworks (React, Vue, Angular) to handle form submissions asynchronously using fetch or XMLHttpRequest. These methods allow:

State preservation (no page reload).
Dynamic feedback (success/error messages without refresh).
Support for multiple events (submission on keypress, mouseover, etc.).

A Better Approach: Elanat’s WebForms Core technology

Elanat introduces WebForms Core, an HTML-loyal technology that enhances forms without requiring JavaScript expertise.
Key Features:

✅ Automatic AJAX Submission – Submit buttons send data via 'XMLHttpRequest' without extra attributes.
✅ State Preservation – The form retains input values after submission.
✅ Event Support – Works with all HTML events ('mouseover', 'keypress', etc.).
✅ Server-Side Tag Manipulation – Dynamically modify HTML from the server.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>WebForms Core Example</title>
    <script type="text/javascript" src="/script/web-forms.js"></script>
</head>
<body>
    <h1>Contact Us</h1>
    <form action="/contact" method="post">
        Name: <input type="text" name="name" required><br>
        Email: <input type="email" name="email" required><br>
        Message: <br><textarea name="message" rows="4" cols="50" required></textarea><br>        
        <input type="submit" name="button" value="Submit">
    </form>
</body>
</html>

Server-Side Handling (C# Example):

using CodeBehind;

public partial class ContactController : CodeBehindController
{
    public void PageLoad(HttpContext context)
    {
        if (context.Request.Form["button"].Has())
            Button_Click(context);
    }

    private void Button_Click(HttpContext context)
    {
        // Code for add contact to database
        // ...

        string name = context.Request.Form["name"];

        WebForms form = new WebForms();
        form.AddTag("<form>", "h3");
        form.SetBackgroundColor("<h3>", "green");
        form.SetText("<h3>", name + "! Your message was sent successfully.");
        form.Delete("<h3>"); // Remove after 3 seconds
        form.AssignDelay(3);

        Write(form.Response());
        IgnoreViewAndModel = true;
    }
}

The GIF image below shows how the above code works.

In this example, after clicking the button, first an instance of the WebForms class is created. Then a new h3 tag is created and the submit text is successfully added in it and shown to the user for 3 seconds and then removed. Finally the response is sent to the client using the Response method.

How It Works:

Client-Side – WebFormsJS sends form data via XMLHttpRequest.
Server-Side – The WebForms class manipulates HTML dynamically (e.g., adding a success message).
Response – The server sends commands (INI format) to update the DOM without reloading.

Server Response Example:

[web-forms]
nt<form>=h3
bc<h3>=green
st<h3>=Adriano! Your message was sent successfully.
:3)de<h3>=1

WebForms Core technology: Universal Support for All Programming Languages

One of the most powerful aspects of WebForms Core technology is that it is not limited to a single programming language. Unlike many front-end frameworks that depend on JavaScript or specific backend languages, WebForms Core is designed to work seamlessly across all server-side programming environments.

It is a two-way protocol between the WebForms class on the server side and the web-forms.js library on the client side, where processing is done on the client side and the server sends Action Control commands to WebFormsJS.

How to use WebForms Core?

First, download the WebForms class of the server programming language from the following link and add this class to the web project:
https://github.com/elanatframework/Web_forms_classes

Then download the WebFormsJS library from the following link and add it to the head section of the HTML page:

https://github.com/elanatframework/Web_forms/blob/elanat_framework/web-forms.js

You can also use the examples below to help.

Conclusion

Traditional form submission is outdated due to its poor UX and limitations. While JavaScript frameworks solve these issues, Elanat’s WebForms Core technology provides a seamless, HTML-friendly alternative with no front-end coding required.

By adopting WebForms Core, developers can build fast, interactive forms while maintaining full server-side control.

Elanat Framework @elanatframework