How to make a web form

This tutorial explains the basics of a web form, how it works and how you can make a web form from scratch.

1. A visitor visits a web page that contains a form.
2. The web browser displays the HTML form.
3. The visitor fills in the form and submits
4. The browser sends the submitted form data to the web server
5. A form processor script running on the web server processes the form data
The processing steps can include:
1. sending the form submission by email
2. saving the submission to a database table or a file.
6. A response page is sent back to the browser.

A standard web form has the following parts:

1. The HTML code for the form
2. Input validations.
3. Form processor script.

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 above HTML code creates a form like this:

Input validations are essential for any web form since it helps the web site visitor submit the right input. Input validations are often written in the client-side scripting language - JavaScript. (JavaScript runs inside the visitor's web browser and gives quick feedback).

The JavaScript Form Validation script can help in quickly attaching the input validations to your form.

It is required to do the validations on the server side as well. This is because JavaScript is an optional component that can be disabled and avoided. The server-side script should make sure that the data it processes is a valid form submission.

Note: Java and JavaScript are entirely different languages. There is nothing common between them.

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.

To make a complete web form, you need to code these three parts of the form.

• The HTML code for the form.
  Refer the HTML form tutorial for more information on how to code the HTML part of the form
• The input validations.
  You need to know the basic concepts of JavaScript to code the client-side validations. Once you know the basic JavaScript syntax, the JavaScript form validation script helps in coding the input validations.

Note that the JavaScript input validation part is completely optional though the client side validation can make the form more user-friendly.
• The server-side form processor script.
  You can either code a custom form processor script (example: PHP form to email and PHP form tutorial) or use a pre-made form mail script.

Getting all the parts of a web form 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