DHTML Tutorials  

Introduction
Basics of DHTML
IE vs Netscape

DHTML Effects
Drop Down Menus
Tip Boxes

DHTML Forms
Date Validation
Email Validation
Phone No. Validation
Text Box Char Counter
Reset with Image field
Check All check boxes

Basics of Dynamic HTML (DHTML)

Basics of DHTML for beginners

Once a web server processes a web page and sends it to the computer requesting it (called the 'Client' computer) it cannot get any more data from the server unless a new request is made. So to move around this drawback we use Dynamic HTML (DHTML) which is combining HTML and a scripting language that runs on the Client's browser to bring special effects to otherwise static pages. The scripting language that we will be using is JavaScript as most browsers support it. The scripting language can be used to alter HTML data shown (or present but hidden) on the current page by manipulating the properties for the HTML tags involved. Basically some script function is called to execute the required effect when events like 'MouseOver', 'MouseOut', 'Click', etc. occur. The major examples of DHTML are as follows :

• Using Layers : All the data to ever be displayed is loaded into the existing pages in HTML format but is hidden by using the visibility property of HTML layer elements like LAYER, DIV, etc. Now when an event like Mouse Over occurs a JavaScript function is called to show the layer. The layer is then hidden on Mouse Out event.
  
  
• Using Image Rollovers and Swaps : If you have some knowledge of web designing then you should know that when creating Image rollovers or image Swaps you usually take some script and include it to the content of your HTML pages. If you look carefully at the HTML code for the images you will find that they call functions on MouseOver and MouseOut events.
  
  
• Using Dynamic Forms : While surfing you must have noticed how some forms seem to have special functions like (a) validation of fields (b) text box character limits (c) dynamic displayed lists depending on your selection (d) redirection to other pages (e) manipulating your keyboard input or disabling some keys or browser buttons, etc. Well all this is done through calling some corresponding script functions.
  
  
• Using Cascading Style Sheets (CSS) : Yes, you might be surprised to know that CSS is part of DHTML. A CSS file is just a JavaScript file with the extension .css which is necessary for it to be recognized by the server and tools like Macromedia's Dreamweaver to contain styles.

DHTML Tutorials

• Basics of DHTML for beginners

• Internet Explorer vs Netscape Navigator

• DHTML Tutorials

  Though what you see below is very less be assured that we will be constantly adding to this collection to bring you all the essential DHTML effects!
  • DHTML Effects
    
    • Drop Down Menus
    • Tip Boxes
  • DHTML Forms
    • Date Validation
    • Email Validation
    • Phone Number Validation
    • Text Box Character Counter
    • Resetting forms using an Image field (Image button)
    • Check All and Clear All links for dynamically created check boxes