HTML

The button element is used to create a button that users can click to perform some action.

button 要素

　button要素は、ユーザーがクリックすることで何らかのアクションを実行するためのボタンを作成するために使用されます。

　button要素は開始タグ <button> と終了タグ </button> で囲まれた中に、ボタンに表示するテキストやアイコンなどのコンテンツを配置します。例えば、次のようなコードでボタンを作成することができます。

HTML

<button>Click me</button>

　上記のコードでは、"Click me"というテキストを持つボタンが作成されます。このボタンをクリックすると、デフォルトのアクションが実行されますが、後述するJavaScriptを使用してカスタムのアクションを追加することもできます。

　button要素には、さまざまな属性を追加することでさまざまな機能を持たせることができます。

type属性

ボタンのタイプを指定します。主な値は以下の通りです。

　例えば、以下のコードでは type属性を使用してボタンのタイプを指定しています。

HTML

<button type="submit">Submit</button>

disabled属性

ボタンを無効化します。無効なボタンはクリックできず、グレーアウトされた状態で表示されます。これは、ユーザーが特定の条件を満たすまでボタンを利用できない場合などに使用されます。

HTML

<button disabled>Click me</button>

name属性および value属性

ボタンをフォーム内で使用する場合に、ボタンの名前と値を指定します。これにより、ボタンがフォームの送信時に送信されるデータに含まれることができます。

HTML

<form action="submit" method="post">
	<button type="submit" name="submit" value="clicked">Click me</button>
</form>

上記の例では、フォームが送信されると、submit という名前のパラメータが clicked という値でサーバーに送信されます。

　これらは button要素でよく使用される属性の一部ですが、他にも多くの属性があります。また、CSSを使用してボタンのスタイルをカスタマイズすることも可能です。

CSS

button {
	display: inline-block;
	padding: 1ex 2ex;
	margin: 1ex;
	font-size: larger;
	box-shadow: 0.2ex 0.2ex 0.3ex;
}

　さらに高度な機能を追加するために、JavaScriptを使用することもできます。JavaScriptを使用すると、ボタンがクリックされたときにカスタムのアクションを実行したり、他の要素とのインタラクションを追加したりすることができます。以下に例を示します。

HTML

<button onclick="myFunction()">Click me</button>

<script>
	function myFunction() {
		alert("Button clicked!");
	}
</script>

　上記の例では、onclick属性を使用して、ボタンがクリックされたときに myFunction() という JavaScript関数が呼び出されます。myFunction() は単純なアラートメッセージを表示しますが、実際にはさまざまなアクションを実行することができます。