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:
- A visitor visits a web page that contains a form.
- The web browser displays the HTML form.
- The visitor fills in the form and submits
- The browser sends the submitted form data to the web server
- A form processor script running on the web server processes the form data
- A response page is sent back to the browser.
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:
The input elements go here….
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>
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" />
the ‘type’ attribute tells the browser that a single line text input box should be created.
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
The text you give as value will be displayed by default in the text box.
<input TYPE="text" name="FirstName" value="Your FirstName here,Please" />
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.
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" />
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.
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
Most of the time, Prasanth is busy adding features to Simfatic Forms - a desktop based Web Form Builder.
Latest posts by Prasanth Janardanan (see all)
- The Most Indispensable jQuery Form Validation Reference Guide - June 19, 2014
- How to Use the Dreamweaver Form Validation Feature - February 6, 2014
- jQuery Popups - February 15, 2013