diff --git a/compact_forms.js b/compact_forms.js
index 72e87bb..206f671 100644
--- a/compact_forms.js
+++ b/compact_forms.js
@@ -8,9 +8,11 @@ Drupal.compactForms = {};
  */
 $.fn.compactForm = function (stars) {
   stars = stars || 0;
+  var placeholders = 'placeholder' in document.createElement('input');
 
   this.each(function () {
-    $(this).addClass('compact-form').find('label').each(function () {
+    var classes = 'compact-form' + (placeholders ? ' compact-form-html5' : '');
+    $(this).addClass(classes).find('label').each(function () {
       var context = this.form;
       var $label = $(this);
       if (!$label.attr('for')) {
@@ -23,52 +25,60 @@ $.fn.compactForm = function (stars) {
       // Store the initial field value, in case the browser is going to
       // automatically fill it in upon focus.
       var initial_value = $field.val();
-
-      if (initial_value != '') {
-        // Firefox doesn't like .hide() here for some reason.
+      if (placeholders) {
+        $field.attr('placeholder', stars === 1 ? $label.text() : $label.text().replace(/\*/, '').trim());
+        if (stars === 2) {
+          $label.find('.form-required').insertAfter($field).prepend(' ');
+        }
         $label.css('display', 'none');
       }
+      else {
+        if (initial_value != '') {
+          // Firefox doesn't like .hide() here for some reason.
+          $label.css('display', 'none');
+        }
 
-      $label.parent().addClass('compact-form-wrapper');
-      $label.addClass('compact-form-label');
-      $field.addClass('compact-form-field');
-
-      if (stars === 0) {
-        $label.find('.form-required').hide();
-      }
-      else if (stars === 2) {
-        $label.find('.form-required').insertAfter($field).prepend(' ');
-      }
+        $label.parent().addClass('compact-form-wrapper');
+        $label.addClass('compact-form-label');
+        $field.addClass('compact-form-field');
 
-      $field.focus(function () {
-        // Some browsers (e.g., Firefox) are automatically inserting a stored
-        // username and password into login forms. In case the password field is
-        // manually emptied afterwards, and the user jumps back to the username
-        // field (without changing it), and forth to the password field, then
-        // the browser automatically re-inserts the password again. Therefore,
-        // we also need to test against the initial field value.
-        if ($field.val() === initial_value || $field.val() === '') {
-          $label.fadeOut('fast');
+        if (stars === 0) {
+          $label.find('.form-required').hide();
         }
-      });
-
-      $field.blur(function () {
-        if ($field.val() === '') {
-          $label.fadeIn('slow');
+        else if (stars === 2) {
+          $label.find('.form-required').insertAfter($field).prepend(' ');
         }
-      });
 
-      // Chrome adds passwords after page load, so we need to track changes.
-      $field.change(function () {
-        if ($field.get(0) != document.activeElement) {
+        $field.focus(function () {
+          // Some browsers (e.g., Firefox) are automatically inserting a stored
+          // username and password into login forms. In case the password field is
+          // manually emptied afterwards, and the user jumps back to the username
+          // field (without changing it), and forth to the password field, then
+          // the browser automatically re-inserts the password again. Therefore,
+          // we also need to test against the initial field value.
+          if ($field.val() === initial_value || $field.val() === '') {
+            $label.fadeOut('fast');
+          }
+        });
+
+        $field.blur(function () {
           if ($field.val() === '') {
-            $label.fadeIn('fast');
+            $label.fadeIn('slow');
           }
-          else {
-            $label.css('display', 'none');
+        });
+
+        // Chrome adds passwords after page load, so we need to track changes.
+        $field.change(function () {
+          if ($field.get(0) != document.activeElement) {
+            if ($field.val() === '') {
+              $label.fadeIn('fast');
+            }
+            else {
+              $label.css('display', 'none');
+            }
           }
-        }
-      });
+        });
+      }
     });
   });
 };