button（ボタン）

<input>タグの属性で、type="button"を指定すると、ボタンを定義します。このボタンは、送信ボタンとは異なり、クリックしてもフォームのデータは送信されません。主に、JavaScriptなどを記述することで何らかの役割を持たせることができます。

type="button"を指定した場合に使用できる属性は以下のようになります。

送信ボタンの属性
属性	イベントフォーカス name value disabled

name属性

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

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

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

value属性

value属性を指定すると、ボタンに表示される値を変更することができます。このvalue属性を指定しない場合は、ブラウザの初期値となりますが、何も表示されないことがほとんどなので、必須の属性といえます。

disabled属性

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

入力例

入力例です。JavaScriptコードを埋め込んでいます。

input_button.html


<html>
    <head>
        <title>&lt;input type="button" /&gt;の例</title>
    </head>
    <body>
        <form action="プログラムのパス" method="get">
            <div><input type="button" onClick="alert('クリックされました')" /></div>
            <div><input type="button" value="クリック！" onClick="alert('クリックされました')" /></div>
            <div><input type="button" value="クリック！" disabled="disabled" onClick="alert('クリックされました')" /></div>
        </form>
    </body>
</html>

image

ページの先頭

2024 Webデザインレッスンプライバシーポリシーサイト管理者に連絡