<input type="image">
<input> 要素の image 型は、テキストではなく画像の形をとる送信ボタン、すなわちテキストではなく画像の形をとる送信ボタンを作成するために使用されます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| HTML 属性 | ||||||
| input 要素の image 型は、テキストではなく画像の形をとる送信ボタン、すなわちテキストではなく画像の形をとる送信ボタンを作成するために使用されます。 | 1 | 12 | 1 | 1 | 18 | 1 |
基本構文
HTML
<form action="/submit">
<input type="image" src="submit-btn.png"
alt="送信" width="100" height="40">
</form>ライブデモ
Image submit button
Submit a form with an image input and inspect the click coordinates it sends.
プレビュー全画面表示
Choice tiles
Use multiple image submit buttons when each image represents a distinct action.
プレビュー全画面表示
Compact checkout action
Place an image input next to fields when a branded submit surface is required.
プレビュー全画面表示
実務での使いどころ
-
<input type="image"> の活用
<input> 要素の image 型は、テキストではなく画像の形をとる送信ボタン、すなわちテキストではなく画像の形をとる送信ボタンを作成するために使用されます。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。