How to solve it:

WRONG

<form id="login-form">
  <input type="text" name="username" />
  <input type="password" name="password" />
	
  <a href="#" onClick="$('login-form').submit();">Login</a>
</form>
	    

This will break Login for all non JavaScript supporting browsers!

COOL

<form class="submit">
  <input type="text" name="username" />
  <input type="password" name="password" />
		
  <input type="submit" value="Login" />
</form>
	
$$('form.submit').each(function(el){
  if (el.getElement('input[type=submit])) {
    var submit = el.getElement('input[type=submit]);
		
    var button = new Element('a').set({ href: '#', html: submit.get('value') }).addClass('button').insertAfter('submit').addEvent('click', function(e){
      e = Event(e).stop();
      
      el.submit();
    });
			
    submit.destroy();
  }
});
	    

Awesome, now we can use this in the whole application without changing the HTML markup!