Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
<input> — ボタン・その他
『input』要素のボタン・その他タイプでは、フォームの送信・リセット・ファイル選択など、さまざまな操作のためのコントロールを作成できます。
構文
<!-- フォーム送信ボタン --> <input type="submit" value="送信する"> <!-- リセットボタン --> <input type="reset" value="リセット"> <!-- 汎用ボタン（JavaScriptと組み合わせて使用） --> <input type="button" value="クリック"> <!-- ファイル選択 --> <input type="file" name="upload"> <!-- 隠しフィールド（画面に表示されない） --> <input type="hidden" name="token" value="abc123"> <!-- 画像ボタン --> <input type="image" src="btn.png" alt="送信">
属性一覧
| 属性値（type） | 概要 |
|---|---|
| type="submit" | フォームをサーバーへ送信するボタンです。ボタンのラベルは『value』属性で指定します。 |
| type="button" | それ自体では何もしない汎用ボタンです。JavaScriptのイベントと組み合わせて使います。 |
| type="reset" | フォーム内の入力値をすべてリセット（初期値に戻す）するボタンです。 |
| type="file" | ファイルを選択するコントロールです。送信時はファイルのデータが送られます。 |
| type="hidden" | 画面に表示されない隠しフィールドです。CSRFトークンなど画面非表示で送信したい値に使います。 |
| type="image" | 画像をボタンとして使用します。クリックした座標も送信されます。 |
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボタン系input</title>
</head>
<body>
<form action="/send" method="post" enctype="multipart/form-data">
<!-- 隠しフィールド（画面に表示されない） -->
<input type="hidden" name="page" value="contact">
<p>
<label>名前：<input type="text" name="name"></label>
</p>
<p>
<!-- ファイル選択 -->
<label>添付ファイル：<input type="file" name="attachment"></label>
</p>
<!-- 汎用ボタン（JavaScriptで処理） -->
<input type="button" value="プレビュー" onclick="alert('プレビュー表示')">
<!-- リセットボタン -->
<input type="reset" value="入力をリセット">
<!-- 送信ボタン -->
<input type="submit" value="送信する">
</form>
</body>
</html>
実行結果
テキスト入力欄、ファイル選択ボタン、「プレビュー」「入力をリセット」「送信する」の3つのボタンが表示されます。「プレビュー」をクリックするとアラートが表示され、「入力をリセット」をクリックすると入力欄が空に戻ります。
<!-- ブラウザ上での表示イメージ --> 名前：[________________] 添付ファイル：[ ファイルを選択 ] 選択されていません [ プレビュー ] [ 入力をリセット ] [ 送信する ]
概要
『type="submit"』はフォーム送信の主役で、フォーム内で最も頻繁に使われるボタンです。ボタンのテキストは『value』属性で指定します。省略するとブラウザのデフォルトテキスト（「送信」など）が表示されます。
『type="file"』でファイルを送信する場合は、フォームの『enctype』属性に『multipart/form-data』を必ず指定してください。これがないとファイルの内容がサーバーに届きません。複数ファイルを選択させたい場合は『multiple』属性も追加します。
『type="hidden"』はCSRFトークンやページID・セッション情報など、ユーザーには見せずにサーバーへ送りたいデータを含めるときに使います。ただし、ブラウザの「ソースを見る」機能で値は確認できるため、パスワードなどの秘密情報は入れないようにしましょう。
ボタンの見た目をHTMLで自由にカスタマイズしたい場合は、『button』要素の使用も検討してください。
対応ブラウザ
Chrome49 以降 ○
Firefox57 以降 ○
Safari18 以降 ○
Edge80 以降 ○11 以前 ×
IE11 以前 ×
Opera48 以前 ×
iOS Safari18 以降 ○
Android Browser37 以降 ○
Chrome Android36 以降 ○17 以前 ×
Firefox Android79 以降 ○3 以前 ×記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
シェアする