Aké jednoduché je vytvoriť formulár ako tento od nuly? Takto jednoduché:

Klikni na "povedz mi o tom viac" a dozvieš sa, ako presunúť labels priamo do inputov, ako zariadiť aby zmizli, keď do nich človek klikne a iné JavaScript srandy (warning: includes jQuery).

Update: ako správne poznamenal Andrej v diskusii, toto .focus( function() { if (elem.val() === text) ... ) } ) nie je ideálne riešenie. Neošetruje situáciu, keď používateľ napíše "Meno" do kolonky Meno. "Malo by si to nejak pamätať, či je v inpute text od užívateľa, alebo label."

Môžeme napríklad využiť jQuery.data() a o každom inpute evidovať, či bol editovaný.

elem.data('edited', false);
elem.change(function() { elem.data('edited', true); }); <-- zmena hodnoty inputu

Následne:

.focus( function() { if ( !elem.data('edited') ) { elem.val('').css( css_focused ); } })

.blur ( function() { if ( !elem.val() ) { elem.val( text ).css( css_blured ); elem.data('edited', false); } });

HTML

<form action="" method="post">
  <label for="meno">Meno</label>
  <input type="text" id="meno" name="meno">
  
  <label for="email">Email</label>
  <input type="text" id="email" name="email">
  
  <label for="text">Text</label>
  <textarea id="text" name="text"></textarea>
  
  <input type="submit" value="do something">
</form>

CSS

body { background: #e3e3e3; font: 13px/16px Tahoma; color: #555; }
form { width: 350px; margin: 0 auto; margin-top: 75px; }

h1 { margin-bottom: 25px; text-shadow: 1px 1px 0px #f3f3f3; }

input, textarea { 
  display: block; margin-bottom: 15px; padding: 7px; background: #fafafa; 
  border: 1px solid; border-color: #ccc #fcfcfc #fcfcfc #ccc;
  border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
}

input { width: 150px }
textarea { width: 330px; height: 75px; }

input[type=submit] { 
  width: 100px; cursor: pointer; border-color: #fcfcfc #ccc #ccc #fcfcfc;
  color: #555; font: bold 11px Tahoma;
  box-shadow: 1px 1px 1px #ddd; -moz-box-shadow: 1px 1px 1px #ddd; -webkit-box-shadow: 1px 1px 1px #ddd; 
}

input[type=submit]:hover { border-color: #999; }

jQuery

$(function()
{
  var form = $('form'),
      inputs = $('form').find(':input').not(':input[type=submit]');
    
  inputs.each(function()
  {
    var elem = $(this),
        label = elem.prev(),
        text = label.text();
      
    var css_blured = { 'color': '#afafaf', 'font-style': 'italic' },
        css_focused = { 'color': '#333', 'font-style': 'normal' };
    
    label.hide();
    elem.data('edited', false);
    elem.change(function() { elem.data('edited', true); });

    elem.val( text )
        .css( css_blured )
        .focus( function() { if ( !elem.data('edited') ) { elem.val('').css( css_focused ); } })
        .blur ( function() { if ( !elem.val() ) { elem.val( text ).css( css_blured ); elem.data('edited', false); } });
  });
  
  $('#meno, #email').css('float', 'left');
  $('#text').css('clear', 'both');
  $('#meno').css('margin-right', '14px');
  
  form.submit(function() { return false; });
});