<input> — ボタン・その他

対応:		HTML 4（1997）

『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"	画像をボタンとして使用します。クリックした座標も送信されます。

サンプルコード

sample_input_button.html

<!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』要素の使用も検討してください。

対応ブラウザ

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

1 以降 ○

Edge

12 以降 ○

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

12.1 以降 ○

11.1 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

1 以降 ○

Chrome Android

JavaScriptとの連携

ボタンはJavaScriptと組み合わせることで、送信以外のさまざまな処理を実装できます。

<!-- 送信ボタン: フォーム送信をJavaScriptで制御する -->
<form id="signup-form">
  <label for="agree">
    <input type="checkbox" id="agree" name="agree">
    利用規約に同意する
  </label>
  <!-- 最初はdisabled、チェック後に有効化 -->
  <button type="submit" id="submit-btn" disabled>登録する</button>
</form>

<script>
  var checkbox = document.getElementById('agree');
  var submitBtn = document.getElementById('submit-btn');

  checkbox.addEventListener('change', function() {
    submitBtn.disabled = !checkbox.checked;
  });

  document.getElementById('signup-form').addEventListener('submit', function(e) {
    // 送信前にボタンを無効化して二重送信を防ぐ
    submitBtn.disabled = true;
    submitBtn.textContent = '送信中...';
    // フォームの送信を続行 (e.preventDefault()しない場合)
  });
</script>

<!-- input type="button" でダイアログを開く -->
<input type="button" value="ヘルプを表示" id="help-btn">
<div id="help-dialog" hidden>
  <p>ここにヘルプの内容が入ります。</p>
  <input type="button" value="閉じる" id="close-btn">
</div>

<script>
  document.getElementById('help-btn').addEventListener('click', function() {
    document.getElementById('help-dialog').hidden = false;
  });
  document.getElementById('close-btn').addEventListener('click', function() {
    document.getElementById('help-dialog').hidden = true;
  });
</script>

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

HTML辞典

<input> — ボタン・その他

構文

属性一覧

サンプルコード

sample_input_button.html

実行結果

概要

対応ブラウザ

JavaScriptとの連携