HTML Form Elements Part 2
Posted in HTML | Posted on 13-04-2009-05-2008
In the previous tutorial, we were introduced to the most common elements used in a form. In this tutorial we will use the form tag and submit data to a server.
Before we go any further, you should know the fundamentals of how a form works. The image below displays the cycle that occurs between a user’s PC and the website’s server.
Here’s what’s happening. The PC, or Mac(for Mac users) is the user’s computer. At this moment your computer is the PC. When you visit learnhtmlonline.com or any other website on the Internet; all the HTML pages, images, and files are hosted on a more powerful computer called a server. It’s just like when you go to a restaurant, you ask the server for something, and the server gives it to you.
What occurs with our form is the same. When we fill out the form and submit it, we are making a request to the server. We want the server to do something with the data that we submitted. The data is then received by the server and manipulated by a file called a cgi (Common Gateway Interface) script. The cgi script manipulates the data and then responds back to the user (PC) by displaying an HTML page.
Let’s see this form and cgi script in action. Open up your notepad and copy/paste or type the following:
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />
<title>HTML Form Elements</title>
</head>
<body>
<form action=”http://www.learnhtmlonline.com/cgi-bin/form1.cgi” method=”post”>
First name:
<br />
<input type=”text” name=”firstname” />
<br />
Last name:
<br />
<input type=”text” name=”lastname” />
<br /><br />
Age:
<br />
<input type=”radio” name=”age” value=”yes” /> over 21
<br />
<input type=”radio” name=”age” value=”no” /> under 21
<br /><br />
Car:
<br />
<input type=”checkbox” name=”car” value=”Mercedes Benz” /> Mercedes Benz
<br />
<input type=”checkbox” name=”car” value=”BMW” /> BMW
<br />
<input type=”checkbox” name=”car” value=”Bentley” /> Bentley
<br /><br />
City:
<br />
<select name=”city”>
<option value=”new york”>New York</option>
<option value=”los angeles”>Los Angeles</option>
<option value=”miami”>Miami</option>
</select>
<br /><br />
Notes:
<br />
<textarea rows=”10″ cols=”20″ name=”notes”> </textarea>
<br /><br />
Password:
<br />
<input type=”password” name=”password” />
<br /><br />
Submit Button:
<br />
<input type=”submit” value=”GO!” />
<br /><br />
</form>
</body>
</html>
Save this file as form2.htm.
Understanding The Code
If you did the previous form tutorial, you will notice that this example is pretty much the same example as the last one. There is one major difference and it’s this line:
This line of code sends all of the user’s input data to the server. In this example, we have action=”http://www.learnhtmlonline.com/cgi-bin/form1.cgi”. When the user clicks the submit button, the information will be sent to a cgi script(form1.cgi) on the learnhtmlonline.com server. The method attribute specifies how to send the form’s data. “get” is another option you can use with your form.
When you try this example and submit your data, you should see a page with the values that you have entered in the form.
Final Word
We now understand the cycle between the user and server. This cycle just doesn’t occur when you use a form. This cycle is the way the Internet actually works. When you visit your favorite website, a server responds and gives your computer the files needed to display the webpage in your browser. Of course there is more to explain from a technical standpoint of how the Internet works. That is beyond the scope of this tutorial.
You might be wondering how to make the cgi script. This cgi script was made with a language called Perl. You can also use other languages such as PHP or ASP. In the future we will revisit this cgi script and learn how it was made.