JavaScriptにおけるフォームボタン

フォームがボタンをクリックすることで送信されることは既にご存知でしょう。しかし、ここにはニュアンスがあります。 ボタンには必ず属性typeを値submitとして持つ必要があります：

public/form.html<form>
  <input name="test1">
  <input name="test2">
  <input type="submit">
</form>

属性typeが値submitに設定されたbuttonタグもフォームを送信します：

public/form.html<form>
  <input name="test1">
  <input name="test2">
  <button type="submit">btn</button>
</form>

また、いずれかの入力フィールドにフォーカスを置いてEnterキーを押すことでもフォームは送信されます。

属性typeが値buttonのボタンはページの要素として使用され、フォームを送信しません：

public/form.html<form>
  <input name="test1">
  <input name="test2">
  <input type="button">
</form>

buttonタグも同様に動作します：

public/form.html<form>
  <input name="test1">
  <input name="test2">
  <button>btn</button>
</form>

属性typeが値resetのボタンは、入力されたフォームをクリアします：

public/form.html<form>
  <input name="test1">
  <input name="test2">
  <input type="reset">
  <input type="submit">
</form>

html<form>
  <input name="name">
  <input name="surn">
  <button>send</button>
</form>