HTML Forms: Basic Concepts - Part 1

HTML FORMS PART 1 | HTML FORMS PART 2

BEFORE YOU BEGIN

If you are new to web design in general, then you have to check out my online course on web design before you can benefit from this article to its fullest.

HTML FORMS: BASIC CONCEPTS – Part 1

When the web was first invented, it was just an elegant and simple system of exchanging information with the world using a simple page paradigm. Yet one of the problems with simple web pages was that there was no way to gather information from people who were visiting a web site.

To solve this problem, some smart people came up with an extension to HTML (the language/system used to build web pages) called 'forms.'

WHAT IS AN HTML FORM?

An HTML form is made up of a bunch of HTML tags that allow people visiting web sites to enter in information or select information from a list that can then be transmitted to the server for processing.

We all know that HTML tags are used to build a web page; some tags are used to create headers, others to create tables and yet others are used to create forms and form elements. HTML has a bunch of tags that are used to create forms and the sub-elements that make up an HTML form.

To make an HTML form you need to first create the mother of all form tags that creates the 'form' and defines its region or boundary:

	        <form action="myFormScript.php " method="post" >

	        … All the form buttons and fields are inserted here

	        </form>
  

This set of form tags does a couple of things:

1. It defines the region of the form: Any form tags inserted in between these two tags are considered (by the browser) to be part of the same form.
2. Tells the browser where to send the information entered into the form.

So what does that mean in practical use?

To understand what that means, you have to understand one important point: the content of an HTML form (what ever the user / person fills in) is sent to the server as a collection of information.

It may be easier to think of an HTML form as a basket of information about a particular subject. So when someone fills in the HTML form, it is like someone is adding things to a basket. When the person is finished filling in the form (the basket is filled) he or she then 'walks over' (submits the form by clicking on the 'submit' button) to the 'checkout' (server) so that the contents of the basket can be processed.

Many times the information that is filled out in a form is sent to a server so that a server script (a server script is like a mini-program) can insert this information into a computer storage program called a 'database.'

If you ever heard of CGI, ASP, PHP, JSP and others like them, these are server side programming / scripting languages that are often used with HTML forms. As I mentioned above, these languages (ASP, PHP, JSP etc.) are used to create scripts that can read (geeks like to say 'parse') the information sent to it using an HTML form.

One last point for this newsletter; as mentioned above, the form tag also tells the browser (Netscape for example) where to send the information, or as a geek would say: where to submit the form too.

This is done with this text: action="myFormScript.php". The 'action' attribute of the form tag specifies the location of the script that will handle the form data, more about this in part 2.

In part 2 of this little series I will show you some of the HTML form tags that are actually used to collect information from people. I will also show you how to set up a form and even give you a practice script you can work with to see your form in action!

For you more advanced coders who are out there, I also plan to include some flexible JavaScript code that you can use to validate your forms.

These script are very short and easy to work with, even if you don't know programming. You should also find them better to use than the complex scripts that a program like Dreamweaver might spit out – not that I have anything against Dreamweaver! :)

NEXT: HTML FORMS PART 2

Top

© 1996 -
Fatal error: Uncaught Error: Undefined constant "Y" in /home/killersi/public_html/articles/newsletterArchive/html-forms-part1.php:125 Stack trace: #0 {main} thrown in /home/killersi/public_html/articles/newsletterArchive/html-forms-part1.php on line 125