Understanding How Web Forms Work - dummies

By Paul McFedries

If you are hoping to undertake a web coding project, you will need to know how web forms work. A web form is a little data-gathering machine. What kinds of data can it gather? You name it:

  • Text, from a single word up to a long post
  • Numbers, dates, and times
  • Which item is (or items are) selected in a list
  • Whether a checkbox is selected
  • Which one of a group of radio buttons is selected

What happens to that data after you’ve gathered it? There are two roads the data can travel: Server Street and Local Lane.

The Server Street route means that your web server gets in on the action. Here are the basic steps that occur:

  1. The user clicks a button to submit the form.
  2. Your JavaScript/jQuery code gathers and readies the form data for sending.
  3. The code uses an Ajax call to send the form data to a PHP script on the server.
  4. The PHP script extracts the form data.
  5. PHP uses some or all of the form data to build and execute a MySQL query.
  6. PHP outputs either the requested data or some kind of code that indicates the result of the operation.
  7. Your JavaScript/jQuery code processes the data returned by the server and updates the web page accordingly.

The Local Lane route doesn’t get the web server involved at all:

  1. The user changes the form data in some way.
  2. Your JavaScript/jQuery code detects the changed data.
  3. The event handler for the changed form field updates the web page based on the changed data.