form内のbuttonとform外のbuttonの違い

入力フォームを記入して、別のプログラムへ送信するときのボタンですが、formの中にあるか外にあるかで動作が異なります。若干はまったので、メモ代わりにまとめておきます*1。

formの中のbutton

formの中にbuttonを設定するとクリックしたときに、submitされて、リロードされます。formの状態が初期値に戻ってしまうことに注意しましょう。（下のサンプルの１のボタン）
HTML

<form id = "test">
<tr><td>
<select id = "selectBox"></select>
</td></tr>
<button onclick = "load1();">1</button>
</form>

JavaScript

function load1(){
  var loadtext = document.getElementById("selectBox").value;

  d3.select("#message").append("text").text(loadtext);

}

form の外のbutton

formの外にbuttonを設定できます。

何も設定しない場合

この状態でボタンがクリックされると、formへのsubmitは実行されず（onclickイベントは実行されます）、リロードも起きません。（下のサンプルの２のボタン）
HTML

<button onclick = "load1();">2</button>

JavaScriptは上のfunction load1()と同じ。

formへの関連付けを行う場合

form の外にあるbuttonもformに関連付けられます。するとbuttonがform内に設置されたのと同じ扱いになり、クリック時にリロードされます。
（下のサンプルの３のボタン）
HTML

<button onclick = "load1();" form = "test">3</button>

JavaScriptは上のfunction load1()と同じ。

formへの関連付けをしても、リロードされない方法１

onclickイベントにeventという引数を渡します。イベント内でevent.preventDefault()を実行すると、リロードされません。（下のサンプルの４のボタン）
HTML

<button onclick = "load2(event);" form = "test">4</button>

JavaScript

function load2(event) {
var loadtext = document.getElementById("selectBox").value;

  d3.select("#message").append("text").text(loadtext);
  event.preventDefault();
}

formへの関連付けをしても、リロードされない方法２

onclickイベントの最後にreturn falseを入れます。これだけでもリロードされません。（下のサンプルの５のボタン）
HTML

<button onclick = "load1();return false;" form = "test">5</button>

JavaScriptは上のload1()と同じ。

サンプルプログラム

サンプルはこちらです。

やり方はいろいろ

やり方がいろいろあって、使い分けを考える必要があります。ボタンとフォームの関連づけは大事な（気がする）ので、最後の２つのやり方がよさそうです。

*1:参考にしたのはこちらのページです。HTML - input type=submit でページを更新"しない"方法。 - Qiita