HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのbuttonタグとは？使い方と主な属性をサンプルコード付きで解説

buttonタグとは？

HTMLの<button>タグは、Webページ上に「クリックできるボタン」を作成するための要素です。フォームの送信やJavaScriptによる処理の実行など、ユーザーの操作を受け付けるトリガーとして幅広く利用されています。

同じようにボタンを作成できる要素に<input type="submit">がありますが、<button>タグは開始タグと終了タグのペアで構成されているため、ボタンの内側に画像やアイコンなどのHTML要素を自由に配置できるのが大きな違いです。inputタグでは実現できない柔軟でリッチなデザインが可能になります。

buttonタグの主な属性一覧

<button>タグで使用できる代表的な属性は以下のとおりです。

属性値説明
autofocusautofocusページの読み込み時に、このボタンへ自動的にフォーカスを当てる
disableddisabledボタンを無効化し、クリックできない状態にする
formform_idボタンが属するフォーム（1つまたは複数）をIDで指定する
formactionURLtype='submit'の場合に、フォームデータの送信先URLを指定する
formenctypeapplication/x-www-form-urlencoded
multipart/form-data
text/plain		type='submit'の場合に、サーバーへ送信するデータのエンコード方式を指定する
formmethodget
post		type='submit'の場合に、フォームデータの送信方法（HTTPメソッド）を指定する
formnovalidateformnovalidatetype='submit'の場合に、送信時の入力チェック（バリデーション）をスキップする
formtarget_blank
_self
_parent
_top
framename		type='submit'の場合に、送信後のレスポンスを表示する場所を指定する
namenameボタンの名前を指定する
typebutton
reset
submit		ボタンの種類を指定する
valuetextボタンの初期値を指定する

buttonタグの実装例

それでは、実際に<button>タグを使ったサンプルコードを見てみましょう。ここでは、無効化されたボタン（disabled属性付き）と通常のボタンを並べて表示しています。

<!DOCTYPE html>
<html>
<body>
    <h2>見出しサンプル</h2>
    <p>下にサンプルテキストを用意しました：</p>
    <textarea rows='4' cols='50'>
       ここでは、HTMLの概念・要素・属性について学習しています！
    </textarea><br>
    <button type='button' disabled>前へ</button>
    <button type='button'>次へ</button>
</body>
</html>

実行結果

このコードをブラウザで表示すると、テキストエリアの下に2つのボタンが並びます。「前へ」ボタンは<code>disabled</code>属性が指定されているため無効化された状態で表示され、クリックしても反応しません。一方、「次へ」ボタンは通常どおりクリック可能な状態で表示されます。

buttonタグを使うときのポイント

  • type属性は必ず明示的に指定する：多くのブラウザではtype属性の初期値が「submit」になるため、フォーム以外で使うボタンには「type='button'」を指定しておくと、意図しないフォーム送信を防げます。
  • 中身は自由にカスタマイズ可能：テキストだけでなく、<img>タグやSVGアイコンなどを組み合わせて、視覚的に魅力的なボタンを作成できます。
  • CSSとの組み合わせで自由自在：色・角丸・影などをCSSで調整すれば、サイトのデザインに合わせたボタンを簡単に実装できます。

まとめ

<button>タグは、クリック可能なボタンを手軽に作成できるHTMLの基本要素です。inputタグとの違いや各属性の役割を理解し、用途に応じて使い分けることで、より使いやすいWebページを作ることができます。まずはサンプルコードを参考に、実際に手を動かして試してみてください。

  1. HTML DOMのInput Submit disabledプロパティとは?使い方とサンプルコードを解説

    HTML DOMのInput Submit disabledプロパティとは HTML DOMのInput Submit disabledプロパティは、フォーム内の送信ボタン(submitボタン)を無効化するかどうかを設定・取得するために使用されるプロパティです。 このプロパティはブール値(true/false)を受け取ります。 true … 送信ボタンを無効化する false … 送信ボタンを有効化する(デフォルト値) 無効化(disabled)されたボタンは自動的にグレーアウトして表示され、ユーザーがクリックすることはできません。二重送信の防止や、入力内容が未完了の場合に送信操作を制限し

  2. HTML DOM 入力送信（submit）オブジェクトのプロパティ徹底解説

    HTML DOM の入力送信（Input Submit）オブジェクトは、type=submit が指定された <input> 要素に関連付けられたオブジェクトです。新しい送信ボタンは createElement() メソッドで動的に作成でき、すでにページ上に存在する送信ボタンには getElementById() メソッドを使ってアクセスできます。 Input Submit オブジェクトの主なプロパティ 入力送信オブジェクトには、以下のプロパティが用意されています。 プロパティ説明 autofocusページ読み込み時に、送信ボタンへ自動的にフォーカスを当てるかどうかを設