You are here: Home » All Posts » HTML Forms » How to make a web form

How to make a web form

in HTML Forms

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

Note: Using Simfatic Forms you can create feature rich web forms quickly.
Click here for more info.

How does a web form work?

The working of a web form

  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.

The parts of a web form

A standard web form has the following parts:

  1. The HTML code for the form
  2. Input validations.
  3. 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:
A sample HTML form

2. The input validations

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).

This free JavaScript Form Validation script can help you quickly attach input validations to your form.

HTML form validation sample

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.

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.
  • 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.

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.

Be Sociable, Share!
  • shahroz

    good job

  • φωτοβολταικα
  • SEXY KUNT

    WTF GOOD JOB

  • sepelka
  • Kamal

    This is The Way To Teach… How A Form Work.. JUST PERFECT..

  • Pawan

    Good topic and well diagram I like it

  • http://shaileshtripathi.com Shailesh Tripathi

    Great job I like your type! Would genuinely like to right here your feedback on my blog site! I’m also searching for someone to assist me make web sites!

  • batkhuu

    Thank you for share :)

  • bl1ndfury

    Thanks for the help

Previous post:

Next post: