diff options
Diffstat (limited to 'files/ja/web/html/element/input/image/index.html')
| -rw-r--r-- | files/ja/web/html/element/input/image/index.html | 414 |
1 files changed, 414 insertions, 0 deletions
diff --git a/files/ja/web/html/element/input/image/index.html b/files/ja/web/html/element/input/image/index.html new file mode 100644 index 0000000000..368a73b960 --- /dev/null +++ b/files/ja/web/html/element/input/image/index.html @@ -0,0 +1,414 @@ +--- +title: <input type="image"> +slug: Web/HTML/Element/input/image +tags: + - Element + - Form Image + - Form Image Button + - Forms + - HTML + - HTML Image Button + - HTML forms + - Image Button + - Input + - Input Type + - Number + - Reference +translation_of: Web/HTML/Element/input/image +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>image</code></strong> 型は、テキストではなく画像の形をとる送信ボタン、すなわち送信ボタンを作成するために使用されます。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-image.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value", "値")}}</strong></td> + <td>なし — <code>value</code> 属性は指定しないでください。</td> + </tr> + <tr> + <td><strong>イベント</strong></td> + <td>なし</td> + </tr> + <tr> + <td><strong>対応している共通属性</strong></td> + <td>{{htmlattrxref("alt", "input")}}, {{htmlattrxref("src", "input")}}, {{htmlattrxref("width", "input")}}, {{htmlattrxref("height", "input")}}, {{htmlattrxref("formaction", "input")}}, {{htmlattrxref("formenctype", "input")}}, {{htmlattrxref("formmethod", "input")}}, {{htmlattrxref("formnovalidate", "input")}}, {{htmlattrxref("formtarget", "input")}}</td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td>なし</td> + </tr> + <tr> + <td><strong>メソッド</strong></td> + <td>なし</td> + </tr> + </tbody> +</table> + +<h2 id="Value" name="Value">値</h2> + +<p><code><input type="image"></code> 要素は <code>value</code> 属性を受け付けません。表示する画像へのパスを <code>src</code> 属性で指定します。</p> + +<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2> + +<p>すべての {{HTMLElement("input")}} 型で共通する属性に加え、 <code>image</code> 型の入力欄は次の属性にも対応しています。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("alt")}}</code></td> + <td>画像が表示できない場合に表示する代替文字列</td> + </tr> + <tr> + <td><code>{{anch("formaction")}}</code></td> + <td>データの送信先の URL</td> + </tr> + <tr> + <td><code>{{anch("formenctype")}}</code></td> + <td>フォームデータを送信する際に使用するエンコーディング方法</td> + </tr> + <tr> + <td><code>{{anch("formmethod")}}</code></td> + <td>フォームを送信する際に使用する HTTP メソッド</td> + </tr> + <tr> + <td><code>{{anch("formnovalidate")}}</code></td> + <td>論理属性で、存在する場合、送信前にフォームを検証しないことを示す</td> + </tr> + <tr> + <td><code>{{anch("formtarget")}}</code></td> + <td>フォームの送信結果を読み込む閲覧コンテキストを示す文字列</td> + </tr> + <tr> + <td><code>{{anch("height")}}</code></td> + <td>画像を描画する CSS ピクセル単位の高さ</td> + </tr> + <tr> + <td><code>{{anch("src")}}</code></td> + <td>画像の読み込み元の URL</td> + </tr> + <tr> + <td><code>{{anch("width")}}</code></td> + <td>画像を描画する CSS ピクセル単位の幅</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefalt">{{htmlattrdef("alt")}}</h3> + +<p><code>alt</code> 属性は、画像が表示できない場合のボタンのラベルとして使用される代替文字列を提供します (エラーの場合、{{Glossary("user agent", "ユーザーエージェント")}}が画像を表示できない場合、画像を表示しないように設定されていた場合、ユーザーが読み上げ端末を使用している場合など)。提供する場合は、ボタンのラベルとして適切な空ではない文字列である必要があります。</p> + +<p>例えば、「今すぐログイン」をアイコンやテキストが入った画像を表示するグラフィックボタンの場合、 <code>alt</code> 属性も <code>今すぐログイン</code> のように設定してください。</p> + +<div class="note"> +<p><strong>重要:</strong> <code>alt</code> 属性は技術的には省略可能ですが、コンテンツの利用性を最大化するために常に設定してください。</p> +</div> + +<p><code><input type="image"></code> の <code>alt</code> 属性は、機能的には {{HTMLElement("img")}} 要素における {{htmlattrdef("alt", "img")}} 属性と同様に動作します。</p> + +<h3 id="htmlattrdefformaction">{{htmlattrdef("formaction")}}</h3> + +<p>文字列で、データの送信先の URL を示します。これはこの {{HTMLElement("input")}} が属する {{HTMLElement("form")}} 要素の {{htmlattrxref("action", "form")}} 属性より優先します。</p> + +<p>この属性は <code><a href="/ja/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> および {{HTMLElement("button")}} 要素でも使用できます。</p> + +<h3 id="htmlattrdefformenctype">{{htmlattrdef("formenctype")}}</h3> + +<p>文字列で、フォームのデータをサーバーに送信する際に使われるエンコーディング方法を識別します。許されている値は3つです。</p> + +<dl> + <dt><code>application/x-www-form-urlencoded</code></dt> + <dd>これは既定値で、フォームのデータを {{jsxref("encodeURI", "encodeURI()")}} などのアルゴリズムを使って URL エンコーディングした後で送信します。</dd> + <dt><code>multipart/form-data</code></dt> + <dd>データを管理するために {{domxref("FormData")}} API を使用し、複数のファイルをサーバーに送信することができます。フォームに {{HTMLElement("input")}} 要素の {{htmlattrxref("type", "input")}}<code>=file</code> (<code><a href="/ja/docs/Web/HTML/Element/input/file"><input type="file"></a></code>) が含まれている場合は、このエンコーディング型を<em>使わなければなりません</em>。</dd> + <dt><code>text/plain</code></dt> + <dd>プレーンテキストです。ほとんどデバッグでしか役に立ちませんが、送信されたデータを簡単に見ることができます。</dd> +</dl> + +<p><code>formenctype</code> 属性が指定された場合、所属するフォームの {{htmlattrxref("action", "form")}} 属性を上書きします。</p> + +<p>この属性は <code><a href="/ja/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> および {{HTMLElement("button")}} 要素でも使用できます。</p> + +<h3 id="htmlattrdefformmethod">{{htmlattrdef("formmethod")}}</h3> + +<p>文字列で、フォームのデータを送信するときに使用する HTTP メソッドを示します。この値は所有者であるフォームの {{htmlattrxref("method", "form")}} を上書きします。許されている値は次の通りです。</p> + +<dl> + <dt><code>get</code></dt> + <dd>A URL is constructed by starting with the URL given by the <code>formaction</code> or {{htmlattrxref("action", "form")}} attribute, appending a question mark ("?") character, then appending the form's data, encoded as described by <code>formenctype</code> or the form's {{htmlattrxref("enctype", "form")}} attribute. This URL is then sent to the server using an HTTP {{HTTPMethod("get")}} request. This method works well for simple forms that contain only ASCII characters and have no side effects. This is the default value.</dd> + <dt><code>post</code></dt> + <dd>The form's data is included in the body of the request that is sent to the URL given by the <code>formaction</code> or {{htmlattrxref("action", "form")}} attribute using an HTTP {{HTTPMethod("post")}} request. This method supports complex data and file attachments.</dd> + <dt><code>dialog</code></dt> + <dd>This method is used to indicate that the button simply closes the dialog with which the input is associated, and does not transmit the form data at all.</dd> +</dl> + +<p>この属性は <code><a href="/ja/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> および {{HTMLElement("button")}} 要素でも使用できます。</p> + +<h3 id="htmlattrdefformnovalidate">{{htmlattrdef("formnovalidate")}}</h3> + +<p>A Boolean attribute which, if present, specifies that the form should not be validated before submission to the server. This overrides the value of the {{htmlattrxref("novalidate", "form")}} attribute on the element's owning form.</p> + +<p>この属性は <code><a href="/ja/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> および {{HTMLElement("button")}} 要素でも使用できます。</p> + +<h3 id="htmlattrdefformtarget">{{htmlattrdef("formtarget")}}</h3> + +<p>A string which specifies a name or keyword that indicates where to display the response received after submitting the form. The string must be the name of a <strong>browsing context</strong> (that is, a tab, window, or {{HTMLElement("iframe")}}. A value specified here overrides any target given by the {{htmlattrxref("target", "form")}} attribute on the {{HTMLElement("form")}} that owns this input.</p> + +<p>In addition to the actual names of tabs, windows, or inline frames, there are a few special keywords that can be used:</p> + +<dl> + <dt><code>_self</code></dt> + <dd>Loads the response into the same browsing context as the one that contains the form. This will replace the current document with the received data. This is the default value used if none is specified.</dd> + <dt><code>_blank</code></dt> + <dd>Loads the response into a new, unnamed, browsing context. This is typically a new tab in the same window as the current document, but may differ depending on the configuration of the {{Glossary("user agent")}}.</dd> + <dt><code>_parent</code></dt> + <dd>Loads the response into the parent browsing context of the current one. If there is no parent context, this behaves the same as <code>_self</code>.</dd> + <dt><code>_top</code></dt> + <dd>Loads the response into the top-level browsing context; this is the browsing context that is the topmost ancestor of the current context. If the current context is the topmost context, this behaves the same as <code>_self</code>.</dd> +</dl> + +<p>この属性は <code><a href="/ja/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> および {{HTMLElement("button")}} 要素でも使用できます。</p> + +<h3 id="htmlattrdefheight">{{htmlattrdef("height")}}</h3> + +<p>A number specifying the height, in CSS pixels, at which to draw the image specified by the <code>src</code> attribute.</p> + +<h3 id="htmlattrdefsrc">{{htmlattrdef("src")}}</h3> + +<p>A string specifying the URL of the image file to display to represent the graphical submit button. When the user interacts with the image, the input is handled like any other button input.</p> + +<h3 id="htmlattrdefwidth">{{htmlattrdef("width")}}</h3> + +<p>A number indicating the width at which to draw the image, in CSS pixels.</p> + +<h2 id="Obsolete_attributes" name="Obsolete_attributes">廃止された属性</h2> + +<p>The following attribute was defined by HTML 4 for <code>image</code> inputs, but was not implemented by all browsers and has since been deprecated:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("usemap")}}</code></td> + <td>The name of an image map ({{HTMLElement("map")}}) element to use with the image; this is obsolete. Use the {{HTMLElement("img")}} element to create image maps instead</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefusemap">{{htmlattrdef("usemap")}}</h3> + +<p>If <code>usemap</code> is specified, it must be the name of an image map element, {{HTMLElement("map")}}, that defines an image map to use with the image. This usage is obsolete; you should switch to using the {{HTMLElement("img")}} element when you want to use image maps.</p> + +<h2 id="Using_image_inputs" name="Using_image_inputs">image 入力の使用</h2> + +<p>The <code><input type="image"></code> element is a <a href="/ja/docs/Web/CSS/Replaced_element">replaced element</a> (an element whose content isn't generated or directly managed by the CSS layer), behaving in much the same way as a regular {{htmlelement("img")}} element, but with the capabilities of a <a href="/ja/docs/Web/HTML/Element/input/submit">submit button</a>.</p> + +<h3 id="Essential_image_input_features" name="Essential_image_input_features">基本的な input 入力の機能</h3> + +<p>Let's look at a basic example that includes all the essential features you'd need to use (These work exactly the same as they do on the <code><img></code> element.):</p> + +<pre class="brush: html notranslate"><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"></pre> + +<p>{{ EmbedLiveSample('Essential_image_input_features', 600, 50) }}</p> + +<ul> + <li>The {{htmlattrxref("src", "input")}} attribute is used to specify the path to the image you want to display in the button.</li> + <li>The {{htmlattrxref("alt", "input")}} attribute provides alt text for the image, so screen reader users can get a better idea of what the button is used for. It will also display if the image can't be shown for any reason (for example if the path is misspelled). If possible, use text which matches the label you'd use if you were using a standard submit button.</li> + <li>The {{htmlattrxref("width", "input")}} and {{htmlattrxref("height", "input")}} attributes are used to specify the width and height the image should be shown at, in pixels. The button is the same size as the image; if you need the button's hit area to be bigger than the image, you will need to use CSS (e.g. {{cssxref("padding")}}). Also, if you specify only one dimension, the other is automatically adjusted so that the image maintains its original aspect ratio.</li> +</ul> + +<h3 id="Overriding_default_form_behaviors" name="Overriding_default_form_behaviors">既定のフォームの動作の上書き</h3> + +<p><code><input type="image"></code> elements — like regular <a href="/ja/docs/Web/HTML/Element/input/submit">submit buttons</a> — can accept a number of attributes that override the default form behavior:</p> + +<dl> + <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}}</dt> + <dd>The URI of a program that processes the information submitted by the input element; overrides the {{htmlattrxref("action","form")}} attribute of the element's form owner.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}}</dt> + <dd>Specifies the type of content that is used to submit the form to the server. Possible values are: + <ul> + <li><code>application/x-www-form-urlencoded</code>: The default value if the attribute is not specified.</li> + <li><code>text/plain</code>.</li> + </ul> + + <p>If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.</p> + </dd> + <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}}</dt> + <dd>Specifies the HTTP method that the browser uses to submit the form. Possible values are: + <ul> + <li><code>post</code>: The data from the form is included in the body of the form and is sent to the server.</li> + <li><code>get</code>: The data from the form is appended to the <code><strong>form</strong></code> attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.</li> + </ul> + + <p>If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.</p> + </dd> + <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}}</dt> + <dd>A Boolean attribute specifying that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner.</dd> + <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}}</dt> + <dd>A name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a <em>browsing context</em> (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the element's form owner. The following keywords have special meanings: + <ul> + <li>_<code>self</code>: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.</li> + <li><code>_blank</code>: Load the response into a new unnamed browsing context.</li> + <li><code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li> + <li><code>_top</code>: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same as <code>_self</code>.</li> + </ul> + </dd> +</dl> + +<h3 id="Using_the_x_and_y_data_points">Using the x and y data points</h3> + +<p>When you submit a form using a button created with <code><input type="image"></code>, two extra data points are submitted to the server automatically by the browser — <code>x</code> and <code>y</code>. You can see this in action in our <a href="https://mdn.github.io/learning-area/html/forms/image-type-example/xy-coordinates-example.html">X Y coordinates example</a>.</p> + +<p>When you click on the image to submit the form, you'll see the data appended to the URL as parameters, for example <code>?x=52&y=55</code>. If the image input has a {{htmlattrxref("name", "input")}} attribute, then keep in mind that the specified name is prefixed on every attribute, so if the <code>name</code> is <code>position</code>, then the returned coordinates would be formatted in the URL as <code>?position.x=52&position.y=55</code>. This, of course, applies to all other attributes as well.</p> + +<p>These are the X and Y coordinates of the image that the mouse clicked on to submit the form, where (0,0) is the top-left of the image. These can be used when the position the image was clicked on is significant, for example you might have a map that when clicked, sends the coordinates that were clicked to the server. The server-side code then works out what location was clicked on, and returns information about places nearby.</p> + +<p>In our above example, we could write server-side code that works out what color was clicked on by the coordinates submitted, and keeps a tally of the favorite colors people voted for.</p> + +<h3 id="Adjusting_the_images_position_and_scaling_algorithm">Adjusting the image's position and scaling algorithm</h3> + +<p>You can use the {{cssxref("object-position")}} property to adjust the positioning of the image within the <code><input></code> element's frame, and the {{cssxref("object-fit")}} property to control how the image's size is adjusted to fit within the frame. This allows you to specify a frame for the image using the <code>width</code> and <code>height</code> attributes to set aside space in the layout, then adjust where within that space the image is located and how (or if) it is scaled to occupy that space.</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="A_login_form">A login form</h3> + +<p>The following example shows the same button as before, but included in the context of a typical login form.</p> + +<p>{{ EmbedLiveSample('A_login_form', 600, 170) }}</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><form> + <p>Login to your account</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></pre> + +<h4 id="CSS">CSS</h4> + +<p>And now some simple CSS to make the basic elements sit more neatly:</p> + +<pre class="brush: css notranslate">div { + margin-bottom: 10px; +} + +label { + display: inline-block; + width: 70px; + text-align: right; + padding-right: 10px; +}</pre> + +<h3 id="Adjusting_the_image_position_and_scaling">Adjusting the image position and scaling</h3> + +<p>In this example, we adapt the previous example to set aside more space for the image and then adjust the actual image's size and positioning using {{cssxref("object-fit")}} and {{cssxref("object-position")}}.</p> + +<p>{{EmbedLiveSample("Adjusting_the_image_position_and_scaling", 600, 300)}}</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><form> + <p>Login to your account</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></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">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; +} +</pre> + +<p>Here, <code>object-position</code> is configured to draw the image at the top-right corner of the element, while <code>object-fit</code> is set to <code>contain</code>, which indicates that the image should be drawn at the largest size that will fit within the element's box without altering its aspect ratio. Note the visible grey background of the element still visible in the area not covered by the image.</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#image-button-state-(type=image)', '<input type="image">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#image-button-state-%28type=image%29', '<input type="image">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.input.input-image")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface which implements it.</li> + <li>Positioning and sizing the image within the <code><input></code> element's frame: {{cssxref("object-position")}} and {{cssxref("object-fit")}}</li> + <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li> +</ul> |