Webサイトでボタンを作ることが出来る<button>タグ。このタグにはtype="submit"、type="reset"、type="button"を指定することが出来ます。
この記事ではそれぞれのタイプの動作についてご紹介したいと思います。

buttonタグとは

<button>タグはWebサイトでクリック出来るボタンを設置することが出来るタグです。

具体的な使い方はこちら。

<button type="button">クリックします</button>

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

buttonタグはタイプを指定して使う

<button>タグにはボタンタイプを指定し、指定したタイプによってそのボタンの機能が決まります。

<button>タグには、type="submit"、type="reset"、type="button"を指定することが出来ます。

type=”submit”

ボタンタイプをtype="button"とすることで、その<button>タグは送信機能を付けることが出来ます。

具体的な使い方はこちら。

<form method="post" post="#">
    <p>お名前：<input type="text" name="name"></p>
    <button type="submit">クリックします</button>
</form>

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

こちらの実装サンプルでは正しく動作しませんが、<button>タグをクリックすることで入力した内容を送信することが出来ます。

<input type="submit">と同じ機能を付けることが出来ます。

type=”reset”

ボタンタイプをtype="reset"とすることで、その<button>タグは入力した内容をリセットさせる機能を付けることが出来ます。

<form method="post" post="#">
    <p>お名前：<input type="text" name="name"></p>
    <button type="reset">クリックします</button>
</form>

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

<button>タグをクリックすることで入力した内容をリセットされます。

<input type="reset">と同じ機能を付けることが出来ます。

type=”button”

ボタンタイプのtype="button"は、そのままでは特に機能は持たないボタンが表示されます。
このボタンタイプはjQueryと組み合わせて使用することでそのボタンに機能を付けることが出来ます。

送信機能（submit）

type="button"に送信機能を付ける場合、以下のようにします。

<form method="post" post="#">
    <p>お名前：<input type="text" name="name"></p>
    <button type="button">クリックします</button>
</form>

ボタンに機能を付けるためのjQueryコードはこちら。

$('button').on('click',function(){
    $('form').submit();
});

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

こちらの実装サンプルでは正しく動作しませんが、<button>タグをクリックすることで入力した内容を送信することが出来ます。

リセット機能（reset）

type="button"でリセット機能を付ける場合、以下のようにします。

<form method="post" post="#">
    <p>お名前：<input type="text" name="name"></p>
    <button type="button">クリックします</button>
</form>

ボタンに機能を付けるためのjQueryコードはこちら。

$('button').on('click',function(){
    $('form')[0].reset();
});

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

リンク機能

type="button"は送信機能、リセット機能以外にも<a>タグと同じリンク機能を付けることも出来ます。

type="button"でリンク機能を付ける場合、以下のようにします。

<button type="button" value="https://irodori-design-web.com/">クリックします</button>

ボタンに機能を付けるためのjQueryコードはこちら。

$('button').on('click',function(){
    location.href = $(this).val();
});

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

別タグで開く場合のjQueryコードはこちら。

$('button').on('click',function(){
    window.open( $(this).val(), '_blank' );
});

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

まとめ

いかがでしたか？
<button>タグは指定するタイプによってそのボタンの機能は変化します。
jQueryと組み合わせることでどんな機能でもつけることが出来る万能タグなので是非使用してみて下さい。