HTML Form Tutorial

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:

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.

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

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

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:

<!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!

• 

Related posts:

1. HTML Form Tutorial Part III : Still More Input Elements
2. HTML Form Tutorial Part IV: Server Side Form Processing
3. HTML Form Tutorial Part II : More Input Elements
4. The HTML Form Tag
5. The HTML Form Submit Button
6. How to switch the 'action' field in an HTML form dynamically
7. From an HTML Form to an Email Inbox
8. How to get the value of a form element using JavaScript
9. How to make a web form
10. How to use getElementById to get the elements in a form
11. How to Submit a Form Using JavaScript
12. Using JavaScript to reset or clear a form
13. Using JavaScript to access form objects when there are multiple forms
14. Can JavaScript email a form?
15. How to set the value of a form field using Javascript PII

Tagged as: beginner, html form, html forms, tutorial, web form