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

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

Be Sociable, Share!

{ 39 comments… read them below or add one }

ghost101 December 13, 2013 at 10:22 pm

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

Reply

juliette July 30, 2013 at 7:41 pm

thanx

Reply

lol May 5, 2013 at 3:39 pm

lolz

Reply

yoooooooooooooo February 19, 2013 at 8:44 pm

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

Reply

yoooooooooooooo February 19, 2013 at 8:41 pm

9876543210

Reply

yoooooooooooooo February 19, 2013 at 8:39 pm
yoooooooooooooo February 19, 2013 at 8:38 pm

yoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

Reply

yoooooooooooooo February 19, 2013 at 8:34 pm

yooooooooooooooooooooooo

Reply

JayR24 January 21, 2013 at 6:50 am

thank you!

Reply

Vrutin Rathod December 29, 2012 at 1:17 am

Thanks, Really made it easy to understand …

Reply

gyaneshwar March 28, 2012 at 7:34 pm

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

Reply

Jamaica Publishing March 12, 2012 at 4:16 am

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

Reply

vippi March 7, 2012 at 9:08 am

Great info, thank you for sharing½!

Reply

Tejas February 25, 2012 at 1:09 pm

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

Reply

Eric February 14, 2012 at 7:42 pm

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?

Reply

Lucinda February 9, 2012 at 10:54 am

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

Very helpful, thanks for posting it :)

Reply

kim February 5, 2012 at 6:03 pm

Good article!

Reply

Pikavippi January 20, 2012 at 11:55 am

Good info here, thanks for sharing this with us.

Reply

aparna January 15, 2012 at 6:51 am

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

Reply

Leave a Comment

Next post: