Widely available すべての主要ブラウザで対応済み。安心して使用可能。

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
1
12
1
1
18
1
1+対応 (バージョン) 未対応 注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

HTML
<input type="button" value="クリック"
  onclick="alert('クリックされました')">
<!-- 推奨: <button type="button">クリック</button> -->

ライブデモ

ボタン型 input

input type=button でクリック可能なボタンを作成。button 要素との比較。

プレビュー全画面表示

button 要素との比較

input type=button と button 要素の違い。

プレビュー全画面表示

フォーム内のボタン

フォーム内での submit / reset / button の使い分け。

プレビュー全画面表示

実務での使いどころ

  • <input type="button"> の活用

    <input> 要素の button 型は、プッシュボタンとして描画され、イベントハンドラー関数(ふつうは click イベント)を割り当てることで、ウェブページのあらゆる場所でカスタム機能を制御するようにプログラムすることができます。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。