You are here: Home » All Posts » HTML Forms » HTML Form Tutorial

HTML Form Tutorial

in HTML Forms

While other elements of HTML gives style and meaning to your website, an HTML form adds interactivity. HTML forms handle important functions like taking orders, surveys, user registration and more. You will hardly find a single web site without forms.

How does an HTML form work?

A web form has two parts: the HTML ‘front end’ and a back end form processor. The HTML front end part handles the presentation while the back end handles the form submissions (like saving the form submissions, sending emails etc).
The back end form processor script is usually written in languages like PHP, ASP or Perl.

The image below illustrates the concept:
Illustration : web form working

  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
  6. A response page is sent back to the browser.
Do you want to make web forms quickly using a visual editor? Try Simfatic Forms.
More info: How to Make Web Forms Quickly

Also see How to build a form video tutorial here:

The HTML form tag

All the input elements should be enclosed within the opening and closing <form> tags like this:

<form>

The input elements go here….

</form>

The following are the attributes of the form tag:

action=”Link to the form processor script”
The action attribute points to the server side script (the ‘back end’) that handles the form submission. Usually, this will be a script (PHP,ASP, Perl) or a CGI program.

For more information, see: Switching HTML form action field dynamically

method =get|post ( either GET or POST)
In simple terms, if you use GET method, the form submission values are passed as part of the URL. If it is POST, the information is sent to the server as part of the data body and will not be visible in the URL box in the user’s browser.
If you don’t specify the method, GET is taken by default.

Suppose your form handler page is a Perl script named formmail.pl. the HTML form code would be:

<form action="cgi-bin/formmail.pl" method="post">
................................
.....your input items here .....
................................
</form>

Read more about the HTML Form tag here and about the GET and Post methods here.

The form input elements

You can have different types of input elements in a form. Examples are: check boxes, radio buttons, simple text boxes etc.

Let us see how to create input elements for a form.

Single line text box

text input

A single line text box can be used to collect the name, email, phone number etc from your web site visitors.

Here is the code to create a simple text box:

<input type="text" name="FirstName" />

type=”text”
the ‘type’ attribute tells the browser that a single line text input box should be created.

name=”FirstName”
gives a name to the field. The name is used to identify the field on the server side.

There are some more attributes that you can use with the text box

value=”default value”
The text you give as value will be displayed by default in the text box.
Example:

<input TYPE="text" name="FirstName" value="Your FirstName here,Please" />

maxlength=”maxChars”
Specifies the maximum number of characters the user can enter into this text box.

Let us expand our previous HTML form with some text boxes.

<form action="cgi-bin/formmail.pl" method="post">
   <p>
   Name: <input type="text" name="FirstName" value="" size="25" maxlength="50" />
   </p>
   <p>
   Email: <input type="text" name="Email" value="" size="25" maxlength="50" />
   </p>
</form>

There are two fields in this form for collecting the name and email address of the visitor. The <p> tags are to break the input elements in to two lines.

Submit button

HTML form submit button

After entering the data, the user presses the submit button which triggers the browser to send the data to the server. You can add a submit button to the form using the ‘submit’ input type.

<input type="submit" name="submit" value="Submit" />

name =”submit”
There can be more than one submit buttons in a form. On the server side, the submit button which was pressed can be identified using the ‘name’ attribute.

value=”Submit”
The string given in the ‘value’ attribute is displayed as the label of the Submit button.

Let us put it together to make a complete form page:
HTML form tutorial example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns='http://www.w3.org/1999/xhtml'>
   <head >
      <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
      <title >Form Page: sampleform</title>
   </head>
<body>
<h1>Sample form page</h1>

<form id='sampleform' method='post' action='' >
   <p>
   Name: <input type='text' name='Name' />
   </p>
   <p>
   Email: <input type='text' name='Email' />
   </p>
   <p>
   <input type='submit' name='Submit' value='Submit' />
   </p>
</form>

</body>
</html>

Copy this code to an HTML file and open it in your favorite browser.

See the form in action:
HTML form tutorial example

Next part: HTML Form Tutorial Part II : More Input Elements

Also see:
How to build a form: HTML Form Guide

Be Sociable, Share!
  • ghost101

    This was exelent information now i can finish my own site thanx again

  • juliette

    thanx

  • lol

    lolz

  • yoooooooooooooo

    ANDDDDDDYYYYYYYY!!!!!!!!!!!!!!

  • yoooooooooooooo

    9876543210

  • yoooooooooooooo

    :)

  • yoooooooooooooo

    yoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

  • yoooooooooooooo

    yooooooooooooooooooooooo

  • JayR24

    thank you!

  • http://www.facebook.com/Vrutin Vrutin Rathod

    Thanks, Really made it easy to understand …

  • gyaneshwar

    great info man, this helped me a lot. thank you.

  • http://jamaicapublishing.com Jamaica Publishing

    Try this code on a website of mine and it work fine

  • http://www.vertailepikavippi.com vippi

    Great info, thank you for sharing½!

  • http://techhacker.com Tejas

    Thank you ..Helped me learning basics for next PHP tutorials :D

  • http://fhatusani.co.za Eric

    Could you help me. I am writing a website and would like to use the form and post methods. either using the mailto action or website. What I would like to understand is as the website owner, how do i get the information when the user has submitted. The mailto: will probably use the email but how do i get the info that is sent via the website. Secondly how do I prepare the webpage or receiving the user inputs?

  • Lucinda

    aparna, maybe a page called “HTML form tutorial” wasn’t quite right for you then.

    Very helpful, thanks for posting it :)

  • kim

    Good article!

  • http://lainaarahaa.blogspot.com Pikavippi

    Good info here, thanks for sharing this with us.

  • aparna

    I wanted to know how to submit a value without using a form,but these codes didn’t help me.

Next post: