initial commit

8 files changed, 1066 insertions, 0 deletions

diff --git a/files/ja/web/api/htmlinputelement/index.html b/files/ja/web/api/htmlinputelement/index.html
new file mode 100644
index 0000000000..f9fe5bf72b
--- /dev/null
+++ b/files/ja/web/api/htmlinputelement/index.html
@@ -0,0 +1,428 @@
+---
+title: HTMLInputElement
+slug: Web/API/HTMLInputElement
+tags:
+  - API
+  - DOM
+  - HTML DOM
+  - HTMLInputElement
+  - Input
+  - Interface
+  - NeedsContent
+  - NeedsMarkupWork
+  - Reference
+translation_of: Web/API/HTMLInputElement
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><strong><code>HTMLInputElement</code></strong> インターフェイスは {{HtmlElement("input")}} 要素のオプション、レイアウト、表示を操作するための特別なプロパティやメソッドを提供します。</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Properties" name="Properties">プロパティ</h2>
+
+<table class="standard-table">
+ <caption>親フォームに関連するプロパティ</caption>
+ <thead>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>form </code>{{readonlyInline}}</td>
+   <td><em>{{domxref("HTMLFormElement")}} オブジェクト:</em> 親の {{HtmlElement("form")}} 要素の参照を<strong>返します</strong>。</td>
+  </tr>
+  <tr>
+   <td><code>formAction</code></td>
+   <td><em><code>string</code>:</em> その要素の {{ htmlattrxref("formaction", "input") }} 属性を<strong>返却または設定</strong>します。ここには要素によって送信された情報を処理するプログラムの URI が入ります。これは親フォームの {{ htmlattrxref("action", "form") }} 属性を上書きします。</td>
+  </tr>
+  <tr>
+   <td><code>formEncType</code></td>
+   <td><em><code>string</code>:</em> その要素の {{ htmlattrxref("formenctype", "input") }} 属性を<strong>返却または設定</strong>します。ここにはフォームをサーバーに送信する際のコンテンツの型が入ります。これは親フォームの {{ htmlattrxref("enctype", "form") }} 属性を上書きします。</td>
+  </tr>
+  <tr>
+   <td><code>formMethod</code></td>
+   <td><em><code>string</code>:</em> その要素の {{ htmlattrxref("formmethod", "input") }} 属性を<strong>返却または設定</strong>します。ここにはブラウザーがフォームを送信する際に用いる HTTP メソッドが入ります。これは親フォームの {{ htmlattrxref("method", "form") }} 属性を上書きします。</td>
+  </tr>
+  <tr>
+   <td><code>formNoValidate</code></td>
+   <td><em>{{jsxref("Boolean")}}:</em> その要素の {{ htmlattrxref("formnovalidate", "input") }} 属性を<strong>返却または設定</strong>します。これは送信時にそのフォームが検証されないかどうかを示します。これは親フォームの {{ htmlattrxref("novalidate", "form") }} 属性を上書きします。</td>
+  </tr>
+  <tr>
+   <td><code>formTarget</code></td>
+   <td><em><code>string</code>:</em> その要素の {{ htmlattrxref("formtarget", "input") }} 属性を<strong>返却または設定</strong>します。ここにはフォームを送信した後で受け取ったレスポンスを表示する場所を示す名前またはキーワードが入ります。これは親フォームの {{ htmlattrxref("target", "form") }} 属性を上書きします。</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>hidden 以外のあらゆる型の入力要素に適用されるプロパティ</caption>
+ <tbody>
+  <tr>
+   <td><code>name</code></td>
+   <td><em><code>string</code>:</em> その要素の {{ htmlattrxref("name", "input") }} 属性を<strong>返却または設定</strong>します。ここにはフォーム送信時にその要素を識別する名前が入ります。</td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td><em><code>string</code>:</em> その要素の {{ htmlattrxref("type", "input") }} 属性を<strong>返却または設定</strong>します。これは表示するコントロールの型を示します。利用可能な値については {{ HTMLElement("input") }} の {{ htmlattrxref("type", "input") }} 属性を参照してください。</td>
+  </tr>
+  <tr>
+   <td><code>disabled</code></td>
+   <td><em>{{jsxref("Boolean")}}:</em> その要素の {{ htmlattrxref("disabled", "input") }} 属性を<strong>返却または設定</strong>します。これはそのコントロールが対話を受け付けないかどうかを示します。その入力値はフォームとともに送信されません。 {{ htmlattrxref("readOnly", "input") }} もご覧ください。</td>
+  </tr>
+  <tr>
+   <td><code>autofocus</code></td>
+   <td><em>{{jsxref("Boolean")}}:</em> その要素の {{ htmlattrxref("autofocus", "input") }} 属性を<strong>返却または設定</strong>します。ページが読み込まれたときに、ユーザーが別のコントロールに入力するなどしてそれを上書きしない限り、そのフォームコントロールが入力フォーカスを持つべきであることを指定します。文書内の一つの form 要素だけが {{htmlattrxref("autofocus","input")}} 属性を持つことができます。 {{htmlattrxref("type","input")}} 属性が <code>hidden</code> に設定されている場合には適用できません (つまり、非表示のコントロールにフォーカスを自動的に設定することはできません)。</td>
+  </tr>
+  <tr>
+   <td><code>required</code></td>
+   <td><em>{{jsxref("Boolean")}}:</em> その要素の {{ htmlattrxref("required", "input") }} 属性を<strong>返却または設定</strong>します。これは、フォームを送信する前にユーザーが値を入力しなければならないかどうかを示します。</td>
+  </tr>
+  <tr>
+   <td><code>value</code></td>
+   <td><em><code>string</code>:</em> そのコントロールの現在の値を<strong>返却または設定</strong>します。
+    <p class="note"><strong>注:</strong> ユーザーが予期しない値を入力した場合、これは空文字列を返すことがあります。</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>validity</code> {{readonlyInline}}</td>
+   <td><em>{{domxref("ValidityState")}}<code> オブジェクト</code>:</em> その要素の現在の検証状態を<strong>返します</strong>。</td>
+  </tr>
+  <tr>
+   <td><code>validationMessage</code> {{readonlyInline}}</td>
+   <td><em><code>string</code>:</em> 制約検証をそのコントロールが満たさな買った場合、それを記述したローカライズされたメッセージを<strong>返します</strong> (もしあれば)。これは、コントロールが制約検証の候補ではない場合 ({{htmlattrxref("willValidate","input")}} が <code>false</code> の場合)、または制約を満たしている場合は空の文字列です。この値は、 <code>setCustomValidity</code> メソッドで設定できます。</td>
+  </tr>
+  <tr>
+   <td><code>willValidate</code> {{readonlyInline}}</td>
+   <td><em>{{jsxref("Boolean")}}:</em> その要素が制約検証の候補であるかどうかを<strong>返します</strong>。これは何か制約検証を阻む条件がある場合、例えば、 <code>type</code> が <code>hidden</code>, <code>reset</code>, <code>button</code> のいずれかである、祖先に {{HTMLElement("datalist")}} がある、 <code>disabled</code> プロパティが <code>true</code> である、などです。</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table" id="Properties_checkbox_radio">
+ <caption><code>checkbox</code> または <code>radio</code> 型の要素にのみに適用できるプロパティ</caption>
+ <tbody>
+  <tr>
+   <td><code>checked</code></td>
+   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the current state of the element when {{htmlattrxref("type","input")}} is <code>checkbox</code> or <code>radio</code>.</td>
+  </tr>
+  <tr>
+   <td><code>defaultChecked</code></td>
+   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the default state of a radio button or checkbox as originally specified in HTML that created this object.</td>
+  </tr>
+  <tr>
+   <td><code id="indeterminate">indeterminate</code></td>
+   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns</strong> whether the checkbox or radio button is in indeterminate state. For checkboxes, the effect is that the appearance of the checkbox is obscured/greyed in some way as to indicate its state is indeterminate (not checked but not unchecked). Does not affect the value of the <code>checked</code> attribute, and clicking the checkbox will set the value to false.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption><code>image</code> 型の要素のみに適用できるプロパティ</caption>
+ <tbody>
+  <tr>
+   <td><code>alt</code></td>
+   <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{ htmlattrxref("alt", "input") }} attribute, containing alternative text to use when {{htmlattrxref("type","input")}} is <code>image.</code></td>
+  </tr>
+  <tr>
+   <td><code>height</code></td>
+   <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{ htmlattrxref("height", "input") }} attribute, which defines the height of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is <code>image</code>.</td>
+  </tr>
+  <tr>
+   <td><code>src</code></td>
+   <td><code><em>string</em></code><em>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("src", "input") }} attribute, which specifies a URI for the location of an image to display on the graphical submit button, if the value of {{htmlattrxref("type","input")}} is <code>image</code>; otherwise it is ignored.</td>
+  </tr>
+  <tr>
+   <td><code>width</code></td>
+   <td><code><em>string</em></code><em>:</em> <strong>Returns / Sets</strong> the document's {{ htmlattrxref("width", "input") }} attribute, which defines the width of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is <code>image</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table" id="Properties_file">
+ <caption><code>file</code> 型の要素のみに適用できるプロパティ/caption&gt;</caption>
+ <tbody>
+  <tr>
+   <td><code>accept</code></td>
+   <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{ htmlattrxref("accept", "input") }} attribute, containing comma-separated list of file types accepted by the server when {{htmlattrxref("type","input")}} is <code>file</code>.</td>
+  </tr>
+  <tr>
+   <td><code>allowdirs</code> {{non-standard_inline}}</td>
+   <td><em>{{jsxref("Boolean")}}:</em> Part of the non-standard Directory Upload API; <strong>indicates</strong> whether or not to allow directories and files both to be selected in the file list. Implemented only in Firefox and is hidden behind a preference.</td>
+  </tr>
+  <tr>
+   <td><code id="files_prop">files</code></td>
+   <td><strong>Returns/accepts</strong> a {{domxref("FileList")}} object, which contains a list of {{domxref("File")}} objects representing the files selected for upload.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLInputElement.webkitdirectory", "webkitdirectory")}} {{Non-standard_inline}}</td>
+   <td><em>{{jsxref("Boolean")}}:</em><strong> Returns</strong> the {{htmlattrxref("webkitdirectory", "input")}} attribute; if true, the file system picker interface only accepts directories instead of files.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLInputElement.webkitEntries", "webkitEntries")}} {{Non-standard_inline}}</td>
+   <td><em>Array of {{domxref("FileSystemEntry")}} objects:</em> <strong>Describes</strong> the currently selected files or directories.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption><code>text/number</code> を含む型の要素のみに適用できるプロパティ</caption>
+ <tbody>
+  <tr>
+   <td><code>autocomplete</code></td>
+   <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{htmlattrxref("autocomplete", "input")}} attribute, indicating whether the value of the control can be automatically completed by the browser. Ignored if the value of the {{htmlattrxref("type","input")}} attribute is <code>hidden</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type (<code>button</code>, <code>submit</code>, <code>reset</code>, <code>image</code>). Possible values are:<br>
+    <code>on</code>: the browser can autocomplete the value using previously stored value<br>
+    <code>off</code>: the user must explicity enter a value</td>
+  </tr>
+  <tr>
+   <td><code>max</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("max", "input") }} attribute, containing the maximum (numeric or date-time) value for this item, which must not be less than its minimum ({{htmlattrxref("min","input")}} attribute) value.</td>
+  </tr>
+  <tr>
+   <td><code>maxLength</code></td>
+   <td><em><code>long</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("maxlength", "input") }} attribute, containing the <u><strong>maximum number of characters</strong></u> (in Unicode code points) that the value can have. (If you set this to a negative number, an exception will be thrown.)</td>
+  </tr>
+  <tr>
+   <td><code>min</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("min", "input") }} attribute, containing the minimum (numeric or date-time) value for this item, which must not be greater than its maximum ({{htmlattrxref("max","input")}} attribute) value.</td>
+  </tr>
+  <tr>
+   <td><code>minLength</code></td>
+   <td><em><code>long</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("minlength", "input") }} attribute, containing the <u><strong>minimum number of characters</strong></u> (in Unicode code points) that the value can have. (If you set this to a negative number, an exception will be thrown.)</td>
+  </tr>
+  <tr>
+   <td><code>pattern</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("pattern", "input") }} attribute, containing a <u><strong>regular expression</strong></u> that the control's value is checked against. Use the {{htmlattrxref("title","input")}} attribute to describe the pattern to help the user. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored.</td>
+  </tr>
+  <tr>
+   <td><code>placeholder</code></td>
+   <td><em><code>string</code>: </em><strong>Returns / Sets </strong>the element's {{ htmlattrxref("placeholder", "input") }} attribute, containing a hint to the user of what can be entered in the control. The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored.</td>
+  </tr>
+  <tr>
+   <td><code>readOnly</code></td>
+   <td><em><code>boolean</code>:</em><strong> Returns / Sets</strong> the element's {{ htmlattrxref("readonly", "input") }} attribute, indicating that the user cannot modify the value of the control.<br>
+    {{HTMLVersionInline(5)}}This is ignored if the value of the {{htmlattrxref("type","input")}} attribute is <code>hidden</code>, <code>range</code>, <code>color</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type.</td>
+  </tr>
+  <tr>
+   <td><code>selectionStart</code></td>
+   <td><em><code>unsigned long</code>:</em> 選択した文章の開始点を<strong>返却・設定</strong>する。何も選択していない場合，{{HTMLElement("input")}}要素内の文章入力カーソル（編集子）の位置を返す。</td>
+  </tr>
+  <tr>
+   <td><code>selectionEnd</code></td>
+   <td><em><code>unsigned long</code>:</em> <strong>Returns / Sets </strong>the end index of the selected text. When there's no selection, this returns the offset of the character immediately following the current text input cursor position.</td>
+  </tr>
+  <tr>
+   <td><code>selectionDirection</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the direction in which selection occurred. Possible values are:<br>
+    <code>forward</code> if selection was performed in the start-to-end direction of the current locale<br>
+    <code>backward</code> for the opposite direction<br>
+    <code>none</code> if the direction is unknown</td>
+  </tr>
+  <tr>
+   <td><code>size</code></td>
+   <td><em><code>unsigned long</code>:</em> <strong>Returns / Sets </strong>the element's {{ htmlattrxref("size", "input") }} attribute, containing <u><strong>visual size of the control</strong></u>. This value is in pixels unless the value of {{htmlattrxref("type","input")}} is <code>text</code> or <code>password</code>, in which case, it is an integer number of characters. Applies only when {{htmlattrxref("type","input")}} is set to <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, or <code>password</code>; otherwise it is ignored.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>未分類のプロパティ</caption>
+ <tbody>
+  <tr>
+   <td><code>defaultValue</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the default value as originally specified in the HTML that created this object.</td>
+  </tr>
+  <tr>
+   <td><code>dirName</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets </strong>the directionality of the element.</td>
+  </tr>
+  <tr>
+   <td><code>accessKey</code></td>
+   <td><em><code>string</code>: </em><strong>Returns</strong> a string containing a single character that switches input focus to the control when pressed.</td>
+  </tr>
+  <tr>
+   <td><code>list</code> {{readonlyInline}}</td>
+   <td><em>{{domxref("HTMLElement")}}<code> object</code>:</em> <strong>Returns</strong> the element pointed by the {{ htmlattrxref("list", "input") }} attribute. The property may be <code>null</code> if no HTML element found in the same tree.</td>
+  </tr>
+  <tr>
+   <td><code>multiple</code></td>
+   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("multiple", "input") }} attribute, indicating whether more than one value is possible (e.g., multiple files).</td>
+  </tr>
+  <tr>
+   <td><code>files</code></td>
+   <td><em>{{domxref("FileList")}}<code> array</code>:</em> <strong>Returns</strong> the list of selected files.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLInputElement.labels")}} {{readonlyInline}}</td>
+   <td><em>{{domxref("NodeList")}}<code> array</code>:</em> <strong>Returns</strong> a list of {{ HTMLElement("label") }} elements that are labels for this element.</td>
+  </tr>
+  <tr>
+   <td><code>step</code></td>
+   <td><code><em>string</em></code><em>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("step", "input") }} attribute, which works with<strong> </strong>{{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} to limit the increments at which a numeric or date-time value can be set. It can be the string <code>any</code> or a positive floating point number. If this is not set to <code>any</code>, the control accepts only values at multiples of the step value greater than the minimum.</td>
+  </tr>
+  <tr>
+   <td><code>valueAsDate</code></td>
+   <td><em>{{jsxref("Date")}}<code> object</code>:</em> <strong>Returns / Sets</strong> the value of the element, interpreted as a date, or <code>null</code> if conversion is not possible.</td>
+  </tr>
+  <tr>
+   <td><code>valueAsNumber</code></td>
+   <td><em><code>double</code>:</em> <strong>Returns</strong> the value of the element, interpreted as one of the following, in order:
+    <ul>
+     <li>A time value</li>
+     <li>A number</li>
+     <li><code>NaN</code> if conversion is impossible</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>autocapitalize</code> {{experimental_inline}}</td>
+   <td><code><em>string</em></code><em>:</em> <strong>Defines</strong> the capitalization behavior for user input. Valid values are <code>none</code>, <code>off</code>, <code>characters</code>, <code>words</code>, or <code>sentences</code>.</td>
+  </tr>
+  <tr>
+   <td><code>inputmode</code></td>
+   <td>Provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents.</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>{{domxref("HTMLInputElement.align")}} {{obsolete_inline}}</dt>
+ <dd><code><em>string</em></code><em>:</em> <strong>Represents</strong> the alignment of the element. <em>Use CSS instead.</em></dd>
+ <dt>{{domxref("HTMLInputElement.useMap")}} {{ obsolete_inline }}</dt>
+ <dd><code><em>string</em></code><em>:</em> <strong>Represents</strong> a client-side image map.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">メソッド</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>{{domxref("HTMLElement.blur()", "blur()")}}</td>
+   <td>Removes focus from the input element; keystrokes will subsequently go nowhere.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.click()", "click()")}}</td>
+   <td>Simulates a click on the input element.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.focus()", "focus()")}}</td>
+   <td>Focuses on the input element; keystrokes will subsequently go to this element.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLInputElement.select()", "select()")}}</td>
+   <td>Selects all the text in the input element, and focuses it so the user can subsequently replace all of its content.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLInputElement.setSelectionRange()", "setSelectionRange()")}}</td>
+   <td>Selects a range of text in the input element (but does not focus it).</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLInputElement.setRangeText()", "setRangeText()")}}</td>
+   <td>Replaces a range of text in the input element with new text.</td>
+  </tr>
+  <tr>
+   <td><code>setCustomValidity()</code></td>
+   <td>Sets a custom validity message for the element. If this message is not the empty string, then the element is suffering from a custom validity error, and does not validate.</td>
+  </tr>
+  <tr>
+   <td><code>checkValidity()</code></td>
+   <td>Returns a {{jsxref("Boolean")}} that is <code>false</code> if the element is a candidate for constraint validation, and it does not satisfy its constraints. In this case, it also fires an {{event("invalid")}} event at the element. It returns <code>true</code> if the element is not a candidate for constraint validation, or if it satisfies its constraints.</td>
+  </tr>
+  <tr>
+   <td><code>reportValidity()</code></td>
+   <td>Runs the <code>checkValidity()</code> method, and if it returns false (for an invalid input or no pattern attribute provided), then it reports to the user that the input is invalid in the same manner as if you submitted a form.</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>{{domxref("HTMLInputElement.stepDown()")}}</dt>
+ <dd>Decrements the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception:
+ <ul>
+  <li>if the method is not applicable to for the current {{htmlattrxref("type","input")}} value,</li>
+  <li>if the element has no {{htmlattrxref("step","input")}} value,</li>
+  <li>if the {{htmlattrxref("value","input")}} cannot be converted to a number,</li>
+  <li>if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}.</li>
+ </ul>
+ </dd>
+ <dt>{{domxref("HTMLInputElement.stepUp()")}}</dt>
+ <dd>Increments the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception:
+ <ul>
+  <li>if the method is not applicable to for the current {{htmlattrxref("type","input")}} value.,</li>
+  <li>if the element has no {{htmlattrxref("step","input")}} value,</li>
+  <li>if the {{htmlattrxref("value","input")}} cannot be converted to a number,</li>
+  <li>if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}.</li>
+ </ul>
+ </dd>
+ <dt>{{domxref("HTMLInputElement.mozSetFileArray()")}} {{non-standard_inline}}</dt>
+ <dd>Sets the files selected on the input to the given array of {{domxref("File")}} objects. This is an alternative to <code>mozSetFileNameArray()</code> which can be used in frame scripts: a chrome script can <a href="/ja/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">open files as File objects</a> and send them via <a href="/ja/Firefox/Multiprocess_Firefox/The_message_manager">message manager</a>.</dd>
+ <dt>{{domxref("HTMLInputElement.mozGetFileNameArray()")}} {{non-standard_inline}}</dt>
+ <dd>Returns an array of all the file names from the input.</dd>
+ <dt>{{domxref("HTMLInputElement.mozSetFileNameArray()")}} {{non-standard_inline}}</dt>
+ <dd>Sets the filenames for the files selected on the input. Not for use in <a href="/ja/Firefox/Multiprocess_Firefox/Limitations_of_frame_scripts">frame scripts</a>, because it accesses the file system.</dd>
+</dl>
+
+<h2 id="Events" name="Events">イベント</h2>
+
+<p>Listen to these events using <code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface:</p>
+
+<dl>
+ <dt><a href="/ja/docs/Web/API/HTMLElement/input_event"><code>input</code></a></dt>
+ <dd>Fires when the <code>value</code> of an {{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element has been changed. Note that this is actually fired on the {{domxref("HTMLElement")}} interface and also applies to <code><a href="/ja/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></code> elements, but we've listed it here because it is most commonly used with form input elements.<br>
+ Also available via the <code><a href="/ja/docs/Web/API/GlobalEventHandlers/oninput">oninput</a></code> event handler property.</dd>
+ <dt><code><a href="/ja/docs/Web/API/HTMLElement/invalid_event">invalid</a></code></dt>
+ <dd>Fired when an element does not satisfy its constraints during constraint validation.<br>
+ Also available via the <code><a href="/ja/docs/Web/API/GlobalEventHandlers/oninvalid">oninvalid</a></code> event handler property.</dd>
+ <dt><code><a href="/ja/docs/Web/API/HTMLInputElement/search_event">search</a></code></dt>
+ <dd>Fired when a search is initiated on an {{HTMLElement("input")}} of <code>type="search"</code>.<br>
+ Also available via the <code><a href="/ja/docs/Web/API/GlobalEventHandlers/onsearch">onsearch</a></code> event handler property.</dd>
+</dl>
+
+<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', "#htmlinputelement", "HTMLInputElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "forms.html#the-input-element", "HTMLInputElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>技術的には、<code>tabindex</code> プロパティと <code>accesskey</code> プロパティ、ならびに <code>blur()</code>、<code>click()</code>、および <code>focus()</code> メソッドは、現在 {{domxref("HTMLElement")}} で定義されています。<br>
+    次のプロパティは廃止されました: <code>align</code> および <code>useMap</code>。<br>
+    次のプロパティが追加されました: <code>autocomplete</code>, <code>autofocus</code>, <code>dirName</code>, <code>files</code>, <code>formAction</code>, <code>formEncType</code>, <code>formMethod</code>, <code>formNoValidate</code>, <code>formTarget</code>, <code>height</code>, <code>indeterminate</code>, <code>labels</code>, <code>list</code>, <code>max</code>, <code>min</code>, <code>multiple</code>, <code>pattern</code>, <code>placeholder</code>, <code>required</code>, <code>selectionDirection</code>, <code>selectionEnd</code>, <code>selectionStart</code>, <code>step</code>, <code>validationMessage</code>, <code>validity</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>, <code>width</code>, <code>willValidate</code>.<br>
+    次のメソッドが追加されました: <code>checkValidity()</code>, <code>setCustomValidity()</code>, <code>setSelectionRange()</code>, <code>stepUp()</code>, <code>stepDown()</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-6043025', 'HTMLInputElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td><code>size</code> プロパティは、<code>unsigned long</code> になりました。<code>type</code> プロパティはすべて小文字で指定する必要があります。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-6043025', 'HTMLInputElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+<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("api.HTMLInputElement")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>このインターフェイスを実装している HTML 要素: {{ HTMLElement("input") }}</li>
+</ul>
diff --git a/files/ja/web/api/htmlinputelement/invalid_event/index.html b/files/ja/web/api/htmlinputelement/invalid_event/index.html
new file mode 100644
index 0000000000..c0e7d95f60
--- /dev/null
+++ b/files/ja/web/api/htmlinputelement/invalid_event/index.html
@@ -0,0 +1,112 @@
+---
+title: 'HTMLInputElement: invalid イベント'
+slug: Web/API/HTMLInputElement/invalid_event
+tags:
+  - API
+  - Constraint Validation API
+  - Constraint validation
+  - Event
+  - Forms
+  - Reference
+  - invalid
+translation_of: Web/API/HTMLInputElement/invalid_event
+---
+<p>{{APIRef}}</p>
+
+<p><strong><code>invalid</code></strong> イベントは、送信可能な要素が制約の検証を受け、制約を満たしていない場合に発行されます。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">バブリング</th>
+   <td>なし</td>
+  </tr>
+  <tr>
+   <th scope="row">キャンセル</th>
+   <td>可</td>
+  </tr>
+  <tr>
+   <th scope="row">インターフェイス</th>
+   <td>{{DOMxRef("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">イベントハンドラープロパティ</th>
+   <td>{{domxref("GlobalEventHandlers.oninvalid")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>このイベントは、送信時にフォームの問題の概要を表示するのに便利です。フォームが送信されると、 <code>invalid</code> イベントがそれぞれの妥当ではない状態にあるフォームコントロールで発生します。送信可能な要素が妥当であるかどうかは、その所有者である {{HtmlElement("form")}} を送信する前、またはその要素またはその所有者である <code>&lt;form&gt;</code> の <a href="/ja/docs/HTML/Forms_in_HTML#Constraint_Validation_API"><code>checkValidity()</code></a> メソッドが呼び出された後にチェックされます。</p>
+
+<p>{{domxref("Element/blur_event", "blur")}} ではチェックが行われません。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>フォームが無効な値で送信された場合、送信可能な要素がチェックされ、エラーが見つかった場合、無効な要素で <code>invalid</code> イベントが発生します。この例では、入力に無効な値があったために <code>invalid</code> イベントが発生した場合、無効な値がログに記録されます。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;form action="#"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;label&gt;Enter an integer between 1 and 10: &lt;input type="number" min="1" max="10" required&gt;&lt;/label&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;input type="submit" value="submit"&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/form&gt;&lt;p id="log"&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">const input = document.querySelector('input')
+const log = document.getElementById('log')
+
+input.addEventListener('invalid', logValue)
+
+function logValue(e) {
+  log.textContent += e.target.value
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</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#the-constraint-validation-api', 'Invalid event') }}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5.1', 'sec-forms.html#the-constraint-validation-api', 'Invalid event') }}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', 'forms.html#the-constraint-validation-api', 'Invalid event') }}</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("api.HTMLInputElement.invalid_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>HTML の {{HtmlElement("form")}} element</li>
+ <li>関連イベント: {{domxref("HTMLFormElement/submit_event", "submit")}}</li>
+ <li>CSS の {{cssxref(":invalid")}} 擬似クラス</li>
+</ul>
diff --git a/files/ja/web/api/htmlinputelement/mozgetfilenamearray/index.html b/files/ja/web/api/htmlinputelement/mozgetfilenamearray/index.html
new file mode 100644
index 0000000000..4148d4abf4
--- /dev/null
+++ b/files/ja/web/api/htmlinputelement/mozgetfilenamearray/index.html
@@ -0,0 +1,47 @@
+---
+title: HTMLInputElement.mozGetFileNameArray()
+slug: Web/API/HTMLInputElement/mozGetFileNameArray
+translation_of: Web/API/HTMLInputElement/mozGetFileNameArray
+---
+<div>{{ APIRef("HTML DOM") }}{{Non-standard_header}}</div>
+
+<p><strong><code>HTMLInputElement.mozGetFileNameArray()</code></strong>メソッドはHTMLの<code>input</code>要素上でユーザーによって選択されたファイルの名前の配列を返します。</p>
+
+<div class="note"><strong>Note:</strong> このメソッドはGeckoに特有のものであり、他のブラウザでは利用できません。加えて、Webページで利用した場合にエラーが発生します。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">inputElement.mozGetFileNameArray(<em>aLength, aFileNames</em>);
+</pre>
+
+<h3 id="Parameters" name="Parameters">パラメーター</h3>
+
+<dl>
+ <dt><em>aLength</em></dt>
+ <dd>If specified, will receive the number of file names in the returned array.</dd>
+ <dt><em>aFileNames</em></dt>
+ <dd>Is an array into which the file names are placed.</dd>
+</dl>
+
+<ul>
+</ul>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush:js">var numFiles = 0;
+var fileArray = {};
+
+inputElement.mozGetFileNameArray(numFiles, fileArray);
+</pre>
+
+<h2 id="Specification" name="Specification">仕様</h2>
+
+<p>Mozillaに特有のメソッドであり、どの仕様にも書かれていません。</p>
+
+<h2 id="関連情報">関連情報</h2>
+
+<ul>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{domxref("HTMLInputElement")}}</li>
+ <li>{{domxref("Input.mozSetFileNameArray")}}</li>
+</ul>
diff --git a/files/ja/web/api/htmlinputelement/multiple/index.html b/files/ja/web/api/htmlinputelement/multiple/index.html
new file mode 100644
index 0000000000..a95fa672b3
--- /dev/null
+++ b/files/ja/web/api/htmlinputelement/multiple/index.html
@@ -0,0 +1,38 @@
+---
+title: HTMLInputElement.multiple
+slug: Web/API/HTMLInputElement/multiple
+translation_of: Web/API/HTMLInputElement/multiple
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><strong><code>HTMLInputElement.multiple</code></strong>は<code>input</code>タグが複数の値を持つことができるかどうかを示すプロパティです。現在Firefoxでは、<strong>multiple</strong>属性は<code>&lt;input type="file"&gt;</code>でのみサポートされています。</p>
+
+<h2 id="例">例</h2>
+
+<pre class="brush:js">// fileInputは&lt;input type=file multiple&gt;であるようなHTML要素です
+var fileInput = document.getElementById("myfileinput");
+
+if (fileInput.multiple == true) {
+
+    for (var i = 0, len = fileInput.files.length; i &lt; len; i++) {
+        // fileInput.filesをループ
+    }
+
+// 一つのファイルのみが有効な場合
+} else {
+    var file = fileInput.files.item(0);
+}
+</pre>
+
+<h2 id="関連情報">関連情報</h2>
+
+<ul>
+ <li><a href="/en/DOM/FileList" title="en/DOM/FileList">FileList</a></li>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=523771" title="https://bugzilla.mozilla.org/show_bug.cgi?id=523771">Bug 523771</a> - <span class="bz_default_hidden" id="summary_alias_container" style="display: inline;"> <span id="short_desc_nonedit_display">Support &lt;input type=file multiple&gt;</span> </span></li>
+</ul>
+
+<h2 id="仕様">仕様</h2>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#attr-input-multiple" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#attr-input-multiple">The multiple attribute</a> (HTML 5 working draft)</li>
+</ul>
diff --git a/files/ja/web/api/htmlinputelement/select/index.html b/files/ja/web/api/htmlinputelement/select/index.html
new file mode 100644
index 0000000000..5fb740e691
--- /dev/null
+++ b/files/ja/web/api/htmlinputelement/select/index.html
@@ -0,0 +1,85 @@
+---
+title: HTMLInputElement.select()
+slug: Web/API/HTMLInputElement/select
+tags:
+  - API
+  - HTML DOM
+  - HTMLInputElement
+  - Method
+  - Reference
+translation_of: Web/API/HTMLInputElement/select
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><strong><code>HTMLInputElement.select()</code></strong> メソッドは、{{HTMLElement("textarea")}} 要素またはテキストフィールドを含む {{HTMLElement("input")}} 要素内のすべてのテキストを選択します。</p>
+
+<h2 id="シンタックス">シンタックス</h2>
+
+<pre class="syntaxbox notranslate"><em>element</em>.select();</pre>
+
+<h2 id="例">例</h2>
+
+<p>この例のボタンをクリックすると、<code>&lt;input&gt;</code> 要素内のすべてのテキストが選択されます。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;input type="text" id="text-box" size="20" value="Hello world!"&gt;
+&lt;button onclick="selectText()"&gt;Select text&lt;/button&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">function selectText() {
+  const input = document.getElementById('text-box');
+  input.focus();
+  input.select();
+}</pre>
+
+<h3 id="結果">結果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="メモ">メモ</h2>
+
+<p><code>element.select()</code> を呼んだからといって必ずしも入力がフォーカスされるわけではないので、{{domxref("HTMLElement.focus()")}} で使うことが多いです。</p>
+
+<p>これがサポートされていないブラウザでは、パラメータ 0 と入力値の長さを指定して <a href="/ja/docs/Web/API/HTMLInputElement/setSelectionRange">HTMLInputElement.setSelectionRange()</a> を呼び出すことで置き換えることができます。</p>
+
+<pre class="brush: html notranslate">&lt;input onClick="this.select();" value="Sample Text" /&gt;
+&lt;!-- equivalent to --&gt;
+&lt;input onClick="this.setSelectionRange(0, this.value.length);" value="Sample Text" /&gt;
+</pre>
+
+<h2 id="仕様">仕様</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#dom-textarea/input-select', 'select')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ブラウザの互換性">ブラウザの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は、構造化データから生成されています。データに貢献したい方は、https://github.com/mdn/browser-compat-data をチェックしてプルリクエストを送ってください。</div>
+
+<p>{{Compat("api.HTMLInputElement.select")}}</p>
+
+<h2 id="あわせて参照">あわせて参照</h2>
+
+<ul>
+ <li>{{ HTMLElement("input") }}</li>
+ <li>{{ HTMLElement("textarea") }}</li>
+ <li>{{ domxref("HTMLInputElement") }}</li>
+ <li>{{ domxref("HTMLInputElement.setSelectionRange") }}</li>
+</ul>
diff --git a/files/ja/web/api/htmlinputelement/setrangetext/index.html b/files/ja/web/api/htmlinputelement/setrangetext/index.html
new file mode 100644
index 0000000000..06d23ddd27
--- /dev/null
+++ b/files/ja/web/api/htmlinputelement/setrangetext/index.html
@@ -0,0 +1,101 @@
+---
+title: HTMLInputElement.setRangeText()
+slug: Web/API/HTMLInputElement/setRangeText
+tags:
+  - API
+  - HTMLInputElement
+translation_of: Web/API/HTMLInputElement/setRangeText
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary"><strong><code>HTMLInputElement.setRangeText()</code></strong> メソッドを用いて，{{HTMLElement("input")}}や{{HTMLElement("textarea")}}要素において，文章の指定した範囲を新たな文字列で置き換えられます。</span></p>
+
+<h2 id="構文">構文</h2>
+
+<pre class="syntaxbox"><em>element</em>.setRangeText(<em>置換対象</em>);
+<em>element</em>.setRangeText(<em>置換対象</em>, <em>開始</em>, <em>終了</em> [, <em>選択状態</em>]);
+</pre>
+
+<h3 id="引数">引数</h3>
+
+<dl>
+ <dt><code>置換対象</code></dt>
+ <dd>挿入する文字列。</dd>
+ <dt><code>開始</code>{{optional_inline}}</dt>
+ <dd>置き換える最初の文字の位置を0始まりで指定します。既定は現在の<code>selectionStart</code>の値（利用者が現在選択している範囲の始め）です。</dd>
+ <dt><code>終了</code>{{optional_inline}}</dt>
+ <dd>置き換える最初の文字の<em>一つ後の</em>位置を0始まりで指定します。既定は現在の<code>selectionEnd</code>の値（利用者が現在選択している範囲の終わり）です。</dd>
+ <dt><code>選択状態</code>{{optional_inline}}</dt>
+ <dd>文章が置換された後，選択範囲がどのように振る舞うべきかを指定します。<br>
+ 次の値が有効です:
+ <ul>
+  <li><code>select</code>: 新規挿入した文章を選択する。</li>
+  <li><code>start</code>: 挿入した文書の直前に選択範囲を移動する。</li>
+  <li><code>end</code>: 挿入した文書の直後に選択範囲を移動する。</li>
+  <li><code>preserve</code>: 選択範囲を保持しようとします。既定です。</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="事例">事例</h2>
+
+<p>例中のボタンを押して，欄内の文章の一部を置換してみてください。新規挿入された文章は，その後強調（選択）されるでしょう。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="text" id="text-box" size="18" value="この文章は更新されていません。"/&gt;
+&lt;button onclick="selectText()"&gt;文章を更新する&lt;/button&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function selectText() {
+  const input = document.getElementById('text-box');
+  input.focus();
+  input.setRangeText('ました', 9, 14, 'select');
+}</pre>
+
+<h3 id="結果">結果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="仕様書">仕様書</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#dom-textarea/input-setrangetext", "HTMLInputElement.setSelectionRange()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "forms.html#dom-textarea/input-setrangetext", "HTMLInputElement.setSelectionRange()")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ブラウザ互換性">ブラウザ互換性</h2>
+
+<div>
+
+
+<p>{{Compat("api.HTMLInputElement.setRangeText")}}</p>
+</div>
+
+<h2 id="関連項目">関連項目</h2>
+
+<ul>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+ <li>{{domxref("HTMLInputElement")}}</li>
+ <li>{{domxref("Selection")}}</li>
+</ul>
diff --git a/files/ja/web/api/htmlinputelement/setselectionrange/index.html b/files/ja/web/api/htmlinputelement/setselectionrange/index.html
new file mode 100644
index 0000000000..a984b07e90
--- /dev/null
+++ b/files/ja/web/api/htmlinputelement/setselectionrange/index.html
@@ -0,0 +1,115 @@
+---
+title: HTMLInputElement.setSelectionRange()
+slug: Web/API/HTMLInputElement/setSelectionRange
+tags:
+  - API
+  - HTML DOM
+  - HTMLInputElement
+  - Method
+  - Reference
+  - Text Field Selection API
+translation_of: Web/API/HTMLInputElement/setSelectionRange
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><strong><code>HTMLInputElement.setSelectionRange()</code></strong> 関数は{{HTMLElement("input")}}または、{{HTMLElement("textarea")}}要素に対して有効です。要素に対して任意の開始と末尾のポジションを設定することでテキストを選択状態にします。</p>
+
+<p>更に、より新しいブラウザでは選択する方向をも考慮する必要があります。つまり、ユーザーがクリックした後ドラッグして選択状態にする際のドラッグの方向が、はじめからなのか、おしりからなのか、考慮するということです。</p>
+
+<p>この関数はアップデートされ、<code>HTMLInputElement.selectionStart</code>, <code>selectionEnd</code>, and <code>selectionDirection</code>プロパティを一度に呼び出し更新することができます。</p>
+
+<p>Note that accordingly to the <a href="https://html.spec.whatwg.org/multipage/forms.html#concept-input-apply">WHATWG forms spec</a> <code>selectionStart</code>, <code>selectionEnd</code> properties and <code>setSelectionRange</code> method apply only to inputs of types text, search, URL, tel and password. Chrome, starting from version 33, throws an exception while accessing those properties and method on the rest of input types. For example, on input of type number: "Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection.".</p>
+
+<p> </p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>element</em>.setSelectionRange(<em>selectionStart</em>, <em>selectionEnd</em> [, <em>selectionDirection</em>]);
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<p><code>selectionEnd</code> が<code>selectionStart</code>より小さい場合、両方の値は<code>selectionEnd</code>として扱われます。</p>
+
+<dl>
+ <dt><code>selectionStart</code></dt>
+ <dd>0を基準とした選択状態の文字のインデックス。指定されたインデックスが文字の長さより長い場合は、文字の長さをインデックスに指定したものとみなされます。</dd>
+ <dt><code>selectionEnd</code></dt>
+ <dd>0を基準とした選択状態の最後の文字のインデックス。指定されたインデックスが文字の長さより長い場合は、文字の長さをインデックスに指定したものとみなされます。</dd>
+ <dt><code>selectionDirection</code> {{optional_inline}}</dt>
+ <dd>選択する際の方向を指定します。取りうる値は以下のとおりです。
+ <ul>
+  <li><code>"forward"</code></li>
+  <li><code>"backward"</code></li>
+  <li><code>"none"</code> 選択する際の方向が指定されていない時です。デフォルト値になります。</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>サンプルの中のボタンをクリックすると、テキストボックスの３，４，５番目の文字が選択状態になります。 ("Mozilla"の"zil").</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="text" id="text-box" size="20" value="Mozilla"&gt;
+&lt;button onclick="selectText()"&gt;Select text&lt;/button&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function selectText() {
+  const input = document.getElementById('text-box');
+  input.focus();
+  input.setSelectionRange(2, 5);
+}</pre>
+
+<h3 id="実行結果">実行結果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="仕様">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "forms.html#dom-textarea/input-setselectionrange", "HTMLInputElement.setSelectionRange()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "forms.html#dom-textarea/input-setselectionrange", "HTMLInputElement.setSelectionRange()")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "forms.html#dom-textarea/input-setselectionrange", "HTMLInputElement.setSelectionRange()")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ブラウザ互換性">ブラウザ互換性</h2>
+
+<div>
+
+
+<p>{{Compat("api.HTMLInputElement.setSelectionRange")}}</p>
+</div>
+
+<h2 id="参照">参照</h2>
+
+<ul>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+ <li>{{domxref("HTMLInputElement")}}</li>
+ <li>{{domxref("Selection")}}</li>
+</ul>
diff --git a/files/ja/web/api/htmlinputelement/webkitdirectory/index.html b/files/ja/web/api/htmlinputelement/webkitdirectory/index.html
new file mode 100644
index 0000000000..05dd96acbd
--- /dev/null
+++ b/files/ja/web/api/htmlinputelement/webkitdirectory/index.html
@@ -0,0 +1,140 @@
+---
+title: HTMLInputElement.webkitDirectory
+slug: Web/API/HTMLInputElement/webkitDirectory
+tags:
+  - API
+  - File System API
+  - File and Directory Entries API
+  - Files
+  - HTML DOM
+  - HTMLInputElement
+  - Non-standard
+  - Property
+  - Reference
+  - Web
+  - webkitdirectory
+  - プロパティ
+translation_of: Web/API/HTMLInputElement/webkitdirectory
+---
+<p>{{APIRef("HTML DOM")}}{{non-standard_header}}</p>
+
+<p><span class="seoSummary"><code><strong>HTMLInputElement.webkitDirectory</strong></code> プロパティで、 {{htmlattrxref("webkitdirectory", "input")}} という HTML 属性の値を反映し、 {{HTMLElement("input")}} 要素によってユーザーがファイルの代わりにディレクトリを選択できることを示します。ディレクトリが選択された場合、ディレクトリとその内容の階層構造が選択されたアイテムのセットに含まれます。選択されているファイルシステムのファイルアイテムは、 {{domxref("HTMLInputElement.webkitEntries", "webkitEntries")}} を使用して受け取ることができます。</span></p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"> <em>HTMLInputElement</em>.webkitdirectory = <em>boolValue</em></pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p>論理型で、 <code>true</code> は {{HTMLElement("input")}} 要素がディレクトリの身を選択することができることを、 <code>false</code> はファイルのみが選択できることを示します。</p>
+
+<h2 id="Understanding_the_results" name="Understanding_the_results">結果を理解する</h2>
+
+<p>ユーザーが選択を行った後、 <code>files</code> の中のそれぞれの {{domxref("File")}} オブジェクトは各自が {{domxref("File.webkitRelativePath")}} プロパティセットを持ち、ファイルが所在する位置が選択されたディレクトリの中の相対パスで設定されます。例えば、次のようなファイルシステムを考えてみてください。</p>
+
+<ul>
+ <li>PhotoAlbums
+  <ul>
+   <li>Birthdays
+    <ul>
+     <li>Jamie's 1st birthday
+      <ul>
+       <li>PIC1000.jpg</li>
+       <li>PIC1004.jpg</li>
+       <li>PIC1044.jpg</li>
+      </ul>
+     </li>
+     <li>Don's 40th birthday
+      <ul>
+       <li>PIC2343.jpg</li>
+       <li>PIC2344.jpg</li>
+       <li>PIC2355.jpg</li>
+       <li>PIC2356.jpg</li>
+      </ul>
+     </li>
+    </ul>
+   </li>
+   <li>Vacations
+    <ul>
+     <li>Mars
+      <ul>
+       <li>PIC5533.jpg</li>
+       <li>PIC5534.jpg</li>
+       <li>PIC5556.jpg</li>
+       <li>PIC5684.jpg</li>
+       <li>PIC5712.jpg</li>
+      </ul>
+     </li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<p>ユーザーが <code>PhotoAlbums</code> を選択すると、 files によって報告されるリストは上記のすべてのファイルに対する {{domxref("File")}} オブジェクトを含みます。 — しかし、ディレクトリは含みません。 <code>PIC2343.jpg</code> のエントリでは <code>webkitRelativePath</code> が <code>PhotoAlbums/Birthdays/Don's 40th birthday/PIC2343.jpg</code> となりますこれによって {{domxref("FileList")}} がフラットでも階層構造を知ることができます。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> <code>webkitRelativePath</code> の挙動は <em>Chromium &lt; 72</em> では異なります。詳しくは<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=124187">このバグ</a>を参照してください。</p>
+</div>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>この例では、ユーザーが1つまたは複数のディレクトリを選択することができるディレクトリピッカーが表示されます。 {{event("change")}} イベントが発生すると、選択されたディレクトリ階層ないのすべてのファイルを含むリストが生成され、表示されます。</p>
+
+<h3 id="HTML_content">HTML content</h3>
+
+<pre class="brush: html">&lt;input type="file" id="filepicker" name="fileList" webkitdirectory multiple /&gt;
+&lt;ul id="listing"&gt;&lt;/ul&gt;</pre>
+
+<h3 id="JavaScript_content">JavaScript content</h3>
+
+<pre class="brush: js">document.getElementById("filepicker").addEventListener("change", function(event) {
+  let output = document.getElementById("listing");
+  let files = event.target.files;
+
+  for (let i=0; i&lt;files.length; i++) {
+    let item = document.createElement("li");
+    item.innerHTML = files[i].webkitRelativePath;
+    output.appendChild(item);
+  };
+}, false);
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{ EmbedLiveSample('Example') }}</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('File System API', '#dom-htmlinputelement-webkitdirectory', 'webkitdirectory') }}</td>
+   <td>{{ Spec2('File System API') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>This API has no official W3C or WHATWG specification.</p>
+
+<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("api.HTMLInputElement.webkitdirectory")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/File_and_Directory_Entries_API">File and Directory Entries API</a></li>
+ <li>{{domxref("HTMLInputElement.webkitEntries")}}</li>
+ <li>{{domxref("File.webkitRelativePath")}}</li>
+</ul>