Lesson 15: Setting up Forms

Collecting information via the website has become an important task for any organization. The purposes may be to provide better services for the users, to get feedbacks, to carry out a marketing campaign and more. In order to collect information from the user, you need to set up forms on your webpage. The information collected from the webpage will be processed by the client and server programs. Data collected by the webpage is sent to the server by the client program using the protocol called HTTP (Hypertext Transfer Protocol) and processed by the server side program. The data sent by HTTP can be in the form of HTML documents, images or other media. It could be a request from the user such as a search keyword for certain information, the server program will then process the data and returns the requested information to the user.

The program that processes data sent by HTTP is usually a kind of scripting language known as Common Gateway Interface(CGI) written in Perl, C language, Java, ASP.net, PHP, Cold Fusion or some other languages. The Common Gateway Interface (CGI) is a standard for interacting with a Web server with a client running on a Web browser. These programs allow a Web developer to deliver dynamic information (usually in the form of HTML) via the browser. CGI programs are commonly used to for search engines, users registration, online forums, and other interactive applications on the web.

In HTML, you can set up forms easily using the form element. The form element comprises the method attribute that specifies the method with which the data is submitted to the gateway script in the server. There are two possible values associated with the method attribute, post and get. In the get submission, the data in the form is encoded into the URL while the post submission is passed directly to the gateway script. On top of that, the form element also comprises the action attribute that specifies the URL of the script that processes the data input from the form.

The basic HTML structure of the form element is as follows:

<form> action="action_page.php" method="post">
Your Name: <input type="text" name="name"><br>
Your Email: <input type="text" name="email"><br>
<input type="submit" value="Submit">
</form>

Below is a form that demonstrates the sending of a message

We shall deal with more complex form elements in the next lesson