JavaScript Coder

How to make a web form

beginner create web form how to make a form

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?

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:

  6. sending the form submission by email

  7. saving the submission to a database table or a file.

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

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.

See Also

Categories