メインコンテンツにスキップ

HTML画像入力ジェネレーター

API reference

グラフィカルな送信ボタン <input type="image"> を生成します。画像のソース、代替テキスト、フォーム送信のオプションを設定して、すぐに使えるHTMLをコピーできます。無料・即時・AI不使用。

入力

小文字で、アンダースコアやハイフンを使って分かりやすい名前を付けてください(例: submit_image や image-button)。

画像ファイルのURLまたはパスです。

アクセシビリティのため、また画像が読み込めない場合に表示される代替テキストです。

設定

要素にカスタムCSSクラスを追加します。複数のクラスはスペースで区切ってください。

出力

HTML
 
役に立ちましたか?

このツールを使う他の方法

REST API

curl -X POST https://api.iotools.cloud/v1/tool/html-generator/input-image \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "customName": "image-button",
    "customSrc": "https://example.com/button.png",
    "customAlt": "Submit",
    "customDisabled": "",
    "customWidth": "",
    "customHeight": "",
    "customValue": "Submit",
    "customFormaction": "",
    "customClasses": ""
  }'

ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。

AIエージェントに依頼する

Use the IOTools `html-generator__input-image` tool (HTML Input Image Generator) on this input:

YOUR_INPUT_HERE

IOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。

埋め込みウィジェット

<iframe
  src="https://iotools.cloud/embed/html-generator/input-image/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="HTML画像入力ジェネレーター — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。

API/MCP 1回あたりの費用5クレジットから
クレジットが足りませんか?料金を見る

次の方法でも利用可能

ガイド

そのまま貼り付けられる <input type="image"> を生成します。ブラウザ標準のボタンの見た目の代わりに画像を使ったグラフィカルな送信ボタンです。画像のソース、代替テキスト、サイズ、フォーム送信のオプションを設定して、生成されたHTMLをコピーしてください。

すべてブラウザ内で動作します。AIの呼び出し、クレジット、ネットワーク通信は不要です。入力すると出力がすぐに更新されます。

使い方

  1. 名前、画像のソース、代替テキストを設定します。
  2. 必要に応じて幅・高さ、またはフォームのアクションの上書きを設定します。
  3. 生成されたHTMLをコピーまたはダウンロードします。

なぜ <label> がないのですか?

<input type="image"> はラベル付きのフォーム項目ではなく、グラフィカルな送信ボタンです。alt テキストがすでにその役割を説明しており、<label> と組み合わせるのは冗長です(多くのHTML作成ガイドでも指摘されています)。このジェネレーターでは意図的に省いています。

なぜライブプレビューがないのですか?

出力はサニタイズされていない生のフォームマークアップです。ページに直接レンダリングするのは安全ではありません。コードを自分のページに貼り付けて、実際の文脈で確認してください。

htmlinputimagebuttongeneratorform

ツールが気に入りましたか?広告をなくしましょう。

1回のお支払いでアカウントから広告が完全になくなります。サブスクリプションも追跡もありません。