カスタム検索

submit(送信ボタン)

<input>タグの属性で、type="submit"を指定すると、送信ボタンを定義します。送信ボタンがクリックされると、そのフォームで定義されているフォーム要素の名前(name属性の値)と値(value属性の値)のセットが<form>タグのaction属性で指定されているプログラムなどに送信されます。type="submit"を指定した場合に使用できる属性は以下のようになります。

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

name属性

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

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

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

value属性

value属性を指定すると、送信ボタンに表示される値を変更することができます。このvalue属性を指定しない場合は、ブラウザの初期値(「送信」、「実行」、「submit」となっていることが多い)が設定されます。

disabled属性

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

入力例

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

input_submit.html
<html>
    <head>
        <title>&lt;input type="submit" /&gt;の例</title>
    </head>
    <body>
        <p>血液型は?
        </p>
        <form action="プログラムのパス" method="get">
            <div><input type="radio" name="type_blood" value="a" checked="checked" />A型</div>
            <div><input type="radio" name="type_blood" value="b" />B型</div>
            <div><input type="radio" name="type_blood" value="o" />O型</div>
            <div><input type="radio" name="type_blood" value="ab" />AB型</div>
            <div><input type="radio" name="type_blood" value="unknown" disabled="disabled" />不明</div>
            <div><input type="submit" /></div>
            <div><input type="submit" name="unknown" value="不明の方" /></div>
            <div><input type="submit" name="blood_submit" value="献血の申し込み" disabled="disabled" /></div>
        </form>
    </body>
</html>
CopyLeft 2024 Webデザインレッスン プライバシーポリシー サイト管理者に連絡