An introduction to the InternetAdvanced HTML (1) [Archives:2003/661/Education]

Adnan A. Al-Harazi
Academic Head
NCC Education, Yemen Center
Continuing our lessons in HTML, we will move ahead to the advanced techniques used by web designers. 'Advanced' here means more creative and interactive web pages. Since the beginning of these lessons, we where talking about using static HTML tools. By using advanced HTML tools we can have the web pages react to the visitors clicks. We can read and store information sent by visitors.

Introduction into Forms
HTML forms are widely used to gather data from users of web pages to be processed by web servers. As we can see in fig 1, an HTML form consists of different objects such as buttons, textboxes, dropdown lists, check boxes, and option buttons.
To understand how to use forms to collect data from visitors, we need to know about the processing cycle for that.
The process starts when the user requests a resource through the browser. This could be done by typing a complete URL, or clicking on a link, or using a search engine. The request for a URL goes to the server using the HTTP protocol. The server responds by sending back HTML file containing the form. This is then interpreted by the browser and displayed as a form on the user's screen. Then, the user fills in the form. Note that a simple HTML form cannot validate this data as it is entered. When the user clicks on the button to return the form, the browser puts together a message containing the form data and sends this back to the server. Fig 2 shows the whole process for that. From the web server viewpoint the interaction starts with the receipt of a request for a resource based on a URL and using HTTP. The server responds to this by locating the resource required, which in this case is an HTML file containing a form. The server returns the HTML form to the browser. This completes the transaction from the server viewpoint.
After the user fills the form, a message may come from the browser to the server using HTTP containing form data and directed to a program. The server will not associate this message with the previous request for the form. The server recognizes that this response needs to be handled by a particular program. This program runs on the web server or in another server. It will require data to be accessed which is located on the server. A response may be sent back to the browser as a confirmation or an error message. The requested program will be the name of a program located within a specific directory or a script file written by a scripting language such as Active Server Pages, Java Scripts , Visual Basic Scripts or PHP. Fig 2 demonstrates the process of using Common Gateway Interface CGI programs to access data.
In case a scripting language was used to access the data, the web server will not need to use the CGI to run. However, the server extensions of the scripting language used must be installed in the web server. Most of web servers support the use of Java scripts, and only Microsoft Internet Information Server (IIS) supports the using of Visual Basic scripts.

Form Tags
The filling in of an HTML form is carried out entirely by the browser. The web server does not get involved in this process. The browser cannot carry out any detailed validation of the data which the user supplies. HTML forms only have text fields, so cannot detect when a user types a letter when a number is required. This type of validation can only be done when the data is returned to the server. To add a form to a web page we use the form tags as follows:

The attribute “name in the form tag is important only when the form objects are called in another place, so it can be omitted when it's not needed.
The attribute “action” is required to determine the file that includes the scripts used to access the database or to respond to the client. The file we called here is called “results.asp” and was designed by using Active Server Pages. We are assuming here that the file is saved in the same directory of the form file in the web server.
The attribute “method” is also required to determine the way the form data will be sent from the client computer to the server. There are two common methods used for this purpose, POST and GET. POST method is useful if we need to secure the form data and can be used to send bulk data. Get method is useful for the transferring of small volume of data and the variables used to represent the form objects will show up in the URL of the browser which can be used to crack the data in-transition.
Well, we have now to add the objects (fields) of the form such as textboxes and command buttons. For the sake of practicing, we will design a form that will validate login information as it looks in Fig 3.
To add a textbox to the form we add the following code in between the form opening and closing tags.

User Name
So the type for this form field is “text” and its name is “uname” (you can give it any other name). And finally, the size (length) of this textbox is 20. You can add more attributes to this textbox such as the background color, the font color …etc. You do the same thing for the password textbox except you change the type to “password” and the name to a different name. The type here is different so as to hide the password characters with “******” when the users type it.
For the Submit and Rest buttons we add them as follows:




So the type for the submit button is “submit” and the value (its label) is “Submit”, you can change the value to “Go” or “search” or anything you like. The name of this button is “B1”. I think its clear how we added the Reset button. Please notice here that we need to add the HTML tags and the spacing tags to align these objects. The full code for our form file shows in Fig4.
if you have any questions about the lessons please send me an e-mail to [email protected].
Next week: More on Advanced HTML
——
[archive-e:661-v:13-y:2003-d:2003-08-21-p:education]