alamin ahmed: a typical geek 2.0

These days, whether you are blogging or running a business website, form submission spamming has become on of the primary issue of concern and frustration. Form submission spamming usually happens if you have commenting feature on your website. Spammers like to use this opportunity to promote their website and most importantly hoping to get higher rank in search engines. Im sure most of web developers/webmasters has gone through nightmare(s) when you found dozens of v1agra (you know what i mean) related links floating around your website posts.

Form submission some times occurs on your membership registration form as well, people attempting to create multiple accounts instantly. And if you have content submission features, such as Digg, Reddit or other social network relying on user submitted contents, then you have another form submissions to worry about.

In deed it is. There are many ways you can prevent most of these spammers. It is hard to stop hackers entirely, but these methods should make attackers life bit difficult and have them find another nest to play around with.

I have prepared to write about 3 ways (out of many) you can prevent form submission spam. You can implement them individually or combine them with any combination you want to add even greater security based on your need. These 3 methods are:

1. Post Hash Authentication

2. Hidden Text field Mechanism

3. CAPTCHA

[Please note, all these are programming language independent concepts, but I will be using php to demonstrate some code when necessary.]

This method relies on renewed hash code for authentication. So every time your page is loaded, a unique hash code is created by your server and put it on session value, which then need to be passed by form on every submission. Therefore, upon form submission the server can verify the passed hash code with session hash code for validity. And the trick is that, after validating, server has to destroy the hash right away and start looking for another one, a different one. This is very easy to implement.

//check if form submission occurred

if((count($_POST)) {

if(!isset($_POST['posthash'] && ($_SESSION['posthash'] != $_POST['posthash'])) {

die('unauthorized request.');

} else {

$_SESSION['posthash'] = ""; // removing current code

}

}

// right after check we want to regenerate post hash, regardless if form was submitted or not

// actual hash value can be simply md5(current time in nano second)

Why CSS and not TABLE.
Honestly, I have no good answer or explanation for you.  In fact I don't think any one does.  There are equal weight of advantage and disadvantage on both approaches.  Many people have tried to be strict and only show CSS benefit, and others did exactly same vice verse.

In this new "Web 2.0" era, CSS is becoming primary tool for designing and shaping web pages.  This is a good thing. CSS is really the best thing that happened to web designing.  Now designers can separate "data" from "presentation".  CSS also gives designers much more flexibilities and controls.  In terms of web standards and future, CSS certainly looks brighter.  So any attempt to migrate your any part of your web site to CSS, is a step toward right direction.  But if you taking your time then you can feel comfort knowing that tech giant like Google still uses TABLEs all over the place.  There is no sign of TABLE being deprecated from HTML, at least not any time soon.

Migrating HTML TABLE to CSS-P
Traditionally, you would use TABLE tag as follows:

  
      

          

              

              

          

      

      

          

              

              

          

      
Header Column 1
Header Column 2
Body column 1
body column 2
  

output:

Header Column 1	Header Column 2
Body Column 1	Body Column 2

My goal is to bring the same structure and coding layout using CSS.  To be precise, here is an example:

  


      


         
Header Column 1


         
Header Column 2


      


      


          
Body Column 1


          
Body Column 2


      


  

Looks good right? But we are far from being done.  Let's look at the output first:
output:

As you can see,  It is not at all what we expected.  Everything is showing in a single column in separate rows.  This needs to be fixed in CSS section.

CSS, time to play
If you noted, you know that we have used several classes inside our "div", for example -'table', 'row', 'cell'.  Our next step is to define those classes in css.  In "perfect world" (which basically means geniuses at Redmond complying with W3C web standard), creating table using CSS is extremely easy.  We can be done with the following lines of CSS codes:

  .table {

      display: table; }

  .table .row {

      display: table-row; }

  .table row .cell {

      display: table-cell; }

that's it. Simple right? Unfortunately, above styles are not supported by most browsers including Internet Explorer 6 and 7.  So it's basically useless for now.

CROSS BROWSER APPROACH:
alternative approach is to use 'inline-block' to define 'cell'.  In this case we additionally need to specify width of every cell in HTML code.  It is tedious depending on your table size and structure.  However, this is the only "good" solution we have.  Here is how:

Your CSS code is simple.  All we have to do is declare cell to be 'inline-block'.  This allows you to re-size your cell to any width/height you want.

.table { }

  .table .row { }

  .table .row .cell { display: inline-block; }

now in HTML add additional style to specify width of each column.

      


         Header Column 1

         Header Column 2

      


      


          Body Column 1

          Body Column 2

      

This approach works for most browsers.  For IE 6 to work, you have to use "span" instead of "div" for the columns.  Don't ask me why.  This breaks W3C regulation since you are making "span" as a block element.

ANOTHER APPROACH:
Another approach is to use 'float'ing columns.

  .table { }

  .table .row { clear: left; }

  .table .row .column { float: left; }

We still have to specify width of every cell.  In additional, we have to clear the the floating after the last row.  For example:

      


         Header Column 1

         Header Column 2

      


      


          Body Column 1

          Body Column 2

      

This approach is most widely compatible among browsers.  Your best bet is to chose between 'floating' cell or 'inline-block' cell.


FORMATTING TABLE
power of CSS comes when it's time to format - "presentation".  For example, we can format our headers and table in following css properties:

  .header {

      font-size:18px;

      font-weight:bold; }

  .header .cell {

      line-height:24px; }

  

  .table {

      border:2px solid #ccc; }

  .table .row .cell {

      padding:3px;

      margin:2px; }

EXTENDING TABLE USING MULTIPLE CSS CLASSES:
another power of css is the ability to have multiple classes for an element.  We have already done this on row '