送信ボタンとリセットボタンを作る

[新着] Webテンプレートを仮オープンしました


<input type="submit"><input type="reset">

ブラウザ
Internet Explorer Netscape Firefox Opera
タイプ
置換インライン 空要素

inputタグtype="submit" を指定すると送信ボタンを、type="reset" を指定するとリセットボタンを作成できます。


<input type="submit" value="送信する">

<input type="reset" value="リセット">


value="" ボタンに表示される文字を指定します

value="" (ボタンに表示される文字を指定する)

value="" で指定した文字列が、ボタン上に表示されます。

この指定を行わない場合は、ブラウザごとにデフォルトの文字列が表示されます。

ボタン表示例

【送信ボタン】

入力した内容を送信するためのボタンです。

【リセットボタン】

入力した内容をキャンセルして、初期状態に戻すためのボタンです。

【送信ボタンが複数ある場合】

状況によっては、複数の送信ボタンを使用する場合があります。(押されたボタンにより処理を振分ける場合など)
このような場合には、各送信ボタンに name="" を追加して、それぞれのボタン名を指定します。

メモ

ボタンのサイズや背景色等は、スタイルシートでアレンジすることもできます。指定方法の詳細は「関連ページ」をご覧ください。


使用例

value="" を指定する場合

<form method="POST" action="example.cgi">

<p><input type="text" name="test"></p>

<p>
<input type="submit" value="送信する">
<input type="reset" value="リセット">
</p>

</form>

これをブラウザで見ると次のように表示されます

※サンプルのため送信できません


value="" を指定しない場合

<form method="POST" action="example.cgi">

<p><input type="text" name="test"></p>

<p>
<input type="submit">
<input type="reset">
</p>

</form>

これをブラウザで見ると次のように表示されます

※サンプルのため送信できません


送信ボタンが複数ある場合

<form method="POST" action="example.cgi">

<p><input type="text" name="test"></p>

<p>
<input type="submit" name="button_a" value="Aボタン">
<input type="submit" name="button_b" value="Bボタン">
<input type="submit" name="button_c" value="Cボタン">
<input type="reset" value="リセット">
</p>

</form>

これをブラウザで見ると次のように表示されます

※サンプルのため送信できません



[特集] レンタルサーバー比較 & サーバー選びのチェックポイント

サイト内検索について - ベーシック版