HTML5 form inside an overlay

This imaginary form is constructed with 100% HTML5 standard. No hacks or tweaks. The form works on all major browsers even in IE6. What's really amazing is that the form can have dateinputs and ranges even when JavaScript is disabled! All this with kB!

Here are all the input fields and scripting for the demo. You have a sane subset of the HTML5 and Web Forms 2.0 standards available. Now these complex but useful standards can be used by humans.

This form uses CSS3 features such as attribute selectors, rounded borders, RGBA coloring and box shadows. These make web developers' life much, much easier. Together with FORM Tools and HTML5 we can finally make well behaving and good looking forms with ease.

At the time of writing Opera has the best native support for HTML5. Here is Opera with JavaScript disabled! The browser displays it's native date and range input controls. Browsers that does not natively support these special inputs will show show a normal text field so that the form is editable in all situations.

Now listen. Internet Explorer has fairly good JavaScript support so it's possible to make cross-browser libraries like jQuery Tools; however, IE has many issues with CSS and HTML. If you want somewhat similar look for IE

you need quite precisely 300% more development time and money for dirty hacks and redundant images
your application becomes harder to maintain so you also need 300% more time and money in the future
all this 300% for what? your site will feel like IE6 on all browsers!

Let me put this another way. There is absolutely no good reason to develop an identical look for IE6. Period. Respect the standards and let unstandard browsers do what they can. Luckily you don't have to compromise with the funtionality. It's the looks that IE doesn't care about. I hope IE9 is better.

The Form The Code User Experience No JavaScript Unstandard clients

standalone demo

HTML coding

Here is the HTML layout. An overlay trigger element opens the overlay which contains tabs. On the first tab we have a form which is powered with the jQuery Tools Validator, Rangeinput and Dateinput. Open the actual overlay to see more details.

<!-- overlay trigger element -->
<a id="formDemo" rel="#sheet"></a>
 
<!-- the overlay -->
<div id="sheet" class="rounded">
 
  <!-- the form is on the first tab pane -->
  <div class="pane" id="pane1">
 
    <form class="rounded" id="myform">
 
    </form>
  </div>
 
  <!-- second tab pane -->
  <div class="pane" id="pane2"> ...  </div>
 
  <!-- other tab panes ... -->
  <div class="pane" id="pane3"> ...  </div>
  <div class="pane" id="pane4"> ...  </div>
  <div class="pane" id="pane5"> ...  </div>
  ...
</div>

HTML

CSS coding

Here are some of the "highlights" that are contained on our stylesheet:

/* CSS3 border radius for various elements. yea - CSS isn't perfect */
.rounded, #sheet input, .error {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -khtml-border-radius: 5px;
}
 
/* validation error message */
.error {
  background-color:#E8FF6D;
  padding:4px;
  -webkit-box-shadow: #000 0 0 12px;
  -moz-box-shadow: #000 0 0 12px;
}
 
/* nested arrow inside error message. It's 100% CSS. No images. */
.error em {
  border:10px solid;
  border-color:#E8FF6D transparent transparent;
  bottom:-17px;
  display:block;
  height:0;
  left:10px;
  position:absolute;
  width:0;
}
 
/* input field that caused validation error */
.invalid {
  background-color:rgba(221, 233, 255, 0.898) !important;
}

CSS

JavaScript coding

Here we initialize all tools that are being used: overlay, tabs, validator, rangeinput and dateinput. There are some custom event listeners for overlay and tabs that hide validation error messages if needed.

    // validator. we use custom message layout with a CSS arrow
    $("#myform").validator({
    message: '<div><em/></div>',
    position: 'top left',
    offset: [3, 40]
    });
 
    // dateinput and it's configuration
    $(":date").dateinput({ trigger: true, format: 'dddd mmm yyyy', offset: [2, 0] });
 
    // rangeinput with default configuration
    $(":range").rangeinput();
 
    // overlay with masking. when overlay is loaded or closed we hide error messages if needed
    $("#see").overlay({mask: '#999', fixed: false}).bind("onBeforeClose", function(e) {
    $(".error").hide();
    });
 
    // tabs. possible error messages are visible only on the first tab pane
    $("#navi").tabs(".pane").bind("onClick", function(e, index) {
    $(".error").toggle(!index);
    });

JavaScript

You need to place the script block after the HTML code or you can alternatively use jQuery's $(document).ready to execute the script as soon as the webpage's Document Object Model (DOM) has been loaded. Read more about that from the User's Manual.