Webサイトのフォームにボタンを置きたいと思ったことはありませんか？

ボタンの設定の仕方は複数あって、どれを使えば良いのか判断が難しいですよね？

今回は、HTMLにボタンを設置したい方のために、button要素を中心に紹介していきます。

この記事を読めば、HTMLにボタンを設置する具体的な方法がわかるようになりますよ。ぜひ最後まで読んでくださいね。

無料カウンセリングに申し込む

button要素とは？使い方を説明

HTMLのbutton要素は、ページ内にボタンを作成したい場合に使います。

お問い合わせフォームやアンケートなどの送信ボタンとして使われることが多いですね。

クリックすることで、入力情報の送信やリセットができます。

JavaScriptで記述した処理を実行させたい場合にも利用されます。

button要素には、処理方法を設定するための属性がいくつかあります。

今回は、実際によく使われる以下の属性について紹介していきます。

それぞれの属性を見ていきましょう。

type属性について

まずは、type属性について説明します。

type属性では、ボタンをクリックしたときに、どのような処理を実行するのか指定することができます。

指定できる値は3つです。

こちらも1つずつ紹介していきます。

submit（送信ボタン）

type=”submit”を指定すると、送信ボタンとしての処理を行います。

<form action="">
<label for="name">名前入力</label>
<input type="text" name="yourname" id="name">
<button type="submit">送信</button>
</form>

クリックすると、フォーム内の入力情報をサーバーに送信します。

ユーザーの入力ではなく、もともとボタンに設定されていた値を送信するときにも使われます。

reset（リセットボタン）

type=”reset”を指定すると、リセットボタンが作成できます。

<form action="">
<label for="name">名前入力</label>
<input type="text" name="yourname" id="name">
<button type="reset">リセット</button>
</form>

リセットボタンをクリックすると、フォームに入力された情報がすべてリセットされます。

ユーザーが入力を間違えたときなどにまとめてリセットするボタンとして用意できます。

button（何もしない）

type=”button”を指定すると、クリックしても何も処理をしないボタンを作成できます。

<form action="">
<label for="name">名前入力</label>
<input type="text" name="yourname" id="name">
<button type="button" onclick="buttonClick()">クリック</button>
</form>

何も機能を足さなければ反応がないボタンです。

クリックすることで、JavaScriptの処理を呼び出したいときなどに利用します。

上記では、onclick=”buttonClick()”を追加しました。クリックすることでJavaScript内で記述したbuttonClick()関数が呼び出されます。

関数の中で、処理の仕方を記述します。

直接Webサーバーに送信するためのボタンでない場合は、必ずtype=”button”にする必要があるので注意しましょう。

そうしておかないと、クリックした際にデータの送信・レスポンスが実行されてしまい、予期せぬ表示がなされてしまう可能性があります。

autofocus属性について

autofocus属性は、ボタンのフォーカスを指定する属性です。

<button type="submit" autofocus>送信する</button>

この属性を指定していた場合、ページを読み込んだときにボタンが選択された状態になります。

そのままEnterキーを押すとボタンの処理が実行される状態ですね。

このautofocus属性はページの中で1つしか設定できません。複数ある場合は機能しなくなります。

ページを訪れたユーザーが他の部分をクリックすれば、フォーカスは外れるようになっています。

disabled属性について

disabled属性は、ボタンをクリックしても処理が実行されない状態にできます。

<form action="">
<label for="name">お名前（必須）</label>
<input type="text" name="yourname" id="name" oninput="checkName()">
<button type="submit" disabled>送信する</button>
</form>

JavaScriptを用いて、入力必須の項目に入力された場合に、disabledを削除してボタンの処理ができるように変更する、という方法などが有効です。

上記コードでは、名前の項目に入力されると、checkName()関数を呼び出して、disabledが削除されるようになっています。

formnovalidate属性について

formnovalidate属性を指定することで、入力項目に設定しておいたrequiredなどのバリデーションが無効になります。

<form action="">
<input type="text" required>
<button type="submit" formnovalidate>保存</button>
</form>

入力フォームが長く、途中で入力情報を保存させたい場合などに、使用されます。

最終的な送信ボタンとは別に作成しましょう。

name属性とvalue属性について

