カスタム検索

<button>タグ

<button>タグは、ボタン要素を定義します。<input type="button">もボタンを定義しますが、この<button>を使用すると、より細かな表現や、設定が可能です。

<button>と</button>の間に記述されたテキストや、画像にそのままボタンとしての役割を持たせることもできますし、CSSを使用して、ボタンの外観を変更することもできます。また、type属性を指定することで、送信ボタンとしても、リセットボタンとしても定義することができます。

<button>タグの機能と属性
機能 ボタン要素を定義
属性 HTML-4.01 コア 言語 イベント  フォーカス  name  value  type  disabled  
XHTML-1.0 コア 言語 イベント  フォーカス  name  value  type  disabled  
備考 XHTML2では廃止になっている

name属性

name属性は、<button>要素に名前を付けます。ここで付けられた名前は、送信されたフォームを処理するプログラム等から参照されます。このname属性は、必須ではありませんが、指定しなければ不可能な表現もあります。

プログラムから参照されるので、名前の付け方には注意が必要です。当然、日本語はダメで、記号等も使わないでください。また、最初の文字が数字にならないようにし、スペースが必要な場合は、代わりに「_」(アンダーバー)を使用するようにしてください。そうしないとプログラムでの処理に問題が発生する場合があります。

フォームでのname属性は、<a>タグ等で使用されるname属性とは役割が異なるものです。

value属性

value属性を使用すると、ボタンがクリックされたときに、<form>タグのaction属性で指定されたプログラムに渡す値を指定することができます。

<input>でボタンを定義する際のvalue属性は、ボタンに表示されるラベルを変更するものでしたが、<button>タグのvalue属性は、ラジオボタンやチェックボックスのvalue属性と同様、プログラムが参照する値を指定するものですので、間違わないように気をつけてください。

type属性

type属性を使用すると、ボタンの役割を定義することができます。指定することのできる値は次のようになります。

type属性の値と役割
役割
submit 送信ボタン(<input type="submit">と同等)
reset リセットボタン(<input type="reset">と同等)
button ボタン(<input type="button">と同等)

それぞれのボタンの詳細については、それぞれ、送信ボタンリセットボタンボタンを参照してください。

disabled属性

disabled属性を指定すると、ボタンを使用不可にします。ブラウザには表示されるが、クリックはできないボタンとなります。

入力例

入力例です。各属性の働きを確認してみてください。

button.html
<html>
    <head>
        <title>&lt;button&gt;の例</title>
    </head>
    <body>
        <form action="プログラムのパス" method="get">
            <div><button>ボタン</button></div>
            <div><button name="sub">送信</button></div>
            <div><button name="sub" value="val">クリックして送信</button></div>
            <div><button name="sub" value="val" type="submit">送信</button></div>
            <div><button name="sub" value="val" disabled="disabled">送信</button></div>
        </form>
        <p>注:ボタンをクリックすると、トップページに遷移します。</p>
    </body>
</html>
CopyLeft 2021 Webデザインレッスン プライバシーポリシー サイト管理者に連絡