This tutorial explains the basics of a web form, how it works and how you can make a web form from scratch.
How does a web form work?
- A visitor visits a web page that contains a form.
- The web browser displays the HTML form.
- The visitor fills in the form and submits
- The browser sends the submitted form data to the web server
- A form processor script running on the web server processes the form data.
The processing steps can include:
- sending the form submission by email
- saving the submission to a database table or a file.
- A response page is sent back to the browser.
The parts of a web form
A standard web form has the following parts:
- The HTML code for the form
- Input validations.
- Form processor script.
1. The HTML code for the form
HTML has tags for creating a web form and the input elements. The HTML Form Tutorial contains detailed explanation of how to compose a web form. Here is some sample code for a simple HTML form:
<form action="cgi-bin/formmail.pl" method="post"> Name: <input type="text" name="name" value="" size="25" maxlength="50" /> Email: <input type="text" name="email" value="" size="25" maxlength="50" /> <input type="submit" name="submit" value="sign me up!" /> </form>
The HTML code above creates a form like this:
2. The input validations
3. Form Processor Script
When you submit a web form, the web browser looks for the ‘action’ attribute of the <form> tag. For an example, in the sample HTML form code above, the action attribute points to a script located at
"/cgi-bin/formmail.pl". The web browser sends the form submission data to the script mentioned in the ‘action’ attribute.
The server side script can be in Perl, PHP or ASP depending on what the web server supports.
The action-script on the server can be custom made or can be a ready-made one.
There are ready-made scripts available that can send the form submissions to your email address. See the Form mail scripts page. For examples of saving form submissions to a database, see the form processing script page.
Making a web form
To make a complete web form, you need to code these three parts of the form.
- The HTML code for the form.
- The input validations.
- The server-side form processor script.
Refer the HTML form tutorial for more information on how to code the HTML part of the form
Make complete web forms quickly.
Getting all the parts of a web form right is not easy. Coding a web form is time consuming. Try Simfatic Forms. You can visually design the form and get all the code generated. Even newbies can roll out feature-rich web forms quickly. Read more here: How to make a web form quickly.
Most of the time, Prasanth is busy adding features to Simfatic Forms - a desktop based Web Form Builder.
Latest posts by Prasanth Janardanan (see all)
- The Most Indispensable jQuery Form Validation Reference Guide - June 19, 2014
- How to Use the Dreamweaver Form Validation Feature - February 6, 2014
- jQuery Popups - February 15, 2013