entrer sous forme Hitting appeler mauvais bouton

Question

HTML:

<form target="" method="post"> 
    <input name="username" type="text" /> 
    <input name="password" type="password" /> 
    <button>Cancel</button> 
    <input type="submit" /> 
</form> 

Fiddle: http://jsfiddle.net/n9Lpcqyr/

Problème: Quand j'appuyez sur Entrée, les deux boutons se déclenchent. Testé avec cette jQuery:

$('button').click(function(){ 
    alert('help'); 
}); 
$("form").submit(function(){ 
    alert('hey'); 
}); 

Parce que le premier <button> est mis en correspondance .remove() la boîte de dialogue, la forme n'existe plus à être soumis. Je sais que je peux lier la clé d'entrée au input s avec js, mais je suis à la recherche d'une solution HTML uniquement. J'ai essayé tabindex sans chance. Que puis-je faire d'autre?

Answer 1

Vous pouvez déplacer le bouton d'annulation en dehors de la forme, comme si (et utiliser les CSS pour le style):

<form target="" method="post"> 
    <input name="username" type="text" /> 
    <input name="password" type="password" /> 
    <input type="submit" /> 
</form> 
<button>Cancel</button>