【HTML Living Standard】button属性値の使い方

button属性値の使い方について、初心者にもわかりやすく解説します。

作成日: 2025年09月29日更新日: 2026年03月25日

基本的な使い方

buttonオブジェクトは、ウェブページ上でユーザーがクリックして何らかのアクションを実行するための対話型コントロールを表すオブジェクトです。主に、フォームのデータをサーバーに送信したり、ウェブページ上でJavaScriptと連携して特定の機能を発動させたりするために使用されます。

このbutton要素は、開始タグと終了タグの間にテキストだけでなく、画像や他のHTML要素を配置できるため、視覚的に豊かでカスタマイズ性の高いボタンを作成することが可能です。これは、<input type="button">要素ではできない表現の自由度を持っています。

buttonオブジェクトには、その振る舞いを定義するためのいくつかの重要な属性があります。例えば、type属性は、ボタンがフォームを送信する（submit）、フォームの内容をリセットする（reset）、あるいは単なるクリック可能なボタンとして機能する（button）かを指定します。name属性とvalue属性は、フォーム送信時にボタンの情報をサーバーに送る際に利用されます。また、disabled属性を使用すると、一時的にボタンを無効化し、ユーザーによる操作を禁止することができます。

クリックイベントはJavaScriptで容易に捕捉でき、ウェブアプリケーションのユーザーエクスペリエンスを向上させる多様なインタラクションを実現します。システムの操作性において中心的な役割を果たす、非常に重要なコンポーネントです。

公式リファレンス: <input type="button">

構文(syntax)


1<button>クリック</button>

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

サンプルコード

HTML button disabled属性でボタンを無効にする


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Button Disabled Example</title>
7</head>
8<body>
9    <!-- このボタンは有効です。クリックできます。 -->
10    <button type="button">有効なボタン</button>
11
12    <br><br>
13
14    <!-- このボタンは無効です。disabled属性が付いているため、クリックできません。 -->
15    <button type="button" disabled>無効なボタン</button>
16</body>
17</html>

このHTMLコードは、ウェブページ上に表示される「ボタン」要素の基本的な使い方と、その動作を制御するdisabled属性について説明しています。

<button>要素は、ユーザーがクリックすることで何らかの操作を実行するためのインタラクティブな部品です。例えば、フォームのデータを送信したり、特定の機能を有効にしたりする際に使用されます。この要素自体には、プログラミング言語の関数のような直接的な引数や戻り値の概念はありません。その振る舞いは、内部のテキストや追加される属性によって定義されます。

サンプルコードの最初のボタンは「有効なボタン」と表示されており、<button type="button"> のように記述されています。ここではdisabled属性が付いていないため、通常のクリック可能な状態であり、ユーザーは自由に操作できます。

一方、二つ目のボタンは「無効なボタン」と表示されており、<button type="button" disabled> のようにdisabled属性が付与されています。このdisabled属性は、要素を無効化するための特別な属性です。disabled属性は値を持ちませんが、この属性が存在するだけでボタンはクリックできなくなり、通常は薄暗く表示されるなどして、操作できない状態であることが視覚的に示されます。この機能は、特定の条件が満たされるまでボタンを操作させたくない場合などに利用されます。disabled属性自体に引数や戻り値はありませんが、ボタンのインタラクティブな挙動を制御する重要な役割を担っています。

button要素のdisabled属性は、そのボタンをクリックできない状態にするものです。サンプルコードのように属性名を記述するだけで有効となり、ブラウザはボタンの見た目を操作不能だとわかるように変化させます。これは、フォームの入力が不完全な場合や、処理が進行中の間など、ユーザーの誤操作を防ぐために特に有用です。値を設定する必要のない「真偽属性」であり、属性の有無だけで機能が切り替わります。JavaScriptを使って動的にこの属性を付け外しする場面は多いですが、クライアント側で無効化しても悪意あるユーザーは解除できる可能性があるため、送信されるデータは必ずサーバー側で再検証するセキュリティ対策が不可欠です。

HTMLボタンにonclickでJavaScriptを実行する


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>HTMLボタンのサンプル</title>
7</head>
8<body>
9
10    <!--
11        HTMLのボタン要素を作成します。
12        onclick属性は、ボタンがクリックされたときに実行されるJavaScriptコードを指定します。
13        ここでは、handleClick()というJavaScript関数を呼び出しています。
14    -->
15    <button onclick="handleClick()">ここをクリック！</button>
16
17    <script>
18        // ボタンがクリックされたときに呼び出されるJavaScript関数です。
19        // シンプルなアラートメッセージを表示します。
20        function handleClick() {
21            alert('ボタンがクリックされました！');
22        }
23    </script>
24
25</body>
26</html>

HTMLのbutton要素は、Webページ上にクリック可能なボタンを作成するために使用される要素です。この要素を配置することで、ユーザーはクリック操作を通じてWebページと対話できるようになります。

提供されたサンプルコードでは、<button>タグによって「ここをクリック！」というラベルを持つボタンが作成されています。このボタンにはonclick属性が設定されており、これはユーザーがボタンをクリックした際に実行されるJavaScriptコードを指定するものです。今回の例では、onclick="handleClick()"と記述することで、ボタンがクリックされたときにhandleClick()という名前のJavaScript関数が呼び出されるように定義されています。

具体的には、ユーザーがボタンをクリックすると、Webブラウザは<script>タグ内に定義されているhandleClick()関数を実行します。この関数の中では、alert('ボタンがクリックされました！');というJavaScriptの命令が記述されており、実行されると「ボタンがクリックされました！」というメッセージが表示されるポップアップ（アラートダイアログ）が画面に表示されます。

このように、button要素はWebページのユーザーインターフェースを構築し、onclick属性を通じてJavaScriptと連携することで、ユーザーの操作に応じた動的な処理を実現します。button要素自体が直接引数を受け取ったり、特定の値を戻り値として返したりするものではなく、HTMLの構造としてUIを提供し、JavaScriptがその振る舞いを制御するという役割を担っています。

onclick 属性にJavaScriptコードを直接記述する方法はシンプルですが、複雑な処理ではHTMLとJavaScriptが混在し、コードの管理が難しくなる点に注意が必要です。一般的には、JavaScriptファイル内で addEventListener を使用し、HTML要素とスクリプトを分離することが推奨されます。これにより、コードの可読性や保守性が向上します。また、button 要素は、type 属性を指定しない場合、フォーム内で type="submit" と同じ挙動をすることがあります。意図しないフォーム送信を防ぐためには、type="button" を明示的に指定すると良いでしょう。alert() 関数は簡単なデバッグや確認には便利ですが、実際のユーザー体験を考慮すると、Webアプリケーションではより洗練された表示方法を検討することをお勧めします。