Forms…how do they work?

In nearly every web application, you will build a form of some kind. There are a lot of moving parts with forms. So I thought I would spend a post discussing those parts…or at least parts of those parts.

Process

So how does this whole form process work? At its basic level, it works as follows…

1. End user submits the form
2. Form is received by the web server
3. Submission is passed to the app server (.NET, Java, PHP, etc.)
4. App processes the form (validation, database interactions, etc.)

Now, that is an extremely high-level explanation. There are a lot of pieces that need to be in place for a form to work properly. Let me address each of these over several posts. Let’s begin with the first one…the end user submitting the form.

In the ‘old days’, HTML forms were submitted directly to the web server. This is no longer the case. As web developers, what we typically do is capture the form submission. In other words, we do not allow the form submission to occur as it normally would under regular HTML. We want to control the submission process to ensure it is completed properly. Typically, this involves validation (which I will write a more detailed validation post at a later date). We want to make certain that our data is correct and we do not get

We want to make certain that our data is correct and we do not get ‘GIGO’, or Garbage In, Garbage Out. Data is the life-blood of an organization. So we want to ensure it is as clean as possible. This may be checking that the data is in the format required, that there is data in the form fields at all, etc.

So, nowadays, we grab the submission event and stop it. We then run the form data through several validation checks, give whatever feedback is necessary and submit the form on behalf of the end user.

There are several ways to stop the regular form submission process. Some of these depend on the framework that is being used. Allow me to offer just some examples of how a developer might do this…

// This example uses jQuery
$('#someForm').submit(function (evt) {
    // Prevent default stops the default behavior
    evt.preventDefault();
});
// This example is raw JS
element.addEventListener("submit", function(evt) {
    // Prevent default stops the default behavior
    evt.preventDefault();
}
// A return function statement can also be used
onsubmit="return someFunc()"

I, personally, prefer the first two methods of using preventDefault(). This separates the functionality from the content.

Happy Coding!

Clay Hess