【buttonタグ】フォーム内にボタンを作って配置してみよう！「HTML・解説・初心者向け」- ノブレコ

★<button>タグの特徴

<button>の説明

<button>とは

<form>タグでフォームを作成するとき、その<form>タグ内にて、３つの役割を持った「ボタン」を配置することができるタグです。

<button>タグで作成したボタンは、ボタンの内容テキストを変更したり、画像を使ってボタン表示したり、そのどちらも組み合わせて表示することができます。

同じようなボタン機能を表示するタグに<input>タグがありますが、上記のようなことをすることはできません。

■使用目的

<button>タグということで、意味どうりにボタンを配置したいときに使用します。

使用用途は主に、フォームに入力した内容を送信したり、リセットするためのボタンを配置して使うことが多いです。

またクリック時にjavascriptで処理したいことがあるときにも使われます。

ボタンには3つのタイプがあり、送信ボタン、リセットボタン、汎用ボタンに分けて作成できます。

この３つのボタンの振る舞いを決めるためには、type属性で属性値に以下の値を指定します。

値	挙動
submit	「送信」ボタンを作成する
reset	「リセット」ボタンを作成する
button	「何もしない」ボタンを作成する

■使われる属性

使用上の注意点

① <a>タグの中に<button>タグを入れてはいけません。

HTML5のルールとして、<a>タグにはインタラクティブコンテンツを入れることができないとなっていますので、対話型コンテンツを含んでいる<button>タグを入れることはできません。

② ボタン作成には2種類のタグがある。

ボタンの作成には<button>タグを使う他に、<input>タグにtype属性で属性値にbuttonを指定して作成する方法があります。

両方ともに見た目や機能は同じになりますが、使い方の幅が違ってくるので注意してください。

例えば、<input>タグは空要素で閉じタグが必要ではなく、内容を持つこともできません。対して<button>タグは内容を持つことができるタグであり、子要素を持つことができます。子要素を持てるので、それらを利用してCSSを使ったボタンのスタイル変更や、ボタンに画像を使うということができるようになるので、<input>タグより使い勝手の幅が広がることが大きな違いとなります。

内容モデル

<button>要素の内容モデルは「phrasing」です。

ただし、インタラクティブコンテンツ（対話型コンテンツ）を子孫要素にすることはできません。

<button>要素の内容はボタンの「ラベル」になります。ラベルとしての単純なテキストを入れるだけでなく、ボタンにマークアップを含むことも可能で、例えば<img>要素を子要素にして画像とテキストを併用したボタン表示も可能になります。

アクセシビリティでの注意点

<button>要素は、標準で「buttonロール」持ちます。

スクリーンリーダーなどでは、ボタンのラベルを読み上げるとともに、それがボタンであることも読み上げられるようになります。

ボタンの機能によっては、WAI-ARIAのステートを付与することで、セマンティクスを強化できることもあります。

<button>の記述例

■基本的な使用例

★HTML

★実行結果

ボタン

これは簡単なボタンの記述例ですが、<button>要素にtype属性を指定し、その値に”button”を入れています。

基本的にはこのtype属性とその値でボタンの挙動を変更することができるので、type属性と３つの値は覚えておきましょう。

またボタンのテキスト内容は、自分で簡潔な内容に変更可能です。

まとめ

この記事では、<button>タグについての解説をいたしました。

このタグは、送信、リセット、汎用のボタンを作成するための要素で、ボタンの内容テキストの変更や、画像を含んだボタン表示なども可能になります。

ボタンを作成するタグには<a>タグや<input>タグも存在しますが、これらと<button>タグでは使用用途の幅が違ってくるので、臨機応変に使い分けるといいでしょう。

便利で必要な要素ですので、使う機会があれば是非覚えてみてください。

この記事が少しでも皆さんのお役に立てれば幸いです。

最後まで読んでいただき、ありがとうございました。またなん༼ つ ◕_◕ ༽つ