HTML Form Tutorial, Part I

Part II

Part II of this tutorial introduces the ,<br /> <select>, and<br /> <option> tags. It will also have some other goodies, including a complete form with the tags mentioned in this tutorial. </p> <p>Forms can be fun. </p> <p>With a little practice, you can be an expert.<br /> <h2>The <input> Tag</h2> <p>Most of the information forms collect is specified by the <input> tag. Single-line text entry fields, checkboxes, radio selections, password entry fields, form buttons, file upload fields, and image buttons are all specified with the <input> tag. </p> <p>The <input> tag can have several other attributes depending on the “type” attribute. It almost always has a name attribute. Every input tag requires a type attribute. </p> <p><strong>The “type” Attribute </strong></p> <p>It is probably safe to say that every form has an <input> tag of some kind and that the tag contains the “type” attribute. The type attribute tells the browser what type of form field or button to create. The type attribute looks something like this: </p> <p>type=”_______”</p> <p>with the underscore representing one of numerous types of type attributes. </p> <p><strong>The type=”submit” Attribute </strong></p> <p>The submit button is the most common form element, created with the type=”submit” attribute. It might or might not have a “value” attribute, depending on whether or not you want to specify the text of the button. Also, the submit button might or might not have a name, depending on what the information receiving program or function’s requirements are. </p> <p>In this example, it does not have a name but it does have a value:<br /> <br /> <blockquote> <br /><form method=”POST” action=”/cgi-bin/something.cgi”><br /> <br /><input type=”submit” value=”Click Me!”><br /> <br /></form><br /> </p></blockquote> <p>Forms may contain more than one submit button. In that case, it is usual for the attributes to have names so the processing program or function knows which of them was clicked. Example:<br /> <br /> <blockquote> <br /><form method=”POST” action=”/cgi-bin/something.cgi”><br /> <br /><input type=”submit” name=”1″ value=”First Visit”><br /> <br /><input type=”submit” name=”2″ value=”Second Visit”><br /> <br /><input type=”submit” name=”3″ value=”Third Visit”><br /> <br /></form><br /> </p></blockquote> <p><strong>The type=”text” Attribute </strong></p> <p>The type=”text” attribute is a common form input field. It creates a place wherein a line of information can by typed. </p> <p>If you want to put default text into the input field, use the “value” attribute. Example:<br /> <br /> <blockquote> <br />value=”http://”<br /> </p></blockquote> <p>Both a “size” and a “maxlength” attribute may be used. These specify the size of the text input area and the maximum number of characters that may be typed into the input area. You may use neither, one, or both of those tags. </p> <p>Here is an example:<br /> <br /> <blockquote> <br /><form method=”POST” action=”/cgi-bin/something.cgi”><br /> <br /><input type=”text” name=”url” size=”17″ maxlength=”44″><br /> <br /><input type=”submit”><br /> <br /></form><br /> </p></blockquote> <p><strong>The type=”password” Attribute </strong></p> <p>The type=”password” attribute works the same as the type=”text” attribute except the characters typed into the input area are displayed as asterisks. Here is an example:<br /> <br /> <blockquote> <br /><form method=”POST” action=”/cgi-bin/something.cgi”><br /> <br /><input type=”password” name=”P” size=”9″ maxlength=”20″><br /> <br /><input type=”submit”><br /> <br /></form><br /> </p></blockquote> <p><strong>The type=”checkbox” Attribute </strong></p> <p>The checkbox either contains information or it doesn’t, depending on whether or not it is checked. Checkbox tags almost always have a “value” attribute. </p> <p>If you want any checkboxes pre-checked, include the CHECKED attribute. Example:<br /> <br /> <blockquote> <br /><form method=”POST” action=”/cgi-bin/something.cgi”><br /> <br /><input type=”checkbox” name=”c_blue” value=”yes”><br /> <br /><input type=”checkbox” name=”c_red” value=”yes” CHECKED><br /> <br /><input type=”checkbox” name=”c_pink” value=”yes” CHECKED><br /> <br /><input type=”checkbox” name=”c_yellow” value=”yes”><br /> <br /><input type=”submit”><br /> <br /></form><br /> </p></blockquote> <p>In the above example, the user will see four checkboxes with the middle two pre-checked. </p> <p>Notice that each checkbox has a different name. This separates the information into different chunks for the receiving program or function to process. In some cases, the receiving program or function might require the checkboxes to have the same name, but do it that way only if specified in the instructions. </p> <p><strong>The type=”radio” Attribute</strong> </p> <p>Only one radio button in a set contains information, the one that is checked. Radio tags almost always have a “value” attribute. </p> <p>If you want to pre-check one radio button, use the CHECKED attribute:<br /> <br /> <blockquote> <br /><form method=”POST” action=”/cgi-bin/something.cgi”><br /> <br /><input type=”radio” name=”color” value=”blue”><br /> <br /><input type=”radio” name=”color” value=”red” CHECKED><br /> <br /><input type=”radio” name=”color” value=”pink”><br /> <br /><input type=”submit”><br /> <br /></form><br /> </p></blockquote> <p>In the above example, the user will see three radio buttons with the middle one pre-checked. </p> <p>Each radio button in a set must have the same name. When more than one radio button has the same name, only one of them can be checked at a time. </p> <p><strong>The type=”file” Attribute </strong></p> <p>If the form information receiving program or function can upload a file from the user’s computer to your internet server, the type=”file” attribute is used. (To use this attribute, the <form> tag should have the enctype attribute specified as “multipart/form-data”) </p> <p>Optionally, you may restrict the type of file the user may upload with the “accept” attribute. The accept attribute specifies a MIME Content Type. There are many MIME types and to list them all would be space prohibitive. However, here are those you are most likely to need.<br /> <br /> <blockquote> <br /><strong>To restrict the uploads to images, use:</strong><br /> <br /> <blockquote> <br />accept=”image/*”<br /> </p></blockquote> <p><strong>To restrict to only GIF images, use: </strong><br /> <br /> <blockquote> <br />accept=”image/gif”<br /> </p></blockquote> <p><strong>To specify only JPEG, PNG, or TIFF image files</strong> use:<br /> <br /> <blockquote> <br /> “image/jpg,jpeg”, “image/png”, or “image/tiff”, respectively.<br /> </p></blockquote> <p><strong>To specify only GIF and JPEG, use:</strong><br /> <br /> <blockquote> <br /> “image/gif,jpg,jpeg”<br /> </p></blockquote> <p><strong>To restrict to text files only, use:</strong><br /> <br /> <blockquote> <br />accept=”text/*”<br /> </p></blockquote> <p><strong>To specify HTML files or plain text files, use:</strong><br /> <br /> <blockquote> <br />“text/html” or “text/plain”, respectively.<br /> </p></blockquote> </blockquote> <p>Optionally, you may specify the size of the input field and the maximum number of characters that may be entered with the “size” and “maxlength” attributes. </p> <p>Here is an example file upload form input area:<br /> <br /> <blockquote> <br /><form method=”POST”<br /> <br /> action=”/cgi-bin/something.cgi”<br /> <br /> enctype=”multipart/form-data”><br /> <br /><input type=”file” name=”upfile” accept=”image/*”><br /> <br /><input type=”submit”><br /> <br /></form><br /> </p></blockquote> <p><strong>The type=”hidden” Attribute </strong></p> <p>Use the type=”hidden” attribute to specify information for the receiving program or function that the user may not change. This information is usually required by the program or function in order to process the other information and/or to determine what to sent back to the browser. The installation instructions of the program or function should specify what hidden fields are required, if any. </p> <p>Here is an example:<br /> <br /> <blockquote> <br /><form method=”POST” action=”/cgi-bin/something.cgi”><br /> <br /><input type=”hidden”<br /> <br /> name=”nextpage”<br /> <br /> value=”http://willmaster.com/”><br /> <br /><input type=”submit” value=”Click For Next Page”><br /> <br /></form><br /> </p></blockquote> <p><strong>The type=”reset” Attribute </strong></p> <p>This attribute creates a reset button. Clicking that button will reset the form to the state it was in when it was first loaded into the browser. It might or might not have a “value” attribute, depending on whether or not you want to specify the text of the button. It rarely requires a name because the reset button’s value is rarely used by the receiving program or function. </p> <p>In this example, it does not have a name but it does have a value:<br /> <br /> <blockquote> <br /><form method=”POST” action=”/cgi-bin/something.cgi”><br /> <br /><input type=”text” name=”url” size=”17″ maxlength=”44″><br /> <br /><input type=”reset” value=”Erase Everything!”><br /> <br /><input type=”submit” value=”Submit Now!”><br /> <br /></form><br /> </p></blockquote> <p><strong>The type=”button” Attribute </strong></p> <p>This attribute creates a clickable button with text you specify in the “value” attribute. This type of button is typically used to send information to a JavaScript function with the “onClick” attribute. In this case, a submit button may be optional. Example:<br /> <br /> <blockquote> <br /><form method=”POST” action=”/cgi-bin/something.cgi”><br /> <br /><input type=”text” name=”email” size=”17″ maxlength=”44″><br /> <br /><input type=”button”<br /> <br /> value=”Verify Email Address”<br /> <br /> onClick=”return EmailVerification()”><br /> <br /><input type=”submit”><br /> <br /></form><br /> </p></blockquote> <p><strong>The type=”image” Attribute</strong> </p> <p>An image may be used instead of a submit button. To do that, use the type=”image” attribute. </p> <p>When using the type=”image” attribute, the “src” attribute must be specified. The src attribute is specified like you would specify the src attribute in an <img> tag to place an image on a web page. Optionally, you may include “align”, “border”, “height”, “width”, “hspace”, and/or “vspace” attributes, just like you would in an <img> tag. </p> <p>When the user clicks the image, the form submits its information to the program or function specified in the <form> tag. </p> <p>Here is an example:<br /> <br /> <blockquote> <br /><form method=”POST” action=”/cgi-bin/something.cgi”><br /> <br /><input type=”text” name=”url” size=”17″ maxlength=”44″><br /> <br /><input type=”image”<br /> <br /> src=”myimage.gif”<br /> <br /> border=”0″<br /> <br /> align=”right”><br /> <br /></form><br /> </p></blockquote> <h2>Specifying the Encoding Method for the Information Being Sent</h2> <p>The final <form> tag attribute we’ll cover in this tutorial specifies how the information will be encoded before sending it to wherever it’s going. That’s the “enctype” attribute. </p> <p>The browser automatically encodes the information depending on the enctype attribute. Encoding transforms special non-alphanumeric characters that could otherwise wreak havoc during transmission or upon receipt into a series of characters that the receiving program or function can recognize. Encoding also inserts separators between the information chunks. </p> <p>Often you don’t have to concern yourself with the enctype. If you do not specify one, the default is assumed. </p> <p>The default enctype attribute is:<br /> <br /> <blockquote> <br />enctype=”application/x-www-form-urlencoded”<br /> </p></blockquote> <p>If your form includes file uploads, you will need<br /> <br /> <blockquote> <br />enctype=”multipart/form-data”<br /> </p></blockquote> <p>And, if you will be using a mailto: link in the action attribute, your email body text will be less jumbled if you use<br /> <br /> <blockquote> <br />enctype=”text/plain”<br /> </p></blockquote> <h2>Form Related Tags</h2> <p>Between the <form> and </form> tags are the tags that create the body of the form. These are <select> (for drop-down and menu boxes), <textarea> (for multi-line text areas), and <input> (for the rest). </p> <p>Every form related tag can have a name attribute. Some require it, others don’t. </p> <p>The assigned name is sent with the information and helps the receiving program or function identify the information chunks it receives. </p> <p>Some receiving programs and functions consider tag names to be case sensitive; some do not. If you don’t know which applies to your form, assume tag names are case sensitive. </p> <p>Some receiving programs and functions are okay with tag names containing spaces; some are not. If you don’t know whether or not it is okay to use spaces in your form’s tag names, use underscore characters instead of spaces. Underscore characters are almost always okay within tag names so long as the name doesn’t start or end with an underscore. </p> <p>Here is an example name attribute:<br /> <br /> <blockquote> <br />name=”my_tag_name”<br /> </p></blockquote> <p>In most situations, it is highly desirable that no duplicate names exist within the form.<br /> <h2>HTML Form Tutorial, Part I</h2> <p>This is the first part of a 2-part series. Look for the second part next week, right here. </p> <p>HTML forms are a means of collecting information. People fill in a form and/or select something. Then they click a button. </p> <p>Forms don’t actually process information. </p> <p>For something to be done with the information, it must be sent somewhere. Information processing destinations can be CGI programs, JavaScript functions, mailto: links, or even a web page (which directs the browser to load the page at the specified URL). </p> <p>This tutorial is about how to make forms and how to send the information, but not how to process the information after it has been sent off. </p> <p>Forms begin with the <form> tag and end with the </form> tag. The <form> tag can contain several attributes. </p> <p>Sometimes you’ll need to determine the applicable attributes. Other times, installation directions for CGI programs or JavaScript functions specify the <form> tag attributes expected by the installation. </p> <p><strong>Where Information Is Sent </strong></p> <p>One <form> tag attribute specifies where the information will be sent. That’s the “action” attribute. </p> <p>Sending To CGI Programs </p> <p>If the information is being sent to a CGI program on the same domain as the web page containing the form, the action attribute can contain either a relative URL or an absolute URL. With a relative URL, it would look something like this:<br /> <br /> <blockquote> <br />action=”/cgi-bin/something.cgi”<br /> </p></blockquote> <p>If the information is being sent to a CGI program on a different domain, the URL must be absolute (a complete http://… URL):<br /> <br /> <blockquote> <br />action=”http://domain.com/cgi-bin/something.cgi”<br /> </p></blockquote> <p>Sending To JavaScript Functions </p> <p>When sending form information to a JavaScript function, the action attribute would look something like:<br /> <br /> <blockquote> <br />action=”javascript:SomeFunction()”<br /> </p></blockquote> <p>or, the action attribute might be replaced with the JavaScript specific “onClick” attribute:<br /> <br /> <blockquote> <br />onClick=”return SomeFunction()”<br /> </p></blockquote> <p>If the form information is to be sent to both a JavaScript function and to a CGI program, then both the action and the onClick attributes would be specified. </p> <p>Sending To mailto: Links </p> <p>To send form information to the visitor’s email program, with the To: destination already filled in, use:<br /> <br /> <blockquote> <br />action=”mailto:name@domain.com”<br /> </p></blockquote> <p>If you also want to specify a subject for the email:<br /> <br /> <blockquote> <br />action=”mailto:name@domain.com?subject=My%20Subject”<br /> </p></blockquote> <p>(Use “%20″ instead of spaces when specifying a subject.) </p> <p>Note that not all browsers recognize the mailto: link. It is suggested you use this only as a last resort. </p> <p>Sending To a Different Web Page </p> <p>To send form information to a different web page so the browser opens the page at the new URL, use:<br /> <br /> <blockquote> <br />action=”http://newdomain.com/page.html”<br /> </p></blockquote> <h2>How Information Is Sent</h2> <p>Another <form> tag attribute specifies how the information will be sent to wherever it’s going. That’s the “method” attribute. The method attribute is either<br /> <br /> <blockquote> <br />method=”POST”<br /> <br />or<br /> <br />method=”GET”<br /> </p></blockquote> <p>Which you use depends on how the destination program or function wants to receive the information. </p> <p><strong>Sending With Method GET</strong> </p> <p>method=”GET” is used if you want to send information somewhere via a browser URL. You’ve seen URLs that send information; they look something like:<br /> <br /> <blockquote> <br />http://domain.com/something.cgi?color=red&shape=round<br /> </p></blockquote> <p>In the above URL, the part after the question mark is information sent to something.cgi. Multiple information chunks are separated with an ampersand. </p> <p>The GET method can send only a limited amount of information. The limitation depends on the server where the current web page is on and the server where the information is sent to. The limitation can be as little as 256 bytes but is often 1k or more. </p> <p>Another limitation of the GET method is that the information being sent is visible in the browser’s address bar. In some cases this is of no consequence. In others, it is unacceptable. </p> <p>Some CGI programs are written to accept information via the GET or the POST method, some to accept only the GET method. </p> <p><strong>Sending With Method POST</strong> </p> <p>method=”POST” is the most common method used to send information from a form to an information processing program or function. This is the method used when sending form information to JavaScript functions. Most CGI programs are written to accept information with the POST method, some to accept only the POST method. </p> <p>The POST method can send much more information than the typical GET method. Currently, most browsers and servers limit the amount of POST information to about 32k. </p> <p>With POST, the information is not sent via the URL. The sending is invisible to the site visitor. </p> <p>It is not necessary to know the exact interior mechanism of how POST works, because all you have to do is specify the method and the browser decides how to accomplish your directive. However, as a general overview: depending on its destination, the POST information could be transferred within the browser itself (if sent to a JavaScript function) or over the internet via a method known as “standard input” — the default or standard input channel expected by the destination (such as a server for a CGI program).</p> <script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <div id="authorbox"> <div class="authorbox-info"> <img alt='' src='http://1.gravatar.com/avatar/d02765312c71048b0a74e1ba5d25b51b?s=60&d=&r=G' class='avatar avatar-60 photo' height='60' width='60' /> <h4>About the author</h4> <p class="authorbox-text">Written by Will Bontrager.</p> <p class="authorbox-meta">Publication: <a href="http://willmaster.com/possibilities/">WillMaster Possibilities</a></p> <ul> <li class="first"><a href="http://BontragerConnection.com/" title="Read Will Bontrager’s blog">Website</a></li> </ul> </div> </div> <p style='font-weight:bold;margin-top:5px;'>If you found this post useful you may also want to check these out:</p><ol> <li><a href='http://www.developertutorials.com/tutorials/javascript/form-action-urls-1430/' rel='bookmark' title='Changing Form Action URLs On-The-Fly'>Changing Form Action URLs On-The-Fly</a></li> <li><a href='http://www.developertutorials.com/tutorials/css-tutorials/form-flield-sizes-1361/' rel='bookmark' title='Designing Consistent Form Field Sizes'>Designing Consistent Form Field Sizes</a></li> <li><a href='http://www.developertutorials.com/tutorials/javascript/javascript-tutorial-fuctions-1371/' rel='bookmark' title='JavaScript Tutorial Part II – Function Basics'>JavaScript Tutorial Part II – Function Basics</a></li> <li><a href='http://www.developertutorials.com/tutorials/php/html-forms-php-1407/' rel='bookmark' title='Using HTML Forms With PHP'>Using HTML Forms With PHP</a></li> <li><a href='http://www.developertutorials.com/tutorials/javascript/javascript-tutorial-basics-1398/' rel='bookmark' title='JavaScript Tutorial Part I- Some Basics'>JavaScript Tutorial Part I- Some Basics</a></li> <li><a href='http://www.developertutorials.com/tutorials/xml-tutorials/html-tidy-xml-1415/' rel='bookmark' title='Tip: Convert from HTML to XML with HTML Tidy'>Tip: Convert from HTML to XML with HTML Tidy</a></li> </ol> </div> </div> <div id="disqus_thread"> </div> <script type="text/javascript"> /* <![CDATA[ */ var disqus_url = 'http://www.developertutorials.com/tutorials/html/html-form-tutorial-1-1362/'; var disqus_identifier = '1362 '; var disqus_container_id = 'disqus_thread'; var disqus_domain = 'disqus.com'; var disqus_shortname = 'devtut'; var disqus_title = "HTML Form Tutorial, Part I"; var disqus_config = function () { var config = this; // Access to the config object /* All currently supported events: * preData — fires just before we request for initial data * preInit - fires after we get initial data but before we load any dependencies * onInit - fires when all dependencies are resolved but before dtpl template is rendered * afterRender - fires when template is rendered but before we show it * onReady - everything is done */ config.callbacks.preData.push(function() { // clear out the container (its filled for SEO/legacy purposes) document.getElementById(disqus_container_id).innerHTML = ''; }); config.callbacks.onReady.push(function() { // sync comments in the background so we don't block the page DISQUS.request.get('?cf_action=sync_comments&post_id=1362'); }); }; var facebookXdReceiverPath = 'http://www.developertutorials.com/wp-content/plugins/disqus-comment-system/xd_receiver.htm'; /* ]]> */ </script> <script type="text/javascript"> /* <![CDATA[ */ var DsqLocal = { 'trackbacks': [ ], 'trackback_url': "http:\/\/www.developertutorials.com\/tutorials\/html\/html-form-tutorial-1-1362\/trackback\/" }; /* ]]> */ </script> <script type="text/javascript"> /* <![CDATA[ */ (function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = 'http://' + disqus_shortname + '.' + disqus_domain + '/embed.js?pname=wordpress&pver=2.69'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); /* ]]> */ </script> </div> <div id="sidebar_1" class="sidebar"> <ul class="sidebar_list"> <li class="widget widget_text" id="text-14"> <div class="textwidget"><script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></div> </li> </ul> </div> </div> <div id="sidebars"> <div id="multimedia_box" class="image_box"> <div id="image_box"> <img class="square" src="http://www.developertutorials.com/wp-content/uploads/2010/05/default1.jpg" alt="Custom image" /> </div> </div> <div id="sidebar_2" class="sidebar"> <ul class="sidebar_list"> <li class="widget widget_text" id="text-16"> <div class="textwidget"><div id="col_box_header">Connect With Us</div> <div id="col_box_content"><img src="/images/icons_social_media.png" width="176" height="45" border="0" usemap="#Map" /></div> <map name="Map" id="Map"> <area shape="rect" coords="44,3,82,43" href="http://www.facebook.com/devtut" target="_blank" alt="Web Developer Tutorials on Facebook" /> <area shape="rect" coords="94,2,131,41" href="http://twitter.com/devtut" target="_blank" alt="Web Developer Tutorials on Twitter" /> </map> </div> </li><li class="widget widget_text" id="text-5"> <div class="textwidget"><div style="background-color: #888888; color: #FFFFFF; font-size: 8pt; font-weight: bold; margin-bottom: 3px; padding: 7px;">GET OUR NEWS</div> <form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl" target="_new" > <div style="display: none;"> <input type="hidden" name="meta_web_form_id" value="855846397" /> <input type="hidden" name="meta_split_id" value="" /> <input type="hidden" name="listname" value="devtut" /> <input type="hidden" name="redirect" value="http://www.developertutorials.com/subscribe_confirm.php" id="redirect_98dfd33f0d9f11f112bb33d51040eb3e" /> <input type="hidden" name="meta_adtracking" value="DevTut__Web_Form" /> <input type="hidden" name="meta_message" value="1" /> <input type="hidden" name="meta_required" value="name,email" /> <input type="hidden" name="meta_forward_vars" value="1" /> <input type="hidden" name="meta_tooltip" value="" /> </div> <input id="awf_field-1510535" type="text" name="name" class="text" onfocus="this.value='';" onblur="if (this.value=='') {this.value=' Your First Name';}" value=" Your First Name" style="font-family:Verdana, Geneva, sans-serif;font-size:8pt; margin-bottom:5px;width:164px;border:1px solid #ccc;height:16px;color:#666;background-image:url(http://www.developertutorials.com/images/textfield_bg.jpg);padding:7px;"/> <input class="text" id="awf_field-1510536" type="text" name="email" v onfocus="this.value='';" onblur="if (this.value=='') {this.value=' Your Email Address';}" value=" Your Email Address" style="font-family:Verdana, Geneva, sans-serif;font-size:8pt; margin-bottom:5px;width:164px;border:1px solid #ccc;height:16px;color:#666;background-image:url(http://www.developertutorials.com/images/textfield_bg.jpg);padding:7px;" /> <input name="submit" type="submit" style="width:180px;" value="Subscribe"/> </form></div> </li><li class="widget widget_text" id="text-17"> <div class="textwidget"><div class="navtitle"><a href="/online-services/" title="Online Services">Online Services</a></div> <ul> <li><a href='/online-services/domains-10/' title='Domain Names'>Domain Names</a></li><li><a href='/online-services/hard-drive-recovery-148/' title='Hard Drive Recovery'>Hard Drive Recovery</a></li><li><a href='/online-services/internet-marketing-118/' title='Internet Marketing'>Internet Marketing</a></li><li><a href='/online-services/online-backup-13/' title='Online Backup'>Online Backup</a></li><li><a href='/online-services/online-classes-123/' title='Online Training'>Online Training</a></li><li><a href='/online-services/payment-processing-services-142/' title='Payment Processing'>Payment Processing</a></li><li><a href='/online-services/saas-12/' title='SaaS'>SaaS</a></li><li><a href='/online-services/software-escrow-115/' title='Software Escrow'>Software Escrow</a></li><li><a href='/online-services/web-design-135/' title='Web Design'>Web Design</a></li><li><a href='/online-services/web-development-117/' title='Web Development'>Web Development</a></li><li><a href='/online-services/web-hosting-78/' title='Web Hosting Directory'>Web Hosting Directory</a></li> </ul> <br /> <div class="navtitle">Developer Resources</div> <ul> <li><a href="/tuts/" title="Tutorial Directory">Tutorial Directory</a></li> <li><a href="/html-guide/" title="Learn HTML">Learn HTML</a></li> <li><a href="/php-manual/" title="Learn PHP">Learn PHP</a></li> <li><a href="/css-2/cover.html" title="Learn CSS">Learn CSS</a></li> <li><a href="/learn-ajax/" title="Learn JavaScript">Learn AJAX</a></li> <li><a href="/learn-javascript/" title="Learn JavaScript">Learn JavaScript</a></li> <li><a href="/pear-manual/" title="Learn Pear">Learn Pear</a></li> <li><a href="/white-papers/" title="Free White Papers">White Papers</a></li> </ul></div> </li><li class="widget widget_text" id="text-22"> <div class="textwidget"><div class="navtitle">Resources</div> <ul> <li><a href="/news/" title="Webmaster News">Webmaster News</a></li> <li><a href="/developer-content-feeds.php" title="Developer Content Feeds">Developer Content</a></li> <li><a href="http://www.netvisits.com" title="NetVisits Web Directory">NetVisits Web Directory</a></li> <li><a href="http://www.answersontherun.com" title="Ask Questions Find Answers">Ask A Question</a></li> <li><a href="http://www.askageek.com" title="Ask A Geek">Ask A Geek</a></li> </ul></div> </li> </ul> </div> </div> </div> <div id="footer"> <div id="footer"><a href="/writers.php">Write For Us</a> | <a rel="nofollow" href="/advertise.php">Advertise with Us</a><br> <a class="iAs" classname="iAs" style="font-weight: normal ! important; font-size: 100% ! important; text-decoration: underline ! important; border-bottom: 0.075em solid rgb(0, 102, 213) ! important; padding-bottom: 1px ! important; color: rgb(0, 102, 213) ! important; background-color: transparent ! important; background-image: none; padding-top: 0pt; padding-right: 0pt; padding-left: 0pt;" href="#" target="_blank" itxtdid="25492394">Website Design</a> by Ducani Media Group. Copyright ©2004-2010 NetVisits, Inc. All Rights Reserved. <a rel="nofollow" href="/privacy.php">Privacy Policy</a>.</div> </div> <script type="text/javascript"> var clicky_site_id = 134161; (function() { var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = '//static.getclicky.com/js'; ( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( s ); })(); </script> <noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/134161ns.gif" /></p></noscript> <script type="text/javascript" src="http://developertutorials.us.intellitxt.com/intellitxt/front.asp?ipid=11465"></script></div> </div>  <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-92696-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </body> </html>