name属性とvalue属性を指定することで、ボタンを押すだけで値を送信できます。

<form action="">
<button type="submit" name="sub" value="good">いいね</button>
</form>

ユーザーが情報を入力するのではなく、ボタンをクリックしてもらいたいときなどに設定します。

name属性ではボタンの名前、value属性では値を指定できます。

ボタンがクリックされると、name属性とvalue属性の値の組み合わせがサーバーに送信されます。

上記のコードでは、sub=goodがサーバーに送られますね。

form属性について

form属性を指定すると、button要素とform要素を関連付けることができます。

<form action="" id="myform">
<input type="text">
</form>
<button type="submit" form="myform">送信</button>

button要素のform属性とform要素のid属性に、同じ値を指定する必要があります。

同じものを指定すると、上記のようにform要素の外側にボタンを設置しても、ボタンクリックで入力情報の送信ができます。

同じHTML文書内であれば、form要素とbutton要素が離れていても機能します。

未経験でも確実にプログラミングスキルを身につけられる！
【DMM WEBCAMP】では、専属コーチが卒業まで伴走します！

✔短期間で効率的にプログラミングスキルを身につけたい
✔プログラミングを独学で進めていくのが不安
✔家での時間を有効に使ってスキルアップがしたい
といった方におすすめです！

＼実践的なスキルが身に付くカリキュラム／

似たような動作をする要素との比較

buttonを使えば、簡単にボタンを設定できることがわかっていただけたでしょうか？

HTMLには、button以外にもボタンの機能がある要素があります。

ここでは、a要素とinput要素について、buttonとの違いを解説していきます。

どちらを選ぶべきなのか、互いの要素のメリットデメリットなども紹介しますね。

a要素との使い分け方

リンクを作成するa要素のスタイルを変更することでも、button要素のようなボタンを作ることができます。

button要素とは何が違うのでしょうか？

リンク先を指定する場合、a要素の方がコードがシンプルになります。

<a href="リンク先のURL">移動します</a>

上記のように、href属性にリンク先のURLを指定するだけで、処理が実装できます。

button要素の場合は、

<button type="button" onclick="location.href='リンク先のURL'">移動します</button>

とリンク指定をする必要があります。

a要素の方がカスタマイズが容易にできるので、別のページへのリンクではa要素を使用することをおすすめします。

button要素は、すでにボタンとしてのスタイルが指定されており、細かいデザインをする際には、既定のスタイルを打ち消す必要が出てきます。

代わりに、a要素はフォームの送信ボタンとしては利用できないので、その場合はbutton要素を使いましょう。

クリックでJavaScriptの処理を実行したい場合にも、button要素は便利です。

<input type=”button”>との使い分け方

入力フォームのinput要素のtype属性をbuttonとすることでも、ボタンとして使用することができます。

input要素はbutton要素同様、フォーム内で使用できますが、特別な理由がない限りbutton要素を使った方が良いでしょう。

button要素には、

<button type="submit">送信</button>

というように、開始タグと終了タグがあります。

中に子要素を持つことができるため、CSSでのカスタマイズに融通が利きやすくなります。

子要素の他に::beforeや::afterなどの擬似要素も加えることができます。

input要素では、複雑な指定ができないのであまり推奨できないです。

まとめ：ボタンを作るときには、何をしたいのか明確にする

ここまで、HTMLでボタンを設置する方法について紹介してきました。

ボタンを作るときには、送信ボタンなのかリセットボタンなのか、それともJavaScriptを実行するためのものなのか、明らかにすることが重要になります。

別ページへのリンクを張りたいだけなら、a要素の方が適しているので、そういう見極めも大事になってきます。

button要素は属性の指定によって、いろいろな処理を実装できるので、そちらも1つ1つ試してみてくださいね。

実際にコードを書いてみることが習得の近道です。

ボタンを作成する上で、今回の記事が少しでも参考になれば幸いです。

【DMM WEBCAMP】は受講生の97%が未経験からのスタート！
充実のサポート体制で、プログラミングスキルを確実に身につけられます！

✔一人ひとりに合わせた学習計画で進められるため、仕事や学校と両立できる
✔未経験者のために開発された実践的なカリキュラムを用意
✔︎専属コーチが卒業まで学習をサポート

＼目的別で選べる3つのコース／