CINXE.COM

<!doctype html><html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://developer.mozilla.org/favicon-48x48.bc390275e955dacb2e65.png"/><link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.528534bba673c38049c2.png"/><meta name="theme-color" content="#ffffff"/><link rel="manifest" href="https://developer.mozilla.org/manifest.f42880861b394dd4dc9b.json"/><link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs"/><title><input type="image"> - HTML: ハイパーテキストマークアップ言語 | MDN</title><link rel="alternate" title="<input type="image">" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image" hrefLang="en"/><link rel="alternate" title="<input type="image">" href="https://developer.mozilla.org/de/docs/Web/HTML/Element/input/image" hrefLang="de"/><link rel="alternate" title="<input type="image">" href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/input/image" hrefLang="fr"/><link rel="alternate" title="<input type="image">" href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/input/image" hrefLang="ru"/><link rel="alternate" title="<input type="image">" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/image" hrefLang="zh"/><link rel="alternate" title="<input type="image">" href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/image" hrefLang="ja"/><link rel="preload" as="font" type="font/woff2" href="/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2" crossorigin=""/><link rel="alternate" type="application/rss+xml" title="MDN Blog RSS Feed" href="https://developer.mozilla.org/en-US/blog/rss.xml" hrefLang="en"/><meta name="description" content="<input> 要素の image 型は、テキストではなく画像の形をとる送信ボタン、すなわちテキストではなく画像の形をとる送信ボタンを作成するために使用されます。"/><meta property="og:url" content="https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/image"/><meta property="og:title" content="<input type="image"> - HTML: ハイパーテキストマークアップ言語 | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="ja"/><meta property="og:description" content="<input> 要素の image 型は、テキストではなく画像の形をとる送信ボタン、すなわちテキストではなく画像の形をとる送信ボタンを作成するために使用されます。"/><meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:height" content="1080"/><meta property="og:image:width" content="1920"/><meta property="og:image:alt" content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background."/><meta property="og:site_name" content="MDN Web Docs"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="MozDevNet"/><link rel="canonical" href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/image"/><style media="print">.article-actions-container,.document-toc-container,.language-menu,.main-menu-toggle,.on-github,.page-footer,.place,.sidebar,.top-banner,.top-navigation-main,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style><script src="/static/js/gtag.js" defer=""></script><script defer="" src="/static/js/main.f565372a.js"></script><link href="/static/css/main.3d9e7a02.css" rel="stylesheet"/></head><body><script>if(document.body.addEventListener("load",(t=>{t.target.classList.contains("interactive")&&t.target.setAttribute("data-readystate","complete")}),{capture:!0}),window&&document.documentElement){const t={light:"#ffffff",dark:"#1b1b1b"};try{const e=window.localStorage.getItem("theme");e&&(document.documentElement.className=e,document.documentElement.style.backgroundColor=t[e]);const o=window.localStorage.getItem("nop");o&&(document.documentElement.dataset.nop=o)}catch(t){console.warn("Unable to read theme from localStorage",t)}}</script><div id="root"><ul id="nav-access" class="a11y-nav"><li><a id="skip-main" href="#content">Skip to main content</a></li><li><a id="skip-search" href="#top-nav-search-input">Skip to search</a></li><li><a id="skip-select-language" href="#languages-switcher-button">Skip to select language</a></li></ul><div class="page-wrapper category-html document-page"><div class="top-banner loading"><section class="place top container"></section></div><div class="sticky-header-container"><header class="top-navigation "><div class="container "><div class="top-navigation-wrap"><a href="/ja/" class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 694.9 104.4" style="enable-background:new 0 0 694.9 104.4" xml:space="preserve" role="img"><title>MDN Web Docs</title><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zm10.4 0v92.1H40.3V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zm10.4 0v92.1H91V0h10.4z" class="logo-m"></path><path d="M627.9 95.6h67v8.8h-67v-8.8z" class="logo-_"></path><path d="M367 42h-4l-10.7 30.8h-5.5l-10.8-26h-.4l-10.5 26h-5.2L308.7 42h-3.8v-5.6H323V42h-6.5l6.8 20.4h.4l10.3-26h4.7l11.2 26h.5l5.7-20.3h-6.2v-5.6H367V42zm34.9 20c-.4 3.2-2 5.9-4.7 8.2-2.8 2.3-6.5 3.4-11.3 3.4-5.4 0-9.7-1.6-13.1-4.7-3.3-3.2-5-7.7-5-13.7 0-5.7 1.6-10.3 4.7-14s7.4-5.5 12.9-5.5c5.1 0 9.1 1.6 11.9 4.7s4.3 6.9 4.3 11.3c0 1.5-.2 3-.5 4.7h-25.6c.3 7.7 4 11.6 10.9 11.6 2.9 0 5.1-.7 6.5-2 1.5-1.4 2.5-3 3-4.9l6 .9zM394 51.3c.2-2.4-.4-4.7-1.8-6.9s-3.8-3.3-7-3.3c-3.1 0-5.3 1-6.9 3-1.5 2-2.5 4.4-2.8 7.2H394zm51 2.4c0 5-1.3 9.5-4 13.7s-6.9 6.2-12.7 6.2c-6 0-10.3-2.2-12.7-6.7-.1.4-.2 1.4-.4 2.9s-.3 2.5-.4 2.9h-7.3c.3-1.7.6-3.5.8-5.3.3-1.8.4-3.7.4-5.5V22.3h-6v-5.6H416v27c1.1-2.2 2.7-4.1 4.7-5.7 2-1.6 4.8-2.4 8.4-2.4 4.6 0 8.4 1.6 11.4 4.7 3 3.2 4.5 7.6 4.5 13.4zm-7.7.6c0-4.2-1-7.4-3-9.5-2-2.2-4.4-3.3-7.4-3.3-3.4 0-6 1.2-8 3.7-1.9 2.4-2.9 5-3 7.7V57c0 3 1 5.6 3 7.7s4.5 3.1 7.6 3.1c3.6 0 6.3-1.3 8.1-3.9 1.8-2.7 2.7-5.9 2.7-9.6zm69.2 18.5h-13.2v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM493.2 56v-4.4c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm53.1-1.4c0 5.6-1.8 10.2-5.3 13.7s-8.2 5.3-13.9 5.3-10.1-1.7-13.4-5.1c-3.3-3.4-5-7.9-5-13.5 0-5.3 1.6-9.9 4.7-13.7 3.2-3.8 7.9-5.7 14.2-5.7s11 1.9 14.1 5.7c3 3.7 4.6 8.1 4.6 13.3zm-7.7-.2c0-4-1-7.2-3-9.5s-4.8-3.5-8.2-3.5c-3.6 0-6.4 1.2-8.3 3.7s-2.9 5.6-2.9 9.5c0 3.7.9 6.8 2.8 9.4 1.9 2.6 4.6 3.9 8.3 3.9 3.6 0 6.4-1.3 8.4-3.8 1.9-2.6 2.9-5.8 2.9-9.7zm45 5.8c-.4 3.2-1.9 6.3-4.4 9.1-2.5 2.9-6.4 4.3-11.8 4.3-5.2 0-9.4-1.6-12.6-4.8-3.2-3.2-4.8-7.7-4.8-13.7 0-5.5 1.6-10.1 4.7-13.9 3.2-3.8 7.6-5.7 13.2-5.7 2.3 0 4.6.3 6.7.8 2.2.5 4.2 1.5 6.2 2.9l1.5 9.5-5.9.7-1.3-6.1c-2.1-1.2-4.5-1.8-7.2-1.8-3.5 0-6.1 1.2-7.7 3.7-1.7 2.5-2.5 5.7-2.5 9.6 0 4.1.9 7.3 2.7 9.5 1.8 2.3 4.4 3.4 7.8 3.4 5.2 0 8.2-2.9 9.2-8.8l6.2 1.3zm34.7 1.9c0 3.6-1.5 6.5-4.6 8.5s-7 3-11.7 3c-5.7 0-10.6-1.2-14.6-3.6l1.2-8.8 5.7.6-.2 4.7c1.1.5 2.3.9 3.6 1.1s2.6.3 3.9.3c2.4 0 4.5-.4 6.5-1.3 1.9-.9 2.9-2.2 2.9-4.1 0-1.8-.8-3.1-2.3-3.8s-3.5-1.3-5.8-1.7-4.6-.9-6.9-1.4c-2.3-.6-4.2-1.6-5.7-2.9-1.6-1.4-2.3-3.5-2.3-6.3 0-4.1 1.5-6.9 4.6-8.5s6.4-2.4 9.9-2.4c2.6 0 5 .3 7.2.9 2.2.6 4.3 1.4 6.1 2.4l.8 8.8-5.8.7-.8-5.7c-2.3-1-4.7-1.6-7.2-1.6-2.1 0-3.7.4-5.1 1.1-1.3.8-2 2-2 3.8 0 1.7.8 2.9 2.3 3.6 1.5.7 3.4 1.2 5.7 1.6 2.2.4 4.5.8 6.7 1.4 2.2.6 4.1 1.6 5.7 3 1.4 1.6 2.2 3.7 2.2 6.6zM197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" class="logo-text"></path></svg></a><button title="Open main menu" type="button" class="button action has-icon main-menu-toggle" aria-haspopup="menu" aria-label="Open main menu" aria-expanded="false"><span class="button-wrap"><span class="icon icon-menu "></span><span class="visually-hidden">Open main menu</span></span></button></div><div class="top-navigation-main"><nav class="main-nav" aria-label="Main menu"><ul class="main-menu nojs"><li class="top-level-entry-container active"><button type="button" id="references-button" class="top-level-entry menu-toggle" aria-controls="references-menu" aria-expanded="false">References</button><a href="/ja/docs/Web" class="top-level-entry">References</a><ul id="references-menu" class="submenu references hidden inline-submenu-lg" aria-labelledby="references-button"><li class="apis-link-container mobile-only "><a href="/ja/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li><li class="html-link-container "><a href="/ja/docs/Web/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Structure of content on the web</p></div></a></li><li class="css-link-container "><a href="/ja/docs/Web/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Code used to describe document style</p></div></a></li><li class="javascript-link-container "><a href="/ja/docs/Web/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">General-purpose scripting language</p></div></a></li><li class="http-link-container "><a href="/ja/docs/Web/HTTP" class="submenu-item "><div class="submenu-icon http"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP</div><p class="submenu-item-description">Protocol for transmitting web resources</p></div></a></li><li class="apis-link-container "><a href="/ja/docs/Web/API" class="submenu-item "><div class="submenu-icon apis"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web APIs</div><p class="submenu-item-description">Interfaces for building web applications</p></div></a></li><li class="apis-link-container "><a href="/ja/docs/Mozilla/Add-ons/WebExtensions" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Extensions</div><p class="submenu-item-description">Developing extensions for web browsers</p></div></a></li><li class=" "><a href="/ja/docs/Web/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Build web projects usable for all</p></div></a></li><li class="apis-link-container desktop-only "><a href="/ja/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="learn-button" class="top-level-entry menu-toggle" aria-controls="learn-menu" aria-expanded="false">Learn</button><a href="/ja/docs/Learn_web_development" class="top-level-entry">Learn</a><ul id="learn-menu" class="submenu learn hidden inline-submenu-lg" aria-labelledby="learn-button"><li class="apis-link-container mobile-only "><a href="/ja/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="apis-link-container desktop-only "><a href="/ja/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="html-link-container "><a href="/ja/docs/Learn_web_development/Core/Structuring_content" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="/ja/docs/Learn_web_development/Core/Styling_basics" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="/ja/docs/Learn_web_development/Core/Scripting" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">Learn to run scripts in the browser</p></div></a></li><li class=" "><a href="/ja/docs/Learn_web_development/Core/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Learn to make the web accessible to all</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="mdn-plus-button" class="top-level-entry menu-toggle" aria-controls="mdn-plus-menu" aria-expanded="false">Plus</button><a href="/ja/plus" class="top-level-entry">Plus</a><ul id="mdn-plus-menu" class="submenu mdn-plus hidden inline-submenu-lg" aria-labelledby="mdn-plus-button"><li class=" "><a href="/ja/plus" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview</div><p class="submenu-item-description">A customized MDN experience</p></div></a></li><li class=" "><a href="/ja/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li><li class=" "><a href="/ja/plus/updates" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Updates</div><p class="submenu-item-description">All browser compatibility updates at a glance</p></div></a></li><li class=" "><a href="/en-US/plus/docs/features/overview" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Documentation</div><p class="submenu-item-description">Learn how to use MDN Plus</p></div></a></li><li class=" "><a href="/en-US/plus/docs/faq" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">FAQ</div><p class="submenu-item-description">Frequently asked questions about MDN Plus</p></div></a></li></ul></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/curriculum/">Curriculum <sup class="new">New</sup></a></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/blog/">Blog</a></li><li class="top-level-entry-container "><button type="button" id="tools-button" class="top-level-entry menu-toggle" aria-controls="tools-menu" aria-expanded="false">Tools</button><ul id="tools-menu" class="submenu tools hidden inline-submenu-lg" aria-labelledby="tools-button"><li class=" "><a href="/ja/play" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Playground</div><p class="submenu-item-description">Write, test and share your code</p></div></a></li><li class=" "><a href="/en-US/observatory" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP Observatory</div><p class="submenu-item-description">Scan a website for free</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li></ul></li></ul></nav><div class="header-search"><form action="/ja/search" class="search-form search-widget" id="top-nav-search-form" role="search"><label id="top-nav-search-label" for="top-nav-search-input" class="visually-hidden">Search MDN</label><input aria-activedescendant="" aria-autocomplete="list" aria-controls="top-nav-search-menu" aria-expanded="false" aria-labelledby="top-nav-search-label" autoComplete="off" id="top-nav-search-input" role="combobox" type="search" class="search-input-field" name="q" placeholder=" " required="" value=""/><button type="button" class="button action has-icon clear-search-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear search input</span></span></button><button type="submit" class="button action has-icon search-button"><span class="button-wrap"><span class="icon icon-search "></span><span class="visually-hidden">Search</span></span></button><div id="top-nav-search-menu" role="listbox" aria-labelledby="top-nav-search-label"></div></form></div><div class="theme-switcher-menu"><button type="button" class="button action has-icon theme-switcher-menu small" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-theme-os-default "></span>Theme</span></button></div><ul class="auth-container"><li><a href="/users/fxa/login/authenticate/?next=%2Fja%2Fdocs%2FWeb%2FHTML%2FElement%2Finput%2Fimage" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fja%2Fdocs%2FWeb%2FHTML%2FElement%2Finput%2Fimage" target="_self" rel="nofollow" class="button primary mdn-plus-subscribe-link"><span class="button-wrap">Sign up for free</span></a></li></ul></div></div></header><div class="article-actions-container"><div class="container"><button type="button" class="button action has-icon sidebar-button" aria-label="Expand sidebar" aria-expanded="false" aria-controls="sidebar-quicklinks"><span class="button-wrap"><span class="icon icon-sidebar "></span></span></button><nav class="breadcrumbs-container" aria-label="Breadcrumb"><ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"><li property="itemListElement" typeof="ListItem"><a href="/ja/docs/Web" class="breadcrumb" property="item" typeof="WebPage"><span property="name">開発者向けのウェブ技術</span></a><meta property="position" content="1"/></li><li property="itemListElement" typeof="ListItem"><a href="/ja/docs/Web/HTML" class="breadcrumb" property="item" typeof="WebPage"><span property="name">HTML</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/ja/docs/Web/HTML/Element" class="breadcrumb" property="item" typeof="WebPage"><span property="name">HTML 要素リファレンス</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/ja/docs/Web/HTML/Element/input" class="breadcrumb" property="item" typeof="WebPage"><span property="name"><input></span></a><meta property="position" content="4"/></li><li property="itemListElement" typeof="ListItem"><a href="/ja/docs/Web/HTML/Element/input/image" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name"><input type="image"></span></a><meta property="position" content="5"/></li></ol></nav><div class="article-actions"><button type="button" class="button action has-icon article-actions-toggle" aria-label="Article actions"><span class="button-wrap"><span class="icon icon-ellipses "></span><span class="article-actions-dialog-heading">Article Actions</span></span></button><ul class="article-actions-entries"><li class="article-actions-entry"><div class="languages-switcher-menu open-on-focus-within"><button id="languages-switcher-button" type="button" class="button action small has-icon languages-switcher-menu" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-language "></span>日本語</span></button><div class="hidden"><ul class="submenu language-menu " aria-labelledby="language-menu-button"><li class=" "><form class="submenu-item locale-redirect-setting"><div class="group"><label class="switch"><input type="checkbox" name="locale-redirect"/><span class="slider"></span><span class="label">Remember language</span></label><a href="https://github.com/orgs/mdn/discussions/739" rel="external noopener noreferrer" target="_blank" title="Enable this setting to automatically switch to this language when it's available. (Click to learn more.)"><span class="icon icon-question-mark "></span></a></div></form></li><li class=" "><a data-locale="en-US" href="/en-US/docs/Web/HTML/Element/input/image" class="button submenu-item"><span>English (US)</span></a></li><li class=" "><a data-locale="de" href="/de/docs/Web/HTML/Element/input/image" class="button submenu-item"><span>Deutsch</span><span title="Diese Übersetzung ist Teil eines Experiments."><span class="icon icon-experimental "></span></span></a></li><li class=" "><a data-locale="fr" href="/fr/docs/Web/HTML/Element/input/image" class="button submenu-item"><span>Français</span></a></li><li class=" "><a data-locale="ru" href="/ru/docs/Web/HTML/Element/input/image" class="button submenu-item"><span>Русский</span></a></li><li class=" "><a data-locale="zh-CN" href="/zh-CN/docs/Web/HTML/Element/input/image" class="button submenu-item"><span>中文 (简体)</span></a></li></ul></div></div></li></ul></div></div></div></div><div class="container"><div class="notecard localized-content-note"><p><a href="/ja/docs/MDN/Community/Contributing/Translated_content#アクティブなロケール">このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。</a></p></div></div><div class="main-wrapper"><div class="sidebar-container"><aside id="sidebar-quicklinks" class="sidebar"><button type="button" class="button action backdrop" aria-label="Collapse sidebar"><span class="button-wrap"></span></button><nav aria-label="Related Topics" class="sidebar-inner"><header class="sidebar-actions"><section class="sidebar-filter-container"><div class="sidebar-filter "><label id="sidebar-filter-label" class="sidebar-filter-label" for="sidebar-filter-input"><span class="icon icon-filter"></span><span class="visually-hidden">Filter sidebar</span></label><input id="sidebar-filter-input" autoComplete="off" class="sidebar-filter-input-field false" type="text" placeholder="Filter" value=""/><button type="button" class="button action has-icon clear-sidebar-filter-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear filter input</span></span></button></div></section></header><div class="sidebar-inner-nav"><div class="in-nav-toc"><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">この記事では</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#試してみましょう">試してみましょう</a></li><li class="document-toc-item "><a class="document-toc-link" href="#値">値</a></li><li class="document-toc-item "><a class="document-toc-link" href="#追加の属性">追加の属性</a></li><li class="document-toc-item "><a class="document-toc-link" href="#廃止された属性">廃止された属性</a></li><li class="document-toc-item "><a class="document-toc-link" href="#image_入力の使用">image 入力の使用</a></li><li class="document-toc-item "><a class="document-toc-link" href="#例">例</a></li><li class="document-toc-item "><a class="document-toc-link" href="#技術的概要">技術的概要</a></li><li class="document-toc-item "><a class="document-toc-link" href="#仕様書">仕様書</a></li><li class="document-toc-item "><a class="document-toc-link" href="#ブラウザーの互換性">ブラウザーの互換性</a></li><li class="document-toc-item "><a class="document-toc-link" href="#関連情報">関連情報</a></li></ul></section></div></div><div class="sidebar-body"><ol><li class="section"><a href="/ja/docs/Web/HTML">HTML</a></li><li class="toggle"><details><summary>チュートリアル</summary><ol><li><a href="/ja/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content">初めてのウェブサイト: コンテンツの作成</a></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Core/Structuring_content">HTML によるコンテンツの構造化</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax">基本的な HTML の構文</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata">ヘッド部には何が入る? ウェブページのメタデータ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs">HTML の見出しと段落</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance">強調と重要性</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Lists">リスト</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Structuring_documents">文書とウェブサイトの構造</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features">高度なテキスト装飾</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Creating_links">リンクの作成</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter">課題: 手紙のマークアップ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content">課題: コンテンツのページの構造化</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/HTML_images">HTML の画像</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio">動画と音声のコンテンツ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page">Mozilla のスプラッシュページ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics">HTML の表の基本</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Table_accessibility">HTML 表のアクセシビリティ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Planet_data_table">課題: 惑星データの構造化</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/HTML_forms">HTML におけるフォームとボタン</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML">HTML のデバッグ</a></li></ol></details></li></ol></details></li><li class="toggle"><details><summary>ガイド</summary><ol><li><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリー</a></li><li><a href="/ja/docs/Glossary/Block-level_content">ブロックレベル要素</a></li><li><a href="/ja/docs/Glossary/Inline-level_content">インライン要素</a></li><li><a href="/ja/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">互換モードと標準モード</a></li><li><a href="/ja/docs/Web/HTML/Date_and_time_formats">HTML で使用される日付と時刻の形式</a></li><li><a href="/ja/docs/Web/HTML/Constraint_validation">制約検証</a></li><li><a href="/ja/docs/Web/HTML/Microdata">Microdata</a></li><li><a href="/ja/docs/Web/HTML/microformats">Microformats</a></li><li><a href="/ja/docs/Web/HTML/Viewport_meta_tag">ビューポートメタタグ</a></li><li><a href="/ja/docs/Web/HTML/CORS_enabled_image">別オリジンの画像とキャンバスを利用可能にする</a></li></ol></details></li><li class="section"><a href="/ja/docs/Web/HTML/Reference">リファレンス</a></li><li class="toggle"><details><summary>HTML 要素</summary><ol><li><a href="/ja/docs/Web/HTML/Element/a"><code><a></code></a></li><li><a href="/ja/docs/Web/HTML/Element/abbr"><code><abbr></code></a></li><li><a href="/ja/docs/Web/HTML/Element/acronym"><code><acronym></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨;</span> </abbr></li><li><a href="/ja/docs/Web/HTML/Element/address"><code><address></code></a></li><li><a href="/ja/docs/Web/HTML/Element/area"><code><area></code></a></li><li><a href="/ja/docs/Web/HTML/Element/article"><code><article></code></a></li><li><a href="/ja/docs/Web/HTML/Element/aside"><code><aside></code></a></li><li><a href="/ja/docs/Web/HTML/Element/audio"><code><audio></code></a></li><li><a href="/ja/docs/Web/HTML/Element/b"><code><b></code></a></li><li><a href="/ja/docs/Web/HTML/Element/base"><code><base></code></a></li><li><a href="/ja/docs/Web/HTML/Element/bdi"><code><bdi></code></a></li><li><a href="/ja/docs/Web/HTML/Element/bdo"><code><bdo></code></a></li><li><a href="/ja/docs/Web/HTML/Element/big"><code><big></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨;</span> </abbr></li><li><a href="/ja/docs/Web/HTML/Element/blockquote"><code><blockquote></code></a></li><li><a href="/ja/docs/Web/HTML/Element/body"><code><body></code></a></li><li><a href="/ja/docs/Web/HTML/Element/br"><code><br></code></a></li><li><a href="/ja/docs/Web/HTML/Element/button"><code><button></code></a></li><li><a href="/ja/docs/Web/HTML/Element/canvas"><code><canvas></code></a></li><li><a href="/ja/docs/Web/HTML/Element/caption"><code><caption></code></a></li><li><a href="/ja/docs/Web/HTML/Element/center"><code><center></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨;</span> </abbr></li><li><a href="/ja/docs/Web/HTML/Element/cite"><code><cite></code></a></li><li><a href="/ja/docs/Web/HTML/Element/code"><code><code></code></a></li><li><a href="/ja/docs/Web/HTML/Element/col"><code><col></code></a></li><li><a href="/ja/docs/Web/HTML/Element/colgroup"><code><colgroup></code></a></li><li><a href="/ja/docs/Web/HTML/Element/data"><code><data></code></a></li><li><a href="/ja/docs/Web/HTML/Element/datalist"><code><datalist></code></a></li><li><a href="/ja/docs/Web/HTML/Element/dd"><code><dd></code></a></li><li><a href="/ja/docs/Web/HTML/Element/del"><code><del></code></a></li><li><a href="/ja/docs/Web/HTML/Element/details"><code><details></code></a></li><li><a href="/ja/docs/Web/HTML/Element/dfn"><code><dfn></code></a></li><li><a href="/ja/docs/Web/HTML/Element/dialog"><code><dialog></code></a></li><li><a href="/ja/docs/Web/HTML/Element/dir"><code><dir></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨;</span> </abbr></li><li><a href="/ja/docs/Web/HTML/Element/div"><code><div></code></a></li><li><a href="/ja/docs/Web/HTML/Element/dl"><code><dl></code></a></li><li><a href="/ja/docs/Web/HTML/Element/dt"><code><dt></code></a></li><li><a href="/ja/docs/Web/HTML/Element/em"><code><em></code></a></li><li><a href="/ja/docs/Web/HTML/Element/embed"><code><embed></code></a></li><li><a href="/en-US/docs/Web/HTML/Element/fencedframe" class="only-in-en-us"><code><fencedframe></code></a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/ja/docs/Web/HTML/Element/fieldset"><code><fieldset></code></a></li><li><a href="/ja/docs/Web/HTML/Element/figcaption"><code><figcaption></code></a></li><li><a href="/ja/docs/Web/HTML/Element/figure"><code><figure></code></a></li><li><a href="/ja/docs/Web/HTML/Element/font"><code><font></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨;</span> </abbr></li><li><a href="/ja/docs/Web/HTML/Element/footer"><code><footer></code></a></li><li><a href="/ja/docs/Web/HTML/Element/form"><code><form></code></a></li><li><a href="/ja/docs/Web/HTML/Element/frame"><code><frame></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨;</span> </abbr></li><li><a href="/ja/docs/Web/HTML/Element/frameset"><code><frameset></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨;</span> </abbr></li><li><a href="/ja/docs/Web/HTML/Element/Heading_Elements"><code><h1></code></a></li><li><a href="/ja/docs/Web/HTML/Element/head"><code><head></code></a></li><li><a href="/ja/docs/Web/HTML/Element/header"><code><header></code></a></li><li><a href="/ja/docs/Web/HTML/Element/hgroup"><code><hgroup></code></a></li><li><a href="/ja/docs/Web/HTML/Element/hr"><code><hr></code></a></li><li><a href="/ja/docs/Web/HTML/Element/html"><code><html></code></a></li><li><a href="/ja/docs/Web/HTML/Element/i"><code><i></code></a></li><li><a href="/ja/docs/Web/HTML/Element/iframe"><code><iframe></code></a></li><li><a href="/ja/docs/Web/HTML/Element/img"><code><img></code></a></li><li><a href="/ja/docs/Web/HTML/Element/input"><code><input></code></a></li><li><a href="/ja/docs/Web/HTML/Element/ins"><code><ins></code></a></li><li><a href="/ja/docs/Web/HTML/Element/kbd"><code><kbd></code></a></li><li><a href="/ja/docs/Web/HTML/Element/label"><code><label></code></a></li><li><a href="/ja/docs/Web/HTML/Element/legend"><code><legend></code></a></li><li><a href="/ja/docs/Web/HTML/Element/li"><code><li></code></a></li><li><a href="/ja/docs/Web/HTML/Element/link"><code><link></code></a></li><li><a href="/ja/docs/Web/HTML/Element/main"><code><main></code></a></li><li><a href="/ja/docs/Web/HTML/Element/map"><code><map></code></a></li><li><a href="/ja/docs/Web/HTML/Element/mark"><code><mark></code></a></li><li><a href="/ja/docs/Web/HTML/Element/marquee"><code><marquee></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨;</span> </abbr></li><li><a href="/ja/docs/Web/HTML/Element/menu"><code><menu></code></a></li><li><a href="/ja/docs/Web/HTML/Element/meta"><code><meta></code></a></li><li><a href="/ja/docs/Web/HTML/Element/meter"><code><meter></code></a></li><li><a href="/ja/docs/Web/HTML/Element/nav"><code><nav></code></a></li><li><a href="/ja/docs/Web/HTML/Element/nobr"><code><nobr></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨;</span> </abbr></li><li><a href="/ja/docs/Web/HTML/Element/noembed"><code><noembed></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨;</span> </abbr></li><li><a href="/ja/docs/Web/HTML/Element/noframes"><code><noframes></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨;</span> </abbr></li><li><a href="/ja/docs/Web/HTML/Element/noscript"><code><noscript></code></a></li><li><a href="/ja/docs/Web/HTML/Element/object"><code><object></code></a></li><li><a href="/ja/docs/Web/HTML/Element/ol"><code><ol></code></a></li><li><a href="/ja/docs/Web/HTML/Element/optgroup"><code><optgroup></code></a></li><li><a href="/ja/docs/Web/HTML/Element/option"><code><option></code></a></li><li><a href="/ja/docs/Web/HTML/Element/output"><code><output></code></a></li><li><a href="/ja/docs/Web/HTML/Element/p"><code><p></code></a></li><li><a href="/ja/docs/Web/HTML/Element/param"><code><param></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨;</span> </abbr></li><li><a href="/ja/docs/Web/HTML/Element/picture"><code><picture></code></a></li><li><a href="/ja/docs/Web/HTML/Element/plaintext"><code><plaintext></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨;</span> </abbr></li><li><a href="/ja/docs/Web/HTML/Element/pre"><code><pre></code></a></li><li><a href="/ja/docs/Web/HTML/Element/progress"><code><progress></code></a></li><li><a href="/ja/docs/Web/HTML/Element/q"><code><q></code></a></li><li><a href="/ja/docs/Web/HTML/Element/rb"><code><rb></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨;</span> </abbr></li><li><a href="/ja/docs/Web/HTML/Element/rp"><code><rp></code></a></li><li><a href="/ja/docs/Web/HTML/Element/rt"><code><rt></code></a></li><li><a href="/ja/docs/Web/HTML/Element/rtc"><code><rtc></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨;</span> </abbr></li><li><a href="/ja/docs/Web/HTML/Element/ruby"><code><ruby></code></a></li><li><a href="/ja/docs/Web/HTML/Element/s"><code><s></code></a></li><li><a href="/ja/docs/Web/HTML/Element/samp"><code><samp></code></a></li><li><a href="/ja/docs/Web/HTML/Element/script"><code><script></code></a></li><li><a href="/ja/docs/Web/HTML/Element/search"><code><search></code></a></li><li><a href="/ja/docs/Web/HTML/Element/section"><code><section></code></a></li><li><a href="/ja/docs/Web/HTML/Element/select"><code><select></code></a></li><li><a href="/ja/docs/Web/HTML/Element/slot"><code><slot></code></a></li><li><a href="/ja/docs/Web/HTML/Element/small"><code><small></code></a></li><li><a href="/ja/docs/Web/HTML/Element/source"><code><source></code></a></li><li><a href="/ja/docs/Web/HTML/Element/span"><code><span></code></a></li><li><a href="/ja/docs/Web/HTML/Element/strike"><code><strike></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨;</span> </abbr></li><li><a href="/ja/docs/Web/HTML/Element/strong"><code><strong></code></a></li><li><a href="/ja/docs/Web/HTML/Element/style"><code><style></code></a></li><li><a href="/ja/docs/Web/HTML/Element/sub"><code><sub></code></a></li><li><a href="/ja/docs/Web/HTML/Element/summary"><code><summary></code></a></li><li><a href="/ja/docs/Web/HTML/Element/sup"><code><sup></code></a></li><li><a href="/ja/docs/Web/HTML/Element/table"><code><table></code></a></li><li><a href="/ja/docs/Web/HTML/Element/tbody"><code><tbody></code></a></li><li><a href="/ja/docs/Web/HTML/Element/td"><code><td></code></a></li><li><a href="/ja/docs/Web/HTML/Element/template"><code><template></code></a></li><li><a href="/ja/docs/Web/HTML/Element/textarea"><code><textarea></code></a></li><li><a href="/ja/docs/Web/HTML/Element/tfoot"><code><tfoot></code></a></li><li><a href="/ja/docs/Web/HTML/Element/th"><code><th></code></a></li><li><a href="/ja/docs/Web/HTML/Element/thead"><code><thead></code></a></li><li><a href="/ja/docs/Web/HTML/Element/time"><code><time></code></a></li><li><a href="/ja/docs/Web/HTML/Element/title"><code><title></code></a></li><li><a href="/ja/docs/Web/HTML/Element/tr"><code><tr></code></a></li><li><a href="/ja/docs/Web/HTML/Element/track"><code><track></code></a></li><li><a href="/ja/docs/Web/HTML/Element/tt"><code><tt></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨;</span> </abbr></li><li><a href="/ja/docs/Web/HTML/Element/u"><code><u></code></a></li><li><a href="/ja/docs/Web/HTML/Element/ul"><code><ul></code></a></li><li><a href="/ja/docs/Web/HTML/Element/var"><code><var></code></a></li><li><a href="/ja/docs/Web/HTML/Element/video"><code><video></code></a></li><li><a href="/ja/docs/Web/HTML/Element/wbr"><code><wbr></code></a></li><li><a href="/ja/docs/Web/HTML/Element/xmp"><code><xmp></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨;</span> </abbr></li></ol></details></li><li class="toggle"><details><summary>グローバル属性</summary><ol><li><a href="/ja/docs/Web/HTML/Global_attributes/accesskey"><code>accesskey</code></a></li><li><a href="/ja/docs/Web/HTML/Global_attributes/anchor"><code>anchor</code></a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">非標準</span> </abbr></li><li><a href="/ja/docs/Web/HTML/Global_attributes/autocapitalize"><code>autocapitalize</code></a></li><li><a href="/ja/docs/Web/HTML/Global_attributes/autocorrect"><code>autocorrect</code></a></li><li><a href="/ja/docs/Web/HTML/Global_attributes/autofocus"><code>autofocus</code></a></li><li><a href="/ja/docs/Web/HTML/Global_attributes/class"><code>class</code></a></li><li><a href="/ja/docs/Web/HTML/Global_attributes/contenteditable"><code>contenteditable</code></a></li><li><a href="/ja/docs/Web/HTML/Global_attributes/data-*"><code>data-*</code></a></li><li><a href="/ja/docs/Web/HTML/Global_attributes/dir"><code>dir</code></a></li><li><a href="/ja/docs/Web/HTML/Global_attributes/draggable"><code>draggable</code></a></li><li><a href="/ja/docs/Web/HTML/Global_attributes/enterkeyhint"><code>enterkeyhint</code></a></li><li><a href="/ja/docs/Web/HTML/Global_attributes/exportparts"><code>exportparts</code></a></li><li><a href="/ja/docs/Web/HTML/Global_attributes/hidden"><code>hidden</code></a></li><li><a href="/ja/docs/Web/HTML/Global_attributes/id"><code>id</code></a></li><li><a href="/ja/docs/Web/HTML/Global_attributes/inert"><code>inert</code></a></li><li><a href="/ja/docs/Web/HTML/Global_attributes/inputmode"><code>inputmode</code></a></li><li><a href="/ja/docs/Web/HTML/Global_attributes/is"><code>is</code></a></li><li><a href="/ja/docs/Web/HTML/Global_attributes/itemid"><code>itemid</code></a></li><li><a href="/ja/docs/Web/HTML/Global_attributes/itemprop"><code>itemprop</code></a></li><li><a href="/ja/docs/Web/HTML/Global_attributes/itemref"><code>itemref</code></a></li><li><a href="/ja/docs/Web/HTML/Global_attributes/itemscope"><code>itemscope</code></a></li><li><a href="/ja/docs/Web/HTML/Global_attributes/itemtype"><code>itemtype</code></a></li><li><a href="/ja/docs/Web/HTML/Global_attributes/lang"><code>lang</code></a></li><li><a href="/ja/docs/Web/HTML/Global_attributes/nonce"><code>nonce</code></a></li><li><a href="/ja/docs/Web/HTML/Global_attributes/part"><code>part</code></a></li><li><a href="/ja/docs/Web/HTML/Global_attributes/popover"><code>popover</code></a></li><li><a href="/ja/docs/Web/HTML/Global_attributes/slot"><code>slot</code></a></li><li><a href="/ja/docs/Web/HTML/Global_attributes/spellcheck"><code>spellcheck</code></a></li><li><a href="/ja/docs/Web/HTML/Global_attributes/style"><code>style</code></a></li><li><a href="/ja/docs/Web/HTML/Global_attributes/tabindex"><code>tabindex</code></a></li><li><a href="/ja/docs/Web/HTML/Global_attributes/title"><code>title</code></a></li><li><a href="/ja/docs/Web/HTML/Global_attributes/translate"><code>translate</code></a></li><li><a href="/ja/docs/Web/HTML/Global_attributes/virtualkeyboardpolicy"><code>virtualkeyboardpolicy</code></a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/ja/docs/Web/HTML/Global_attributes/writingsuggestions"><code>writingsuggestions</code></a></li></ol></details></li><li class="toggle"><details><summary>属性</summary><ol><li><a href="/ja/docs/Web/HTML/Attributes/accept">HTML 属性: accept</a></li><li><a href="/ja/docs/Web/HTML/Attributes/autocomplete">autocomplete</a></li><li><a href="/ja/docs/Web/HTML/Attributes/capture">HTML 属性: capture</a></li><li><a href="/ja/docs/Web/HTML/Attributes/crossorigin">HTML 属性: crossorigin</a></li><li><a href="/ja/docs/Web/HTML/Attributes/dirname">HTML 属性: dirname</a></li><li><a href="/ja/docs/Web/HTML/Attributes/disabled">HTML 属性: disabled</a></li><li><a href="/ja/docs/Web/HTML/Attributes/elementtiming">HTML 属性: elementtiming</a></li><li><a href="/ja/docs/Web/HTML/Attributes/for">HTML 属性: for</a></li><li><a href="/ja/docs/Web/HTML/Attributes/max">max</a></li><li><a href="/ja/docs/Web/HTML/Attributes/maxlength">maxlength</a></li><li><a href="/ja/docs/Web/HTML/Attributes/min">min</a></li><li><a href="/ja/docs/Web/HTML/Attributes/minlength">minlength</a></li><li><a href="/ja/docs/Web/HTML/Attributes/multiple">multiple</a></li><li><a href="/ja/docs/Web/HTML/Attributes/pattern">pattern</a></li><li><a href="/ja/docs/Web/HTML/Attributes/placeholder">HTML 属性: placeholder</a></li><li><a href="/ja/docs/Web/HTML/Attributes/readonly">HTML 属性: readonly</a></li><li><a href="/ja/docs/Web/HTML/Attributes/rel">rel</a></li><li><a href="/ja/docs/Web/HTML/Attributes/required">required</a></li><li><a href="/ja/docs/Web/HTML/Attributes/size">HTML 属性: size</a></li><li><a href="/ja/docs/Web/HTML/Attributes/step">step</a></li></ol></details></li><li class="toggle"><details open=""><summary><code><input></code> 型</summary><ol><li><a href="/ja/docs/Web/HTML/Element/input/button"><code><input type="button"></code></a></li><li><a href="/ja/docs/Web/HTML/Element/input/checkbox"><code><input type="checkbox"></code></a></li><li><a href="/ja/docs/Web/HTML/Element/input/color"><code><input type="color"></code></a></li><li><a href="/ja/docs/Web/HTML/Element/input/date"><code><input type="date"></code></a></li><li><a href="/ja/docs/Web/HTML/Element/input/datetime-local"><code><input type="datetime-local"></code></a></li><li><a href="/ja/docs/Web/HTML/Element/input/email"><code><input type="email"></code></a></li><li><a href="/ja/docs/Web/HTML/Element/input/file"><code><input type="file"></code></a></li><li><a href="/ja/docs/Web/HTML/Element/input/hidden"><code><input type="hidden"></code></a></li><li><em><a href="/ja/docs/Web/HTML/Element/input/image" aria-current="page"><code><input type="image"></code></a></em></li><li><a href="/ja/docs/Web/HTML/Element/input/month"><code><input type="month"></code></a></li><li><a href="/ja/docs/Web/HTML/Element/input/number"><code><input type="number"></code></a></li><li><a href="/ja/docs/Web/HTML/Element/input/password"><code><input type="password"></code></a></li><li><a href="/ja/docs/Web/HTML/Element/input/radio"><code><input type="radio"></code></a></li><li><a href="/ja/docs/Web/HTML/Element/input/range"><code><input type="range"></code></a></li><li><a href="/ja/docs/Web/HTML/Element/input/reset"><code><input type="reset"></code></a></li><li><a href="/ja/docs/Web/HTML/Element/input/search"><code><input type="search"></code></a></li><li><a href="/ja/docs/Web/HTML/Element/input/submit"><code><input type="submit"></code></a></li><li><a href="/ja/docs/Web/HTML/Element/input/tel"><code><input type="tel"></code></a></li><li><a href="/ja/docs/Web/HTML/Element/input/text"><code><input type="text"></code></a></li><li><a href="/ja/docs/Web/HTML/Element/input/time"><code><input type="time"></code></a></li><li><a href="/ja/docs/Web/HTML/Element/input/url"><code><input type="url"></code></a></li><li><a href="/ja/docs/Web/HTML/Element/input/week"><code><input type="week"></code></a></li></ol></details></li></ol></div></div><section class="place side"></section></nav></aside><div class="toc-container"><aside class="toc"><nav><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">この記事では</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#試してみましょう">試してみましょう</a></li><li class="document-toc-item "><a class="document-toc-link" href="#値">値</a></li><li class="document-toc-item "><a class="document-toc-link" href="#追加の属性">追加の属性</a></li><li class="document-toc-item "><a class="document-toc-link" href="#廃止された属性">廃止された属性</a></li><li class="document-toc-item "><a class="document-toc-link" href="#image_入力の使用">image 入力の使用</a></li><li class="document-toc-item "><a class="document-toc-link" href="#例">例</a></li><li class="document-toc-item "><a class="document-toc-link" href="#技術的概要">技術的概要</a></li><li class="document-toc-item "><a class="document-toc-link" href="#仕様書">仕様書</a></li><li class="document-toc-item "><a class="document-toc-link" href="#ブラウザーの互換性">ブラウザーの互換性</a></li><li class="document-toc-item "><a class="document-toc-link" href="#関連情報">関連情報</a></li></ul></section></div></nav></aside><section class="place side"></section></div></div><main id="content" class="main-content "><article class="main-page-content" lang="ja"><header><h1><input type="image"></h1><details class="baseline-indicator high"><summary><span class="indicator" role="img" aria-label="Baseline Check"></span><div class="status-title">Baseline <span class="not-bold">Widely available</span></div><div class="browsers"><span class="engine" title="Supported in Chrome and Edge"><span class="browser chrome supported" role="img" aria-label="Chrome check"></span><span class="browser edge supported" role="img" aria-label="Edge check"></span></span><span class="engine" title="Supported in Firefox"><span class="browser firefox supported" role="img" aria-label="Firefox check"></span></span><span class="engine" title="Supported in Safari"><span class="browser safari supported" role="img" aria-label="Safari check"></span></span></div><span class="icon icon-chevron "></span></summary><div class="extra"><p>This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.</p><ul><li><a href="/ja/docs/Glossary/Baseline/Compatibility" data-glean="baseline_link_learn_more" target="_blank" class="learn-more">Learn more</a></li><li><a href="#ブラウザーの互換性" data-glean="baseline_link_bcd_table">See full compatibility</a></li><li><a href="https://survey.alchemer.com/s3/7634825/MDN-baseline-feedback?page=%2Fja%2Fdocs%2FWeb%2FHTML%2FElement%2Finput%2Fimage&level=high" data-glean="baseline_link_feedback" class="feedback-link" target="_blank" rel="noreferrer">Report feedback</a></li></ul></div></details></header><div class="section-content"><p><a href="/ja/docs/Web/HTML/Element/input"><code><input></code></a> 要素の <strong><code>image</code></strong> 型は、テキストではなく画像の形をとる送信ボタン、すなわちテキストではなく画像の形をとる送信ボタンを作成するために使用されます。</p></div><section aria-labelledby="試してみましょう"><h2 id="試してみましょう"><a href="#試してみましょう">試してみましょう</a></h2><div class="section-content"><iframe class="interactive is-tabbed-standard-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/input-image.html" title="MDN Web Docs Interactive Example" allow="clipboard-write" loading="lazy"></iframe></div></section><section aria-labelledby="値"><h2 id="値"><a href="#値">値</a></h2><div class="section-content"><p><code><input type="image"></code> 要素は <code>value</code> 属性を受け付けません。表示する画像へのパスを <code>src</code> 属性で指定します。</p></div></section><section aria-labelledby="追加の属性"><h2 id="追加の属性"><a href="#追加の属性">追加の属性</a></h2><div class="section-content"><p>すべての <a href="/ja/docs/Web/HTML/Element/input"><code><input></code></a> 型で共通する属性に加え、 <code>image</code> 型の入力欄は次の属性にも対応しています。</p></div></section><section aria-labelledby="alt"><h3 id="alt"><a href="#alt">alt</a></h3><div class="section-content"><p><code>alt</code> 属性は、画像が表示できない場合のボタンのラベルとして使用される代替文字列を提供します（エラーの場合、<a href="/ja/docs/Glossary/User_agent">ユーザーエージェント</a>が画像を表示できない場合、画像を表示しないように設定されていた場合、ユーザーが読み上げ端末を使用している場合など）。提供する場合は、ボタンのラベルとして適切な空ではない文字列である必要があります。</p> <p>例えば、「今すぐログイン」をアイコンやテキストが入った画像を表示するグラフィックボタンの場合、 <code>alt</code> 属性も <code>今すぐログイン</code> のように設定してください。</p> <div class="notecard note"> <p><strong>メモ:</strong> <code>alt</code> 属性は技術的には省略可能ですが、コンテンツの利用性を最大化するために常に設定してください。</p> </div> <p><code><input type="image"></code> 要素の <code>alt</code> 属性は、機能的には <a href="/ja/docs/Web/HTML/Element/img"><code><img></code></a> 要素における <a href="/ja/docs/Web/HTML/Element/img#alt"><code>alt</code></a> 属性と同様に動作します。</p></div></section><section aria-labelledby="formaction"><h3 id="formaction"><a href="#formaction">formaction</a></h3><div class="section-content"><p>文字列で、データの送信先の URL を示します。これはこの <a href="/ja/docs/Web/HTML/Element/input"><code><input></code></a> が属する <a href="/ja/docs/Web/HTML/Element/form"><code><form></code></a> 要素の <a href="/ja/docs/Web/HTML/Element/form#action"><code>action</code></a> 属性より優先します。</p> <p>この属性は <a href="/ja/docs/Web/HTML/Element/input/submit"><code><input type="submit"></code></a> および <a href="/ja/docs/Web/HTML/Element/button"><code><button></code></a> 要素でも使用できます。</p></div></section><section aria-labelledby="formenctype"><h3 id="formenctype"><a href="#formenctype">formenctype</a></h3><div class="section-content"><p>文字列で、フォームのデータをサーバーに送信する際に使われるエンコーディング方法を識別します。許されている値は 3 つです。</p> <dl> <dt id="applicationx-www-form-urlencoded"><a href="#applicationx-www-form-urlencoded"><code>application/x-www-form-urlencoded</code></a></dt> <dd> <p>これは既定値で、フォームのデータを <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/encodeURI"><code>encodeURI()</code></a> などのアルゴリズムを使って <a href="https://ja.wikipedia.org/wiki/パーセントエンコーディング" class="external" target="_blank">URL エンコーディング</a>した後で送信します。</p> </dd> <dt id="multipartform-data"><a href="#multipartform-data"><code>multipart/form-data</code></a></dt> <dd> <p>データを管理するために <a href="/ja/docs/Web/API/FormData"><code>FormData</code></a> API を使用し、複数のファイルをサーバーに送信することができます。フォームに <a href="/ja/docs/Web/HTML/Element/input"><code><input></code></a> 要素の <a href="/ja/docs/Web/HTML/Element/input#type"><code>type</code></a> が <code>file</code> のもの (<a href="/ja/docs/Web/HTML/Element/input/file"><code><input type="file"></code></a>) が含まれている場合は、このエンコーディング型を<em>使わなければなりません</em>。</p> </dd> <dt id="textplain"><a href="#textplain"><code>text/plain</code></a></dt> <dd> <p>プレーンテキストです。ほとんどデバッグでしか役に立ちませんが、送信されたデータを簡単に見ることができます。</p> </dd> </dl> <p><code>formenctype</code> 属性が指定された場合、所属するフォームの <a href="/ja/docs/Web/HTML/Element/form#action"><code>action</code></a> 属性を上書きします。</p> <p>この属性は <a href="/ja/docs/Web/HTML/Element/input/submit"><code><input type="submit"></code></a> および <a href="/ja/docs/Web/HTML/Element/button"><code><button></code></a> 要素でも使用できます。</p></div></section><section aria-labelledby="formmethod"><h3 id="formmethod"><a href="#formmethod">formmethod</a></h3><div class="section-content"><p>文字列で、フォームのデータを送信するときに使用する HTTP メソッドを示します。この値は所有者であるフォームの <a href="/ja/docs/Web/HTML/Element/form#method"><code>method</code></a> を上書きします。許されている値は次の通りです。</p> <dl> <dt id="get"><a href="#get"><code>get</code></a></dt> <dd> <p>URL は <code>formaction</code> または <a href="/ja/docs/Web/HTML/Element/form#action"><code>action</code></a> 属性で与えられた URL で始まり、クエスチョンマーク ("?") 文字を付加し、次に <code>formenctype</code> またはフォームの <a href="/ja/docs/Web/HTML/Element/form#enctype"><code>enctype</code></a> 属性の記述に従ってコード化したフォームデータを付加して作成されます。この URL は、 HTTP の <a href="/ja/docs/Web/HTTP/Methods/GET"><code>get</code></a> リクエストでサーバーに送信されます。この方法は、ASCII 文字のみを含み、副作用のない単純なフォームに対してよく機能します。これは既定値です。</p> </dd> <dt id="post"><a href="#post"><code>post</code></a></dt> <dd> <p>フォームのデータは <code>formaction</code> または <a href="/ja/docs/Web/HTML/Element/form#action"><code>action</code></a> 属性で指定された URL に HTTP の <a href="/ja/docs/Web/HTTP/Methods/POST"><code>post</code></a> リクエストで送信される本文に含まれます。このメソッドは、複雑なデータやファイルの添付に対応しています。</p> </dd> <dt id="dialog"><a href="#dialog"><code>dialog</code></a></dt> <dd> <p>このメソッドは、ボタンが入力に関連するダイアログを閉じ、フォームデータを全く送信しないことを示すために使用される。</p> </dd> </dl> <p>この属性は <a href="/ja/docs/Web/HTML/Element/input/submit"><code><input type="submit"></code></a> および <a href="/ja/docs/Web/HTML/Element/button"><code><button></code></a> 要素でも使用できます。</p></div></section><section aria-labelledby="formnovalidate"><h3 id="formnovalidate"><a href="#formnovalidate">formnovalidate</a></h3><div class="section-content"><p>論理属性で、これがある場合は、サーバーに送信する前にフォームの検証を行わないことを指定します。これは、その要素の所有するフォームの <a href="/ja/docs/Web/HTML/Element/form#novalidate"><code>novalidate</code></a> 属性の値より優先されます。</p> <p>この属性は <a href="/ja/docs/Web/HTML/Element/input/submit"><code><input type="submit"></code></a> および <a href="/ja/docs/Web/HTML/Element/button"><code><button></code></a> 要素でも使用できます。</p></div></section><section aria-labelledby="formtarget"><h3 id="formtarget"><a href="#formtarget">formtarget</a></h3><div class="section-content"><p>文字列で、フォームを送信した後に受け取ったレスポンスを表示する場所を示す、名前またはキーワードを指定します。この文字列は、<strong>閲覧コンテキスト</strong>（つまり、タブ、ウィンドウ、または <a href="/ja/docs/Web/HTML/Element/iframe"><code><iframe></code></a>）の名前である必要があります。ここで指定された値は、この入力を所有する <a href="/ja/docs/Web/HTML/Element/form"><code><form></code></a> の <a href="/ja/docs/Web/HTML/Element/form#target"><code>target</code></a> 属性で指定されたターゲットよりも優先されます。</p> <p>タブ、ウィンドウ、インライン枠などの実際の名前のほかに、いくつかの特別なキーワードを使用することができます。</p> <dl> <dt id="_self"><a href="#_self"><code>_self</code></a></dt> <dd> <p>レスポンスを、フォームを含むものと同じ閲覧コンテキストに読み込みます。これにより、現在の文書が受信したデータで置き換えられます。これは、何も指定されていない場合に使用される既定値です。</p> </dd> <dt id="_blank"><a href="#_blank"><code>_blank</code></a></dt> <dd> <p>レスポンスを新しい、名前のない閲覧コンテキストに読み込みます。これは通常、現在の文書と同じウィンドウの新しいタブですが、<a href="/ja/docs/Glossary/User_agent">ユーザーエージェント</a>の設定によって異なる場合があります。</p> </dd> <dt id="_parent"><a href="#_parent"><code>_parent</code></a></dt> <dd> <p>現在の閲覧コンテキストの親コンテキストにレスポンスを読み込みます。親コンテキストがない場合は、 <code>_self</code> と同じ動作をします。</p> </dd> <dt id="_top"><a href="#_top"><code>_top</code></a></dt> <dd> <p>これは現在のコンテキストの最上位の祖先である閲覧コンテキストです。現在のコンテキストが最上位のコンテキストである場合、これは <code>_self</code> と同じように動作します。</p> </dd> </dl> <p>この属性は <a href="/ja/docs/Web/HTML/Element/input/submit"><code><input type="submit"></code></a> および <a href="/ja/docs/Web/HTML/Element/button"><code><button></code></a> 要素でも使用できます。</p></div></section><section aria-labelledby="height"><h3 id="height"><a href="#height">height</a></h3><div class="section-content"><p><code>src</code> 属性で指定された画像を描画する高さを CSS ピクセルで指定した数値です。</p></div></section><section aria-labelledby="src"><h3 id="src"><a href="#src">src</a></h3><div class="section-content"><p>文字列で、グラフィカルな送信ボタンを表現するために表示する画像ファイルの URL を指定します。ユーザーが画像と対話するとき、その入力は他のボタン入力と同様に処理されます。</p></div></section><section aria-labelledby="width"><h3 id="width"><a href="#width">width</a></h3><div class="section-content"><p>画像を描画する幅を CSS ピクセルで表した数値です。</p></div></section><section aria-labelledby="廃止された属性"><h2 id="廃止された属性"><a href="#廃止された属性">廃止された属性</a></h2><div class="section-content"><p>以下の属性は、 HTML 4 で <code>image</code> 入力用に定義されたものですが、すべてのブラウザーで実装されていたわけではなく、その後、非推奨となりました。</p></div></section><section aria-labelledby="usemap"><h3 id="usemap"><a href="#usemap">usemap</a></h3><div class="section-content"><p><code>usemap</code> が指定された場合、画像と共に使用するイメージマップを定義します。イメージマップ要素 <a href="/ja/docs/Web/HTML/Element/map"><code><map></code></a> の名前でなければなりません。この使い方は時代遅れです。イメージマップを使いたい場合は、 <a href="/ja/docs/Web/HTML/Element/img"><code><img></code></a> 要素を使うように切り替えてください。</p></div></section><section aria-labelledby="image_入力の使用"><h2 id="image_入力の使用"><a href="#image_入力の使用">image 入力の使用</a></h2><div class="section-content"><p><code><input type="image"></code> 要素は<a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a>（CSS レイヤーによって内容が生成されたり、直接管理されたりしない要素）で、大部分は通常の <a href="/ja/docs/Web/HTML/Element/img"><code><img></code></a> 要素と同じ動きをしますが、<a href="/ja/docs/Web/HTML/Element/input/submit">送信ボタン</a>の機能を持っています。</p></div></section><section aria-labelledby="基本的な_input_入力の機能"><h3 id="基本的な_input_入力の機能"><a href="#基本的な_input_入力の機能">基本的な input 入力の機能</a></h3><div class="section-content"><p>必要な機能をすべて含んだ基本的な例を見てみましょう（これらは <code><img></code> 要素とまったく同じように動作します）。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><input id="image" type="image" width="100" height="30" alt="Login" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" /> </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Essential image input features sample" id="frame_essential_image_input_features" width="600" height="60" src="about:blank" data-live-path="/ja/docs/Web/HTML/Element/input/image/" data-live-id="essential_image_input_features" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <ul> <li><a href="/ja/docs/Web/HTML/Element/input#src"><code>src</code></a> 属性は、ボタンに表示したい画像のパスを指定するために使用されます。</li> <li><a href="/ja/docs/Web/HTML/Element/input#alt"><code>alt</code></a> 属性は画像の alt テキストを提供し、スクリーンリーダーの利用者がボタンが何に使われるかをより良く理解することができるようにします。また、何らかの理由で画像を表示できない場合にも表示されます（例えば、パスのスペルが間違っている場合など）。可能であれば、標準的な送信ボタンを使用する場合に使用するラベルと一致するテキストを使用してください。</li> <li><a href="/ja/docs/Web/HTML/Element/input#width"><code>width</code></a> および <a href="/ja/docs/Web/HTML/Element/input#height"><code>height</code></a> 属性は、画像を表示する幅と高さをピクセル単位で指定するために使用されます。ボタンは画像と同じ大きさです。ボタンのヒット領域を画像より大きくしたい場合は、 CSS を使う必要があります（例： <a href="/ja/docs/Web/CSS/padding"><code>padding</code></a>）。また、片方の寸法だけを指定した場合、もう片方は自動的に調整され、画像は元のアスペクト比を維持します。</li> </ul></div></section><section aria-labelledby="既定のフォームの動作の上書き"><h3 id="既定のフォームの動作の上書き"><a href="#既定のフォームの動作の上書き">既定のフォームの動作の上書き</a></h3><div class="section-content"><p><code><input type="image"></code> 要素は — 通常の<a href="/ja/docs/Web/HTML/Element/input/submit">送信ボタン</a>と同様に — 既定のフォームの動作を上書きするいくつかの属性を受け付けます。</p> <dl> <dt id="formaction_2"><a href="#formaction_2"><code>formaction</code></a></dt> <dd> <p>input 要素から送信された情報を処理するプログラムの URI。要素のフォームオーナーの <a href="/ja/docs/Web/HTML/Element/form#action"><code>action</code></a> 属性を上書きします。</p> </dd> <dt id="formenctype_2"><a href="#formenctype_2"><code>formenctype</code></a></dt> <dd> <p>サーバーにフォームを送信する際に使用するコンテンツの種類を指定します。指定可能な値は以下のとおりです。</p> <ul> <li><code>application/x-www-form-urlencoded</code>: 属性が指定されていない場合の既定値。</li> <li><code>text/plain</code>.</li> </ul> <p>この属性が指定された場合、要素のフォームオーナーの <a href="/ja/docs/Web/HTML/Element/form#enctype"><code>enctype</code></a> 属性を上書きします。</p> </dd> <dt id="formmethod_2"><a href="#formmethod_2"><code>formmethod</code></a></dt> <dd> <p>ブラウザーがフォームを送信するために使用する HTTP メソッドを指定します。指定可能な値は以下のとおりです。</p> <ul> <li><code>post</code>: フォームのデータは、フォームの本文に含まれ、サーバーに送信されます。</li> <li><code>get</code>: フォームからのデータは、 '?' を区切り文字として <strong><code>form</code></strong> 属性の URI に追加され、結果の URI がサーバーに送信されます。このメソッドは、フォームに副作用がなく、 ASCII 文字のみを含む場合に使用してください。</li> </ul> <p>指定された場合、この属性は要素のフォームオーナーの <a href="/ja/docs/Web/HTML/Element/form#method"><code>method</code></a> 属性を上書きします。</p> </dd> <dt id="formnovalidate_2"><a href="#formnovalidate_2"><code>formnovalidate</code></a></dt> <dd> <p>論理属性で、フォーム送信時に検証を行わないことを指定します。この属性が指定された場合、要素のフォームオーナーの <a href="/ja/docs/Web/HTML/Element/form#novalidate"><code>novalidate</code></a> 属性を上書きします。</p> </dd> <dt id="formtarget_2"><a href="#formtarget_2"><code>formtarget</code></a></dt> <dd> <p>フォームを送信した後に受信したレスポンスを表示する場所を示す名前またはキーワードです。これは、閲覧コンテキスト（例えば、タブ、ウィンドウ、インライン枠）の名前、またはキーワードです。この属性が指定された場合、要素のフォームオーナーの <a href="/ja/docs/Web/HTML/Element/form#target"><code>target</code></a> 属性を上書きします。次のキーワードは特別な意味を持ちます。</p> <ul> <li>_<code>self</code>: 現在のコンテキストと同じ閲覧コンテキストにレスポンスを読み込みます。この属性が指定されていない場合は、この値が既定値となります。</li> <li><code>_blank</code>: 新しい無名の閲覧コンテキストにレスポンスを読み込みます。</li> <li><code>_parent</code>: 現在の閲覧コンテキストの親コンテキストにレスポンスを読み込みます。親が存在しない場合、このオプションは <code>_self</code> と同じように動作します。</li> <li><code>_top</code>: 最上位の閲覧コンテキスト（つまり、現在の閲覧コンテキストの祖先のうち、親を持たない閲覧コンテキスト）にレスポンスを読み込みます。親がいない場合、このオプションは <code>_self</code> と同じ振る舞いをします。</li> </ul> </dd> </dl></div></section><section aria-labelledby="点の_x_および_y_のデータの使用"><h3 id="点の_x_および_y_のデータの使用"><a href="#点の_x_および_y_のデータの使用">点の x および y のデータの使用</a></h3><div class="section-content"><p><code><input type="image"></code> で作成したボタンを使ってフォームを送信すると、ブラウザーが自動的に <code>x</code> と <code>y</code> という 2 つの追加データをサーバーに送信します。 <a href="https://mdn.github.io/learning-area/html/forms/image-type-example/xy-coordinates-example.html" class="external" target="_blank">X Y 座標の例</a>で、その様子を見ることができます。</p> <p>画像をクリックしてフォームを送信すると、 <code>?x=52&y=55</code> のようなデータが引数として URL に付加されるのがわかります。画像入力に <a href="/ja/docs/Web/HTML/Element/input#name"><code>name</code></a> 属性がある場合、指定した名前はすべての属性の先頭に付くことに注意してください。したがって、<code>name</code> が <code>position</code> である場合、返される座標は URL で <code>?position.x=52&position.y=55</code> という書式となります。もちろん、これは他のすべての属性にも当てはまります。</p> <p>これらは、マウスでクリックしてフォームを送信した画像の X と Y の座標で、 (0,0) が画像の左上となり、画像のクリック以外で送信が発生した場合の既定値もこれになります。これらは、画像の中でクリックされた位置が重要である場合、例えば、地図がクリックされると、クリックされた座標がサーバーに送信されるような場合に利用することができます。サーバー側のコードは、クリックされた場所を特定し、その近くの場所についての情報を返します。</p> <p>上記の例では、サーバー側のコードで、送信された座標からどの色がクリックされたかを調べ、人々が投票した好きな色の集計を行うことができます。</p></div></section><section aria-labelledby="画像の位置と拡大縮小アルゴリズムの調整"><h3 id="画像の位置と拡大縮小アルゴリズムの調整"><a href="#画像の位置と拡大縮小アルゴリズムの調整">画像の位置と拡大縮小アルゴリズムの調整</a></h3><div class="section-content"><p><a href="/ja/docs/Web/CSS/object-position"><code>object-position</code></a> プロパティを使用すると、 <code><input></code> 要素の枠内での画像の位置を調整することができ、 <a href="/ja/docs/Web/CSS/object-fit"><code>object-fit</code></a> プロパティは枠内に収める画像の大きさを調整する方法を制御することができます。これにより、 <code>width</code> と <code>height</code> 属性を用いて画像の枠を指定し、レイアウト内に空間を確保した上で、その空間内のどこに画像を配置し、その空間に合わせて画像を縮小する方法（または縮小するかどうか）を調整することができます。</p></div></section><section aria-labelledby="例"><h2 id="例"><a href="#例">例</a></h2><div class="section-content"></div></section><section aria-labelledby="ログインフォーム"><h3 id="ログインフォーム"><a href="#ログインフォーム">ログインフォーム</a></h3><div class="section-content"><p>次の例は、前と同じボタンを、典型的なログインフォームのコンテキストに含めて表示したものです。</p> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="A login form sample" id="frame_a_login_form" width="600" height="170" src="about:blank" data-live-path="/ja/docs/Web/HTML/Element/input/image/" data-live-id="a_login_form" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <h4 id="html">HTML</h4> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><form> <p>アカウントにログインしてください</p> <div> <label for="userId">User ID</label> <input type="text" id="userId" name="userId" /> </div> <div> <label for="pwd">Password</label> <input type="password" id="pwd" name="pwd" /> </div> <div> <input id="image" type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" alt="Login" width="100" /> </div> </form> </code></pre></div> <h4 id="css">CSS</h4> <p>次に、基本的な要素をよりきれいに配置するための簡単な CSS です。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>div { margin-bottom: 10px; } label { display: inline-block; width: 70px; text-align: right; padding-right: 10px; } </code></pre></div></div></section><section aria-labelledby="画像の位置と大きさの調整"><h3 id="画像の位置と大きさの調整"><a href="#画像の位置と大きさの調整">画像の位置と大きさの調整</a></h3><div class="section-content"><p>この例では、前の例を応用して画像のための空間を確保し、 <a href="/ja/docs/Web/CSS/object-fit"><code>object-fit</code></a> と <a href="/ja/docs/Web/CSS/object-position"><code>object-position</code></a> で実際の画像の大きさと位置を調整しています。</p> <h4 id="例_2">例</h4> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Adjusting the image position and scaling sample" id="frame_adjusting_the_image_position_and_scaling" width="600" height="300" src="about:blank" data-live-path="/ja/docs/Web/HTML/Element/input/image/" data-live-id="adjusting_the_image_position_and_scaling" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <h4 id="html_2">HTML</h4> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><form> <p>アカウントにログインしてください</p> <div> <label for="userId">User ID</label> <input type="text" id="userId" name="userId" /> </div> <div> <label for="pwd">Password</label> <input type="password" id="pwd" name="pwd" /> </div> <div> <input id="image" type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" alt="Login" width="200" height="100" /> </div> </form> </code></pre></div> <h4 id="css_2">CSS</h4> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>div { margin-bottom: 10px; } label { display: inline-block; width: 70px; text-align: right; padding-right: 10px; } #image { object-position: right top; object-fit: contain; background-color: #ddd; } </code></pre></div> <p>ここでは、 <code>object-position</code> は画像を要素の右上隅に描画するように設定され、 <code>object-fit</code> は <code>contain</code> に設定されています。これは、画像の縦横比を変えずに要素のボックス内に収まる最大の大きさで描画することを意味しています。画像で覆われていない領域では、要素の灰色の背景がまだ見えていることに注意してください。</p></div></section><section aria-labelledby="技術的概要"><h2 id="技術的概要"><a href="#技術的概要">技術的概要</a></h2><div class="section-content"><figure class="table-container"><table class="properties"> <tbody> <tr> <td><strong><a href="#value">値</a></strong></td> <td>なし — <code>value</code> 属性は指定しないでください。</td> </tr> <tr> <td><strong>イベント</strong></td> <td>なし</td> </tr> <tr> <td><strong>対応している共通属性</strong></td> <td> <a href="/ja/docs/Web/HTML/Element/input#alt"><code>alt</code></a>, <a href="/ja/docs/Web/HTML/Element/input#src"><code>src</code></a>, <a href="/ja/docs/Web/HTML/Element/input#width"><code>width</code></a>, <a href="/ja/docs/Web/HTML/Element/input#height"><code>height</code></a>, <a href="/ja/docs/Web/HTML/Element/input#formaction"><code>formaction</code></a>, <a href="/ja/docs/Web/HTML/Element/input#formenctype"><code>formenctype</code></a>, <a href="/ja/docs/Web/HTML/Element/input#formmethod"><code>formmethod</code></a>, <a href="/ja/docs/Web/HTML/Element/input#formmethod"><code>formnovalidate</code></a>, <a href="/ja/docs/Web/HTML/Element/input#formtarget"><code>formtarget</code></a> </td> </tr> <tr> <td><strong>IDL 属性</strong></td> <td>なし</td> </tr> <tr> <td><strong>DOM インターフェイス</strong></td> <td><a href="/ja/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a></td> </tr> <tr> <td><strong>メソッド</strong></td> <td>なし</td> </tr> <tr> <td><strong>暗黙の ARIA ロール</strong></td> <td><a href="/ja/docs/Web/Accessibility/ARIA/Roles/button_role"><code>button</code></a></td> </tr> </tbody> </table></figure></div></section><h2 id="仕様書"><a href="#仕様書">仕様書</a></h2><table class="standard-table"><thead><tr><th scope="col">Specification</th></tr></thead><tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/input.html#image-button-state-(type=image)">HTML <br/><small># image-button-state-(type=image)</small></a></td></tr></tbody></table><h2 id="ブラウザーの互換性"><a href="#ブラウザーの互換性">ブラウザーの互換性</a></h2><p>BCD tables only load in the browser<noscript> with JavaScript enabled. Enable JavaScript to view data.</noscript></p><section aria-labelledby="関連情報"><h2 id="関連情報"><a href="#関連情報">関連情報</a></h2><div class="section-content"><ul> <li><a href="/ja/docs/Web/HTML/Element/input"><code><input></code></a> および実装している <a href="/ja/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> インターフェイス</li> <li>HTML の <a href="/ja/docs/Web/HTML/Element/img"><code><img></code></a> 要素</li> <li><code><input></code> 要素の枠内における画像の位置と大きさの指定: <a href="/ja/docs/Web/CSS/object-position"><code>object-position</code></a> および <a href="/ja/docs/Web/CSS/object-fit"><code>object-fit</code></a></li> <li><a href="/ja/docs/Learn_web_development/Extensions/Forms">CSS プロパティの互換性</a></li> </ul></div></section></article><aside class="article-footer"><div class="article-footer-inner"><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" viewBox="0 0 162 162" fill="none" role="none"><mask id="b" fill="#fff"><path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"></path></mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"></path><ellipse cx="8.066" cy="111.597" fill="var(--background-tertiary)" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"></ellipse><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"><path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"></path></g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"><path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"></path></g><defs><clipPath id="c"><path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"></path></clipPath><clipPath id="d"><path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"></path></clipPath><linearGradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientUnits="userSpaceOnUse"><stop stop-color="#086DFC"></stop><stop offset="0.246" stop-color="#2C81FA"></stop><stop offset="0.516" stop-color="#5497F8"></stop><stop offset="0.821" stop-color="#80B0F6"></stop><stop offset="1" stop-color="#9ABFF5"></stop></linearGradient></defs></svg></div><h2>Help improve MDN</h2><fieldset class="feedback"><label>Was this page helpful to you?</label><div class="button-container"><button type="button" class="button primary has-icon yes"><span class="button-wrap"><span class="icon icon-thumbs-up "></span>Yes</span></button><button type="button" class="button primary has-icon no"><span class="button-wrap"><span class="icon icon-thumbs-down "></span>No</span></button></div></fieldset><a class="contribute" href="https://github.com/mdn/translated-content/blob/main/CONTRIBUTING.md" title="This will take you to our contribution guidelines on GitHub." target="_blank" rel="noopener noreferrer">Learn how to contribute</a>.<p class="last-modified-date">This page was last modified on <time dateTime="2024-04-08T11:42:56.000Z">2024年4月8日</time> by <a href="/ja/docs/Web/HTML/Element/input/image/contributors.txt" rel="nofollow">MDN contributors</a>.</p><div id="on-github" class="on-github"><a href="https://github.com/mdn/translated-content/blob/main/files/ja/web/html/element/input/image/index.md?plain=1" title="Folder: ja/web/html/element/input/image (Opens in a new tab)" target="_blank" rel="noopener noreferrer">View this page on GitHub</a> • <a href="https://github.com/mdn/translated-content/issues/new?template=page-report-ja.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FWeb%2FHTML%2FElement%2Finput%2Fimage&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60ja%2Fweb%2Fhtml%2Felement%2Finput%2Fimage%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FWeb%2FHTML%2FElement%2Finput%2Fimage%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fblob%2Fmain%2Ffiles%2Fja%2Fweb%2Fhtml%2Felement%2Finput%2Fimage%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fcommit%2Fc74b283fb213fbc30661bff8beaaf53c0a7715a2%0A*+Document+last+modified%3A+2024-04-08T11%3A42%3A56.000Z%0A%0A%3C%2Fdetails%3E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Report a problem with this content</a></div></div></aside></main></div></div><footer id="nav-footer" class="page-footer"><div class="page-footer-grid"><div class="page-footer-logo-col"><a href="/" class="mdn-footer-logo" aria-label="MDN homepage"><svg width="48" height="17" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mdn-footer-logo-svg">MDN logo</title><path d="M20.04 16.512H15.504V10.416C15.504 9.488 15.344 8.824 15.024 8.424C14.72 8.024 14.264 7.824 13.656 7.824C12.92 7.824 12.384 8.064 12.048 8.544C11.728 9.024 11.568 9.64 11.568 10.392V14.184H13.008V16.512H8.472V10.416C8.472 9.488 8.312 8.824 7.992 8.424C7.688 8.024 7.232 7.824 6.624 7.824C5.872 7.824 5.336 8.064 5.016 8.544C4.696 9.024 4.536 9.64 4.536 10.392V14.184H6.6V16.512H0V14.184H1.44V8.04H0.024V5.688H4.536V7.32C5.224 6.088 6.32 5.472 7.824 5.472C8.608 5.472 9.328 5.664 9.984 6.048C10.64 6.432 11.096 7.016 11.352 7.8C11.992 6.248 13.168 5.472 14.88 5.472C15.856 5.472 16.72 5.776 17.472 6.384C18.224 6.992 18.6 7.936 18.6 9.216V14.184H20.04V16.512Z" fill="currentColor"></path><path d="M33.6714 16.512H29.1354V14.496C28.8314 15.12 28.3834 15.656 27.7914 16.104C27.1994 16.536 26.4154 16.752 25.4394 16.752C24.0154 16.752 22.8954 16.264 22.0794 15.288C21.2634 14.312 20.8554 12.984 20.8554 11.304C20.8554 9.688 21.2554 8.312 22.0554 7.176C22.8554 6.04 24.0634 5.472 25.6794 5.472C26.5594 5.472 27.2794 5.648 27.8394 6C28.3994 6.352 28.8314 6.8 29.1354 7.344V2.352H26.9754V0H32.2314V14.184H33.6714V16.512ZM29.1354 11.04V10.776C29.1354 9.88 28.8954 9.184 28.4154 8.688C27.9514 8.176 27.3674 7.92 26.6634 7.92C25.9754 7.92 25.3674 8.176 24.8394 8.688C24.3274 9.2 24.0714 10.008 24.0714 11.112C24.0714 12.152 24.3114 12.944 24.7914 13.488C25.2714 14.032 25.8394 14.304 26.4954 14.304C27.3114 14.304 27.9514 13.96 28.4154 13.272C28.8954 12.584 29.1354 11.84 29.1354 11.04Z" fill="currentColor"></path><path d="M47.9589 16.512H41.9829V14.184H43.4229V10.416C43.4229 9.488 43.2629 8.824 42.9429 8.424C42.6389 8.024 42.1829 7.824 41.5749 7.824C40.8389 7.824 40.2709 8.056 39.8709 8.52C39.4709 8.968 39.2629 9.56 39.2469 10.296V14.184H40.6869V16.512H34.7109V14.184H36.1509V8.04H34.5909V5.688H39.2469V7.344C39.9669 6.096 41.1269 5.472 42.7269 5.472C43.7509 5.472 44.6389 5.776 45.3909 6.384C46.1429 6.992 46.5189 7.936 46.5189 9.216V14.184H47.9589V16.512Z" fill="currentColor"></path></svg></a><p>Your blueprint for a better internet.</p><ul class="social-icons"><li><a href="https://mastodon.social/@mdn" target="_blank" rel="me noopener noreferrer"><span class="icon icon-mastodon"></span><span class="visually-hidden">MDN on Mastodon</span></a></li><li><a href="https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer"><span class="icon icon-twitter-x"></span><span class="visually-hidden">MDN on X (formerly Twitter)</span></a></li><li><a href="https://github.com/mdn/" target="_blank" rel="noopener noreferrer"><span class="icon icon-github-mark-small"></span><span class="visually-hidden">MDN on GitHub</span></a></li><li><a href="/en-US/blog/rss.xml" target="_blank"><span class="icon icon-feed"></span><span class="visually-hidden">MDN Blog RSS Feed</span></a></li></ul></div><div class="page-footer-nav-col-1"><h2 class="footer-nav-heading">MDN</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a href="/en-US/about">About</a></li><li class="footer-nav-item"><a href="/en-US/blog/">Blog</a></li><li class="footer-nav-item"><a href="https://www.mozilla.org/en-US/careers/listings/?team=ProdOps" target="_blank" rel="noopener noreferrer">Careers</a></li><li class="footer-nav-item"><a href="/en-US/advertising">Advertise with us</a></li></ul></div><div class="page-footer-nav-col-2"><h2 class="footer-nav-heading">Support</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="https://support.mozilla.org/products/mdn-plus">Product help</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/ja/docs/MDN/Community/Issues">Report an issue</a></li></ul></div><div class="page-footer-nav-col-3"><h2 class="footer-nav-heading">Our communities</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/community">MDN Community</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="https://discourse.mozilla.org/c/mdn/236" target="_blank" rel="noopener noreferrer">MDN Forum</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/discord" target="_blank" rel="noopener noreferrer">MDN Chat</a></li></ul></div><div class="page-footer-nav-col-4"><h2 class="footer-nav-heading">Developers</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/ja/docs/Web">Web Technologies</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/ja/docs/Learn">Learn Web Development</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/ja/plus">MDN Plus</a></li><li class="footer-nav-item"><a href="https://hacks.mozilla.org/" target="_blank" rel="noopener noreferrer">Hacks Blog</a></li></ul></div><div class="page-footer-moz"><a href="https://www.mozilla.org/" class="footer-moz-logo-link" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="137" height="32" fill="none" viewBox="0 0 267.431 62.607"><path fill="currentColor" d="m13.913 23.056 5.33 25.356h2.195l5.33-25.356h14.267v38.976h-7.578V29.694h-2.194l-7.264 32.337h-7.343L9.418 29.694H7.223v32.337H-.354V23.056Zm47.137 9.123c9.12 0 14.423 5.385 14.423 15.214s-5.33 15.214-14.423 15.214c-9.12 0-14.423-5.385-14.423-15.214 0-9.855 5.304-15.214 14.423-15.214m0 24.363c4.285 0 6.428-2.196 6.428-7.032v-4.287c0-4.836-2.143-7.032-6.428-7.032s-6.428 2.196-6.428 7.032v4.287c0 4.836 2.143 7.032 6.428 7.032m18.473-.157 15.47-18.01h-15.26v-5.647h24.352v5.646L88.616 56.385h15.704v5.646H79.523Zm29.318-23.657h11.183V62.03h-7.578V38.375h-3.632v-5.646zm3.605-9.672h7.578v5.646h-7.578zm13.17 0h11.21v38.976h-7.578v-33.33h-3.632zm16.801 0H153.6v38.976h-7.577v-33.33h-3.632v-5.646zm29.03 9.123c4.442 0 7.394 2.143 8.231 5.881h2.194v-5.332h9.276v5.646h-3.632v18.011h3.632v5.646h-4.442c-3.135 0-4.834-1.699-4.834-4.836V56.7h-2.194c-.81 3.738-3.789 5.881-8.23 5.881-6.978 0-11.916-5.829-11.916-15.214 0-9.384 4.938-15.187 11.915-15.187m2.3 24.363c4.284 0 6.192-2.196 6.192-7.032v-4.287c0-4.836-1.908-7.032-6.193-7.032-4.18 0-6.193 2.196-6.193 7.032v4.287c0 4.836 2.012 7.032 6.193 7.032m48.34 5.489h-7.577V0h7.577zm6.585-29.643h32.165v-2.196l-21.295-7.634v-6.143l21.295-7.633V6.588h-25.345V0h32.165v12.522l-17.35 5.881V20.6l17.35 5.882v12.521h-38.985zm0-25.801h6.794v6.796h-6.794z"></path></svg></a><ul class="footer-moz-list"><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Website Privacy Notice</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/#cookies" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Cookies</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/legal/terms/mozilla" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Legal</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Community Participation Guidelines</a></li></ul></div><div class="page-footer-legal"><p id="license" class="page-footer-legal-text">Visit <a href="https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla Corporation’s</a> not-for-profit parent, the <a target="_blank" rel="noopener noreferrer" href="https://foundation.mozilla.org/">Mozilla Foundation</a>.<br/>Portions of this content are ©1998–2025 by individual mozilla.org contributors. Content available under <a href="/ja/docs/MDN/Writing_guidelines/Attrib_copyright_license">a Creative Commons license</a>.</p></div></div></footer></div><script type="application/json" id="hydration">{"url":"/ja/docs/Web/HTML/Element/input/image","doc":{"body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<p><a href=\"/ja/docs/Web/HTML/Element/input\"><code><input></code></a> 要素の <strong><code>image</code></strong> 型は、テキストではなく画像の形をとる送信ボタン、すなわちテキストではなく画像の形をとる送信ボタンを作成するために使用されます。</p>"}},{"type":"prose","value":{"id":"試してみましょう","title":"試してみましょう","isH3":false,"content":"<iframe class=\"interactive is-tabbed-standard-height\" height=\"200\" src=\"https://interactive-examples.mdn.mozilla.net/pages/tabbed/input-image.html\" title=\"MDN Web Docs Interactive Example\" allow=\"clipboard-write\" loading=\"lazy\"></iframe>"}},{"type":"prose","value":{"id":"値","title":"値","isH3":false,"content":"<p><code><input type=\"image\"></code> 要素は <code>value</code> 属性を受け付けません。表示する画像へのパスを <code>src</code> 属性で指定します。</p>"}},{"type":"prose","value":{"id":"追加の属性","title":"追加の属性","isH3":false,"content":"<p>すべての <a href=\"/ja/docs/Web/HTML/Element/input\"><code><input></code></a> 型で共通する属性に加え、 <code>image</code> 型の入力欄は次の属性にも対応しています。</p>"}},{"type":"prose","value":{"id":"alt","title":"alt","isH3":true,"content":"<p><code>alt</code> 属性は、画像が表示できない場合のボタンのラベルとして使用される代替文字列を提供します（エラーの場合、<a href=\"/ja/docs/Glossary/User_agent\">ユーザーエージェント</a>が画像を表示できない場合、画像を表示しないように設定されていた場合、ユーザーが読み上げ端末を使用している場合など）。提供する場合は、ボタンのラベルとして適切な空ではない文字列である必要があります。</p>\n<p>例えば、「今すぐログイン」をアイコンやテキストが入った画像を表示するグラフィックボタンの場合、 <code>alt</code> 属性も <code>今すぐログイン</code> のように設定してください。</p>\n<div class=\"notecard note\">\n<p><strong>メモ:</strong> <code>alt</code> 属性は技術的には省略可能ですが、コンテンツの利用性を最大化するために常に設定してください。</p>\n</div>\n<p><code><input type=\"image\"></code> 要素の <code>alt</code> 属性は、機能的には <a href=\"/ja/docs/Web/HTML/Element/img\"><code><img></code></a> 要素における <a href=\"/ja/docs/Web/HTML/Element/img#alt\"><code>alt</code></a> 属性と同様に動作します。</p>"}},{"type":"prose","value":{"id":"formaction","title":"formaction","isH3":true,"content":"<p>文字列で、データの送信先の URL を示します。これはこの <a href=\"/ja/docs/Web/HTML/Element/input\"><code><input></code></a> が属する <a href=\"/ja/docs/Web/HTML/Element/form\"><code><form></code></a> 要素の <a href=\"/ja/docs/Web/HTML/Element/form#action\"><code>action</code></a> 属性より優先します。</p>\n<p>この属性は <a href=\"/ja/docs/Web/HTML/Element/input/submit\"><code><input type=\"submit\"></code></a> および <a href=\"/ja/docs/Web/HTML/Element/button\"><code><button></code></a> 要素でも使用できます。</p>"}},{"type":"prose","value":{"id":"formenctype","title":"formenctype","isH3":true,"content":"<p>文字列で、フォームのデータをサーバーに送信する際に使われるエンコーディング方法を識別します。許されている値は 3 つです。</p>\n<dl>\n<dt id=\"applicationx-www-form-urlencoded\"><a href=\"#applicationx-www-form-urlencoded\"><code>application/x-www-form-urlencoded</code></a></dt>\n<dd>\n<p>これは既定値で、フォームのデータを <a href=\"/ja/docs/Web/JavaScript/Reference/Global_Objects/encodeURI\"><code>encodeURI()</code></a> などのアルゴリズムを使って <a href=\"https://ja.wikipedia.org/wiki/パーセントエンコーディング\" class=\"external\" target=\"_blank\">URL エンコーディング</a>した後で送信します。</p>\n</dd>\n<dt id=\"multipartform-data\"><a href=\"#multipartform-data\"><code>multipart/form-data</code></a></dt>\n<dd>\n<p>データを管理するために <a href=\"/ja/docs/Web/API/FormData\"><code>FormData</code></a> API を使用し、複数のファイルをサーバーに送信することができます。フォームに <a href=\"/ja/docs/Web/HTML/Element/input\"><code><input></code></a> 要素の <a href=\"/ja/docs/Web/HTML/Element/input#type\"><code>type</code></a> が <code>file</code> のもの (<a href=\"/ja/docs/Web/HTML/Element/input/file\"><code><input type=\"file\"></code></a>) が含まれている場合は、このエンコーディング型を<em>使わなければなりません</em>。</p>\n</dd>\n<dt id=\"textplain\"><a href=\"#textplain\"><code>text/plain</code></a></dt>\n<dd>\n<p>プレーンテキストです。ほとんどデバッグでしか役に立ちませんが、送信されたデータを簡単に見ることができます。</p>\n</dd>\n</dl>\n<p><code>formenctype</code> 属性が指定された場合、所属するフォームの <a href=\"/ja/docs/Web/HTML/Element/form#action\"><code>action</code></a> 属性を上書きします。</p>\n<p>この属性は <a href=\"/ja/docs/Web/HTML/Element/input/submit\"><code><input type=\"submit\"></code></a> および <a href=\"/ja/docs/Web/HTML/Element/button\"><code><button></code></a> 要素でも使用できます。</p>"}},{"type":"prose","value":{"id":"formmethod","title":"formmethod","isH3":true,"content":"<p>文字列で、フォームのデータを送信するときに使用する HTTP メソッドを示します。この値は所有者であるフォームの <a href=\"/ja/docs/Web/HTML/Element/form#method\"><code>method</code></a> を上書きします。許されている値は次の通りです。</p>\n<dl>\n<dt id=\"get\"><a href=\"#get\"><code>get</code></a></dt>\n<dd>\n<p>URL は <code>formaction</code> または <a href=\"/ja/docs/Web/HTML/Element/form#action\"><code>action</code></a> 属性で与えられた URL で始まり、クエスチョンマーク (\"?\") 文字を付加し、次に <code>formenctype</code> またはフォームの <a href=\"/ja/docs/Web/HTML/Element/form#enctype\"><code>enctype</code></a> 属性の記述に従ってコード化したフォームデータを付加して作成されます。この URL は、 HTTP の <a href=\"/ja/docs/Web/HTTP/Methods/GET\"><code>get</code></a> リクエストでサーバーに送信されます。この方法は、ASCII 文字のみを含み、副作用のない単純なフォームに対してよく機能します。これは既定値です。</p>\n</dd>\n<dt id=\"post\"><a href=\"#post\"><code>post</code></a></dt>\n<dd>\n<p>フォームのデータは <code>formaction</code> または <a href=\"/ja/docs/Web/HTML/Element/form#action\"><code>action</code></a> 属性で指定された URL に HTTP の <a href=\"/ja/docs/Web/HTTP/Methods/POST\"><code>post</code></a> リクエストで送信される本文に含まれます。このメソッドは、複雑なデータやファイルの添付に対応しています。</p>\n</dd>\n<dt id=\"dialog\"><a href=\"#dialog\"><code>dialog</code></a></dt>\n<dd>\n<p>このメソッドは、ボタンが入力に関連するダイアログを閉じ、フォームデータを全く送信しないことを示すために使用される。</p>\n</dd>\n</dl>\n<p>この属性は <a href=\"/ja/docs/Web/HTML/Element/input/submit\"><code><input type=\"submit\"></code></a> および <a href=\"/ja/docs/Web/HTML/Element/button\"><code><button></code></a> 要素でも使用できます。</p>"}},{"type":"prose","value":{"id":"formnovalidate","title":"formnovalidate","isH3":true,"content":"<p>論理属性で、これがある場合は、サーバーに送信する前にフォームの検証を行わないことを指定します。これは、その要素の所有するフォームの <a href=\"/ja/docs/Web/HTML/Element/form#novalidate\"><code>novalidate</code></a> 属性の値より優先されます。</p>\n<p>この属性は <a href=\"/ja/docs/Web/HTML/Element/input/submit\"><code><input type=\"submit\"></code></a> および <a href=\"/ja/docs/Web/HTML/Element/button\"><code><button></code></a> 要素でも使用できます。</p>"}},{"type":"prose","value":{"id":"formtarget","title":"formtarget","isH3":true,"content":"<p>文字列で、フォームを送信した後に受け取ったレスポンスを表示する場所を示す、名前またはキーワードを指定します。この文字列は、<strong>閲覧コンテキスト</strong>（つまり、タブ、ウィンドウ、または <a href=\"/ja/docs/Web/HTML/Element/iframe\"><code><iframe></code></a>）の名前である必要があります。ここで指定された値は、この入力を所有する <a href=\"/ja/docs/Web/HTML/Element/form\"><code><form></code></a> の <a href=\"/ja/docs/Web/HTML/Element/form#target\"><code>target</code></a> 属性で指定されたターゲットよりも優先されます。</p>\n<p>タブ、ウィンドウ、インライン枠などの実際の名前のほかに、いくつかの特別なキーワードを使用することができます。</p>\n<dl>\n<dt id=\"_self\"><a href=\"#_self\"><code>_self</code></a></dt>\n<dd>\n<p>レスポンスを、フォームを含むものと同じ閲覧コンテキストに読み込みます。これにより、現在の文書が受信したデータで置き換えられます。これは、何も指定されていない場合に使用される既定値です。</p>\n</dd>\n<dt id=\"_blank\"><a href=\"#_blank\"><code>_blank</code></a></dt>\n<dd>\n<p>レスポンスを新しい、名前のない閲覧コンテキストに読み込みます。これは通常、現在の文書と同じウィンドウの新しいタブですが、<a href=\"/ja/docs/Glossary/User_agent\">ユーザーエージェント</a>の設定によって異なる場合があります。</p>\n</dd>\n<dt id=\"_parent\"><a href=\"#_parent\"><code>_parent</code></a></dt>\n<dd>\n<p>現在の閲覧コンテキストの親コンテキストにレスポンスを読み込みます。親コンテキストがない場合は、 <code>_self</code> と同じ動作をします。</p>\n</dd>\n<dt id=\"_top\"><a href=\"#_top\"><code>_top</code></a></dt>\n<dd>\n<p>これは現在のコンテキストの最上位の祖先である閲覧コンテキストです。現在のコンテキストが最上位のコンテキストである場合、これは <code>_self</code> と同じように動作します。</p>\n</dd>\n</dl>\n<p>この属性は <a href=\"/ja/docs/Web/HTML/Element/input/submit\"><code><input type=\"submit\"></code></a> および <a href=\"/ja/docs/Web/HTML/Element/button\"><code><button></code></a> 要素でも使用できます。</p>"}},{"type":"prose","value":{"id":"height","title":"height","isH3":true,"content":"<p><code>src</code> 属性で指定された画像を描画する高さを CSS ピクセルで指定した数値です。</p>"}},{"type":"prose","value":{"id":"src","title":"src","isH3":true,"content":"<p>文字列で、グラフィカルな送信ボタンを表現するために表示する画像ファイルの URL を指定します。ユーザーが画像と対話するとき、その入力は他のボタン入力と同様に処理されます。</p>"}},{"type":"prose","value":{"id":"width","title":"width","isH3":true,"content":"<p>画像を描画する幅を CSS ピクセルで表した数値です。</p>"}},{"type":"prose","value":{"id":"廃止された属性","title":"廃止された属性","isH3":false,"content":"<p>以下の属性は、 HTML 4 で <code>image</code> 入力用に定義されたものですが、すべてのブラウザーで実装されていたわけではなく、その後、非推奨となりました。</p>"}},{"type":"prose","value":{"id":"usemap","title":"usemap","isH3":true,"content":"<p><code>usemap</code> が指定された場合、画像と共に使用するイメージマップを定義します。イメージマップ要素 <a href=\"/ja/docs/Web/HTML/Element/map\"><code><map></code></a> の名前でなければなりません。この使い方は時代遅れです。イメージマップを使いたい場合は、 <a href=\"/ja/docs/Web/HTML/Element/img\"><code><img></code></a> 要素を使うように切り替えてください。</p>"}},{"type":"prose","value":{"id":"image_入力の使用","title":"image 入力の使用","isH3":false,"content":"<p><code><input type=\"image\"></code> 要素は<a href=\"/ja/docs/Web/CSS/Replaced_element\">置換要素</a>（CSS レイヤーによって内容が生成されたり、直接管理されたりしない要素）で、大部分は通常の <a href=\"/ja/docs/Web/HTML/Element/img\"><code><img></code></a> 要素と同じ動きをしますが、<a href=\"/ja/docs/Web/HTML/Element/input/submit\">送信ボタン</a>の機能を持っています。</p>"}},{"type":"prose","value":{"id":"基本的な_input_入力の機能","title":"基本的な input 入力の機能","isH3":true,"content":"<p>必要な機能をすべて含んだ基本的な例を見てみましょう（これらは <code><img></code> 要素とまったく同じように動作します）。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><input\n id=\"image\"\n type=\"image\"\n width=\"100\"\n height=\"30\"\n alt=\"Login\"\n src=\"https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png\" />\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Essential image input features sample\" id=\"frame_essential_image_input_features\" width=\"600\" height=\"60\" src=\"about:blank\" data-live-path=\"/ja/docs/Web/HTML/Element/input/image/\" data-live-id=\"essential_image_input_features\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<ul>\n<li><a href=\"/ja/docs/Web/HTML/Element/input#src\"><code>src</code></a> 属性は、ボタンに表示したい画像のパスを指定するために使用されます。</li>\n<li><a href=\"/ja/docs/Web/HTML/Element/input#alt\"><code>alt</code></a> 属性は画像の alt テキストを提供し、スクリーンリーダーの利用者がボタンが何に使われるかをより良く理解することができるようにします。また、何らかの理由で画像を表示できない場合にも表示されます（例えば、パスのスペルが間違っている場合など）。可能であれば、標準的な送信ボタンを使用する場合に使用するラベルと一致するテキストを使用してください。</li>\n<li><a href=\"/ja/docs/Web/HTML/Element/input#width\"><code>width</code></a> および <a href=\"/ja/docs/Web/HTML/Element/input#height\"><code>height</code></a> 属性は、画像を表示する幅と高さをピクセル単位で指定するために使用されます。ボタンは画像と同じ大きさです。ボタンのヒット領域を画像より大きくしたい場合は、 CSS を使う必要があります（例： <a href=\"/ja/docs/Web/CSS/padding\"><code>padding</code></a>）。また、片方の寸法だけを指定した場合、もう片方は自動的に調整され、画像は元のアスペクト比を維持します。</li>\n</ul>"}},{"type":"prose","value":{"id":"既定のフォームの動作の上書き","title":"既定のフォームの動作の上書き","isH3":true,"content":"<p><code><input type=\"image\"></code> 要素は — 通常の<a href=\"/ja/docs/Web/HTML/Element/input/submit\">送信ボタン</a>と同様に — 既定のフォームの動作を上書きするいくつかの属性を受け付けます。</p>\n<dl>\n<dt id=\"formaction_2\"><a href=\"#formaction_2\"><code>formaction</code></a></dt>\n<dd>\n<p>input 要素から送信された情報を処理するプログラムの URI。要素のフォームオーナーの <a href=\"/ja/docs/Web/HTML/Element/form#action\"><code>action</code></a> 属性を上書きします。</p>\n</dd>\n<dt id=\"formenctype_2\"><a href=\"#formenctype_2\"><code>formenctype</code></a></dt>\n<dd>\n<p>サーバーにフォームを送信する際に使用するコンテンツの種類を指定します。指定可能な値は以下のとおりです。</p>\n<ul>\n<li><code>application/x-www-form-urlencoded</code>: 属性が指定されていない場合の既定値。</li>\n<li><code>text/plain</code>.</li>\n</ul>\n<p>この属性が指定された場合、要素のフォームオーナーの <a href=\"/ja/docs/Web/HTML/Element/form#enctype\"><code>enctype</code></a> 属性を上書きします。</p>\n</dd>\n<dt id=\"formmethod_2\"><a href=\"#formmethod_2\"><code>formmethod</code></a></dt>\n<dd>\n<p>ブラウザーがフォームを送信するために使用する HTTP メソッドを指定します。指定可能な値は以下のとおりです。</p>\n<ul>\n<li><code>post</code>: フォームのデータは、フォームの本文に含まれ、サーバーに送信されます。</li>\n<li><code>get</code>: フォームからのデータは、 '?' を区切り文字として <strong><code>form</code></strong> 属性の URI に追加され、結果の URI がサーバーに送信されます。このメソッドは、フォームに副作用がなく、 ASCII 文字のみを含む場合に使用してください。</li>\n</ul>\n<p>指定された場合、この属性は要素のフォームオーナーの <a href=\"/ja/docs/Web/HTML/Element/form#method\"><code>method</code></a> 属性を上書きします。</p>\n</dd>\n<dt id=\"formnovalidate_2\"><a href=\"#formnovalidate_2\"><code>formnovalidate</code></a></dt>\n<dd>\n<p>論理属性で、フォーム送信時に検証を行わないことを指定します。この属性が指定された場合、要素のフォームオーナーの <a href=\"/ja/docs/Web/HTML/Element/form#novalidate\"><code>novalidate</code></a> 属性を上書きします。</p>\n</dd>\n<dt id=\"formtarget_2\"><a href=\"#formtarget_2\"><code>formtarget</code></a></dt>\n<dd>\n<p>フォームを送信した後に受信したレスポンスを表示する場所を示す名前またはキーワードです。これは、閲覧コンテキスト（例えば、タブ、ウィンドウ、インライン枠）の名前、またはキーワードです。この属性が指定された場合、要素のフォームオーナーの <a href=\"/ja/docs/Web/HTML/Element/form#target\"><code>target</code></a> 属性を上書きします。次のキーワードは特別な意味を持ちます。</p>\n<ul>\n<li>_<code>self</code>: 現在のコンテキストと同じ閲覧コンテキストにレスポンスを読み込みます。この属性が指定されていない場合は、この値が既定値となります。</li>\n<li><code>_blank</code>: 新しい無名の閲覧コンテキストにレスポンスを読み込みます。</li>\n<li><code>_parent</code>: 現在の閲覧コンテキストの親コンテキストにレスポンスを読み込みます。親が存在しない場合、このオプションは <code>_self</code> と同じように動作します。</li>\n<li><code>_top</code>: 最上位の閲覧コンテキスト（つまり、現在の閲覧コンテキストの祖先のうち、親を持たない閲覧コンテキスト）にレスポンスを読み込みます。親がいない場合、このオプションは <code>_self</code> と同じ振る舞いをします。</li>\n</ul>\n</dd>\n</dl>"}},{"type":"prose","value":{"id":"点の_x_および_y_のデータの使用","title":"点の x および y のデータの使用","isH3":true,"content":"<p><code><input type=\"image\"></code> で作成したボタンを使ってフォームを送信すると、ブラウザーが自動的に <code>x</code> と <code>y</code> という 2 つの追加データをサーバーに送信します。 <a href=\"https://mdn.github.io/learning-area/html/forms/image-type-example/xy-coordinates-example.html\" class=\"external\" target=\"_blank\">X Y 座標の例</a>で、その様子を見ることができます。</p>\n<p>画像をクリックしてフォームを送信すると、 <code>?x=52&y=55</code> のようなデータが引数として URL に付加されるのがわかります。画像入力に <a href=\"/ja/docs/Web/HTML/Element/input#name\"><code>name</code></a> 属性がある場合、指定した名前はすべての属性の先頭に付くことに注意してください。したがって、<code>name</code> が <code>position</code> である場合、返される座標は URL で <code>?position.x=52&position.y=55</code> という書式となります。もちろん、これは他のすべての属性にも当てはまります。</p>\n<p>これらは、マウスでクリックしてフォームを送信した画像の X と Y の座標で、 (0,0) が画像の左上となり、画像のクリック以外で送信が発生した場合の既定値もこれになります。これらは、画像の中でクリックされた位置が重要である場合、例えば、地図がクリックされると、クリックされた座標がサーバーに送信されるような場合に利用することができます。サーバー側のコードは、クリックされた場所を特定し、その近くの場所についての情報を返します。</p>\n<p>上記の例では、サーバー側のコードで、送信された座標からどの色がクリックされたかを調べ、人々が投票した好きな色の集計を行うことができます。</p>"}},{"type":"prose","value":{"id":"画像の位置と拡大縮小アルゴリズムの調整","title":"画像の位置と拡大縮小アルゴリズムの調整","isH3":true,"content":"<p><a href=\"/ja/docs/Web/CSS/object-position\"><code>object-position</code></a> プロパティを使用すると、 <code><input></code> 要素の枠内での画像の位置を調整することができ、 <a href=\"/ja/docs/Web/CSS/object-fit\"><code>object-fit</code></a> プロパティは枠内に収める画像の大きさを調整する方法を制御することができます。これにより、 <code>width</code> と <code>height</code> 属性を用いて画像の枠を指定し、レイアウト内に空間を確保した上で、その空間内のどこに画像を配置し、その空間に合わせて画像を縮小する方法（または縮小するかどうか）を調整することができます。</p>"}},{"type":"prose","value":{"id":"例","title":"例","isH3":false,"content":""}},{"type":"prose","value":{"id":"ログインフォーム","title":"ログインフォーム","isH3":true,"content":"<p>次の例は、前と同じボタンを、典型的なログインフォームのコンテキストに含めて表示したものです。</p>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"A login form sample\" id=\"frame_a_login_form\" width=\"600\" height=\"170\" src=\"about:blank\" data-live-path=\"/ja/docs/Web/HTML/Element/input/image/\" data-live-id=\"a_login_form\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<h4 id=\"html\">HTML</h4>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><form>\n <p>アカウントにログインしてください</p>\n <div>\n <label for=\"userId\">User ID</label>\n <input type=\"text\" id=\"userId\" name=\"userId\" />\n </div>\n <div>\n <label for=\"pwd\">Password</label>\n <input type=\"password\" id=\"pwd\" name=\"pwd\" />\n </div>\n <div>\n <input\n id=\"image\"\n type=\"image\"\n src=\"https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png\"\n alt=\"Login\"\n width=\"100\" />\n </div>\n</form>\n</code></pre></div>\n<h4 id=\"css\">CSS</h4>\n<p>次に、基本的な要素をよりきれいに配置するための簡単な CSS です。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>div {\n margin-bottom: 10px;\n}\n\nlabel {\n display: inline-block;\n width: 70px;\n text-align: right;\n padding-right: 10px;\n}\n</code></pre></div>"}},{"type":"prose","value":{"id":"画像の位置と大きさの調整","title":"画像の位置と大きさの調整","isH3":true,"content":"<p>この例では、前の例を応用して画像のための空間を確保し、 <a href=\"/ja/docs/Web/CSS/object-fit\"><code>object-fit</code></a> と <a href=\"/ja/docs/Web/CSS/object-position\"><code>object-position</code></a> で実際の画像の大きさと位置を調整しています。</p>\n<h4 id=\"例_2\">例</h4>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Adjusting the image position and scaling sample\" id=\"frame_adjusting_the_image_position_and_scaling\" width=\"600\" height=\"300\" src=\"about:blank\" data-live-path=\"/ja/docs/Web/HTML/Element/input/image/\" data-live-id=\"adjusting_the_image_position_and_scaling\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<h4 id=\"html_2\">HTML</h4>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><form>\n <p>アカウントにログインしてください</p>\n <div>\n <label for=\"userId\">User ID</label>\n <input type=\"text\" id=\"userId\" name=\"userId\" />\n </div>\n <div>\n <label for=\"pwd\">Password</label>\n <input type=\"password\" id=\"pwd\" name=\"pwd\" />\n </div>\n <div>\n <input\n id=\"image\"\n type=\"image\"\n src=\"https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png\"\n alt=\"Login\"\n width=\"200\"\n height=\"100\" />\n </div>\n</form>\n</code></pre></div>\n<h4 id=\"css_2\">CSS</h4>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>div {\n margin-bottom: 10px;\n}\n\nlabel {\n display: inline-block;\n width: 70px;\n text-align: right;\n padding-right: 10px;\n}\n\n#image {\n object-position: right top;\n object-fit: contain;\n background-color: #ddd;\n}\n</code></pre></div>\n<p>ここでは、 <code>object-position</code> は画像を要素の右上隅に描画するように設定され、 <code>object-fit</code> は <code>contain</code> に設定されています。これは、画像の縦横比を変えずに要素のボックス内に収まる最大の大きさで描画することを意味しています。画像で覆われていない領域では、要素の灰色の背景がまだ見えていることに注意してください。</p>"}},{"type":"prose","value":{"id":"技術的概要","title":"技術的概要","isH3":false,"content":"<figure class=\"table-container\"><table class=\"properties\">\n <tbody>\n <tr>\n <td><strong><a href=\"#value\">値</a></strong></td>\n <td>なし — <code>value</code> 属性は指定しないでください。</td>\n </tr>\n <tr>\n <td><strong>イベント</strong></td>\n <td>なし</td>\n </tr>\n <tr>\n <td><strong>対応している共通属性</strong></td>\n <td>\n <a href=\"/ja/docs/Web/HTML/Element/input#alt\"><code>alt</code></a>,\n <a href=\"/ja/docs/Web/HTML/Element/input#src\"><code>src</code></a>,\n <a href=\"/ja/docs/Web/HTML/Element/input#width\"><code>width</code></a>,\n <a href=\"/ja/docs/Web/HTML/Element/input#height\"><code>height</code></a>,\n <a href=\"/ja/docs/Web/HTML/Element/input#formaction\"><code>formaction</code></a>,\n <a href=\"/ja/docs/Web/HTML/Element/input#formenctype\"><code>formenctype</code></a>,\n <a href=\"/ja/docs/Web/HTML/Element/input#formmethod\"><code>formmethod</code></a>,\n <a href=\"/ja/docs/Web/HTML/Element/input#formmethod\"><code>formnovalidate</code></a>,\n <a href=\"/ja/docs/Web/HTML/Element/input#formtarget\"><code>formtarget</code></a>\n </td>\n </tr>\n <tr>\n <td><strong>IDL 属性</strong></td>\n <td>なし</td>\n </tr>\n <tr>\n <td><strong>DOM インターフェイス</strong></td>\n <td><a href=\"/ja/docs/Web/API/HTMLInputElement\"><code>HTMLInputElement</code></a></td>\n </tr>\n <tr>\n <td><strong>メソッド</strong></td>\n <td>なし</td>\n </tr>\n <tr>\n <td><strong>暗黙の ARIA ロール</strong></td>\n <td><a href=\"/ja/docs/Web/Accessibility/ARIA/Roles/button_role\"><code>button</code></a></td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"specifications","value":{"id":"仕様書","title":"仕様書","isH3":false,"specifications":[{"bcdSpecificationURL":"https://html.spec.whatwg.org/multipage/input.html#image-button-state-(type=image)","title":"HTML"}],"query":"html.elements.input.type_image"}},{"type":"browser_compatibility","value":{"id":"ブラウザーの互換性","title":"ブラウザーの互換性","isH3":false,"query":"html.elements.input.type_image"}},{"type":"prose","value":{"id":"関連情報","title":"関連情報","isH3":false,"content":"<ul>\n<li><a href=\"/ja/docs/Web/HTML/Element/input\"><code><input></code></a> および実装している <a href=\"/ja/docs/Web/API/HTMLInputElement\"><code>HTMLInputElement</code></a> インターフェイス</li>\n<li>HTML の <a href=\"/ja/docs/Web/HTML/Element/img\"><code><img></code></a> 要素</li>\n<li><code><input></code> 要素の枠内における画像の位置と大きさの指定: <a href=\"/ja/docs/Web/CSS/object-position\"><code>object-position</code></a> および <a href=\"/ja/docs/Web/CSS/object-fit\"><code>object-fit</code></a></li>\n<li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms\">CSS プロパティの互換性</a></li>\n</ul>"}}],"isActive":true,"isMarkdown":true,"isTranslated":true,"locale":"ja","mdn_url":"/ja/docs/Web/HTML/Element/input/image","modified":"2024-04-08T11:42:56.000Z","native":"日本語","noIndexing":false,"other_translations":[{"locale":"en-US","title":"<input type=\"image\">","native":"English (US)"},{"locale":"de","title":"<input type=\"image\">","native":"Deutsch"},{"locale":"fr","title":"<input type=\"image\">","native":"Français"},{"locale":"ru","title":"<input type=\"image\">","native":"Русский"},{"locale":"zh-CN","title":"<input type=\"image\">","native":"中文 (简体)"}],"pageTitle":"<input type=\"image\"> - HTML: ハイパーテキストマークアップ言語 | MDN","parents":[{"uri":"/ja/docs/Web","title":"開発者向けのウェブ技術"},{"uri":"/ja/docs/Web/HTML","title":"HTML"},{"uri":"/ja/docs/Web/HTML/Element","title":"HTML 要素リファレンス"},{"uri":"/ja/docs/Web/HTML/Element/input","title":"<input>"},{"uri":"/ja/docs/Web/HTML/Element/input/image","title":"<input type=\"image\">"}],"popularity":null,"short_title":"<input type=\"image\">","sidebarHTML":"<ol><li class=\"section\"><a href=\"/ja/docs/Web/HTML\">HTML</a></li><li class=\"toggle\"><details><summary>チュートリアル</summary><ol><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content\">初めてのウェブサイト: コンテンツの作成</a></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content\">HTML によるコンテンツの構造化</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax\">基本的な HTML の構文</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata\">ヘッド部には何が入る? ウェブページのメタデータ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs\">HTML の見出しと段落</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance\">強調と重要性</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Lists\">リスト</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Structuring_documents\">文書とウェブサイトの構造</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features\">高度なテキスト装飾</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Creating_links\">リンクの作成</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter\">課題: 手紙のマークアップ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content\">課題: コンテンツのページの構造化</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/HTML_images\">HTML の画像</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio\">動画と音声のコンテンツ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page\">Mozilla のスプラッシュページ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics\">HTML の表の基本</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Table_accessibility\">HTML 表のアクセシビリティ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Planet_data_table\">課題: 惑星データの構造化</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/HTML_forms\">HTML におけるフォームとボタン</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML\">HTML のデバッグ</a></li></ol></details></li></ol></details></li><li class=\"toggle\"><details><summary>ガイド</summary><ol><li><a href=\"/ja/docs/Web/HTML/Content_categories\">コンテンツカテゴリー</a></li><li><a href=\"/ja/docs/Glossary/Block-level_content\">ブロックレベル要素</a></li><li><a href=\"/ja/docs/Glossary/Inline-level_content\">インライン要素</a></li><li><a href=\"/ja/docs/Web/HTML/Quirks_Mode_and_Standards_Mode\">互換モードと標準モード</a></li><li><a href=\"/ja/docs/Web/HTML/Date_and_time_formats\">HTML で使用される日付と時刻の形式</a></li><li><a href=\"/ja/docs/Web/HTML/Constraint_validation\">制約検証</a></li><li><a href=\"/ja/docs/Web/HTML/Microdata\">Microdata</a></li><li><a href=\"/ja/docs/Web/HTML/microformats\">Microformats</a></li><li><a href=\"/ja/docs/Web/HTML/Viewport_meta_tag\">ビューポートメタタグ</a></li><li><a href=\"/ja/docs/Web/HTML/CORS_enabled_image\">別オリジンの画像とキャンバスを利用可能にする</a></li></ol></details></li><li class=\"section\"><a href=\"/ja/docs/Web/HTML/Reference\">リファレンス</a></li><li class=\"toggle\"><details><summary>HTML 要素</summary><ol><li><a href=\"/ja/docs/Web/HTML/Element/a\"><code><a></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/abbr\"><code><abbr></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/acronym\"><code><acronym></code></a><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">非推奨;</span>\n</abbr></li><li><a href=\"/ja/docs/Web/HTML/Element/address\"><code><address></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/area\"><code><area></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/article\"><code><article></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/aside\"><code><aside></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/audio\"><code><audio></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/b\"><code><b></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/base\"><code><base></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/bdi\"><code><bdi></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/bdo\"><code><bdo></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/big\"><code><big></code></a><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">非推奨;</span>\n</abbr></li><li><a href=\"/ja/docs/Web/HTML/Element/blockquote\"><code><blockquote></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/body\"><code><body></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/br\"><code><br></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/button\"><code><button></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/canvas\"><code><canvas></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/caption\"><code><caption></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/center\"><code><center></code></a><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">非推奨;</span>\n</abbr></li><li><a href=\"/ja/docs/Web/HTML/Element/cite\"><code><cite></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/code\"><code><code></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/col\"><code><col></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/colgroup\"><code><colgroup></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/data\"><code><data></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/datalist\"><code><datalist></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/dd\"><code><dd></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/del\"><code><del></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/details\"><code><details></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/dfn\"><code><dfn></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/dialog\"><code><dialog></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/dir\"><code><dir></code></a><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">非推奨;</span>\n</abbr></li><li><a href=\"/ja/docs/Web/HTML/Element/div\"><code><div></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/dl\"><code><dl></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/dt\"><code><dt></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/em\"><code><em></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/embed\"><code><embed></code></a></li><li><a href=\"/en-US/docs/Web/HTML/Element/fencedframe\" class=\"only-in-en-us\"><code><fencedframe></code></a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/ja/docs/Web/HTML/Element/fieldset\"><code><fieldset></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/figcaption\"><code><figcaption></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/figure\"><code><figure></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/font\"><code><font></code></a><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">非推奨;</span>\n</abbr></li><li><a href=\"/ja/docs/Web/HTML/Element/footer\"><code><footer></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/form\"><code><form></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/frame\"><code><frame></code></a><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">非推奨;</span>\n</abbr></li><li><a href=\"/ja/docs/Web/HTML/Element/frameset\"><code><frameset></code></a><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">非推奨;</span>\n</abbr></li><li><a href=\"/ja/docs/Web/HTML/Element/Heading_Elements\"><code><h1></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/head\"><code><head></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/header\"><code><header></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/hgroup\"><code><hgroup></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/hr\"><code><hr></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/html\"><code><html></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/i\"><code><i></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/iframe\"><code><iframe></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/img\"><code><img></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/input\"><code><input></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/ins\"><code><ins></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/kbd\"><code><kbd></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/label\"><code><label></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/legend\"><code><legend></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/li\"><code><li></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/link\"><code><link></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/main\"><code><main></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/map\"><code><map></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/mark\"><code><mark></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/marquee\"><code><marquee></code></a><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">非推奨;</span>\n</abbr></li><li><a href=\"/ja/docs/Web/HTML/Element/menu\"><code><menu></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/meta\"><code><meta></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/meter\"><code><meter></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/nav\"><code><nav></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/nobr\"><code><nobr></code></a><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">非推奨;</span>\n</abbr></li><li><a href=\"/ja/docs/Web/HTML/Element/noembed\"><code><noembed></code></a><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">非推奨;</span>\n</abbr></li><li><a href=\"/ja/docs/Web/HTML/Element/noframes\"><code><noframes></code></a><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">非推奨;</span>\n</abbr></li><li><a href=\"/ja/docs/Web/HTML/Element/noscript\"><code><noscript></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/object\"><code><object></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/ol\"><code><ol></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/optgroup\"><code><optgroup></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/option\"><code><option></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/output\"><code><output></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/p\"><code><p></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/param\"><code><param></code></a><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">非推奨;</span>\n</abbr></li><li><a href=\"/ja/docs/Web/HTML/Element/picture\"><code><picture></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/plaintext\"><code><plaintext></code></a><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">非推奨;</span>\n</abbr></li><li><a href=\"/ja/docs/Web/HTML/Element/pre\"><code><pre></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/progress\"><code><progress></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/q\"><code><q></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/rb\"><code><rb></code></a><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">非推奨;</span>\n</abbr></li><li><a href=\"/ja/docs/Web/HTML/Element/rp\"><code><rp></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/rt\"><code><rt></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/rtc\"><code><rtc></code></a><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">非推奨;</span>\n</abbr></li><li><a href=\"/ja/docs/Web/HTML/Element/ruby\"><code><ruby></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/s\"><code><s></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/samp\"><code><samp></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/script\"><code><script></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/search\"><code><search></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/section\"><code><section></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/select\"><code><select></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/slot\"><code><slot></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/small\"><code><small></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/source\"><code><source></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/span\"><code><span></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/strike\"><code><strike></code></a><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">非推奨;</span>\n</abbr></li><li><a href=\"/ja/docs/Web/HTML/Element/strong\"><code><strong></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/style\"><code><style></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/sub\"><code><sub></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/summary\"><code><summary></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/sup\"><code><sup></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/table\"><code><table></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/tbody\"><code><tbody></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/td\"><code><td></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/template\"><code><template></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/textarea\"><code><textarea></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/tfoot\"><code><tfoot></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/th\"><code><th></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/thead\"><code><thead></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/time\"><code><time></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/title\"><code><title></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/tr\"><code><tr></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/track\"><code><track></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/tt\"><code><tt></code></a><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">非推奨;</span>\n</abbr></li><li><a href=\"/ja/docs/Web/HTML/Element/u\"><code><u></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/ul\"><code><ul></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/var\"><code><var></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/video\"><code><video></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/wbr\"><code><wbr></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/xmp\"><code><xmp></code></a><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">非推奨;</span>\n</abbr></li></ol></details></li><li class=\"toggle\"><details><summary>グローバル属性</summary><ol><li><a href=\"/ja/docs/Web/HTML/Global_attributes/accesskey\"><code>accesskey</code></a></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/anchor\"><code>anchor</code></a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">非標準</span>\n</abbr></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/autocapitalize\"><code>autocapitalize</code></a></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/autocorrect\"><code>autocorrect</code></a></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/autofocus\"><code>autofocus</code></a></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/class\"><code>class</code></a></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/contenteditable\"><code>contenteditable</code></a></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/data-*\"><code>data-*</code></a></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/dir\"><code>dir</code></a></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/draggable\"><code>draggable</code></a></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/enterkeyhint\"><code>enterkeyhint</code></a></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/exportparts\"><code>exportparts</code></a></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/hidden\"><code>hidden</code></a></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/id\"><code>id</code></a></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/inert\"><code>inert</code></a></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/inputmode\"><code>inputmode</code></a></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/is\"><code>is</code></a></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/itemid\"><code>itemid</code></a></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/itemprop\"><code>itemprop</code></a></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/itemref\"><code>itemref</code></a></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/itemscope\"><code>itemscope</code></a></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/itemtype\"><code>itemtype</code></a></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/lang\"><code>lang</code></a></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/nonce\"><code>nonce</code></a></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/part\"><code>part</code></a></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/popover\"><code>popover</code></a></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/slot\"><code>slot</code></a></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/spellcheck\"><code>spellcheck</code></a></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/style\"><code>style</code></a></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/tabindex\"><code>tabindex</code></a></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/title\"><code>title</code></a></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/translate\"><code>translate</code></a></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/virtualkeyboardpolicy\"><code>virtualkeyboardpolicy</code></a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/ja/docs/Web/HTML/Global_attributes/writingsuggestions\"><code>writingsuggestions</code></a></li></ol></details></li><li class=\"toggle\"><details><summary>属性</summary><ol><li><a href=\"/ja/docs/Web/HTML/Attributes/accept\">HTML 属性: accept</a></li><li><a href=\"/ja/docs/Web/HTML/Attributes/autocomplete\">autocomplete</a></li><li><a href=\"/ja/docs/Web/HTML/Attributes/capture\">HTML 属性: capture</a></li><li><a href=\"/ja/docs/Web/HTML/Attributes/crossorigin\">HTML 属性: crossorigin</a></li><li><a href=\"/ja/docs/Web/HTML/Attributes/dirname\">HTML 属性: dirname</a></li><li><a href=\"/ja/docs/Web/HTML/Attributes/disabled\">HTML 属性: disabled</a></li><li><a href=\"/ja/docs/Web/HTML/Attributes/elementtiming\">HTML 属性: elementtiming</a></li><li><a href=\"/ja/docs/Web/HTML/Attributes/for\">HTML 属性: for</a></li><li><a href=\"/ja/docs/Web/HTML/Attributes/max\">max</a></li><li><a href=\"/ja/docs/Web/HTML/Attributes/maxlength\">maxlength</a></li><li><a href=\"/ja/docs/Web/HTML/Attributes/min\">min</a></li><li><a href=\"/ja/docs/Web/HTML/Attributes/minlength\">minlength</a></li><li><a href=\"/ja/docs/Web/HTML/Attributes/multiple\">multiple</a></li><li><a href=\"/ja/docs/Web/HTML/Attributes/pattern\">pattern</a></li><li><a href=\"/ja/docs/Web/HTML/Attributes/placeholder\">HTML 属性: placeholder</a></li><li><a href=\"/ja/docs/Web/HTML/Attributes/readonly\">HTML 属性: readonly</a></li><li><a href=\"/ja/docs/Web/HTML/Attributes/rel\">rel</a></li><li><a href=\"/ja/docs/Web/HTML/Attributes/required\">required</a></li><li><a href=\"/ja/docs/Web/HTML/Attributes/size\">HTML 属性: size</a></li><li><a href=\"/ja/docs/Web/HTML/Attributes/step\">step</a></li></ol></details></li><li class=\"toggle\"><details open=\"\"><summary><code><input></code> 型</summary><ol><li><a href=\"/ja/docs/Web/HTML/Element/input/button\"><code><input type=\"button\"></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/input/checkbox\"><code><input type=\"checkbox\"></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/input/color\"><code><input type=\"color\"></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/input/date\"><code><input type=\"date\"></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/input/datetime-local\"><code><input type=\"datetime-local\"></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/input/email\"><code><input type=\"email\"></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/input/file\"><code><input type=\"file\"></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/input/hidden\"><code><input type=\"hidden\"></code></a></li><li><em><a href=\"/ja/docs/Web/HTML/Element/input/image\" aria-current=\"page\"><code><input type=\"image\"></code></a></em></li><li><a href=\"/ja/docs/Web/HTML/Element/input/month\"><code><input type=\"month\"></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/input/number\"><code><input type=\"number\"></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/input/password\"><code><input type=\"password\"></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/input/radio\"><code><input type=\"radio\"></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/input/range\"><code><input type=\"range\"></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/input/reset\"><code><input type=\"reset\"></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/input/search\"><code><input type=\"search\"></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/input/submit\"><code><input type=\"submit\"></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/input/tel\"><code><input type=\"tel\"></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/input/text\"><code><input type=\"text\"></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/input/time\"><code><input type=\"time\"></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/input/url\"><code><input type=\"url\"></code></a></li><li><a href=\"/ja/docs/Web/HTML/Element/input/week\"><code><input type=\"week\"></code></a></li></ol></details></li></ol>","source":{"folder":"ja/web/html/element/input/image","github_url":"https://github.com/mdn/translated-content/blob/main/files/ja/web/html/element/input/image/index.md","last_commit_url":"https://github.com/mdn/translated-content/commit/c74b283fb213fbc30661bff8beaaf53c0a7715a2","filename":"index.md"},"summary":"<input> 要素の image 型は、テキストではなく画像の形をとる送信ボタン、すなわちテキストではなく画像の形をとる送信ボタンを作成するために使用されます。","title":"<input type=\"image\">","toc":[{"text":"試してみましょう","id":"試してみましょう"},{"text":"値","id":"値"},{"text":"追加の属性","id":"追加の属性"},{"text":"廃止された属性","id":"廃止された属性"},{"text":"image 入力の使用","id":"image_入力の使用"},{"text":"例","id":"例"},{"text":"技術的概要","id":"技術的概要"},{"text":"仕様書","id":"仕様書"},{"text":"ブラウザーの互換性","id":"ブラウザーの互換性"},{"text":"関連情報","id":"関連情報"}],"baseline":{"baseline":"high","baseline_low_date":"2015-07-29","baseline_high_date":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}},"browserCompat":["html.elements.input.type_image"],"pageType":"html-element"}}</script></body></html>