initial commit

24 files changed, 10562 insertions, 0 deletions

diff --git a/files/ja/web/html/element/input/button/index.html b/files/ja/web/html/element/input/button/index.html
new file mode 100644
index 0000000000..d88460c3ef
--- /dev/null
+++ b/files/ja/web/html/element/input/button/index.html
@@ -0,0 +1,351 @@
+---
+title: <input type="button">
+slug: Web/HTML/Element/input/button
+tags:
+  - Element
+  - Forms
+  - HTML
+  - HTML forms
+  - Input
+  - Input Element
+  - Input Type
+  - Reference
+  - button
+translation_of: Web/HTML/Element/input/button
+---
+<div>{{HTMLRef("Input_types")}}</div>
+
+<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>button</code></strong> 型は、単純なプッシュボタンとして描画され、イベントハンドラー関数 (ふつうは {{event("click")}} イベント) を割り当てることで、ウェブページのあらゆる場所でカスタム機能を制御するようにプログラムすることができます。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-button.html", "tabbed-shorter")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<div class="note">
+<p><strong>注</strong>: <code>&lt;input&gt;</code> 要素の <code>button</code> 型は完全に妥当な HTML ですが、より新しい {{HTMLElement("button")}} 要素が、ボタンの作成にはより好まれるようになりました。 {{HTMLElement("button")}} のラベル文字列は開始タグと終了タグの間に挿入され、ラベルに画像を含む HTML を含めることができます。</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value", "値")}}</strong></td>
+   <td>ボタンのラベルとして使われる {{domxref("DOMString")}}</td>
+  </tr>
+  <tr>
+   <td><strong>イベント</strong></td>
+   <td>{{domxref("Element/click_event", "click")}}</td>
+  </tr>
+  <tr>
+   <td><strong>対応している共通属性</strong></td>
+   <td>{{htmlattrxref("type", "input")}}, {{htmlattrxref("value", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL 属性</strong></td>
+   <td><code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>メソッド</strong></td>
+   <td>なし</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value" name="Value">値</h2>
+
+<p><code>&lt;input type="button"&gt;</code> 要素の {{htmlattrxref("value", "input")}} 属性には、ボタンのラベルとして使われる {{domxref("DOMString")}} を設定します。</p>
+
+<div id="summary-example3">
+<pre class="brush: html notranslate">&lt;input type="button" value="クリックしてね"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p>
+
+<p><code>value</code> を指定しなかった場合は、無印のボタンになります。</p>
+
+<div id="summary-example1">
+<pre class="brush: html notranslate">&lt;input type="button"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p>
+
+<h2 id="Using_buttons" name="Using_buttons">ボタンの使用</h2>
+
+<p><code>&lt;input type="button"&gt;</code> 要素には既定の動作がありません (親戚である <code><a href="/ja/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code> や <code><a href="/ja/docs/Web/HTML/Element/input/reset">&lt;input type="reset"&gt;</a></code> は、それぞれフォームの送信とリセットに使用されます)。ボタンに何かをさせる場合は、処理を行うための JavaScript コードを書く必要があります。</p>
+
+<h3 id="A_simple_button" name="A_simple_button">単純なボタン</h3>
+
+<p>単純なボタンに {{event("click")}} イベントハンドラーを設定し、マシンを起動させましょう (つまり、ボタンの <code>value</code> と続く段落の文字列コンテンツを切り替えます)。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;input type="button" value="マシンを起動"&gt;
+&lt;/form&gt;
+&lt;p&gt;マシンが停止しています。&lt;/p&gt;</pre>
+
+<pre class="brush: js notranslate">const button = document.querySelector('input');
+const paragraph = document.querySelector('p');
+
+button.addEventListener('click', updateButton);
+
+function updateButton() {
+  if (button.value === 'マシンを起動') {
+    button.value = 'マシンを停止';
+    paragraph.textContent = 'マシンが起動しています！';
+  } else {
+    button.value = 'マシンを起動';
+    paragraph.textContent = 'マシンが停止しています。';
+  }
+}</pre>
+
+<p>このスクリプトは DOM で <code>&lt;input&gt;</code> を表す {{domxref("HTMLInputElement")}} オブジェクトの参照を受け取り、この参照を変数 <code>button</code> に保存します。{{domxref("EventTarget.addEventListener", "addEventListener()")}} は、ボタンに {{event("click")}} イベントが発生したときに実行される関数を設定します。</p>
+
+<p>{{EmbedLiveSample("A_simple_button", 650, 100)}}</p>
+
+<h3 id="Adding_keyboard_shortcuts_to_buttons" name="Adding_keyboard_shortcuts_to_buttons">ボタンへのショートカットキーの追加</h3>
+
+<p>ショートカットキーは、アクセスキーやキーボードショートカットとも呼ばれますが、ユーザーがキーボード上のキーまたはキーの組み合わせを使用してボタンを操作できるものです。ボタンにショートカットキーを追加するには、どの {{HTMLElement("input")}} でも同じですが、 {{htmlattrxref("accesskey")}} グローバル属性を使用します。</p>
+
+<p>この例では、 <kbd>s</kbd> がアクセスキーとして指定されています (ブラウザーと OS の組み合わせによっては、 <kbd>s</kbd> と特定の修飾キーの組み合わせが必要です。その一覧については <a href="/ja/docs/Web/HTML/Global_attributes/accesskey">accesskey</a> を参照してください)。</p>
+
+<div id="accesskey-example1">
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;input type="button" value="マシンを起動" accesskey="s"&gt;
+&lt;/form&gt;
+&lt;p&gt;マシンが停止しています。&lt;/p&gt;
+</pre>
+</div>
+
+<div class="hidden">
+<pre class="brush: js notranslate">const button = document.querySelector('input');
+const paragraph = document.querySelector('p');
+
+button.addEventListener('click', updateButton);
+
+function updateButton() {
+  if (button.value === 'マシンを起動') {
+    button.value = 'マシンを停止';
+    paragraph.textContent = 'マシンが起動しています！';
+  } else {
+    button.value = 'マシンを起動';
+    paragraph.textContent = 'マシンが停止しています。';
+  }
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("Adding_keyboard_shortcuts_to_buttons", 650, 100)}}</p>
+
+<div class="note">
+<p><strong>注</strong>: 上記の例では、ユーザーがアクセスキーが何であるかを知ることができないという問題があります。実際のサイトでは、この情報を、サイトのデザインに干渉しない方法で提供する必要があります (たとえば、簡単にアクセスできるリンクを設置して、サイトのアクセスキーに関する情報を指すなど)。</p>
+</div>
+
+<h3 id="Disabling_and_enabling_a_button" name="Disabling_and_enabling_a_button">ボタンの無効化と有効化</h3>
+
+<p>ボタンを無効にするには、次のように {{htmlattrxref("disabled")}} グローバル属性を指定するだけです。</p>
+
+<div id="disable-example1">
+<pre class="brush: html notranslate">&lt;input type="button" value="Disable me" disabled&gt;</pre>
+</div>
+
+<p>実行時に <code>disabled</code> に <code>true</code> または <code>false</code> を設定するだけで、ボタンを有効化したり無効化したりすることができます。この例では、ボタンは有効の状態で始まりますが、押すと <code>button.disabled = true</code> を使用して無効化されます。それから {{domxref("WindowTimers.setTimeout","setTimeout()")}} 関数を使用して、2秒後にボタンの状態を有効の状態にリセットしています。</p>
+
+<div class="hidden">
+<h6 id="Hidden_code_1">Hidden code 1</h6>
+
+<pre class="brush: html notranslate">&lt;input type="button" value="Enabled"&gt;</pre>
+
+<pre class="brush: js notranslate">const button = document.querySelector('input');
+
+button.addEventListener('click', disableButton);
+
+function disableButton() {
+  button.disabled = true;
+  button.value = 'Disabled';
+  window.setTimeout(function() {
+    button.disabled = false;
+    button.value = 'Enabled';
+  }, 2000);
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("Hidden_code_1", 650, 60)}}</p>
+
+<p><code>disabled</code> 属性が指定されなかった場合、ボタンは <code>disabled</code> の状態を親要素から継承します。これによって、複数の要素を {{HTMLElement("fieldset")}} 要素のようなコンテナーの中に入れ、コンテナーに <code>disabled</code> を設定することで、一括で有効化したり無効化したりすることができます。</p>
+
+<p>以下の例はこの操作を表しています。これは一つ前の例ととても似ていますが、最初のボタンが押されたときに <code>disabled</code> 属性が <code>&lt;fieldset&gt;</code> に設定され、2秒経過するまで3つのボタンがすべて無効になります。</p>
+
+<div class="hidden">
+<h6 id="Hidden_code_2">Hidden code 2</h6>
+
+<pre class="brush: html notranslate">&lt;fieldset&gt;
+  &lt;legend&gt;Button group&lt;/legend&gt;
+  &lt;input type="button" value="Button 1"&gt;
+  &lt;input type="button" value="Button 2"&gt;
+  &lt;input type="button" value="Button 3"&gt;
+&lt;/fieldset&gt;</pre>
+
+<pre class="brush: js notranslate">const button = document.querySelector('input');
+const fieldset = document.querySelector('fieldset');
+
+button.addEventListener('click', disableButton);
+
+function disableButton() {
+  fieldset.disabled = true;
+  window.setTimeout(function() {
+    fieldset.disabled = false;
+  }, 2000);
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("Hidden_code_2", 650, 60)}}</p>
+
+<div class="note">
+<p><strong>注</strong>: Firefox は他のブラウザーとは異なり、ページのロード中は既定で {{HTMLElement("button")}} に<a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">動的な無効状態を維持</a>します。この機能を制御するには {{htmlattrxref("autocomplete","button")}} 属性を使用してください。</p>
+</div>
+
+<h2 id="Validation" name="Validation">検証</h2>
+
+<p>ボタンに対して制約検証は行われません。制約するべき値はありません。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>以下の例では、 {{htmlelement("canvas")}} 要素といくらかの単純な CSS と JavaScript を使用して作成した、とても簡単なお絵かきアプリを紹介します。 (簡略化のため CSS を省略します)。上部の2つのコントロールで、色と描画するペンの大きさを選択できます。ボタンは、クリックすると、キャンバスを消去する関数を呼び出します。</p>
+
+<pre class="brush: html notranslate">&lt;div class="toolbar"&gt;
+  &lt;input type="color" aria-label="select pen color"&gt;
+  &lt;input type="range" min="2" max="50" value="30" aria-label="select pen size"&gt;&lt;span class="output"&gt;30&lt;/span&gt;
+  &lt;input type="button" value="Clear canvas"&gt;
+&lt;/div&gt;
+
+&lt;canvas class="myCanvas"&gt;
+  &lt;p&gt;Add suitable fallback here.&lt;/p&gt;
+&lt;/canvas&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">body {
+  background: #ccc;
+  margin: 0;
+  overflow: hidden;
+}
+
+.toolbar {
+  background: #ccc;
+  width: 150px;
+  height: 75px;
+  padding: 5px;
+}
+
+input[type="color"], input[type="button"] {
+  width: 90%;
+  margin: 0 auto;
+  display: block;
+}
+
+input[type="range"] {
+  width: 70%;
+}
+
+span {
+  position: relative;
+  bottom: 5px;
+}</pre>
+</div>
+
+<pre class="brush: js notranslate">var canvas = document.querySelector('.myCanvas');
+var width = canvas.width = window.innerWidth;
+var height = canvas.height = window.innerHeight-85;
+var ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'rgb(0,0,0)';
+ctx.fillRect(0,0,width,height);
+
+var colorPicker = document.querySelector('input[type="color"]');
+var sizePicker = document.querySelector('input[type="range"]');
+var output = document.querySelector('.output');
+var clearBtn = document.querySelector('input[type="button"]');
+
+// 角度をラジアンに変換する
+function degToRad(degrees) {
+  return degrees * Math.PI / 180;
+};
+
+// 選択した大きさの値を反映
+
+sizePicker.oninput = function() {
+  output.textContent = sizePicker.value;
+}
+
+// マウスポインターと、ボタンが押されているかどうかを格納
+var curX;
+var curY;
+var pressed = false;
+
+// マウスポインターの座標を更新
+document.onmousemove = function(e) {
+  curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
+  curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
+}
+
+canvas.onmousedown = function() {
+  pressed = true;
+};
+
+canvas.onmouseup = function() {
+  pressed = false;
+}
+
+clearBtn.onclick = function() {
+  ctx.fillStyle = 'rgb(0,0,0)';
+  ctx.fillRect(0,0,width,height);
+}
+
+function draw() {
+  if(pressed) {
+    ctx.fillStyle = colorPicker.value;
+    ctx.beginPath();
+    ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false);
+    ctx.fill();
+  }
+
+  requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<p>{{EmbedLiveSample("Examples", '100%', 600)}}</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#button-state-(type=button)', '&lt;input type="button"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#button-state-(type=button)', '&lt;input type="button"&gt;')}}</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-button")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{HTMLElement("input")}} およびそれに実装されている {{domxref("HTMLInputElement")}} インターフェイス。</li>
+ <li>より新しい {{HTMLElement("button")}} 要素。</li>
+ <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li>
+</ul>
diff --git a/files/ja/web/html/element/input/checkbox/index.html b/files/ja/web/html/element/input/checkbox/index.html
new file mode 100644
index 0000000000..961bdf143d
--- /dev/null
+++ b/files/ja/web/html/element/input/checkbox/index.html
@@ -0,0 +1,344 @@
+---
+title: <input type="checkbox">
+slug: Web/HTML/Element/input/checkbox
+tags:
+  - HTML
+  - HTML フォーム
+  - Reference
+  - checkbox
+  - チェックボックス
+  - フォーム
+  - 入力型
+  - 要素
+translation_of: Web/HTML/Element/input/checkbox
+---
+<div>{{HTMLRef}}</div>
+
+<p>{{htmlelement("input")}} 要素の <strong><code>checkbox</code></strong> 型は、既定でボックスとして描画され、政府の書類で見られるように、有効な時にはチェックが入ります。正確な外見はブラウザーが実行されているオペレーティングシステムの構成によります。一般にこれは四角形ですが、角が丸くなることもあります。チェックボックスによって、フォームで単一の値を選択して (または選択せずに) 送信することができます。</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-checkbox.html", "tabbed-standard")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<div class="note">
+<p><strong>メモ</strong>: <a href="/ja/docs/Web/HTML/Element/input/radio">ラジオボタン</a>はチェックボックスと似ていますが、重要な違いがあります。ラジオボタンはグループ化されており、同時に1つしか選択できないのに対し、チェックボックスは単一の値をオンにしたりオフにしたり切り替えることができます。複数のコントロールがある場所では、ラジオボタンはその中で一つしか選択できませんが、チェックボックスは複数の値が選択できます。</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value", "値")}}</strong></td>
+   <td>チェックボックスの値を表す {{domxref("DOMString")}}</td>
+  </tr>
+  <tr>
+   <td><strong>イベント</strong></td>
+   <td>{{event("change")}} および {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>対応している共通属性</strong></td>
+   <td><code>checked</code></td>
+  </tr>
+  <tr>
+   <td><strong>IDL 属性</strong></td>
+   <td><code>{{anch("checked")}}</code> および <code>{{anch("value")}}</code></td>
+  </tr>
+  <tr>
+   <td><strong>メソッド</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value" name="Value">値</h2>
+
+<p>チェックボックスの値を表す {{domxref("DOMString")}} です。これはクライアント側には表示されませんが、サーバー上ではチェックボックスの <code>name</code> と共に送信されるデータに与えられる <code>value</code> になります。次の例を見てください。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter"&gt;
+    &lt;label for="subscribeNews"&gt;Subscribe to newsletter?&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button type="submit"&gt;Subscribe&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Value', 600, 60)}}</p>
+
+<p>この例では、 <code>name</code> を <code>subscribe</code> に、 <code>value</code> を <code>newsletter</code> に設定しました。フォームが送信されると、データの名前と値の組み合わせは <code>subscribe=newsletter</code> となります。</p>
+
+<p><code>value</code> 属性が省略された場合は、チェックボックスの既定値は <code>on</code> ですので、その場合の送信されるデータは <code>subscribe=on</code> となります。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: フォームが送信されたときにチェックボックスがチェックされていなかった場合、チェックされていない状態を表す値 (<code>value=unchecked</code> など) が送信されることはなく、値はサーバーに全く送信されません。チェックボックスがチェックされていないときに既定値を送信したい場合は、フォーム内に {{HTMLElement("input/hidden", '&lt;input type="hidden"&gt;')}} を、同じ <code>name</code> と <code>value</code> で、おそらく JavaScript で含めることで実現できます。</p>
+</div>
+
+<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2>
+
+<p>すべての {{HTMLElement("input")}} 型で共通する属性に加え、 "<code>checkbox</code>" 型の入力欄は次の属性にも対応しています。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">属性</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("checked")}}</code></td>
+   <td>論理属性。存在する場合、チェックボックスは既定でオンの状態</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("value")}}</code></td>
+   <td>文字列で、チェックボックスがオンの状態の場合、フォームを送信するときのチェックボックスの値として使われる</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefchecked">{{htmlattrdef("checked")}}</h3>
+
+<p>論理属性で、チェックボックスが既定で (ページが読み込まれたときに) チェックされているかどうかを示します。チェックボックスが現在チェックされているかどうかを示すものでは<em>ありません</em>。チェックボックスの状態が変化した場合、このコンテンツ属性は変化を反映しません。 ({{domxref("HTMLInputElement")}} の <code>checked</code> IDL 属性のみが更新されます。)</p>
+
+<div class="note">
+<p><strong>メモ:</strong> 他の入力コントロールとは異なり、チェックボックスの値は現在 <code>checked</code> の状態にある場合のみ、送信データに含まれます。その場合、チェックボックスの <code>value</code> 属性の値が入力欄の値として報告されます。</p>
+</div>
+
+<p>他のブラウザーとは異なり、 Firefox は既定でページ読み込みを通して <code>&lt;input&gt;</code> の<a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">チェック状態を維持します</a>。この機能を制御するには {{htmlattrxref("autocomplete","input")}} 属性を使用してください。</p>
+
+<h3 id="htmlattrdefvalue">{{htmlattrdef("value")}}</h3>
+
+<p><code>value</code> 属性はすべての {{HTMLElement("input")}} 要素で共通のものです。しかし、 <code>checkbox</code> 型の入力欄では特殊な用途を提供します。フォームが送信されると、現在チェックされているチェックボックスのみがサーバーに送信され、報告される値が <code>value</code> 属性の値になります。 <code>value</code> が指定されていない場合は、既定で <code>on</code> の文字列になります。これは前述の{{anch("Value", "値")}}の節で紹介されています。</p>
+
+<h2 id="Using_checkbox_inputs" name="Using_checkbox_inputs">チェックボックスの使用</h2>
+
+<p>上記で最も基本的なチェックボックスの使用を見てきました。他に必要になりそうなチェックボックスに関するよく使われる機能や技術を見てみましょう。</p>
+
+<h3 id="Handling_multiple_checkboxes" name="Handling_multiple_checkboxes">複数チェックボックスの扱い</h3>
+
+<p>上記の例では、チェックボックスが1つしか含まれていませんでした。実際の状況では、複数のチェックボックスが発生する可能性があります。それらが互いに完全に無関係であれば、上記のようにすべて別々に処理できます。しかし、もしそれらがすべて関連していれば、事はそう単純ではありません。</p>
+
+<p>例えば、次のデモにはユーザーが関心のあることを選択できるように、複数のチェックボックスが含まれています (完全な版は {{anch("Examples")}} の章で確認してください)。</p>
+
+<pre class="brush: html notranslate">&lt;fieldset&gt;
+  &lt;legend&gt;関心があるものを選んでください&lt;/legend&gt;
+  &lt;div&gt;
+    &lt;input type="checkbox" id="coding" name="interest" value="coding"&gt;
+    &lt;label for="coding"&gt;コーディング&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="checkbox" id="music" name="interest" value="music"&gt;
+    &lt;label for="music"&gt;音楽&lt;/label&gt;
+  &lt;/div&gt;
+&lt;/fieldset&gt;</pre>
+
+<p>{{EmbedLiveSample('Handling_multiple_checkboxes', 600, 100)}}</p>
+
+<p>この例では、両方のチェックボックスに同じ <code>name</code> を設定しました。両方のチェックボックスがチェックされてフォームが送信されると、名前/値の組み合わせの文字列は <code>interest=coding&amp;interest=music</code> のように送信されます。データがサーバー側に届いたときには、連想配列以外の方法で解析して、 <code>interest</code> の値を持つ値を、最後の値だけでなくすべて拾う必要があります。 PHP を使用したやり方としては、例えば、<a class="question-hyperlink" href="http://stackoverflow.com/questions/18745456/handle-multiple-checkboxes-with-a-single-serverside-variable">単一のサーバー側の変数で複数のチェックボックスを扱う</a>を参照してください。</p>
+
+<h3 id="Checking_boxes_by_default" name="Checking_boxes_by_default">既定のチェックボックス</h3>
+
+<p>チェックボックスを既定でチェック状態にするには、 <code>checked</code> 属性を設定するだけです。次の例を見てください。</p>
+
+<pre class="brush: html notranslate">&lt;fieldset&gt;
+  &lt;legend&gt;関心があるものを選んでください&lt;/legend&gt;
+  &lt;div&gt;
+    &lt;input type="checkbox" id="coding" name="interest" value="coding" checked&gt;
+    &lt;label for="coding"&gt;コーディング&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="checkbox" id="music" name="interest" value="music"&gt;
+    &lt;label for="music"&gt;音楽&lt;/label&gt;
+  &lt;/div&gt;
+&lt;/fieldset&gt;</pre>
+
+<p>{{EmbedLiveSample('Checking_boxes_by_default', 600, 100)}}</p>
+
+<h3 id="Providing_a_bigger_hit_area_for_your_checkboxes" name="Providing_a_bigger_hit_area_for_your_checkboxes">チェックボックスの当たり判定領域を広げる</h3>
+
+<p>上記の例では、チェックボックス自身と同様に、関連する {{htmlelement("label")}} 要素をクリックするとチェックボックスを切り替えられることに気づいたかもしれません。これは HTML フォームのラベルの本当に便利な機能で、特にスマートフォンのような画面の小さい端末でオプションをクリックしやすくなります。</p>
+
+<p>これがフォームに <code>&lt;label&gt;</code> 要素を適切に設定する、アクセシビリティ以外のもう一つの理由です。</p>
+
+<h3 id="Indeterminate_state_checkboxes" name="Indeterminate_state_checkboxes">未決定状態のチェックボックス</h3>
+
+<p>チェックボックスにはチェックと未チェックの状態に加え、第三の状態である<ruby><strong>未決定</strong><rp> (</rp><rt>indeterminate</rt><rp>) </rp></ruby>を持つことができます。この状態は項目がオンともオフとも言えない状態です。これは JavaScript から {{domxref("HTMLInputElement")}} オブジェクトの <code>indeterminate</code> プロパティを使用して設定されます (HTML の属性を使用して設定することはできません)。</p>
+
+<pre class="brush: js notranslate">inputInstance.indeterminate = true;</pre>
+
+<p>多くのブラウザーでは、未決定の状態のチェックボックスにはボックス内にチェックの代わりに水平線 (ハイフンやマイナス記号のように見えるもの) が引かれます。</p>
+
+<p>このプロパティを使用する機会は多くありません。最もよくある例では、チェックボックスが複数のサブオプション (チェックボックス) を「統括」している場合です。すべてのサブオプションがチェックされたとき、統括しているチェックボックスもチェックされ、すべてのチェックボックスのチェックが外れたとき、統括しているチェックボックスもチェックが外れます。1つ以上のサブオプションが他とは異なる状態にあるとき、統括しているチェックボックスは未決定の状態になります。</p>
+
+<p>これは以下の例に見られます (この発想は <a href="https://css-tricks.com/indeterminate-checkboxes/">CSS Tricks</a> のおかげです)。この例では、製作手順のために収集する材料を追跡しています。材料のチェックボックスをオンまたはオフにすると、 JavaScript の関数はチェックされた材料の総数をチェックします。</p>
+
+<ul>
+ <li>チェックがない場合、製作手順名のチェックボックスは未チェックになります。</li>
+ <li>1つまたは2つがチェックされた場合、製作手順名のチェックボックスは <code>indeterminate</code> に設定されます。</li>
+ <li>3つともチェックされた場合は、製作手順名のチェックボックスが <code>checked</code> に設定されます。</li>
+</ul>
+
+<p>ですからこの場合は、材料を集め始めているものの、製作が完成していない状態に <code>indeterminate</code> が使われます。</p>
+
+<pre class="brush: js notranslate" id="line1">  var overall = document.querySelector('input[id="EnchTbl"]');
+  var ingredients = document.querySelectorAll('ul input');
+
+  overall.addEventListener('click', function(e) {
+    e.preventDefault();
+  });
+
+  for(var i = 0; i &lt; ingredients.length; i++) {
+    ingredients[i].addEventListener('click', updateDisplay);
+  }
+
+  function updateDisplay() {
+    var checkedCount = 0;
+    for(var i = 0; i &lt; ingredients.length; i++) {
+      if(ingredients[i].checked) {
+        checkedCount++;
+      }
+    }
+
+    if(checkedCount === 0) {
+      overall.checked = false;
+      <strong>overall.indeterminate = false;</strong>
+    } else if(checkedCount === ingredients.length) {
+      overall.checked = true;
+      <strong>overall.indeterminate = false;</strong>
+    } else {
+      overall.checked = false;
+      <strong>overall.indeterminate = true;</strong>
+    }
+  }</pre>
+
+<p>{{EmbedGHLiveSample("learning-area/html/forms/indeterminate-example/index.html", '100%', 200)}}</p>
+
+<div class="note">
+<p><strong>メモ</strong>: 未決定状態のチェックボックスを持つフォームを送信すると、チェックボックスがチェックされていない場合と同じ結果になります。 — チェックボックスを表すデータは送られません。</p>
+</div>
+
+<h2 id="Validation" name="Validation">検証</h2>
+
+<p>チェックボックスは<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">検証</a> (すべての {{HTMLElement("input")}} に対して行われる) に対応しています。しかし、多くの場合 {{domxref("ValidityState")}} は常に <code>false</code> になります。チェックボックスに {{htmlattrxref("required", "input")}} 属性がある場合で、チェックされていない場合、 {{domxref("ValidityState.valueMissing")}} が <code>true</code> になります。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>次の例は、上で見た「複数のチェックボックス」の拡張版です。より標準的なオプションと、チェックされたときに「その他」オプションの値を入力する入力欄を表示させる「その他」チェックボックスがあります。これは JavaScript の単純なブロックで実現します。この例には、整形方法を改善するための CSS も含まれています。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;fieldset&gt;
+  &lt;legend&gt;Choose your interests&lt;/legend&gt;
+    &lt;div&gt;
+      &lt;input type="checkbox" id="coding" name="interest" value="coding"&gt;
+      &lt;label for="coding"&gt;Coding&lt;/label&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;input type="checkbox" id="music" name="interest" value="music"&gt;
+      &lt;label for="music"&gt;Music&lt;/label&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;input type="checkbox" id="art" name="interest" value="art"&gt;
+      &lt;label for="art"&gt;Art&lt;/label&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;input type="checkbox" id="sports" name="interest" value="sports"&gt;
+      &lt;label for="sports"&gt;Sports&lt;/label&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;input type="checkbox" id="cooking" name="interest" value="cooking"&gt;
+      &lt;label for="cooking"&gt;Cooking&lt;/label&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;input type="checkbox" id="other" name="interest" value="other"&gt;
+      &lt;label for="other"&gt;Other&lt;/label&gt;
+      &lt;input type="text" id="otherValue" name="other"&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;button type="submit"&gt;Submit form&lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+form {
+  width: 600px;
+  margin: 0 auto;
+}
+
+div {
+  margin-bottom: 10px;
+}
+
+fieldset {
+  background: cyan;
+  border: 5px solid blue;
+}
+
+legend {
+  padding: 10px;
+  background: blue;
+  color: cyan;
+}
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">var otherCheckbox = document.querySelector('input[value="other"]');
+var otherText = document.querySelector('input[id="otherValue"]');
+otherText.style.visibility = 'hidden';
+
+otherCheckbox.addEventListener('change', () =&gt; {
+  if(otherCheckbox.checked) {
+    otherText.style.visibility = 'visible';
+    otherText.value = '';
+  } else {
+    otherText.style.visibility = 'hidden';
+  }
+});</pre>
+
+<p>{{EmbedLiveSample('Examples', '100%', 300)}}</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#checkbox-state-(type=checkbox)', '&lt;input type="checkbox"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#checkbox-state-(type=checkbox)', '&lt;input type="checkbox"&gt;')}}</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-checkbox")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{HTMLElement("input")}} およびそれに実装されている {{domxref("HTMLInputElement")}} インターフェイス。</li>
+ <li>CSS の {{cssxref(":checked")}} および {{cssxref(":indeterminate")}} セレクターで、現在の状態に基づいてチェックボックスを整形できます</li>
+ <li><a href="/ja/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">CSS プロパティの互換性</a></li>
+</ul>
diff --git a/files/ja/web/html/element/input/color/index.html b/files/ja/web/html/element/input/color/index.html
new file mode 100644
index 0000000000..a757675eaf
--- /dev/null
+++ b/files/ja/web/html/element/input/color/index.html
@@ -0,0 +1,228 @@
+---
+title: <input type="color">
+slug: Web/HTML/Element/input/color
+tags:
+  - Color Picker
+  - Element
+  - HTML
+  - HTML input
+  - HTML フォーム
+  - Reference
+  - color
+  - フォーム
+  - 入力型
+  - 色
+translation_of: Web/HTML/Element/input/color
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <code><strong>color</strong></code> は視覚的なインターフェイス、もしくは <code>#rrggbb</code> の 16進数表記でテキストを入力することでユーザーが色を指定することができます。</span> CSS の色表現には色名、関数表記、アルファ値つきの 16進表記などがありますが、ここでは単純な (アルファ値のない) もののみが利用できます。</p>
+
+<p>この要素の外見は、ブラウザーやプラットフォームによって大きく異なります。— 単純なテキストの入力欄で、入力された色情報が文字列の検証のみを行う入力欄であったり、プラットフォームの標準カラーピッカーや、独自のピッカーウィンドウを表示するなど、ブラウザーやプラットフォームにより大きく異なることがあります。</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-color.html", "tabbed-standard")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a class="external" 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>小文字の 16進数で {{cssxref("&lt;color&gt;")}} を定義する 7文字の {{domxref("DOMString")}}</td>
+  </tr>
+  <tr>
+   <td><strong>イベント</strong></td>
+   <td>{{domxref("HTMLElement/change_event", "change")}} および {{domxref("HTMLElement/input_event", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>対応する共通属性</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}} および {{htmlattrxref("list", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL 属性</strong></td>
+   <td><code>list</code> および <code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>メソッド</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value" name="Value">値</h2>
+
+<p>type が <code>color</code> の {{HTMLElement("input")}} 要素の {{htmlattrxref("value", "input")}} は、常に 16進表記で RGB カラーを特定する 7文字の {{domxref("DOMString")}} になります。入力欄には色を大文字でも小文字でも入力することができ、大文字を指定した場合、小文字に変換して格納されます。これ以外の値や、空の値になることはありません。</p>
+
+<div class="note">
+<p><strong>注</strong>: 有効な、不透明な <em>16進表現</em>の RGB カラーではない値を設定した場合は、結果的に <code>#000000</code> に設定されます。特に、CSS で標準化されている色名や、CSS 関数を値の設定に使用することはできません。HTML と CSS は別な言語や仕様であることを考慮していただければお分かりでしょう。加えて、アルファチャネルのある色はサポートされていません。<code>#009900aa</code> のような 9文字の 16進表記で色を設定すると、結果的に <code>#000000</code> に設定されます。</p>
+</div>
+
+<div class="note">
+<p><strong>注</strong>: <code>input</code> の <code>color</code> 型に対応していないウェブブラウザーでは、自然に <code>text</code> 型にフォールバックされます。ユーザーは様々な方法で色を記述する可能性があるので (<code>rgb(255, 255, 0)</code> など)、回避策の一つとして、 <code>pattern</code> 属性を <code>#[0-9a-f]{6}</code> または <code>#[0-9A-Fa-f]{6}</code> に設定しておく方法にして (大文字小文字の変化で異なる結果を期待することはないので、おそらく後者)、 <code>placeholder</code> 属性を色を表すためにユーザーの入力を期待する書式、例えば <code>#ff0000</code> にする方法があります。</p>
+</div>
+
+<h2 id="Using_color_inputs" name="Using_color_inputs">カラー入力欄の使用</h2>
+
+<p>type が <code>color</code> の入力欄は、対応する属性の数が限られているので単純です。</p>
+
+<h3 id="Providing_a_default_color" name="Providing_a_default_color">既定の色の設定</h3>
+
+<p>上記の例で既定値を設定するように変更すると、色の部分があらかじめ既定色で塗りつぶされ、カラーピッカーも（もしあれば）その色が既定になります。</p>
+
+<pre class="brush: html notranslate">&lt;input type="color" value="#ff0000"&gt;</pre>
+
+<p>{{EmbedLiveSample("Providing_a_default_color", 700, 30)}}</p>
+
+<p>色を指定しない場合は、既定で黒を表す <code>#000000</code> になります。値は 7文字の 16進表記、つまり "#" の文字に続いて赤、緑、青を示す各2桁が並び、<code>#rrggbb</code> のようになります。他の形式の色を使う場合は (CSS の色名や、<code>rgb()</code> または <code>rgba()</code> のような CSS 色関数など)、<code>value</code> に設定する前に 16進表記に変換する必要があります。</p>
+
+<h3 id="Tracking_color_changes" name="Tracking_color_changes">色の変更の追跡</h3>
+
+<p>ほかの {{HTMLElement("input")}} 型と同様に、{{domxref("HTMLElement/input_event", "input")}} および {{domxref("HTMLElement/change_event", "change")}} イベントで色の変化を検出することができます。<code>input</code> は <code>&lt;input&gt;</code> 要素で色が変更されるたびに実行されます。<code>change</code> イベントはユーザーがカラーピッカーを閉じたときに実行されます。どちらの場合も、新しい値は {{domxref("HTMLInputElement.value", "value")}} で調べることができます。</p>
+
+<p>次の例は、色の変更をずっと監視します。</p>
+
+<pre class="brush: js notranslate">colorPicker.addEventListener("input", updateFirst, false);
+colorPicker.addEventListener("change", watchColorPicker, false);
+
+function watchColorPicker(event) {
+  document.querySelectorAll("p").forEach(function(p) {
+    p.style.color = event.target.value;
+  });
+}
+</pre>
+
+<h3 id="Selecting_the_value" name="Selecting_the_value">値の選択</h3>
+
+<p>対象のブラウザーが {{HTMLElement("input")}} 要素の <code>color</code> 型をサポートしておらず、代わりにテキスト入力欄に値を直接入力した場合、{{domxref("HTMLInputElement.select", "select()")}} メソッドで入力欄のテキストを選択することになります。ブラウザーがカラーピッカーなどを提供している場合、<code>select()</code> は何もしません。いずれの状況でもコードが動作するように気をつける必要があります。</p>
+
+<pre class="brush: js notranslate">colorWell.select();</pre>
+
+<h3 id="Appearance_variations" name="Appearance_variations">外観のバリエーション</h3>
+
+<p>先述の通り、ブラウザーがカラーピッカーのインターフェイスに対応していない場合、color 入力の実装は自動的に値を正しい形式になるよう検証を行うテキストボックスとなります。例えば Safari 10.1 では以下のような外見になります。</p>
+
+<p><img alt="Safari で撮った例のスクリーンショット" src="https://mdn.mozillademos.org/files/14899/input-color-safari.png" style="border-style: solid; border-width: 1px; height: 160px; width: 598px;"></p>
+
+<p>同じ内容でも Firefox 55 ではこのようになります。</p>
+
+<p><img alt="macOS の Firefox 55 で撮った例のスクリーンショット" src="https://mdn.mozillademos.org/files/14901/input-color-firefox.png" style="border-style: solid; border-width: 1px; height: 160px; width: 598px;"></p>
+
+<p>このとき、対象をクリックすることでプラットフォームのカラーピッカーが表示されます(画像は macOS のカラーピッカー)。</p>
+
+<p><img alt="Firefox Mac でカラーピッカーを開いたこの要素のスクリーンショット。" src="https://mdn.mozillademos.org/files/14903/input-with-picker-firefox-mac.png" style="border-style: solid; border-width: 1px; height: 405px; width: 682px;"></p>
+
+<h2 id="Validation" name="Validation">検証</h2>
+
+<p>{{Glossary("user agent", "ユーザーエージェント")}} が値を正しい形式である7桁の小文字の16進記法に変換できない場合、値は無効であると見なされます。このときは {{cssxref(":invalid")}} 疑似クラスが要素に適用されます。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>{{domxref("HTMLElement/change_event", "change")}} および {{domxref("HTMLElement/input_event", "input")}} イベントを追跡して、新しい色を取得し、その度に文書の {{HTMLElement("p")}} 要素に適用する例をもう少し作成してみましょう。</p>
+
+<h3 id="HTML" name="HTML">HTML</h3>
+
+<p>HTML はとても単純です。<code>colorWell</code> という ID を持つ <code>color</code> 型の{{HTMLElement("input")}} は、段落の色を変更するために用います。</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;An example demonstrating the use of the &lt;code&gt;&amp;lt;input type="color"&amp;gt;&lt;/code&gt;
+   control.&lt;/p&gt;
+
+&lt;label for="colorWell"&gt;Color:&lt;/label&gt;
+&lt;input type="color" value="#ff0000" id="colorWell"&gt;
+
+&lt;p&gt;カラーピッカーを動かしたときに段落の色が変わるのを見てください。
+   カラーピッカーに変更を加えると、最初の段落の色が、プレビューとして
+   変化します(&lt;code&gt;input&lt;/code&gt; イベントを使用します)。カラー
+   ピッカーを閉じると、&lt;code&gt;change&lt;/code&gt; イベントが実行され、
+   全ての段落が選択された色に変化することが分かります。&lt;/p&gt;</pre>
+
+<h3 id="JavaScript" name="JavaScript">JavaScript</h3>
+
+<p>まずはいくつかの設定を行います。いくつかの変数を作成し、変数の値をページが最初に読み込まれたとき設定する色にし、ページが完全に読み込まれた時に一度スタートアップ作業を実行させるために {{domxref("Window/load_event", "load")}} ハンドラーを設定します。</p>
+
+<pre class="brush: js notranslate">var colorWell;
+var defaultColor = "#0000ff";
+
+window.addEventListener("load", startup, false);
+</pre>
+
+<h4 id="Initialization" name="Initialization">初期化</h4>
+
+<p>ページが読み込まれると、<code>load</code> イベントのハンドラーである <code>startup()</code> が呼び出されます。</p>
+
+<pre class="brush: js notranslate">function startup() {
+  colorWell = document.querySelector("#colorWell");
+  colorWell.value = defaultColor;
+  colorWell.addEventListener("input", updateFirst, false);
+  colorWell.addEventListener("change", updateAll, false);
+  colorWell.select();
+}
+</pre>
+
+<p><code>colorWell</code> に取得された <code>&lt;input&gt;</code> 要素を格納し、value プロパティに <code>defaultColor</code> を代入します。次に、{{domxref("HTMLElement/input_event", "input")}} イベントに <code>updateFirst()</code> 関数を、{{domxref("HTMLElement/change_event", "change")}} イベントに <code>updateAll()</code> 関数を指定します。これらについては後述します。</p>
+
+<p>最後に {{domxref("HTMLInputElement.select", "select()")}} を呼び出し、色入力のテキストコンテンツを選択します。これはカラーピッカーが提供されていないなどで、テキスト入力欄として表示された場合に利用します。</p>
+
+<h4 id="色の変更に反応させる">色の変更に反応させる</h4>
+
+<p>色の変更に反応する2つの関数を与えています。<code>updateFirst()</code> 関数は <code>input</code> イベントによって呼び出され、ドキュメントの最初にある段落要素の色を変えて、入力欄の新しい値と一致させます。 <code>input</code> イベントは値を調整する (例えば明るさを増加させるなど) たびに実行されるため、カラーピッカーが使用される毎に繰り返して実行されます。</p>
+
+<pre class="brush: js notranslate">function updateFirst(event) {
+  var p = document.querySelector("p");
+
+  if (p) {
+    p.style.color = event.target.value;
+  }
+}</pre>
+
+<p>カラーピッカーが閉じられると、<code>change</code> イベントが要素に送信されます。<code>updateAll()</code> 関数によってこれを捕捉し、{{domxref("HTMLInputElement.value", "Event.target.value")}} によって最終的に選択された色を取得します。</p>
+
+<pre class="brush: js notranslate">function updateAll(event) {
+  document.querySelectorAll("p").forEach(function(p) {
+    p.style.color = event.target.value;
+  });
+}
+</pre>
+
+<p>これで {{domxref("Event.target", "event.target")}} によって参照されている色入力ボックスの {{cssxref("color")}} 属性の色を、すべての {{HTMLElement("p")}} ブロックに適用します。</p>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>最終的な結果は次のようになります。</p>
+
+<p>{{EmbedLiveSample("Example", 700, 200)}}</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', '#color-state-(type=color)')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>初回定義</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element')}}</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-color")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">CSS プロパティの互換性</a></li>
+</ul>
diff --git a/files/ja/web/html/element/input/date/index.html b/files/ja/web/html/element/input/date/index.html
new file mode 100644
index 0000000000..912af9970d
--- /dev/null
+++ b/files/ja/web/html/element/input/date/index.html
@@ -0,0 +1,527 @@
+---
+title: <input type="date">
+slug: Web/HTML/Element/input/date
+tags:
+  - HTML
+  - HTML フォーム
+  - Input Element
+  - Reference
+  - フォーム
+  - フォーム入力
+  - 入力型
+  - 日付
+  - 日付選択
+  - 要素
+translation_of: Web/HTML/Element/input/date
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>type="date"</code></strong> 入力型は、検証付きのテキストボックスまたは特殊な日付選択インターフェイスのどちらかで、ユーザーに日付を入力させる入力欄を生成します。</span></p>
+
+<p>結果の値には年、月、日が含まれますが、時刻は含まれ<em>ません</em>。 {{HTMLElement("input/time", "time")}} および {{HTMLElement("input/datetime-local", "datetime-local")}} 入力型は時刻や日付と時刻の入力に対応しています。</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>入力欄のユーザーインターフェイスは、一般にブラウザーによってまちまちです。詳細は{{anch("Browser compatibility", "ブラウザーの互換性")}}を参照してください。対応していないブラウザーでは、このコントロールは単純な {{HTMLElement("input/text", '&lt;input type="text"&gt;')}} に格下げされます。</p>
+
+<p>日付を選択する専用のインターフェイスを持つブラウザーの中で、 Chrome や Opera のデータコントロールは次のように表示されます。</p>
+
+<p><img alt="“dd/mm/yyyy” と、増加/減少ボタンと、カレンダーコントロールを表示するための下向きの矢印があるテキストボックス。" src="https://mdn.mozillademos.org/files/14909/date-picker-chrome.png" style="display: block; height: 220px; margin: 0px auto; width: 275px;"></p>
+
+<p>Edge の日付コントロールは次のように表示されます。</p>
+
+<p><img alt="“mm/dd/yyyy” があるが、操作をすると、3列の日付選択が表示される。" src="https://mdn.mozillademos.org/files/14911/date-picker-edge.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Firefox の日付コントロールは次のように表示されます。</p>
+
+<p><img alt="違う形の “dd/mm/yyyy” テキストボックスで、選択可能なカレンダーコントロールを開いている。" src="https://mdn.mozillademos.org/files/15644/firefox_datepicker.png" style="display: block; margin: 0 auto;"></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value", "値")}}</strong></td>
+   <td>{{domxref("DOMString")}} で、 YYYY-MM-DD 形式の日付、または空欄を表す</td>
+  </tr>
+  <tr>
+   <td><strong>イベント</strong></td>
+   <td>{{domxref("HTMLElement/change_event", "change")}} および {{domxref("HTMLElement/input_event", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>対応している共通属性</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("step", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL 属性</strong></td>
+   <td><code>list</code>, <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code></td>
+  </tr>
+  <tr>
+   <td><strong>メソッド</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value" name="Value">値</h2>
+
+<p>入力欄に入力された日付を表す {{domxref("DOMString")}} です。日付は ISO8601 に従って書式化されており、これは <a href="/ja/docs/Web/HTML/Date_and_time_formats">HTML で使われる日付や時刻の形式</a>の<a href="/ja/docs/Web/HTML/Date_and_time_formats#Date_strings">日付の文字列</a>で説明されています。</p>
+
+<p>次のように、日付の入力欄の既定値を {{htmlattrxref("value", "input")}} 属性に設定することができます。</p>
+
+<pre class="brush: html notranslate">&lt;input type="date" value="2017-06-01"&gt;</pre>
+
+<p>{{EmbedLiveSample('Value', 600, 40)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>表示される日付の書式は実際の <code>value</code> とは異なります。</strong> — 表示される日付は<em>ユーザーのブラウザーに設定されたロケールに基づいて</em>書式になりますが、解釈された <code>value</code> は常に <code>yyyy-mm-dd</code> の書式です。</p>
+</div>
+
+<p>日付の値は JavaScript で入力要素の {{domxref("HTMLInputElement.value", "value")}} および {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} プロパティを用いて、次のように取得したり設定したりすることができます。</p>
+
+<pre class="brush: js notranslate">var dateControl = document.querySelector('input[type="date"]');
+dateControl.value = '2017-06-01';
+console.log(dateControl.value); // "2017-06-01" と表示
+console.log(dateControl.valueAsNumber); // 1496275200000 と UNIX タイムスタンプを表示</pre>
+
+<p>このコードは {{HTMLElement("input")}} 要素のうち <code>type</code> が <code>date</code> である最初のものを探し、値を <code>2017-06-01</code> (2017年6月1日) に設定します。それからその値を文字列と数字の書式で読み直しています。</p>
+
+<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2>
+
+<p>すべての {{HTMLElement("input")}} 要素で共通する属性と共に、 <code>date</code> 型の入力欄は以下の属性にも対応しています。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">属性</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("max")}}</code></td>
+   <td>受け付けられる最も遅い日付</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("min")}}</code></td>
+   <td>受け付けられる最も早い日付</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("step")}}</code></td>
+   <td>上下スピナーボタンで値を調整する時や、日付の検証の時の<em>刻み間隔</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3>
+
+<p>受け付ける最も遅い日付です。要素に入力された {{htmlattrxref("value", "input")}} がこれ以降になった場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code>max</code> 属性の値が <code>yyyy-mm-dd</code> の書式のありうる日付ではない場合、要素は最大の日付値を持ちません。</p>
+
+<p><code>max</code> と <code>min</code> の両方の属性が設定された場合、この値は <code>min</code> 属性にあるもの<strong>より遅いか、同じ</strong>日付文字列でなければなりません。</p>
+
+<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3>
+
+<p>受け付ける最も早い日付です。要素に入力された {{htmlattrxref("value", "input")}} がこれ以前になった場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code>min</code> 属性の値が <code>yyyy-mm-dd</code> の書式のありうる日付でない場合、要素は最小の日付値を持ちません。</p>
+
+<p><code>max</code> と <code>min</code> の両方の属性が設定された場合、この値は <code>max</code> 属性で指定されたもの<strong>より早いか、同じ</strong>日付を指定する必要があります。</p>
+
+<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/number", "step-include")}}</p>
+
+<p><code>date</code> 入力欄では、 <code>step</code> の値は日単位で指定します。また、 86,400,000 に <code>step</code> を乗じた値に等しいミリ秒数として扱われます (数値はミリ秒単位であるため)。 <code>step</code> の既定値は <code>1</code> であり、1日を表します。</p>
+
+<div class="blockIndicator note">
+<p><code>any</code> を <code>step</code> 属性の値として指定すると、 <code>1</code> を <code>date</code> 入力欄に設定したのと同じ効果になります。</p>
+</div>
+
+<h2 id="Using_date_inputs" name="Using_date_inputs">date 入力欄の使用</h2>
+
+<p>日付入力は便利に見えます。 — 日付の選択に簡単なインターフェイスを提供し、サーバーに送信するデータの書式をユーザーのロケールに関係なく正規化してくれます。しかし、今のところブラウザーの対応が限定されているため、 <code>&lt;input type="date"&gt;</code> には問題があります。</p>
+
+<p>この節では、 <code>&lt;input type="date"&gt;</code> の基本的な使い方と少し複雑な使い方を見てみてから、その後でブラウザーの互換性の問題を緩和するアドバイスを提供しましょう ({{anch("Handling browser support", "ブラウザーの互換性の扱い")}} を参照してください)。</p>
+
+<div class="blockIndicator note">
+<p>今後ブラウザーの互換性がもっと普遍的になり、この問題が消滅することを願います。</p>
+</div>
+
+<h3 id="Basic_uses_of_date" name="Basic_uses_of_date">日付入力の基本的な使用</h3>
+
+<p>もっとも単純な <code>&lt;input type="date"&gt;</code> の使用方法は、次のように基本的な <code>&lt;input&gt;</code> と {{htmlelement("label")}} 要素の組み合わせです。</p>
+
+<pre class="brush: html notranslate">&lt;form action="https://example.com"&gt;
+  &lt;label&gt;
+    誕生日を入力してください。
+    &lt;input type="date" name="bday"&gt;
+  &lt;/label&gt;
+
+  &lt;p&gt;&lt;button&gt;Submit&lt;/button&gt;&lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Basic_uses_of_date', 600, 40)}}</p>
+
+<p>この HTML は入力された日付を <code>bday</code> キーに入れて <code>https://example.com</code> に送ります。 — 結果の URL は <code>https://example.com/?bday=1955-06-08</code> のようになります。</p>
+
+<h3 id="Setting_maximum_and_minimum_dates" name="Setting_maximum_and_minimum_dates">日付の最大値と最小値の設定</h3>
+
+<p>{{htmlattrxref("min", "input")}} および {{htmlattrxref("max", "input")}} 属性を使用して、ユーザーが選択できる日付を制限することができます。次の例では、日付の最小値を <code>2017-04-01</code> に、日付の最大値を <code>2017-04-30</code> に設定しています。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label for="party"&gt;希望するパーティーの日を選んでください。
+    &lt;input type="date" name="party" min="2017-04-01" max="2017-04-30"&gt;
+  &lt;/label&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40)}}</p>
+
+<p>この結果は、2017年の4月の日付のみが選択できるようになります。 — テキストボックスの年と月の部分が編集できなくなり、日付選択ウィジェットで4月以外にスクロールすることができなくなります。</p>
+
+<div class="note">
+<p><strong>注</strong>: {{htmlattrxref("step", "input")}} 属性を使用すると、日付が加算するたびに飛ばす日数を設定できるはずです（例えば、土曜日のみを選択できるようにしたい場合など）。しかし、執筆時点でどの実装も正しく動作していないようです。</p>
+</div>
+
+<h3 id="Controlling_input_size" name="Controlling_input_size">入力欄の寸法の制御</h3>
+
+<p><code>&lt;input type="date"&gt;</code> は {{htmlattrxref("size", "input")}} のような寸法に関する属性には対応していません。寸法を変更するには <a href="/ja/docs/Web/CSS">CSS</a> を推奨します。</p>
+
+<h2 id="Validation" name="Validation">検証</h2>
+
+<p>既定で、 <code>&lt;input type="date"&gt;</code> は入力された値をその書式を超えて検証しません。インターフェイスは一般的に、日付でないものの入力をさせないからです。 — これは便利です。 — しかし、入力欄を空のままにしたり、 <code>text</code> 型にフォールバックするブラウザーにおいて、無効な日付を入力したりすることが可能です (例えば4月32日など)。</p>
+
+<p>{{htmlattrxref("min", "input")}} および {{htmlattrxref("max", "input")}} を使用して有効な日付を制限すると ({{anch("Setting maximum and minimum dates", "日付の最大値と最小値の設定")}}を参照)、対応しているブラウザーは、範囲を外れたの日付を送信しようとしたときにエラーを表示するでしょう。しかし、ユーザーの端末が日付選択に完全に対応していない場合、値がこれらの日付の中にあることを保証するためには、送信された結果を再度チェックしなければならないでしょう。</p>
+
+<p>{{htmlattrxref("required", "input")}} 属性を使用して、日付の入力を必須にすることもできます。 — 空の日付欄を送信しようとするとエラーが表示されるでしょう。これは、テキスト入力欄で代替されたとしても、ほとんどのブラウザーで動作するはずです。</p>
+
+<p>日付の最小値と最大値の例と、入力欄を必須にする例を見てみましょう。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label&gt;
+    推奨したいパーティーの日を選択してください (必須、4月1日～20日):
+    &lt;input type="date" name="party" min="2017-04-01" max="2017-04-20" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/label&gt;
+
+  &lt;p&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<p>不完全な日付 (または設定した範囲を外れた日付) を送信しようとすると、ブラウザーはエラーを表示します。例を実行してみましょう。</p>
+
+<p>{{EmbedLiveSample('Validation', 600, 100)}}</p>
+
+<p>対応しているブラウザーで入力しなかった場合のスクリーンショットです。</p>
+
+<p><img alt="入力欄に吹き出しが重なっており、その中に橙色のビックリマークのアイコンと “Please fill in this field.” というメッセージがある。" src="https://mdn.mozillademos.org/files/14913/date-picker-chrome-error-message.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>上記の例で使用されている CSS です。 {{cssxref(":valid")}} および {{cssxref(":invalid")}} <a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>を使用して、現在の値が妥当かどうかで入力欄の隣にアイコンを追加しています。アイコンは入力欄そのものではなく、入力欄の隣の {{htmlelement("span")}} に置くようにしないと、 Chrome ではコントロールの内側にコンテンツを生成するので、正しく整形したり表示したりすることができません。</p>
+
+<pre class="brush: css notranslate">label {
+  display: flex;
+  align-items: center;
+}
+
+span::after {
+  padding-left: 5px;
+}
+
+input:invalid + span::after {
+  content: '✖';
+}
+
+input:valid+span::after {
+  content: '✓';
+}</pre>
+
+<div class="warning">
+<p><strong>重要</strong>: クライアント側のフォーム検証は、サーバー上の検証の<em>代用にはなりません</em>。誰かが HTML を改変したり、 HTML を完全にバイパスしてサーバーに直接データを送信したいrすることは簡単です。サーバーが受信したデータの検証に失敗した場合、不適切な形式のデータ、大きすぎるデータ、誤った種類のデータなどに遭遇すると、障害が発生するおそれがあります。</p>
+</div>
+
+<h2 id="Handling_browser_support" name="Handling_browser_support">ブラウザーの対応の扱い</h2>
+
+<p>前述のように、現時点で日付入力を書く上で一番の問題は{{anch("Browser compatibility", "ブラウザーの対応")}}です。 Android 版 Firefox の日付選択はこの例のように表示されます。</p>
+
+<p><img alt="ウェブページとブラウザーの UI の上にモーダルで浮動しているポップアップのカレンダー選択" src="https://mdn.mozillademos.org/files/14915/date-picker-fxa.png" style="display: block; margin: 0 auto;"></p>
+
+<p>対応していないブラウザーでは、文字列入力欄に安全に格下げされますが、これはユーザーインターフェイスの一貫性 (表示されるコントロールが異なること) とデータの扱い方の両方で問題を生みます。</p>
+
+<p>2番目の問題はより深刻です。日付入力に対応していると、値が <code>yyyy-mm-dd</code> の書式で正規化されます。しかし、文字列入力欄では、ブラウザーには日付がどの書式で入力されるかの認識がなく、また、以下のように人間が日付を書く書式は様々なものがあります。</p>
+
+<ul>
+ <li><code>ddmmyyyy</code></li>
+ <li><code>dd/mm/yyyy</code></li>
+ <li><code>mm/dd/yyyy</code></li>
+ <li><code>dd-mm-yyyy</code></li>
+ <li><code>mm-dd-yyyy</code></li>
+ <li><code>Month dd, yyyy</code></li>
+</ul>
+
+<p>これを回避する方法の一つは、日付入力欄に {{htmlattrxref("pattern", "input")}} 属性を付けることです。日付選択ではこれを使用しませんが、文字列入力にフォールバックされたときには使用されます。例えば、次の例を未対応のブラウザーで見てみてください。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label for="bday"&gt;誕生日を入力してください:
+    &lt;input type="date" name="bday" required pattern="\d{4}-\d{2}-\d{2}"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/label&gt;
+  &lt;p&gt;
+    &lt;button&gt;送信&lt;/button&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Handling_browser_support', 600, 100)}}</p>
+
+<p>送信ボタンを押すと、入力が <code>####-##-##</code> のパターン (<code>#</code> は数字の0から9) に一致しない場合はエラーメッセージが表示され、入力欄が無効として強調表示されるのが分かるでしょう。もちろん、これでユーザーが無効な日付や不正な書式を入力するのを止めることはできません。ですから、まだ問題があります。</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">span {
+  position: relative;
+}
+
+span::after {
+  right: -18px;
+  position: absolute;
+}
+
+input:invalid + span::after {
+  content: '✖';
+}
+
+input:valid + span::after {
+  content: '✓';
+}</pre>
+</div>
+
+<p>現時点では、ブラウザーに依存しない方法でフォームで日付を扱う最善の方法は、年月日を別々なコントロールに入力するようにするか、 <a href="https://jqueryui.com/datepicker/">jQuery date picker</a> のような JavaScript ライブラリを使用することです。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例では、日付を選択するユーザーインターフェイスの要素を2組作成します。ネイティブの <code>&lt;input type="date"&gt;</code> による選択と、ネイティブの日付入力に対応していない古いブラウザー向けの、3つの {{htmlelement("select")}} 要素です。</p>
+
+<p>{{EmbedLiveSample('Examples', 600, 100)}}</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>HTML は次のようになります。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+    &lt;div class="nativeDatePicker"&gt;
+      &lt;label for="bday"&gt;誕生日を入力してください:&lt;/label&gt;
+      &lt;input type="date" id="bday" name="bday"&gt;
+      &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;p class="fallbackLabel"&gt;誕生日を入力してください:&lt;/p&gt;
+    &lt;div class="fallbackDatePicker"&gt;
+      &lt;span&gt;
+        &lt;select id="year" name="year"&gt;
+        &lt;/select&gt;
+        &lt;label for="year"&gt;年&lt;/label&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;select id="month" name="month"&gt;
+          &lt;option selected&gt;1&lt;/option&gt;
+          &lt;option&gt;2&lt;/option&gt;
+          &lt;option&gt;3&lt;/option&gt;
+          &lt;option&gt;4&lt;/option&gt;
+          &lt;option&gt;5&lt;/option&gt;
+          &lt;option&gt;6&lt;/option&gt;
+          &lt;option&gt;7&lt;/option&gt;
+          &lt;option&gt;8&lt;/option&gt;
+          &lt;option&gt;9&lt;/option&gt;
+          &lt;option&gt;10&lt;/option&gt;
+          &lt;option&gt;11&lt;/option&gt;
+          &lt;option&gt;12&lt;/option&gt;
+        &lt;/select&gt;
+        &lt;label for="month"&gt;月&lt;/label&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;select id="day" name="day"&gt;
+        &lt;/select&gt;
+        &lt;label for="day"&gt;日&lt;/label&gt;
+      &lt;/span&gt;
+    &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>月は (常に同じなので) ハードコーディングされていますが、年と日の値は、現在の年、および現在選択されている年と月によってそれぞれ動的に生成されます (どのように動作するかについての詳細な説明は、以下のコードのコメントを参照してください)。</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">span {
+  padding-left: 5px;
+}
+
+input:invalid + span::after {
+  content: '✖';
+}
+
+input:valid + span::after {
+  content: '✓';
+}</pre>
+</div>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>もう一つの面白い部分は、機能の検出コードです。 — ブラウザーが <code>&lt;input type="date"&gt;</code> に対応しているかどうかを検出するためのものです。</p>
+
+<p>新たな {{htmlelement("input")}} 要素を生成し、その <code>type</code> を <code>date</code> に設定して、すぐにどの型になったのかをチェックします。対応していないブラウザーでは、 <code>text</code> が返されます。これは、 <code>date</code> 型が <code>text</code> 型へフォールバックされるためです。 <code>&lt;input type="date"&gt;</code> に対応していない場合は、ネイティブの日付選択を非表示にして、フォールバック ({{htmlelement("select")}}) 表示します。</p>
+
+<pre class="brush: js notranslate">// 変数を定義
+var nativePicker = document.querySelector('.nativeDatePicker');
+var fallbackPicker = document.querySelector('.fallbackDatePicker');
+var fallbackLabel = document.querySelector('.fallbackLabel');
+
+var yearSelect = document.querySelector('#year');
+var monthSelect = document.querySelector('#month');
+var daySelect = document.querySelector('#day');
+
+// 最初はフォールバックを隠す
+fallbackPicker.style.display = 'none';
+fallbackLabel.style.display = 'none';
+
+// 新しい日付入力が文字列入力にフォールバックされるかどうか
+var test = document.createElement('input');
+
+try {
+  test.type = 'date';
+} catch (e) {
+  console.log(e.description);
+}
+
+// もし文字列入力になるならば、 if() {} ブロックの中のコードを実行する
+if(test.type === 'text') {
+  // ネイティブの日付選択を隠してフォールバック版を表示
+  nativePicker.style.display = 'none';
+  fallbackPicker.style.display = 'block';
+  fallbackLabel.style.display = 'block';
+
+  // 年と日を動的に生成する
+  // （月は常に同じなのでハードコーディング）
+  populateDays(monthSelect.value);
+  populateYears();
+}
+
+function populateDays(month) {
+  // delete the current set of &lt;option&gt; elements out of the
+  // day &lt;select&gt;, ready for the next set to be injected
+  while(daySelect.firstChild){
+    daySelect.removeChild(daySelect.firstChild);
+  }
+
+  // 挿入する日数を保持する変数を作成
+  var dayNum;
+
+  // 31日か30日か？
+  if(month === '1' | month === '3' | month === '5' | month === '7' | month === '8' | month === '10' | month === '12') {
+    dayNum = 31;
+  } else if(month === '4' | month === '6' | month === '9' | month === '11') {
+    dayNum = 30;
+  } else {
+  // 2月の場合は、閏年かどうかを計算する
+  var year = yearSelect.value;
+  var isLeap = new Date(year, 1, 29).getMonth() == 1;
+  isLeap ? dayNum = 29 : dayNum = 28;
+  }
+
+  // &lt;select&gt; に正しい数の新しい &lt;option&gt; 要素を挿入
+  for(i = 1; i &lt;= dayNum; i++) {
+    var option = document.createElement('option');
+    option.textContent = i;
+    daySelect.appendChild(option);
+  }
+
+  // 前回の日が既に設定されていたら、 daySelect の値を
+  // 日に設定し、年を変えたときに1に戻ることを
+  // 避ける
+  if(previousDay) {
+    daySelect.value = previousDay;
+
+    // 前回設定されていた日が大きい数字、例えば31であり、
+    // その後で日数が少ない月 (例えば2月) を選択した場合、
+    // このコードで空欄の日選択を表示するのではなく、
+    // 利用可能な最大の日を選択するように保証する
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 1;
+    }
+
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 2;
+    }
+
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 3;
+    }
+  }
+}
+
+function populateYears() {
+  // 今年を数値として取得
+  var date = new Date();
+  var year = date.getFullYear();
+
+  // 今年から100年前までの年が &lt;select&gt; で選択できるようにする
+  for(var i = 0; i &lt;= 100; i++) {
+    var option = document.createElement('option');
+    option.textContent = year-i;
+    yearSelect.appendChild(option);
+  }
+}
+
+// 年や月の &lt;select&gt; 値が変更されたら、 populateDays() を
+// 再実行して日数を調整する
+yearSelect.onchange = function() {
+  populateDays(monthSelect.value);
+}
+
+monthSelect.onchange = function() {
+  populateDays(monthSelect.value);
+}
+
+// 日の選択を保存
+var previousDay;
+
+// 以前どの日が設定されていたかを保存する
+// 使い方は populateDays() を参照
+daySelect.onchange = function() {
+  previousDay = daySelect.value;
+}</pre>
+
+<div class="note">
+<p><strong>注</strong>: 53週ある年もあることを忘れないでください (<a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">年あたりの週数</a>を参照)。商品のアプリを開発するときはこれを念頭に置いておく必要があります。</p>
+</div>
+
+<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#date-state-(type=date)', '&lt;input type="date"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sec-forms.html#date-state-typedate', '&lt;input type="date"&gt;')}}</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-date")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>全般的な {{HTMLElement("input")}} およびその操作に使用する{{domxref("HTMLInputElement")}} インターフェイス</li>
+ <li><a href="/ja/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">日付と時刻の選択のチュートリアル</a></li>
+ <li><a href="/ja/docs/Web/HTML/Date_and_time_formats">HTML で使われる日付や時刻の形式</a></li>
+ <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li>
+</ul>
diff --git a/files/ja/web/html/element/input/datetime-local/index.html b/files/ja/web/html/element/input/datetime-local/index.html
new file mode 100644
index 0000000000..6959b8643f
--- /dev/null
+++ b/files/ja/web/html/element/input/datetime-local/index.html
@@ -0,0 +1,637 @@
+---
+title: <input type="datetime-local">
+slug: Web/HTML/Element/input/datetime-local
+tags:
+  - Date
+  - Date and Time
+  - Element
+  - Form input
+  - HTML
+  - HTML forms
+  - Input
+  - Input Element
+  - Input Type
+  - Reference
+  - Time
+  - datetime-local
+translation_of: Web/HTML/Element/input/datetime-local
+---
+<div>{{HTMLRef("Input_types")}}</div>
+
+<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>datetime-local</code></strong> 型は、ユーザーが簡単に日付と時刻、つまり年、月、日と時、分を入力することができる入力コントロールを生成します。ユーザーのローカルタイムゾーンが使用されます。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-datetime-local.html", "tabbed-shorter")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>コントロールのユーザーインターフェイスは、一般にブラウザーによってまちまちです。現時点で対応は不安定で、 Chrome/Opera とデスクトップ版の Edge、それに最新版のモバイルブラウザーが有用な実装をしています。他のブラウザーでは、このコントロールは単純な <code><a href="/ja/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code> に格下げされます。</p>
+
+<p>このコントロールは単純に<em>ローカルの日付と時刻</em>を表現するためのものであって、<em>ユーザーのローカルの日付と時刻</em>を示すとは限りません。言い換えれば、実装では有効な年、月、日、時、分をすべて、仮にその組み合わせがユーザーのタイムゾーンで無効であったとしても (春の夏時間への移行ギャップなど)、許可するべきです。一部のモバイルブラウザーは (特に iOS のものは) これを正しく実装していません。</p>
+
+<p><code>datetime-local</code> は限られたブラウザーしか対応しておらず、入力欄の動作が様々であるため、現在はこれを表示するためにフレームワークやライブラリを使用するか、独自のカスタム入力欄をした方が良いかもしれません。また、 <code>date</code> と <code>time</code> の入力欄を別々に使用すると、 <code>datetime-local</code> よりも対応が広くなります。</p>
+
+<p>一部のブラウザーでは、テキストのみの入力要素を表示し、結果をサーバーに送信する前に妥当な日付/時刻値であることを検証するものもありますが、予期しない動作をすることがあるので、この動作に頼るべきではありません。</p>
+
+<p>対応していないブラウザーを使っている人向けに、 Chrome や Opera の <code>datetime-local</code> コントロールは以下のスクリーンショットのようになります。右端の下向きの矢印をクリックすると、日付を選択するための日付選択画面が現れます。時刻は手入力する必要があります。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14949/datetime-local-chrome.png" style="display: block; height: 224px; margin: 0px auto; width: 280px;"></p>
+
+<p>Edge の <code>datetime-local</code> コントロールは以下のような外見です。日付および時刻のぶぶんの値をクリックすると、2つの別々な選択画面が現れますので、簡単に日付と時刻を設定できます。これは <code>date</code> と <code>time</code> のウィジェットを両方作成して、一つにまとめたようなものです。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14953/datetime-local-picker-edge1.png" style="display: block; height: 398px; margin: 0px auto; width: 320px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14955/datetime-local-picker-edge2.png" style="display: block; height: 394px; margin: 0px auto; width: 264px;"></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value", "値")}}</strong></td>
+   <td>(ローカルタイムゾーンでの) 日付と時刻を表す {{domxref("DOMString")}}、または空欄。</td>
+  </tr>
+  <tr>
+   <td><strong>イベント</strong></td>
+   <td>{{domxref("HTMLElement/change_event", "change")}} および {{domxref("HTMLElement/input_event", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>対応している共通属性</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("step", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL 属性</strong></td>
+   <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code></td>
+  </tr>
+  <tr>
+   <td><strong>メソッド</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value" name="Value">値</h2>
+
+<p>入力欄に入力された日付の値を表す {{domxref("DOMString")}} です。この入力型で使われる日付と時刻の値の形式は、<a href="/ja/docs/Web/HTML/Date_and_time_formats#Local_date_and_time_strings">ローカル日時の文字列</a>で説明されています。</p>
+
+<p>次のように、 {{htmlattrxref("value", "input")}} 属性に日付と時刻を入れることで、入力欄の既定値を設定することができます。</p>
+
+<pre class="brush: html notranslate">&lt;label for="party"&gt;パーティーを予約する日時を入力してください。&lt;/label&gt;
+&lt;input id="party" type="datetime-local" name="partydate" value="2017-06-01T08:30"&gt;</pre>
+
+<p>{{EmbedLiveSample('Value', 600, 60)}}</p>
+
+<p>一点気を付けなければならないことは、表示される日付と時刻の書式は実際の <code>value</code> とは異なることです。表示される日付と時刻は、オペレーティングシステムからの報告に従ってユーザーのロケールによって書式化されますが、日付や時刻の <code>value</code> は常に <code>yyyy-MM-ddThh:mm</code> の書式です。例えば、上記の値をサーバーに送信すると、 <code>partydate=2017-06-01T08:30</code> のようになります。</p>
+
+<div class="note">
+<p><strong>注:</strong> このようなデータが HTTP の <code><a href="/ja/docs/Web/HTTP/Methods/GET">GET</a></code> を通じて送信されると、コロン文字を URL 引数に含めるために、 <code>partydate=2017-06-01T08%3A30</code> のようにエスケープする必要があることもお忘れなく。これを行う方法の一つとして {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} を参照してください。</p>
+</div>
+
+<p>次のように、 JavaScript で {{domxref("HTMLInputElement.value")}} プロパティを使用して日付の値を取得したり設定したりすることもできます。</p>
+
+<pre class="brush: js notranslate">var dateControl = document.querySelector('input[type="datetime-local"]');
+dateControl.value = '2017-06-01T08:30';</pre>
+
+<p>JavaScript の {{jsxref("Date")}} には、数値の日時情報を正しく整形された文字列に変換したり、手動で行ったりするメソッドがいくつかあります。例えば、この用途では {{jsxref("Date.toISOString()")}} メソッドが利用できます。</p>
+
+<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2>
+
+<p>すべての {{HTMLElement("input")}} 要素で共通する属性に加え、 <code>datetime-local</code> 型の入力欄は次の属性にも対応しています。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">属性</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("max")}}</code></td>
+   <td>受け付ける最新の日時</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("min")}}</code></td>
+   <td>受け付ける最古の日時</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("step")}}</code></td>
+   <td>上下の矢印で値を調整する時や、検証を行う時に使用する刻み値</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3>
+
+<p>受け付ける最新の日時です。要素に入力された {{htmlattrxref("value", "input")}} がこのタイムスタンプよりも後の場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code>max</code> 属性の値が <code>yyyy-MM-ddThh:mm</code> の書式に従う妥当な文字列でない場合、要素は最大値を持ちません。</p>
+
+<p>この値は <code>min</code> 属性で指定されたものより後か、同じ日付を指定する必要があります。</p>
+
+<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3>
+
+<p>受け付ける最古の日時です。これより前のタイムスタンプの場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code>min</code> 属性の値が <code>yyyy-MM-ddThh:mm</code> の書式に従う妥当な文字列でない場合、要素は最小値を持ちません。</p>
+
+<p>この値は <code>max</code> 属性で指定されたものより前か、同じ日付を指定する必要があります。</p>
+
+<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p>
+
+<p><code>datetime-local</code> 入力欄では、 <code>step</code> の値は秒数で指定され、 1000 が乗じられます (ミリ秒単位の数値であるため)。 <code>step</code> の既定値は 60 であり、60秒 (1分、60000ミリ秒) を表します。</p>
+
+<p><em>現時点で、 <code>datetime-local</code> 入力欄で <code>step</code> に <code>any</code> の値が何を意味するかが不明確です。これは情報が決定次第、更新されるでしょう。</em></p>
+
+<h2 id="datetime-local_入力の使用">datetime-local 入力の使用</h2>
+
+<p>datetime-local 入力欄は一見すると便利に見えます。簡単に日付と時刻を選択するユーザーインターフェイスを提供し、ユーザーのロケールに関係なく、データ形式を正規化してサーバーに送信するからです。しかし、ブラウザーの互換性が限られているため、 <code>&lt;input type="datetime-local"&gt;</code> には問題があります。</p>
+
+<p><code>&lt;input type="datetime-local"&gt;</code> の基本的な使い方と少し複雑な使い方を見てみてから、その後でブラウザーの互換性の問題を緩和するアドバイスを提供しましょう ({{anch("Handling browser support", "ブラウザーの対応の扱い")}}を参照してください)。</p>
+
+<h3 id="datetime-local_の基本的な使用">datetime-local の基本的な使用</h3>
+
+<p>もっとも単純な <code>&lt;input type="datetime-local"&gt;</code> の使用方法は、次のような基本的な <code>&lt;input&gt;</code> と {{htmlelement("label")}} 要素の組み合わせです。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+    &lt;label for="party"&gt;パーティーを予約する日時を入力してください。&lt;/label&gt;
+    &lt;input id="party" type="datetime-local" name="partydate"&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Basic_uses_of_datetime-local', 600, 40)}}</p>
+
+<h3 id="Setting_maximum_and_minimum_dates_and_times" name="Setting_maximum_and_minimum_dates_and_times">日時の最大値と最小値の設定</h3>
+
+<p>{{htmlattrxref("min", "input")}} および {{htmlattrxref("max", "input")}} 属性を使用して、ユーザーが選択できる日時を制限することができます。次の例では、日時の最小値を <code>2017-06-01T08:30</code> に、日時の最大値を <code>2017-06-30T16:30</code> に設定しています。</p>
+
+<pre class="brush: html notranslate">  &lt;form&gt;
+    &lt;label for="party"&gt;パーティーを予約する日時を入力してください。&lt;/label&gt;
+    &lt;input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30"&gt;
+  &lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Setting_maximum_and_minimum_dates_and_times', 600, 40)}}</p>
+
+<p>結果は次のようになります。</p>
+
+<ul>
+ <li>この結果は、2017年の6月の日付のみが選択できるようになります。文字列値の「日」の部分のみが編集可能となり、日付選択ウィジェットで6月以外にスクロールすることはできなくなります。</li>
+ <li>どのブラウザーを使用するかによって、指定された値の範囲外の時刻が時刻選択画面で選択できなかったり (Edge など)、無効な値 ({{anch("Validation")}} を参照) であっても設定できたりすることがあります (Chrome など)。</li>
+</ul>
+
+<div class="note">
+<p><strong>注</strong>: {{htmlattrxref("step", "input")}} 属性を使用すると、日時を加算するたびに飛ばす日時を設定できるはずです (例えば、土曜日のみを選択できるようにしたい場合など)。しかし、執筆時点でどの実装も正しく動作していないようです。</p>
+</div>
+
+<h3 id="Controlling_input_size" name="Controlling_input_size">入力欄の寸法の制御</h3>
+
+<p><code>&lt;input type="datetime-local"&gt;</code> は、 {{htmlattrxref("size", "input")}} のようなコントロールの寸法に関する属性には対応していません。寸法を変更する必要がある場合は、 <a href="/ja/docs/Web/CSS">CSS</a> を使用する必要があります。</p>
+
+<h3 id="Setting_timezones" name="Setting_timezones">タイムゾーンの設定</h3>
+
+<p><code>datetime-local</code> 入力型はコントロールのタイムゾーンやロケールを設定する方法がありません。これは <code><a href="/ja/docs/Web/HTML/Element/input/datetime">datetime</a></code> 入力型では利用できましたが、この入力型は廃止され、仕様書から削除されました。削除された主な理由はブラウザーの互換性がなく、ユーザーインターフェイスや使い勝手が決まっていなかったからです。単に日付と時刻を設定するコントロールを用意して、別なコントロールで地域を設定したほうが簡単です。</p>
+
+<p>例えば、ユーザーがログインしている場所によって地域を設定するようなシステムを開発する場合、タイムゾーンを <code><a href="/ja/docs/Web/HTML/Element/input/hidden">hidden</a></code> 入力型で次のように提供することができます。</p>
+
+<pre class="brush: html notranslate">&lt;input type="hidden" id="timezone" name="timezone" value="-08:00"&gt;</pre>
+
+<p>一方、ユーザーに日時入力と共にタイムゾーンを入力できるようにする必要がある場合、 {{htmlelement("select")}} 要素などでタイムゾーンを入力する手段を提供することができます。</p>
+
+<pre class="brush: html notranslate">&lt;select name="timezone_offset" id="timezone-offset" class="span5"&gt;
+    &lt;option value="-12:00"&gt;(GMT -12:00) Eniwetok, Kwajalein&lt;/option&gt;
+    &lt;option value="-11:00"&gt;(GMT -11:00) Midway Island, Samoa&lt;/option&gt;
+    &lt;option value="-10:00"&gt;(GMT -10:00) Hawaii&lt;/option&gt;
+    &lt;option value="-09:50"&gt;(GMT -9:30) Taiohae&lt;/option&gt;
+    &lt;option value="-09:00"&gt;(GMT -9:00) Alaska&lt;/option&gt;
+    &lt;option value="-08:00"&gt;(GMT -8:00) Pacific Time (US &amp;amp; Canada)&lt;/option&gt;
+
+  ...
+
+&lt;/select&gt;</pre>
+
+<p>どちらの場合も、日時の値とタイムゾーンの値はサーバーに別々のデータポイントとして送信されるため、サーバー側のデータベースに適切に格納する必要があります。</p>
+
+<div class="note">
+<p><strong>注</strong>: 上記のコードの断片は、<a href="https://gist.github.com/nodesocket/3919205">HTML select 要素の全世界のタイムゾーン</a>から取得しました。</p>
+</div>
+
+<h2 id="Validation" name="Validation">検証</h2>
+
+<p>既定では、 <code>&lt;input type="datetime-local"&gt;</code> は入力された値の検証を行いません。ユーザーインターフェイスの実装は一般的に、日付でないものの入力をさせないからです。これは便利です。しかし、それでも入力欄を空のままにしたり、 (<code>text</code> 型にフォールバックするブラウザーにおいて) 無効な日付 (例えば4月32日など) を入力したりすることが可能です。</p>
+
+<p>{{htmlattrxref("min", "input")}} および {{htmlattrxref("max", "input")}} を使用して有効な日付を制限したり ({{anch("Setting maximum and minimum dates", "日付の最大値と最小値の設定")}}を参照)、 {{htmlattrxref("required", "input")}} 属性を使用して日時の入力を必須にしたりすることができます。その結果、対応しているブラウザーでは、範囲を外れた日付や空の日付欄を送信しようとするとエラーが表示されるでしょう。</p>
+
+<p>例を見てみましょう。ここで日付の最小値と最大値を設定し、入力欄を必須にしました。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+    &lt;div&gt;
+        &lt;label for="party"&gt;希望するパーティーの日時を選択して下さい (必須、6月1日午前8:30～6月30日午後4:30) &lt;/label&gt;
+        &lt;input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30" required&gt;
+        &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+        &lt;input type="submit" value="予約する！"&gt;
+    &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>不完全な日付 (または設定した範囲を外れた日付) を送信しようとすると、ブラウザーはエラーを表示します。例を実行してみましょう。</p>
+
+<p>{{ EmbedLiveSample('Validation', 600, 120) }}</p>
+
+<p>対応しているブラウザーで入力しなかった場合のスクリーンショットです。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14957/datetime-local-error.png" style="display: block; height: 100px; margin: 0px auto; width: 558px;"></p>
+
+<p>上記の例の CSS です。 CSS の {{cssxref(":valid")}} および {{cssxref(":invalid")}} プロパティを使用して、現在の値が有効かどうかに基づいてスタイルを設定しています。アイコンは入力欄そのものではなく、入力欄の隣の {{htmlelement("span")}} に置くようにしないと、 Chrome ではコントロールの内側にコンテンツを生成するので、正しく整形したり表示したりすることができません。</p>
+
+<pre class="brush: css notranslate">div {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+}
+
+label {
+  display: inline-block;
+  width: 300px;
+}
+
+input:invalid+span:after {
+    content: '✖';
+    padding-left: 5px;
+}
+
+input:valid+span:after {
+    content: '✓';
+    padding-left: 5px;
+}</pre>
+
+<div class="warning">
+<p><strong>重要</strong>: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用にはなりません。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、誤った種類のデータなど) が送信された場合に障害が発生するおそれがあります。</p>
+</div>
+
+<h2 id="Handling_browser_support" name="Handling_browser_support">ブラウザーの対応の扱い</h2>
+
+<p>前述のように、現時点で日付入力を書く上で一番の問題は{{anch("Browser compatibility", "ブラウザーの互換性")}}です。デスクトップでは Chrome/Opera と Edge のみが対応しており、モバイルでは多くの最新のブラウザーが対応しています。例えば、 Android 版 Firefox の <code>datetime-local</code> の選択画面はこの例のように表示されます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14951/datetime-local-fxa.png" style="display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
+
+<p>対応していないブラウザーでは、文字列入力欄に安全に格下げされますが、これはユーザーインターフェイスの一貫性 (表示されるコントロールが異なること) とデータの扱いの両方で問題を生みます。</p>
+
+<p>2番目の問題はより深刻です。すでに述べたように、 <code>datetime-local</code> 入力欄では、実際の値が常に <code>yyyy-mm-ddThh:mm</code> の書式で正規化されます。一方、文字列入力欄では、既定でブラウザーは日付がどの書式で入力されるかの認識がなく、以下のように人間が日付と時刻を書く様々な方法で入力される可能性があります。</p>
+
+<ul>
+ <li><code>ddmmyyyy</code></li>
+ <li><code>dd/mm/yyyy</code></li>
+ <li><code>mm/dd/yyyy</code></li>
+ <li><code>dd-mm-yyyy</code></li>
+ <li><code>mm-dd-yyyy</code></li>
+ <li><code>mm-dd-yyyy hh:mm</code> (12時制)</li>
+ <li><code>mm-dd-yyyy HH:mm</code> (24時制)</li>
+ <li>など</li>
+</ul>
+
+<p>これを回避する方法の一つは、日付入力欄に {{htmlattrxref("pattern", "input")}} 属性を付けることです。日付入力欄はこれを使用しないので、 <code>text</code> 入力欄にフォールバックされたときは使用します。例えば、次の例を未対応のブラウザーで見てみてください。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="party"&gt;希望するパーティーの日時を選択して下さい (必須、6月1日午前8:30～6月30日午後4:30) &lt;/label&gt;
+    &lt;input id="party" type="datetime-local" name="partydate"
+           min="2017-06-01T08:30" max="2017-06-30T16:30"
+           pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="submit" value="予約する！"&gt;
+  &lt;/div&gt;
+  &lt;input type="hidden" id="timezone" name="timezone" value="-08:00"&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Handling_browser_support', 600, 100)}}</p>
+
+<p><code>nnnn-nn-nnTnn:nn</code> のパターン (<code>n</code> は数字の0から9) に一致しない文字列を入力して送信しようとすると、エラーメッセージが表示される (そして入力欄が無効として強調表示される) のが分かるでしょう。もちろん、これではユーザーが無効な日付を入力したり、誤った形式で日付や時刻を入力したりすることを止めることはできません。</p>
+
+<p>また、日付や時刻を入力するパターンをどうやってユーザーに理解させればよいのでしょうか？</p>
+
+<p>まだ問題があります。</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+}
+
+input:invalid + span {
+  position: relative;
+}
+
+input:invalid + span:after {
+  content: '✖';
+  position: absolute;
+  right: -18px;
+}
+
+input:valid + span {
+  position: relative;
+}
+
+input:valid + span:after {
+  content: '✓';
+  position: absolute;
+  right: -18px;
+}</pre>
+</div>
+
+<p>ブラウザーに依存しない方法によってフォームで日付を扱う最善の方法は、現時点では年月日を別々なコントロール ({{htmlelement("select")}} 要素が一般的です。以下の実装を見てください) にするか、 <a href="https://jqueryui.com/datepicker/">jQuery date picker</a> や <a href="http://timepicker.co/">jQuery timepicker plugin</a> のような JavaScript ライブラリを使用することです。</p>
+
+<h2 id="2038年問題_主にサーバー側">2038年問題 (主にサーバー側)</h2>
+
+<p>JavaScript は日付を格納するとき、すべての数値と同様に、倍精度浮動小数点を使用しますので、 JavaScript のコードは整数への変換やビット操作が行われない限り、2038年問題に悩まされることはありません。ビット操作演算は、32ビットの符号付き2の補数で演算を行っているので影響を受ける可能性があります。</p>
+
+<p>問題はサーバー側で、 2<sup>31</sup>-1 よりも大きな日付値を格納する場合です。この問題を解決するには、すべての日付を符号なしの32ビット整数、符号付きの64ビット整数、または倍精度の浮動小数点のいずれかでサーバーに格納する必要があります。サーバーが PHP で書かれている場合は、PHP 8 または 7 にアップグレードし、ハードウェアを x86_64 または IA64 にアップグレードするだけで解決できるかもしれません。他のハードウェアで行き詰っている場合は、32ビット仮想マシン内で64ビットハードウェアをエミュレートすることもできますが、ほとんどの仮想マシンはこの種の仮想化をサポートしていないため、安定性が損なわれ、性能が大きく低下する可能性があります。</p>
+
+<h2 id="The_Y10k_Problem_often_client-side" name="The_Y10k_Problem_often_client-side">10000年問題 (主にクライアント側)</h2>
+
+<p>多くのサーバーでは、日付を文字列ではなく数値として保存します。10000年以降は、これらの数字は以前よりも少し大きくなるだけなので、多くのサーバーでは10000年以降をフォームで送信しても問題が発生することはありません。</p>
+
+<p>問題はクライアント側の問題です。年に4桁以上の数字を持つ日付の解析です。</p>
+
+<pre class="brush: html notranslate">&lt;!--midnight of January 1st, 10000: the exact time of Y10K--&gt;
+&lt;input type="datetime-local" value="+010000-01-01T05:00"/&gt;</pre>
+
+<p>単純なことです。何桁でもいいコードを用意するだけです。5桁の数字だけを用意するのではありません。プログラムで値を設定するための JavaScript のコードを紹介します。</p>
+
+<pre class="brush: js notranslate">function setValue(element, date) {
+    var isoString = date.toISOString()
+    element.value = isoString.substring(0, (isoString.indexOf("T")|0) + 6|0);
+}</pre>
+
+<p>もしこれがあなたの死後何世紀も経ってから起こるのであれば、なぜ10000年問題を心配するのかでしょうか。その通り、あなたはすでに死んでいるので、あなたのソフトウェアを使っている企業は、システムを十分に知っている他のコーダーが入ってきてそれを修正することなく、あなたのソフトウェアを使うと行き詰まってしまうからです。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例では、日付を選択するユーザーインターフェイスの要素を2組生成します。ネイティブの <code>&lt;input type="datetime-local"&gt;</code> 入力欄と、ネイティブの入力に対応しない古いブラウザー向けの、5つの {{htmlelement("select")}} 要素による日時選択です。</p>
+
+<p>{{EmbedLiveSample('Examples', 600, 140)}}</p>
+
+<p>HTML は次のようになります。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div class="nativeDateTimePicker"&gt;
+    &lt;label for="party"&gt;希望するパーティーの日時を選択して下さい。&lt;/label&gt;
+    &lt;input type="datetime-local" id="party" name="bday"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;p class="fallbackLabel"&gt;希望するパーティーの日時を選択して下さい。&lt;/p&gt;
+  &lt;div class="fallbackDateTimePicker"&gt;
+    &lt;div&gt;
+      &lt;span&gt;
+        &lt;select id="year" name="year"&gt;
+        &lt;/select&gt;
+        &lt;label for="year"&gt;年&lt;/label&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;select id="month" name="month"&gt;
+          &lt;option selected&gt;1&lt;/option&gt;
+          &lt;option&gt;2&lt;/option&gt;
+          &lt;option&gt;3&lt;/option&gt;
+          &lt;option&gt;4&lt;/option&gt;
+          &lt;option&gt;5&lt;/option&gt;
+          &lt;option&gt;6&lt;/option&gt;
+          &lt;option&gt;7&lt;/option&gt;
+          &lt;option&gt;8&lt;/option&gt;
+          &lt;option&gt;9&lt;/option&gt;
+          &lt;option&gt;10&lt;/option&gt;
+          &lt;option&gt;11&lt;/option&gt;
+          &lt;option&gt;12&lt;/option&gt;
+        &lt;/select&gt;
+        &lt;label for="month"&gt;月&lt;/label&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;select id="day" name="day"&gt;
+        &lt;/select&gt;
+        &lt;label for="day"&gt;日&lt;/label&gt;
+      &lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;span&gt;
+        &lt;select id="hour" name="hour"&gt;
+        &lt;label for="hour"&gt;時&lt;/label&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;select id="minute" name="minute"&gt;
+        &lt;label for="minute"&gt;分&lt;/label&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>月は (常に同じなので) ハードコーディングされていますが、年と日の値は、現在の年、および現在選択されている年と月によってそれぞれ動的に生成されます (どのように動作するかについての詳細な説明は、以下のコードのコメントを参照してください)。時と分についても、とても多いので動的に生成するようにしました。</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute;
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+</div>
+
+<p>もう一つの面白い部分は、機能の検出コードです。ブラウザーが <code>&lt;input type="datetime-local"&gt;</code> に対応しているかどうかを検出するために、新たな {{htmlelement("input")}} 要素を生成し、その <code>type</code> を <code>datetime-local</code> に設定してみて、すぐに type に何が設定されたかをチェックします。 <code>datetime-local</code> 型に対応していないブラウザーでは、 <code>datetime-local</code> 型が <code>text</code> 型へフォールバックされます。 <code>&lt;input type="datetime-local"&gt;</code> に対応していない場合は、ネイティブの日時入力欄を非表示にしてフォールバック用の ({{htmlelement("select")}}) による選択ユーザーインターフェイスを表示します。</p>
+
+<pre class="brush: js notranslate">// 変数を定義
+var nativePicker = document.querySelector('.nativeDateTimePicker');
+var fallbackPicker = document.querySelector('.fallbackDateTimePicker');
+var fallbackLabel = document.querySelector('.fallbackLabel');
+
+var yearSelect = document.querySelector('#year');
+var monthSelect = document.querySelector('#month');
+var daySelect = document.querySelector('#day');
+var hourSelect = document.querySelector('#hour');
+var minuteSelect = document.querySelector('#minute');
+
+// 最初はフォールバックを非表示にする
+fallbackPicker.style.display = 'none';
+fallbackLabel.style.display = 'none';
+
+// 新しい日付入力が文字列入力にフォールバックされるかどうか
+var test = document.createElement('input');
+
+try {
+  test.type = 'datetime-local';
+} catch (e) {
+  console.log(e.description);
+}
+
+// もし文字列入力になるならば、 if() {} ブロックの中のコードを実行する
+if(test.type === 'text') {
+  // ネイティブの日付選択を隠してフォールバック版を表示
+  nativePicker.style.display = 'none';
+  fallbackPicker.style.display = 'block';
+  fallbackLabel.style.display = 'block';
+
+  // 日と年を動的に生成する
+  //  (月は常に同じなのでハードコーディング)
+  populateDays(monthSelect.value);
+  populateYears();
+  populateHours();
+  populateMinutes();
+}
+
+function populateDays(month) {
+  // 日の &lt;select&gt; から現在の一連の &lt;option&gt; 要素を削除し、
+  // 挿入のための準備をする
+  while(daySelect.firstChild){
+    daySelect.removeChild(daySelect.firstChild);
+  }
+
+  // 挿入する日数を保持する変数を作成
+  var dayNum;
+
+  // 31 か 30 日か
+  if(month === '1' || month === '3' || month === '5' || month === '7' || month === '8' || month === '10' || month === '12') {
+    dayNum = 31;
+  } else if(month === '4' || month === '6' || month === '9' || month === '11') {
+    dayNum = 30;
+  } else {
+  // 2月の場合は、閏年かどうかを計算する
+    var year = yearSelect.value;
+    var isLeap = new Date(year, 1, 29).getMonth() == 1;
+    isLeap ? dayNum = 29 : dayNum = 28;
+  }
+
+  // 日付の &lt;select&gt; に正しい数の新しい &lt;option&gt; 要素を
+  for(i = 1; i &lt;= dayNum; i++) {
+    var option = document.createElement('option');
+    option.textContent = i;
+    daySelect.appendChild(option);
+  }
+
+  // 前回の日が既に設定されていたら、 daySelect の値を
+  // 日に設定し、年を変えたときに1に戻ることを避ける
+  if(previousDay) {
+    daySelect.value = previousDay;
+
+    // 前回設定されていた日が大きい数字、つまり31であった場合、
+    // そして日数が少ない月 (例えば2月) を選択した場合、
+    // コードのこの部分で空欄を表示するのではなく、一番大きな日が
+    // 選択されるようにする
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 1;
+    }
+
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 2;
+    }
+
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 3;
+    }
+  }
+}
+
+function populateYears() {
+  // 今年を数字として取得
+  var date = new Date();
+  var year = date.getFullYear();
+
+  // 今年から100年前までの年が &lt;select&gt; で選択できるようにする
+  for(var i = 0; i &lt;= 100; i++) {
+    var option = document.createElement('option');
+    option.textContent = year-i;
+    yearSelect.appendChild(option);
+  }
+}
+
+function populateHours() {
+  // populate the hours &lt;select&gt; with the 24 hours of the day
+  for(var i = 0; i &lt;= 23; i++) {
+    var option = document.createElement('option');
+    option.textContent = (i &lt; 10) ? ("0" + i) : i;
+    hourSelect.appendChild(option);
+  }
+}
+
+function populateMinutes() {
+  // populate the minutes &lt;select&gt; with the 60 hours of each minute
+  for(var i = 0; i &lt;= 59; i++) {
+    var option = document.createElement('option');
+    option.textContent = (i &lt; 10) ? ("0" + i) : i;
+    minuteSelect.appendChild(option);
+  }
+}
+
+// 年や月の &lt;select&gt; 値が変更されたら、 populateDays() を
+// 再実行して日数を調整する
+yearSelect.onchange = function() {
+  populateDays(monthSelect.value);
+}
+
+monthSelect.onchange = function() {
+  populateDays(monthSelect.value);
+}
+
+//日数を保存
+var previousDay;
+
+// 以前どの日が設定されていたかを保存する
+// 使い方は populateDays() を参照
+daySelect.onchange = function() {
+  previousDay = daySelect.value;
+}</pre>
+
+<div class="note">
+<p><strong>注</strong>: 53週ある年もあることを忘れないでください (<a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">年あたりの週数</a>を参照)。商品のアプリを開発するときはこれを念頭に置いておく必要があります。</p>
+</div>
+
+<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#local-date-and-time-state-(type=datetime-local)', '&lt;input type="datetime-local"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#local-date-and-time-state-(type=datetime-local)', '&lt;input type="datetime-local"&gt;')}}</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-datetime-local")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>全般的な {{HTMLElement("input")}} およびその操作に使用する{{domxref("HTMLInputElement")}} インターフェイス</li>
+ <li><code><a href="/ja/docs/Web/HTML/Element/input/date">&lt;input type="date"&gt;</a></code> および <code><a href="/ja/docs/Web/HTML/Element/input/time">&lt;input type="time"&gt;</a></code></li>
+ <li><a href="/ja/docs/Web/HTML/Date_and_time_formats">HTML で使われる日付や時刻の形式</a></li>
+ <li><a href="/ja/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">日付と時刻の選択のチュートリアル</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Compatibility of CSS properties</a></li>
+</ul>
diff --git a/files/ja/web/html/element/input/datetime/index.html b/files/ja/web/html/element/input/datetime/index.html
new file mode 100644
index 0000000000..01dd0c0cc6
--- /dev/null
+++ b/files/ja/web/html/element/input/datetime/index.html
@@ -0,0 +1,29 @@
+---
+title: <input type="datetime">
+slug: Web/HTML/Element/input/datetime
+tags:
+  - HTML
+  - HTML フォーム
+  - Obsolete
+  - Reference
+  - datetime
+  - input 要素
+  - フォーム
+  - 入力型
+  - 要素
+translation_of: Web/HTML/Element/input/datetime
+---
+<div>{{HTMLRef}}{{obsolete_header}}</div>
+
+<p>HTML の <code>&lt;input type="datetime"&gt;</code> は日付と時刻 (時、分、秒と小数点以下の秒) に加えてタイムゾーンを入力するコントロールでした。<strong>この機能は <a class="external external-icon" href="https://github.com/whatwg/html/issues/336">WHATWG HTML 仕様書から削除</a>され</strong>、もうブラウザーでは対応されていません。</p>
+
+<p>代わりに、ブラウザーは <code><a href="/ja/docs/Web/HTML/Element/input/datetime-local">&lt;input type="datetime-local"&gt;</a></code> を実装して (かつ開発者に使用を推奨して) います。</p>
+
+<p>この入力型で使用される日付と時刻の形式は、{{SectionOnPage("/ja/docs/Web/HTML/Date_and_time_formats", "Format of a valid global date and time string")}}で説明しています。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{HTMLElement("input")}} 要素</li>
+ <li><a href="/ja/docs/Web/HTML/Date_and_time_formats">HTML で使われる日付と時刻の形式</a></li>
+</ul>
diff --git a/files/ja/web/html/element/input/email/index.html b/files/ja/web/html/element/input/email/index.html
new file mode 100644
index 0000000000..9b45e82247
--- /dev/null
+++ b/files/ja/web/html/element/input/email/index.html
@@ -0,0 +1,416 @@
+---
+title: <input type="email">
+slug: Web/HTML/Element/input/email
+tags:
+  - Email
+  - Forms
+  - HTML
+  - HTML forms
+  - Input Type
+  - Reference
+translation_of: Web/HTML/Element/input/email
+---
+<div>{{HTMLRef("Input_types")}}</div>
+
+<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <code><strong>email</strong></code> 型は、ユーザーに一つのメールアドレス、または、 <code><a href="/ja/docs/Web/HTML/Attributes/multiple">multiple</a></code> 属性が設定されていた場合は、メールアドレスのリストを入力および編集させるために使用します。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-email.html", "tabbed-shorter")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>入力値はフォームの送信前に自動的に検証され、空欄または正しい形式のメールアドレス (またはメールアドレスのリスト) のどちらかであることが確認されます。 CSS の {{cssxref(":valid")}} および {{cssxref(":invalid")}} 擬似クラスが自動的に適用され、フィールド上の現在の値が妥当なメールアドレスであるかどうかを視覚的に示します。</p>
+
+<p><code>email</code> 型に対応していないブラウザーでは、 <code>email</code> 入力欄は標準の {{HTMLElement("input/text", "text")}} 入力欄で代替されます。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value", "値")}}</strong></td>
+   <td>メールアドレスを表す {{domxref("DOMString")}}、または空欄</td>
+  </tr>
+  <tr>
+   <td><strong>イベント</strong></td>
+   <td>{{domxref("HTMLElement/change_event", "change")}} および {{domxref("HTMLElement/input_event", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>対応している共通属性</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("multiple", "input")}}, {{htmlattrxref("name", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}}, {{htmlattrxref("size", "input")}}, {{htmlattrxref("type", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL 属性</strong></td>
+   <td><code>list</code> および <code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>メソッド</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value" name="Value">値</h2>
+
+<p>{{HTMLElement("input")}} 要素の {{htmlattrxref("value", "input")}} 属性には {{domxref("DOMString")}} が入り、メールアドレスの構文に合うかどうかが自動的に検証されます。具体的には、検証に通ることができる値の書式には3種類があります。</p>
+
+<ol>
+ <li>空文字列 ("")。ユーザーが値を入力しないか、または値が削除されたことを表します。</li>
+ <li>単一の正しい形式のメールアドレス。メールアドレスが実在する必要はありませんが、少なくとも正しい書式です。簡単に言えば、 <code>username@domain</code> または <code>username@domain.tld</code> の形です。もちろんそれ以上のものもあります。{{anch("Validation", "検証")}}の節で、メールアドレスの検証アルゴリズムで一致する{{Glossary("regular expression", "正規表現")}}について参照してください。</li>
+ <li>{{htmlattrxref("multiple", "input")}} 属性が指定されたとき (のみ)、値はカンマ区切りで複数の正しい形式のメールアドレスを入れることができます。それぞれのメールアドレスの前後にある空白は除去されます。</li>
+</ol>
+
+<p>{{anch("Validation", "検証")}}の節で、どのようなメールアドレスが正しい形式であると検証されるかの詳細を参照してください。</p>
+
+<h2 id="Additional_attributes" name="Additional_attributes">追加属性</h2>
+
+<p>型に関係なくすべての {{HTMLElement("input")}} 要素を操作する属性に加え、 <code>email</code> 型の入力欄は次の属性にも対応しています。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">属性</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("list")}}</code></td>
+   <td>The id of the &lt;datalist&gt; element that contains the optional pre-defined autocomplete options</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("maxlength")}}</code></td>
+   <td>入力欄が受け付ける最大文字数</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("minlength")}}</code></td>
+   <td>入力欄が取りうる、妥当と判断される最小文字列長</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("multiple")}}</code></td>
+   <td>複数のメールアドレスをカンマ区切りで入力することを受け付けるかどうか</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("pattern")}}</code></td>
+   <td>妥当と判断されるために、入力欄の内容が一致する必要がある正規表現</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("placeholder")}}</code></td>
+   <td>空欄の時に入力欄に表示される入力例の値</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("readonly")}}</code></td>
+   <td>入力欄の内容を読み取り専用にするかどうかを示す論理属性</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("size")}}</code></td>
+   <td>入力欄の長さを何文字分にするかを表す数値</td>
+  </tr>
+ </tbody>
+</table>
+
+<p id="htmlattrdeflist">{{page("/en-US/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p>
+
+<h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3>
+
+<p>ユーザーが <code>email</code> 入力欄に入力することができる (UTF-16 コード単位での) 最大文字数です。 0 以上の整数値である必要があります。 <code>maxlength</code> が指定されていないか、無効な値が指定されていると、 <code>email</code> 入力欄には最大文字数が設定されません。この値は <code>minlength</code> の値以上である必要もあります。</p>
+
+<p>フィールドのメールアドレスの長さが UTF-16 コード単位で <code>maxlength</code> の長さを超えていると、その入力欄は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。</p>
+
+<h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3>
+
+<p>ユーザーが <code>email</code> 入力欄に入力することができる (UTF-16 コード単位での) 最小文字数です。これは非負の整数値で、 <code>maxlength</code> で指定された値以下である必要があります。 <code>minlength</code> が指定されていないか、無効な値が指定されていると、 <code>email</code> 入力欄には最小文字数が設定されません。</p>
+
+<p>入力欄のメールアドレスの長さが UTF-16 コード単位で <code>minlength</code> の長さよりも短いと、その入力欄は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。</p>
+
+<h3 id="htmlattrdefmultiple">{{htmlattrdef("multiple")}}</h3>
+
+<p>論理属性で、存在する場合、ユーザーが複数のメールアドレスを、カンマと任意のホワイトスペースで区切ったリストを入力できることを示します。詳しくは{{anch("Allowing multiple e-mail addresses", "複数のメールアドレスの許可")}}または <a href="/ja/docs/Web/HTML/Attributes/multiple">HTML 属性: multiple</a> を参照してください。</p>
+
+<div class="note">
+<p><strong>注:</strong> 通常、 {{htmlattrxref("required", "input")}} 属性を指定すると、ユーザーは入力欄に妥当なメールアドレスを入力しなければなりません。しかし、 <code>multiple</code> 属性を追加すると、ゼロ個のメールアドレス (空文字列、またはホワイトスペースのみの文字列) が妥当な値になります。言い換えれば、 <code>multiple</code> が指定されていると、 <code>required</code> の値に関係なく、ユーザーはメールアドレスを一つも入力する必要がありません。</p>
+</div>
+
+<h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/text", "pattern-include")}}</p>
+
+<p>詳細と例については{{anch("Pattern validation", "パターン検証")}}の節を参照してください。</p>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p>
+
+<h2 id="Using_email_inputs" name="Using_email_inputs">email 入力欄の使用</h2>
+
+<p>メールアドレスはウェブで最も頻繁に入力される文字列データです。ウェブサイトにログインするときに使われたり、情報をリクエストしたり、注文の確認をできるようにしたり、ウェブメールでつかったりなどです。そのような場合、 <code>email</code> 入力型は、ユーザーインターフェイスやメールアドレスの処理の構築作業を簡略化することができるので、ウェブ開発者の仕事をはるかに楽にすることができます。メールアドレスの入力欄を、 <code>type</code> の値を正しく <code>email</code> にして作成すれば、入力された文字列が少なくとも合法のメールアドレスである可能性がある但し書式であることを自動的に検証してくれます。これにより、ユーザーがアドレスを打ち間違えたり、無効なアドレスを入力したりすることを防ぐのに役立ちます。</p>
+
+<p>しかし、指定された文字列が、実際に存在するメールアドレスであるかどうか、サイトのユーザーに一致するか、他の方法で利用できるかを保証するには不十分です。単に入力欄の値がメールアドレスの形式に沿っているかを保証するだけです。</p>
+
+<div class="note">
+<p><strong>注</strong>: ユーザーが HTML をその場面の裏でいじることができることを意識しておくことは極めて重要です。ですから、安全を目的として、サイトでクライアント側の値検証機能のみを使用しては<em>いけません</em>。何らかのセキュリティ上の問題を含む可能性がある値が提供されるトランザクションの場合は、いずれもサーバー側で値検証を行う<em>必要があります</em>。</p>
+</div>
+
+<h3 id="A_simple_email_input" name="A_simple_email_input">単純な email 型の入力欄</h3>
+
+<p>現在、この要素を実装しているすべてのブラウザーが、これを基本的な検証機能がついた標準のテキスト入力欄として実装しています。しかし、仕様書ではブラウザーに自由度を許容しています。例えば、この要素はユーザーの端末に内蔵されたアドレス帳と統合され、メールアドレスをリストから選ぶことができるようにすることも可能です。多くの基本的なフォームでは、 <code>email</code> 入力欄は次のように実装されています。</p>
+
+<pre class="brush: html notranslate">&lt;input id="emailAddress" type="email"&gt;</pre>
+
+<p>{{ EmbedLiveSample('A_simple_email_input', 600, 40) }}</p>
+
+<p>なお、妥当と判断されるのは空欄の場合と、単一の妥当な書式のメールアドレスが入力されている場合で、それ以外は妥当であるとは判断されません。 {{htmlattrxref("required", "input")}} 属性を追加することで、妥当な書式のメールアドレスのみが許容されるようになり、空欄の場合は妥当であるとは判断されなくなります。</p>
+
+<h3 id="Allowing_multiple_e-mail_addresses" name="Allowing_multiple_e-mail_addresses">複数のメールアドレスの許可</h3>
+
+<p><code><a href="/ja/docs/Web/HTML/Attributes/multiple">multiple</a></code> 論理属性を追加することで、入力欄に複数のメールアドレスを受け付けるよう構成することができます。</p>
+
+<pre class="brush: html notranslate">&lt;input id="emailAddress" type="email" multiple&gt;</pre>
+
+<p>{{ EmbedLiveSample('Allowing_multiple_e-mail_addresses', 600, 40) }}</p>
+
+<p>入力欄は単一のメールアドレスが入力された時や、任意の数のメールアドレスをカンマ区切りで入力した場合、その中にホワイトスペース文字がある場合も有効として扱われるようになります。</p>
+
+<div class="note">
+<p><strong>注</strong>: <code>multiple</code> が使用されると、値を空欄にすることが許可されます。</p>
+</div>
+
+<p><code>multiple</code> が指定された場合に有効な文字列の例をいくつか示します。</p>
+
+<ul>
+ <li><code>""</code></li>
+ <li><code>"me@example"</code></li>
+ <li><code>"me@example.org"</code></li>
+ <li><code>"me@example.org,you@example.org"</code></li>
+ <li><code>"me@example.org, you@example.org"</code></li>
+ <li><code>"me@example.org,you@example.org,    us@example.org"</code></li>
+</ul>
+
+<p>無効な文字列の例をいくつか示します。</p>
+
+<ul>
+ <li><code>","</code></li>
+ <li><code>"me"</code></li>
+ <li><code>"me@example.org you@example.org"</code></li>
+</ul>
+
+<h3 id="Placeholders" name="Placeholders">プレイスホルダー</h3>
+
+<p>フォームがどのような入力データを取るのかについての行内のヒントを提供すると、有益なことがあります。これはページのデザインでそれぞれの {{HTMLElement("input")}} に説明のラベルを付けることができない場合に特に重要になります。ここで<strong>プレイスホルダー</strong>が登場します。プレイスホルダーは、入力される <code>value</code> が取るべき値の形式を、有効な値の例を示すことで表現する値であり、 <code>value</code> が "" の時に入力欄の中に表示されます。入力欄にデータが入力されると、プレイスホルダーは非表示になり、入力欄が空欄になると、プレイスホルダーは再度表示されます。</p>
+
+<p>ここで、 <code>email</code> 入力欄に <code>sophie@example.com</code> というプレイスホルダーを設定します。なお、入力欄の中身を操作すると、プレイスホルダーが非表示になったり再表示されたりします。</p>
+
+<pre class="brush: html notranslate">&lt;input type="email" placeholder="sophie@example.com"&gt;</pre>
+
+<p>{{ EmbedLiveSample('Placeholders', 600, 40) }}</p>
+
+<h3 id="Controlling_the_input_size" name="Controlling_the_input_size">入力欄の寸法の制御</h3>
+
+<p>入力ボックスの物理的な長さだけでなく、入力された文字列自身の許容される最小長および最大長も制御することができます。</p>
+
+<h4 id="Physical_input_element_size" name="Physical_input_element_size">物理的な入力欄の寸法</h4>
+
+<p>入力ボックスの物理的な寸法は、入力ボックスの {{htmlattrxref("size", "input")}} 属性を使用して制御することができます。これにより、入力ボックスが同時に表示することができる文字数を指定することができます。この例では <code>email</code> 入力ボックスは15文字分の幅になります。</p>
+
+<pre class="brush: html notranslate">&lt;input type="email" size="15"&gt;</pre>
+
+<p>{{ EmbedLiveSample('Physical_input_element_size', 600, 40) }}</p>
+
+<h4 id="Element_value_length" name="Element_value_length">要素の値の長さ</h4>
+
+<p><code>size</code> は入力されたメールアドレスの長さ制限からは独立しており、フィールドを小さい空間に収めることができますが、より長いメールアドレス文字列が入力できます。入力されたメールアドレスの最小文字数は {{htmlattrxref("minlength", "input")}} 属性を使用して、同様に入力されたメールアドレスの最大文字数は {{htmlattrxref("maxlength", "input")}} を使用して設定することができます。</p>
+
+<p>以下の例は32文字の幅で、内容は3文字より短くなったり、64文字より長くなったりしないようにする必要があるメールアドレス入力ボックスを生成します。</p>
+
+<pre class="brush: html notranslate">&lt;input type="email" size="32" minlength="3" maxlength="64"&gt;</pre>
+
+<p>{{EmbedLiveSample("Element_value_length", 600, 40) }}</p>
+
+<h3 id="Providing_default_options" name="Providing_default_options">既定のオプションの提供</h3>
+
+<p>これまでどおり、 {{htmlattrxref("value", "input")}} 属性を設定することで <code>email</code> 入力欄に既定値を指定することができます。</p>
+
+<div id="Default_value">
+<pre class="brush: html notranslate">&lt;input type="email" value="default@example.com"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Default_value", 600, 40)}}</p>
+
+<h4 id="Offering_suggested_values" name="Offering_suggested_values">サジェスト値の提供</h4>
+
+<p>Taking it a step farther, you can provide a list of default options from which the user can select by specifying the {{htmlattrxref("list", "input")}} attribute. This doesn't limit the user to those options, but does allow them to select commonly-used e-mail addresses more quickly. This also offers hints to {{htmlattrxref("autocomplete", "input")}}. The <code>list</code> attribute specifies the ID of a {{HTMLElement("datalist")}}, which in turn contains one {{HTMLElement("option")}} element per suggested value; each <code>option</code>'s <code>value</code> is the corresponding suggested value for the email entry box.</p>
+
+<pre class="brush: html notranslate">&lt;input type="email" size="40" list="defaultEmails"&gt;
+
+&lt;datalist id="defaultEmails"&gt;
+  &lt;option value="jbond007@mi6.defence.gov.uk"&gt;
+  &lt;option value="jbourne@unknown.net"&gt;
+  &lt;option value="nfury@shield.org"&gt;
+  &lt;option value="tony@starkindustries.com"&gt;
+  &lt;option value="hulk@grrrrrrrr.arg"&gt;
+&lt;/datalist&gt;</pre>
+
+<p>{{EmbedLiveSample("Offering_suggested_values", 600, 40)}}</p>
+
+<p>With the {{HTMLElement("datalist")}} element and its {{HTMLElement("option")}}s in place, the browser will offer the specified values as potential values for the e-mail address; this is typically presented as a popup or drop-down menu containing the suggestions. While the specific user experience may vary from one browser to another, typically clicking in the edit box presents a drop-down of the suggested e-mail addresses. Then, as the user types, the list is filtered to show only matching values. Each typed character narrows down the list until the user makes a selection or types a custom value.</p>
+
+<p><img alt="Animation: Using keyboard entry to filter the list of suggested e-mail addresses" src="https://mdn.mozillademos.org/files/14831/html-input-email1.gif" style="border-style: solid; border-width: 1px; height: 168px; width: 352px;"></p>
+
+<h2 id="Validation" name="Validation">検証</h2>
+
+<p>There are two levels of content validation available for <code>email</code> inputs. First, there's the standard level of validation offered to all {{HTMLElement("input")}}s, which automatically ensures that the contents meet the requirements to be a valid e-mail address. But there's also the option to add additional filtering to ensure that your own specialized needs are met, if you have any.</p>
+
+<div class="warning">
+<p><strong>重要</strong>: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用にはなりません。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、間違った種類のデータなど) がデータベースに入力された場合に災害が発生するおそれがあります。</p>
+</div>
+
+<h3 id="Basic_validation" name="Basic_validation">基本的な検証</h3>
+
+<p>Browsers that support the <code>email</code> input type automatically provide validation to ensure that only text that matches the standard format for Internet e-mail addresses is entered into the input box. Browsers that implement the specification should be using an algorithm equivalent to the following regular expression:</p>
+
+<pre class="brush: js notranslate">/^[a-zA-Z0-9.!#$%&amp;'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}
+  [a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
+</pre>
+
+<p>To learn more about how form validation works and how to take advantage of the {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS properties to style the input based on whether or not the current value is valid, see <a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: There are known specification issues related to international domain names and the validation of e-mail addresses in HTML. See <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15489">W3C bug 15489</a> for details.</p>
+</div>
+
+<h3 id="Pattern_validation" name="Pattern_validation">パターンによる値検証</h3>
+
+<p>If you need the entered e-mail address to be restricted further than just "any string that looks like an e-mail address," you can use the {{htmlattrxref("pattern", "input")}} attribute to specify a {{Glossary("regular expression")}} the value must match for it to be valid. If the {{htmlattrxref("multiple", "input")}} attribute is specified, each individual item in the comma-delineated list of values must match the {{Glossary("regular expression")}}.</p>
+
+<p>For example, let's say you're building a page for employees of Best Startup Ever, Inc. which will let them contact their IT department for help. In our simplified form, the user needs to enter their e-mail address and a message describing the problem they need help with. We want to ensure that not only does the user provide a valid e-mail address, but for security purposes, we require that the address be an internal corporate e-mail address.</p>
+
+<p>Since inputs of type <code>email</code> validate against both the standard e-mail address validation <em>and</em> the specified {{htmlattrxref("pattern", "input")}}, you can implement this easily. Let's see how:</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">body {
+  font: 16px sans-serif;
+}
+
+.emailBox {
+  padding-bottom: 20px;
+}
+
+.messageBox {
+  padding-bottom: 20px;
+}
+
+label {
+  line-height: 22px;
+}
+
+label::after {
+  content: ":";
+}</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+ &lt;div class="emailBox"&gt;
+   &lt;label for="emailAddress"&gt;Your e-mail address&lt;/label&gt;&lt;br&gt;
+   &lt;input id="emailAddress" type="email" size="64" maxLength="64" required
+          placeholder="username@beststartupever.com" pattern=".+@beststartupever.com"
+          title="Please provide only a Best Startup Ever corporate e-mail address"&gt;
+ &lt;/div&gt;
+
+ &lt;div class="messageBox"&gt;
+   &lt;label for="message"&gt;Request&lt;/label&gt;&lt;br&gt;
+   &lt;textarea id="message" cols="80" rows="8" required
+             placeholder="My shoes are too tight, and I have forgotten how to dance."&gt;&lt;/textarea&gt;
+ &lt;/div&gt;
+  &lt;input type="submit" value="Send Request"&gt;
+&lt;/form&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Pattern_validation", 700, 275)}}</p>
+
+<p>Our {{HTMLElement("form")}} contains one {{HTMLElement("input")}} of type <code>email</code> for the user's e-mail address, a {{HTMLElement("textarea")}} to enter their message for IT into, and an <code>&lt;input&gt;</code> of type <code><a href="/en-US/docs/Web/HTML/Element/input/submit">"submit"</a></code>, which creates a button to submit the form. Each text entry box has a {{HTMLElement("label")}} associated with it to let the user know what's expected of them.</p>
+
+<p>Let's take a closer look at the e-mail address entry box. Its {{htmlattrxref("size", "input")}} and {{htmlattrxref("maxlength", "input")}} attributes are both set to 64 in order to show room for 64 characters worth of e-mail address, and to limit the number of characters actually entered to a maximum of 64. The {{htmlattrxref("required", "input")}} attribute is specified, making it mandatory that a valid e-mail address be provided.</p>
+
+<p>An appropriate {{htmlattrxref("placeholder", "input")}} is provided—<code>username@beststartupever.com</code>—to demonstrate what constitutes a valid entry. This string demonstrates both that an e-mail address should be entered, and suggests that it should be a corporate beststartupever.com account. This is in addition to the fact that using type <code>email</code> will validate the text to ensure that it's formatted like an e-mail address. If the text in the input box isn't an e-mail address, you'll get an error message that looks something like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14855/enter-valid-email-address.png" style="height: 125px; width: 530px;"></p>
+
+<p>If we left things at that, we would at least be validating on legitimate e-mail addresses. But we want to go one step farther: we want to make sure that the e-mail address is in fact in the form "<em>username</em>@beststartupever.com". This is where we'll use {{htmlattrxref("pattern", "input")}}. We set <code>pattern</code> to <code>.+@beststartupever.com</code>. This simple regular expression requests a string that consists of at least one character of any kind, then an "@" followed by the domain name "beststartupever.com".</p>
+
+<p>Note that this is not even close to an adequate filter for valid e-mail addresses; it would allow things such as " @beststartupever.com" (note the leading space) or "@@beststartupever.com", neither of which is valid. However, the browser runs both the standard e-mail address filter <em>and</em> our custom pattern against the specified text. As a result, we wind up with a validation which says "make sure this resembles a valid e-mail address, and if it is, make sure it's also a beststartupever.com address."</p>
+
+<p>It's advisable to use the {{htmlattrxref("title")}} attribute along with <code>pattern</code>. If you do, the <code>title</code> <em>must</em> describe the pattern. That is, it should explain what format the data should take on, rather than any other information. That's because the <code>title</code> may be displayed or spoken as part of a validation error message. For example, the browser might present the message "The entered text doesn't match the required pattern." followed by your specified <code>title</code>. If your <code>title</code> is something like "E-mail address", the result would be the message "The entered text doesn't match the required pattern. E-mail address", which isn't very good.</p>
+
+<p>That's why, instead, we specify the string "Please provide only a Best Startup Ever corporate e-mail address" By doing that, the resulting full error message might be something like "The entered text doesn't match the required pattern. Please provide only a Best Startup Ever corporate e-mail address."</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14853/email-pattern-match-bad.png" style="height: 140px; width: 536px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: If you run into trouble while writing your validation regular expressions and they're not working properly, check your browser's console; there may be helpful error messages there to aid you in solving the problem.</p>
+</div>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>Here we have an email input with the ID <code>emailAddress</code> which is allowed to be up to a maximum of 256 characters long. The input box itself is physically 64 characters wide, and displays the text <code>user@example.gov</code> as a placeholder anytime the field is empty. In addition, by using the <code><a href="/ja/docs/Web/HTML/Attributes/multiple">multiple</a></code> attribute, the box is configured to allow the user to enter zero or more e-mail addresses, separated by commas, as described in {{anch("Allowing multiple e-mail addresses")}}. As a final touch, the <code><a href="/ja/docs/Web/HTML/Attributes/list">list</a></code> attribute contains the ID of a {{HTMLElement("datalist")}} whose {{HTMLElement("option")}}s specify a set of suggested values the user can choose from.</p>
+
+<p>As an added touch, the {{HTMLElement("label")}} element is used to establish a label for the email entry box, with its {{htmlattrxref("for", "label")}} attribute referencing the <code>emailAddress</code> ID of the {{HTMLElement("input")}} element. By associating the two elements in this way, clicking on the label will focus the input element.</p>
+
+<pre class="brush: html notranslate">&lt;label for="emailAddress"&gt;Email&lt;/label&gt;&lt;br/&gt;
+&lt;input id="emailAddress" type="email" placeholder="user@example.gov"
+       list="defaultEmails" size="64" maxlength="256" multiple&gt;
+
+&lt;datalist id="defaultEmails"&gt;
+  &lt;option value="jbond007@mi6.defence.gov.uk"&gt;
+  &lt;option value="jbourne@unknown.net"&gt;
+  &lt;option value="nfury@shield.org"&gt;
+  &lt;option value="tony@starkindustries.com"&gt;
+  &lt;option value="hulk@grrrrrrrr.arg"&gt;
+&lt;/datalist&gt;</pre>
+
+<p>{{EmbedLiveSample('Examples', 600, 50)}}</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', '#email-state-(type=email)', '&lt;input type="email"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#email-state-typeemail', '&lt;input type="email"&gt;')}}</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-email")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/HTML/Forms">HTML フォームガイド</a></li>
+ <li>{{HTMLElement("input")}}</li>
+ <li><code><a href="/ja/docs/Web/HTML/Element/input/tel">&lt;input type="tel"&gt;</a></code></li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/url">&lt;input type="url"&gt;</a></code></li>
+ <li>Attributes:
+  <ul>
+   <li><code><a href="/en-US/docs/Web/HTML/Attributes/list">list</a></code></li>
+   <li><code><a href="/en-US/docs/Web/HTML/Attributes/minlength">minlength</a></code></li>
+   <li><code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code></li>
+   <li><code><a href="/en-US/docs/Web/HTML/Attributes/multiple">multiple</a></code></li>
+   <li><code><a href="/en-US/docs/Web/HTML/Attributes/pattern">pattern</a></code></li>
+   <li><code><a href="/en-US/docs/Web/HTML/Attributes/placeholder">placeholder</a></code></li>
+   <li><code><a href="/en-US/docs/Web/HTML/Attributes/readonly">readonly</a></code></li>
+   <li><code><a href="/en-US/docs/Web/HTML/Attributes/size">size</a></code></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls">Compatibility of CSS properties</a></li>
+</ul>
diff --git a/files/ja/web/html/element/input/file/index.html b/files/ja/web/html/element/input/file/index.html
new file mode 100644
index 0000000000..9b9821000c
--- /dev/null
+++ b/files/ja/web/html/element/input/file/index.html
@@ -0,0 +1,523 @@
+---
+title: <input type="file">
+slug: Web/HTML/Element/input/file
+tags:
+  - Directory Picker
+  - File
+  - File Picker
+  - Files
+  - Form input
+  - HTML
+  - HTML forms
+  - Input Type
+  - Reference
+  - Type
+translation_of: Web/HTML/Element/input/file
+---
+<div>{{HTMLRef("Input_types")}}</div>
+
+<p><span class="seoSummary"><strong><code>type="file"</code></strong> 型の {{HTMLElement("input")}} 要素は、ユーザーが一つまたは複数のファイルを端末のストレージから選択することができるようにします。選択されると、ファイルは<a href="/ja/docs/Learn/HTML/Forms">フォーム投稿</a>を使用してサーバーにアップロードしたり、 JavaScript コードと <a href="/ja/docs/Web/API/File/Using_files_from_web_applications">File API</a> を使用して操作したりすることができます。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-file.html", "tabbed-shorter")}}</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>選択されたファイルのパスを表す {{domxref("DOMString")}} です。</td>
+  </tr>
+  <tr>
+   <td><strong>イベント</strong></td>
+   <td>{{domxref("HTMLElement/change_event", "change")}} および {{domxref("HTMLElement/input_event", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>対応する共通属性</strong></td>
+   <td>{{htmlattrxref("required", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>追加の属性</strong></td>
+   <td>{{htmlattrxref("accept", "input/file")}}, {{htmlattrxref("capture", "input/file")}}, {{htmlattrxref("files", "input/file")}}, {{htmlattrxref("multiple", "input/file")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL 属性</strong></td>
+   <td><code>files</code> および <code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>DOM インターフェイス</strong></td>
+   <td>
+    <p>{{domxref("HTMLInputElement")}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td><strong>プロパティ</strong></td>
+   <td>
+    <p><a href="/ja/docs/Web/API/HTMLInputElement#Properties_file"><code>file</code> 型の要素にだけ適用されるプロパティ</a></p>
+   </td>
+  </tr>
+  <tr>
+   <td><strong>メソッド</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value" name="Value">値</h2>
+
+<p>ファイル入力欄の {{htmlattrxref("value", "input")}} 属性には、選択されたファイルへのパスを表す {{domxref("DOMString")}} が入ります。ユーザーが複数のファイルを選択すると、 <code>value</code> は選択されたファイルのリストのうち最初のファイルを表します。その他のファイルは input 要素の <code>HTMLInputElement.files</code> プロパティを使って得ることができます。</p>
+
+<div class="note"><strong>注:</strong>
+
+<ol>
+ <li>複数のファイルが選択された場合、文字列は最初に選択されたファイルを表します。 JavaScript は他のファイルに <a href="/ja/docs/Using_files_from_web_applications#Getting_information_about_selected_files">input の <code>FileList</code> プロパティを通して</a>アクセスすることができます。</li>
+ <li>ファイルが選択されていない場合、文字列は <code>""</code> (空) になります。</li>
+ <li>疑わしいソフトウェアがユーザーのファイル構造を推測することを防止するため、文字列には <a href="https://html.spec.whatwg.org/multipage/input.html#fakepath-srsly"><code>C:\fakepath\</code> の接頭辞が付きます</a>。</li>
+</ol>
+</div>
+
+<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2>
+
+<p>すべての {{HTMLElement("input")}} に共通の属性に加え、 <code>file</code> 型の入力欄は次の属性にも対応しています。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">属性</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("accept")}}</code></td>
+   <td>許可するファイル型を表す1つ以上の{{anch("Unique file type specifiers", "固有ファイル型指定子")}}</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("capture")}}</code></td>
+   <td>画像や動画データをキャプチャするのに使用するソースは何か</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("files")}}</code></td>
+   <td>選択されたファイルを列挙する {{domxref("FileList")}}</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("multiple")}}</code></td>
+   <td>論理値で、存在すれば、ユーザーが複数のファイルを選択することができることを表す</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefaccept">{{htmlattrdef("accept")}}</h3>
+
+<p><a href="/ja/docs/Web/HTML/Attributes/accept"><code>accept</code></a> 属性の値は文字列で、ファイル入力欄が受け付けるファイル型を定義します。この文字列は<strong>{{anch("Unique file type specifiers", "固有ファイル型指定子")}}</strong>をカンマで区切ったリストです。指定されたファイル型が複数の方法で識別されることがあるので、指定された形式のファイルが必要な場合は一連の型指定子を提供するといいでしょう。</p>
+
+<p>例えば、 Microsoft Word ファイルを識別する方法がいくつもあるので、 Word ファイルを受け付けるサイトは次のように <code>&lt;input&gt;</code> を使用することがあります。</p>
+
+<pre class="brush: html notranslate">&lt;input type="file" id="docpicker"
+  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"&gt;</pre>
+
+<h3 id="htmlattrdefcapture">{{htmlattrdef("capture")}}</h3>
+
+<p><a href="/ja/docs/Web/HTML/Attributes/capture"><code>capture</code></a> 属性は文字列で、 <a href="/ja/docs/Web/HTML/Attributes/accept"><code>accept</code></a> 属性で入力が画像または映像データであると示した場合、これらのデータを取り込むためにどのカメラを使用するかを指定します。 <code>user</code> の値では、ユーザーの方を向いているカメラやマイクを使用します。 <code>environment</code> は外側を向いたカメラやマイクを使用します。この属性がない場合、{{Glossary("user agent", "ユーザーエージェント")}}は何をするかを自分で自由に決めます。要求された方向が有効ではない場合、ユーザーエージェントは推奨される既定のモードで代用します。</p>
+
+<div class="note"><strong>注:</strong> <code>capture</code> は以前は論理値であり、存在した場合、ファイル入力を要求する代わりに、カメラやマイクなどその端末のメディア取り込み機器を使用するように要求していました。</div>
+
+<h3 id="htmlattrdeffiles">{{htmlattrdef("files")}}</h3>
+
+<p>{{domxref("FileList")}} オブジェクトで、選択されたそれぞれのファイルのリストです。このリストは {{htmlattrxref("multiple", "input/file")}} 属性が指定されていない限り、メンバーが複数にはなりません。</p>
+
+<h3 id="htmlattrdefmultiple">{{htmlattrdef("multiple")}}</h3>
+
+<p><a href="/ja/docs/Web/HTML/Attributes/multiple"><code>multiple</code></a> 論理属性が指定されていると、ファイル入力欄はユーザーに複数のファイルを選択することを許します。</p>
+
+<h2 id="Non-standard_attributes" name="Non-standard_attributes">標準外の属性</h2>
+
+<p>上記に挙げた属性に加え、以下の標準外の属性が一部のブラウザーで利用できます。実装していないブラウザーではコードが機能する可能性が制限されるため、できれば使用することを避けてください。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">属性</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("webkitdirectory")}}</code></td>
+   <td>論理値で、ユーザーが単一のディレクトリ (または <code>{{anch("multiple")}}</code> 属性がある場合は複数のディレクトリ) のみを選択できるようにするかどうかを選択します。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefwebkitdirectory_non-standard_inline">{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}</h3>
+
+<div id="webkitdirectory-include">
+<p>論理値の <code>webkitdirectory</code> 属性は、もし存在する場合は、ファイル選択インターフェイスでユーザーがディレクトリのみを選択することができることを示します。詳しい解説と例については {{domxref("HTMLInputElement.webkitdirectory")}} を参照してください。</p>
+
+<div class="note">
+<p><strong>注:</strong> <code>webkitdirectory</code> はもともと WebKit ベースのブラウザー向けのみに実装されたものですが、 Microsoft Edge や Firefox 50 以降でも使用できます。しかし、比較的広く対応されていますが、まだ標準になっておらず、代替手段がない限りは使用するべきではありません。</p>
+</div>
+</div>
+
+<h2 id="Unique_file_type_specifiers" name="Unique_file_type_specifiers">固有ファイル型指定子</h2>
+
+<p><strong>固有ファイル型指定子</strong>は文字列で、 <code>file</code> 型の {{HTMLElement("input")}} 要素でユーザーが選択することができるファイルの種類を記述します。それぞれの固有ファイル型指定子は、次の形のうち一つを取ることができます。</p>
+
+<ul>
+ <li>有効なファイル拡張子で、大文字小文字の区別なく、ピリオド (".") 文字で始まるもの。例えば、 <code>.jpg</code>, <code>.pdf</code>, <code>.doc</code> など。</li>
+ <li>有効な MIME タイプ文字列で、拡張子のないもの。</li>
+ <li>文字列 <code>audio/*</code> で「任意の音声ファイル」を意味する。</li>
+ <li>文字列 <code>video/*</code> で「任意の動画ファイル」を意味する。</li>
+ <li>文字列 <code>image/*</code> で「任意の画像ファイル」を意味する。</li>
+</ul>
+
+<p><code>accept</code> 属性は、これらの固有ファイル型指定子を1つ以上含む文字列を取ります。例えば、ファイル選択ダイアログが画像として表示することができるコンテンツを必要としており、標準の画像形式と PDF ファイルの両方を含める場合、このようになります。</p>
+
+<pre class="brush: html notranslate">&lt;input type="file" accept="image/*,.pdf"&gt;</pre>
+
+<h2 id="Using_file_inputs" name="Using_file_inputs">ファイル入力欄の使用</h2>
+
+<h3 id="A_basic_example" name="A_basic_example">基本的な例</h3>
+
+<pre class="brush: html notranslate">&lt;form method="post" enctype="multipart/form-data"&gt;
+ &lt;div&gt;
+   &lt;label for="file"&gt;アップロードするファイルを選択してください&lt;/label&gt;
+   &lt;input type="file" id="file" name="file" multiple&gt;
+ &lt;/div&gt;
+ &lt;div&gt;
+   &lt;button&gt;送信&lt;/button&gt;
+ &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+}</pre>
+</div>
+
+<p>これは以下のような出力になります。</p>
+
+<p>{{EmbedLiveSample('A_basic_example', 650, 60)}}</p>
+
+<div class="note">
+<p><strong>注</strong>: この例は GitHub にもあります。 — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html">ソースコード</a>と<a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html">ライブ実行</a>を確認してください。</p>
+</div>
+
+<p>ユーザーの端末やオペレーティングシステムに関わらず、ファイル入力欄にはユーザーがファイルを選択することができるファイル選択ダイアログを開くボタンがあります。</p>
+
+<p>上記のように、 {{htmlattrxref("multiple", "input/file")}} 属性を含めると、複数のファイルを一度に選択することができることを指定します。ユーザーはファイル選択ダイアログから、プラットフォームが許す方法 (例えば、 <kbd>Shift</kbd> または <kbd>Control</kbd> を押しながらクリック) によって、複数のファイルを選択できます。ユーザーに <code>&lt;input&gt;</code> あたり1つのファイルを選択させたい場合は、 <code>multiple</code> 属性を省略してください。</p>
+
+<h3 id="Getting_information_on_selected_files" name="Getting_information_on_selected_files">選択されたファイルの情報の取得</h3>
+
+<p>選択されたファイルは、要素の {{domxref("HTMLElement.files", "files")}} プロパティで返され、これは {{domxref("File")}} オブジェクトのリストを含む {{domxref("FileList")}} オブジェクトです。 <code>FileList</code> は配列のようにふるまうので、 <code>length</code> プロパティを使用して選択されたファイルの数を取得することができます。</p>
+
+<p>それぞれの <code>File</code> オブジェクトは以下のような情報を持っています。</p>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>ファイルの名前です。</dd>
+ <dt><code>lastModified</code></dt>
+ <dd>ファイルが最後に変更された日時を表す数値で、 UNIX 時刻 (1970年1月1日午前0時) からの経過ミリ秒数です。</dd>
+ <dt><code>lastModifiedDate</code> {{deprecated_inline}}</dt>
+ <dd>ファイルが最後に変更された日時を表す {{jsxref("Date")}} オブジェクトです。<em>これは非推奨であり使うべきではありません。代わりに <code>lastModified</code> を使用してください。</em></dd>
+ <dt><code>size</code></dt>
+ <dd>バイト数によるファイルの長さです。</dd>
+ <dt><code>type</code></dt>
+ <dd>ファイルの <a href="/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME タイプ</a>です。</dd>
+ <dt><code>webkitRelativePath</code> {{non-standard_inline}}</dt>
+ <dd>ディレクトリ選択ダイアログ (つまり、 {{htmlattrxref("webkitdirectory", "input/file")}} 属性が設定されている <code>file</code> ダイアログ) で選択されたベースディレクトリからのファイルの相対パスを表す文字列です。<em>これは標準外なので使用するには注意してください。</em></dd>
+</dl>
+
+<div class="note">
+<p><strong>注</strong>: 最近のブラウザーはすべて、 <code>HTMLInputElement.files</code> の値を取得だけではなく設定もできるようになっています。これが最も後に追加されたのは Firefox で、バージョン57で追加されました (see {{bug(1384030)}})。</p>
+</div>
+
+<h3 id="Limiting_accepted_file_types" name="Limiting_accepted_file_types">受け付けるファイル型の制限</h3>
+
+<p>ふつう、ユーザーが自由な形式のファイルを選択できるようにはしたくないでしょう。代わりに、特定の形式のファイルを選択させたいでしょう。例えば、ファイル入力欄でユーザーにプロフィールファイルをアップロードさせるのであれば、おそらく {{Glossary("JPEG")}} または {{Glossary("PNG")}} のようなウェブに互換性がある画像形式を選択させたいでしょう。</p>
+
+<p>受付可能なファイル形式は {{htmlattrxref("accept","input/file")}} 属性で、受け付けるファイルの拡張子または MIME タイプいくつか例を示します。</p>
+
+<ul>
+ <li><code>accept="image/png"</code> または <code>accept=".png"</code> — PNG ファイルを受け付けます。</li>
+ <li><code>accept="image/png, image/jpeg"</code> または <code>accept=".png, .jpg, .jpeg"</code> — PNG または JPEG ファイルを受け付けます。</li>
+ <li><code>accept="image/*"</code> — <code>image/*</code> の MIME タイプである任意のファイルを受け付けます。 (多くのモバイル端末では、この場合にユーザーがカメラで写真を撮ることもできるようになっています。)</li>
+ <li><code>accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"</code> — MS Word 文書と思われるファイルをすべて受け付けます。</li>
+</ul>
+
+<p>もっと複雑な例を見てみましょう。</p>
+
+<pre class="brush: html notranslate">&lt;form method="post" enctype="multipart/form-data"&gt;
+  &lt;div&gt;
+    &lt;label for="profile_pic"&gt;アップロードするファイルを選択してください&lt;/label&gt;
+    &lt;input type="file" id="profile_pic" name="profile_pic"
+          accept=".jpg, .jpeg, .png"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;送信&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+}</pre>
+</div>
+
+<p>これは前回の例と似た外見の出力をします。</p>
+
+<p>{{EmbedLiveSample('Limiting_accepted_file_types', 650, 60)}}</p>
+
+<div class="note">
+<p><strong>注</strong>: この例は GitHub にもあります。 — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-with-accept.html">ソースコード</a>と<a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-with-accept.html">ライブ実行</a>を確認してください。</p>
+</div>
+
+<p>同じように見えるかもしれませんが、この入力欄でファイルを選択しようとすると、このファイル選択ダイアログでは <code>accept</code> の値で指定されたファイル形式しか選択できません。 (細かい動きはブラウザーやオペレーティングシステムによって異なります)。</p>
+
+<p><img alt="macOS のファイル選択ダイアログのスクリーンショットです。 JPEG 以外のファイルは灰色になり選択できません。" src="https://mdn.mozillademos.org/files/15183/file-chooser.png" style="margin: 0 auto;"></p>
+
+<p><code>accept</code> 属性は選択されたファイルの形式を検証しません。単にブラウザーにユーザーが正しいファイル形式を選択するためのガイドするためのヒントを出すだけです。 (多くの場合) ユーザーがファイル選択ダイアログオプションを切り替えることで、ファイル選択ダイアログがこの設定を上書きして任意のファイルを選択することができるので、不正なファイル形式を選択する可能性があります。</p>
+
+<p>このため、 <code>accept</code> 属性は適切なサーバー側の検証でバックアップする必要があることを意識しておいてください。</p>
+
+<h3 id="Notes" name="Notes">注</h3>
+
+<ol>
+ <li>
+  <p>スクリプトからファイル選択ダイアログの値を設定することはできません。 — 以下のようにしても効果はありません。</p>
+
+  <pre class="brush: js notranslate">const input = document.querySelector("input[type=file]");
+input.value = "foo";
+</pre>
+ </li>
+ <li>
+  <p><code>&lt;input type="file"&gt;</code> を使用してファイルが選択された場合、セキュリティ上の理由から、元のファイルへの実際のパスが <code>value</code> 属性上では見えないようになっています。その代わりに、ファイル名の先頭に <code>C:\fakepath\</code> を追加したものが表示されます。この処置にはいくつかの経緯上の理由がありますが、すべての最新のブラウザーで対応されており、実際に<a href="https://html.spec.whatwg.org/multipage/forms.html#fakepath-srsly">仕様書で定義されています</a>。</p>
+ </li>
+</ol>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例では、この例では、 {{domxref("HTMLInputElement.files")}} プロパティで利用できるファイル情報を利用する、さらに高度なファイル選択ダイアログを示し、またいくつか巧妙なテクニックを示します。</p>
+
+<div class="note">
+<p><strong>注</strong>: この例の完全なソースコードは GitHub — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html">file-example.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html">ライブ版もあります</a>) で見ることができます。 CSS については説明しません。 JavaScript が中心です。</p>
+</div>
+
+<p>最初に、 HTML を見てみましょう。</p>
+
+<pre class="brush: html notranslate">&lt;form method="post" enctype="multipart/form-data"&gt;
+  &lt;div&gt;
+    &lt;label for="image_uploads"&gt;アップロードする画像を選択してください (PNG, JPG)&lt;/label&gt;
+    &lt;input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple&gt;
+  &lt;/div&gt;
+  &lt;div class="preview"&gt;
+    &lt;p&gt;アップロードするファイルが選択されていません&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;送信&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+form {
+  width: 580px;
+  background: #ccc;
+  margin: 0 auto;
+  padding: 20px;
+  border: 1px solid black;
+}
+
+form ol {
+  padding-left: 0;
+}
+
+form li, div &gt; p {
+  background: #eee;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  list-style-type: none;
+  border: 1px solid black;
+}
+
+form img {
+  height: 64px;
+  order: 1;
+}
+
+form p {
+  line-height: 32px;
+  padding-left: 10px;
+}
+
+form label, form button {
+  background-color: #7F9CCB;
+  padding: 5px 10px;
+  border-radius: 5px;
+  border: 1px ridge black;
+  font-size: 0.8rem;
+  height: auto;
+}
+
+form label:hover, form button:hover {
+  background-color: #2D5BA3;
+  color: white;
+}
+
+form label:active, form button:active {
+  background-color: #0D3F8F;
+  color: white;
+}</pre>
+</div>
+
+<p>これは以前見たものに似ています。特筆するべきものはありません。</p>
+
+<p>次に、 JavaScript を一通り見てみましょう。</p>
+
+<p>スクリプトの最初の行で、フォームの入力欄自体と <code>.preview</code> クラスが設定された {{htmlelement("div")}} 要素の参照を取得します。次に {{htmlelement("input")}} 要素を非表示にします。 — これは、ファイル入力欄が概して醜く、スタイル付けをするのが難しく、ブラウザー間でデザインに一貫性がないからです。 {{htmlelement("label")}} をクリックすることで <code>input</code> 要素をアクティブ化することができるので、 <code>input</code> 要素を見かけは非表示にしてラベルをボタンらしくしたほうが、ユーザーがファイルをアップロードしたいときの操作が分かります。</p>
+
+<pre class="brush: js notranslate">const input = document.querySelector('input');
+const preview = document.querySelector('.preview');
+
+input.style.opacity = 0;</pre>
+
+<div class="note">
+<p><strong>注:</strong> ファイル入力欄を非表示にするのに {{cssxref("visibility", "visibility: hidden")}} や {{cssxref("display", "display: none")}} ではなく {{cssxref("opacity")}} を使用しているのは、支援技術が前二者のファイル入力欄が対話可能ではないと解釈するからです。</p>
+</div>
+
+<p>次に、<a href="/ja/docs/Web/API/EventTarget/addEventListener">イベントリスナー</a>を入力欄に追加して、選択された値の変化 (この場合、ファイルが選択されたこと) を監視します。イベントリスナーは独自の <code>updateImageDisplay()</code> 関数を呼び出します。</p>
+
+<pre class="brush: js notranslate">input.addEventListener('change', updateImageDisplay);</pre>
+
+<p><code>updateImageDisplay()</code> 関数が呼び出されるたびに、以下のことを行います。</p>
+
+<ul>
+ <li>{{jsxref("Statements/while", "while")}} ループを使ってプレビューの <code>&lt;div&gt;</code> の中にある以前のコンテンツを空にします。</li>
+ <li>選択されたすべてのファイルの情報を持つ {{domxref("FileList")}} オブジェクトを取り、 <code>curFiles</code> と呼ばれる変数に保存します。</li>
+ <li><code>curFiles.length</code> が0かどうかをチェックすることで、ファイルが選択されていないかを確認します。選択されていない場合は、プレビューの <code>&lt;div&gt;</code> に選択されているファイルがない旨のメッセージを表示します。</li>
+ <li>ファイルが選択されて<em>いた</em>場合、ループで1つずつ、プレビューの <code>&lt;div&gt;</code> にそれについての情報を表示します。特筆するべきは次です。</li>
+ <li>独自の <code>validFileType()</code> 関数を使用して、ファイルが正しい形式 (つまり、 <code>accept</code> 属性で指定された画像形式) であるかどうかをチェックします。</li>
+ <li>そうであるなら、次のことを行います。
+  <ul>
+   <li>ファイルの名前とファイルの長さを、前述の <code>&lt;div&gt;</code> (<code>file.name</code> および <code>file.size</code> で取得) 内のリストアイテムに出力します。独自の <code>returnFileSize()</code> 関数はファイルの長さを バイト/KB/MB のうち適切な形式で返します (既定でブラウザーは長さを絶対的なバイトで返します)。</li>
+   <li>{{domxref("URL.createObjectURL", "URL.createObjectURL(curFiles[i])")}} を呼び出して、画像のプレビューのサムネイルを生成します。次に、新しい {{htmlelement("img")}} を生成し、その {{htmlattrxref("src", "img")}} をサムネイルに設定することで、リスト項目にも画像を挿入します。</li>
+  </ul>
+ </li>
+ <li>ファイル形式が無効である場合、リストのアイテム内にメッセージを表示して、ユーザーに別なファイル形式を選択する必要があることを伝えます。</li>
+</ul>
+
+<pre class="brush: js notranslate">function updateImageDisplay() {
+  while(preview.firstChild) {
+    preview.removeChild(preview.firstChild);
+  }
+
+  const curFiles = input.files;
+  if(curFiles.length === 0) {
+    const para = document.createElement('p');
+    para.textContent = 'アップロードするファイルが選択されていません';
+    preview.appendChild(para);
+  } else {
+    const list = document.createElement('ol');
+    preview.appendChild(list);
+
+    for(const file of curFiles) {
+      const listItem = document.createElement('li');
+      const para = document.createElement('p');
+      if(validFileType(file)) {
+        para.textContent = `ファイル名: ${file.name}, ファイルの長さ: ${returnFileSize(file.size)}.`;
+        const image = document.createElement('img');
+        image.src = URL.createObjectURL(file);
+
+        listItem.appendChild(image);
+        listItem.appendChild(para);
+      } else {
+        para.textContent = `ファイル名: ${file.name}: ファイル形式が有効ではありません。選択しなおしてください。`;
+        listItem.appendChild(para);
+      }
+
+      list.appendChild(listItem);
+    }
+  }
+}</pre>
+
+<p>独自の <code>validFileType()</code> 関数は {{domxref("File")}} オブジェクトを引数として取り、それから {{jsxref("Array.prototype.includes()")}} を使用して、 <code>fileTypes</code> の中の値にファイルの <code>type</code> プロパティに一致するものがあるかどうかをチェックします。一致するものが見つかった場合は、関数は <code>true</code> を返します。一致するものが見つからなければ、 <code>false</code> を返します。</p>
+
+<pre class="brush: js notranslate">// https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
+const fileTypes = [
+  "image/apng",
+  "image/bmp",
+  "image/gif",
+  "image/jpeg",
+  "image/pjpeg",
+  "image/png",
+  "image/svg+xml",
+  "image/tiff",
+  "image/webp",
+  "image/x-icon"
+];
+
+function validFileType(file) {
+  return fileTypes.includes(file.type);
+}</pre>
+
+<p><code>returnFileSize()</code> 関数は数値 (現在のファイルの <code>size</code> プロパティから取得したバイト数) を取り、バイト/KB/MB のうち適切な形式で返します。</p>
+
+<pre class="brush: js notranslate">function returnFileSize(number) {
+  if(number &lt; 1024) {
+    return number + 'bytes';
+  } else if(number &gt;= 1024 &amp;&amp; number &lt; 1048576) {
+    return (number/1024).toFixed(1) + 'KB';
+  } else if(number &gt;= 1048576) {
+    return (number/1048576).toFixed(1) + 'MB';
+  }
+}</pre>
+
+<p>この例は次のようにできます。使ってみましょう。</p>
+
+<p>{{EmbedLiveSample('Examples', '100%', 200)}}</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', 'input.html#file-upload-state-(type=file)', '&lt;input type="file"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>初回定義</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#file-upload-state-typefile', '&lt;input type="file"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Media Capture', '#the-capture-attribute','capture attribute')}}</td>
+   <td>{{Spec2('HTML Media Capture')}}</td>
+   <td>initial <code>capture</code> attribute</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-file")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/File/Using_files_from_web_applications">ウェブアプリケーションからのファイルの利用</a> — <code>&lt;input type="file"&gt;</code> および <a href="/ja/docs/Web/API/File">File API</a> に関するたくさんの有用な例も含まれています。</li>
+ <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li>
+</ul>
diff --git a/files/ja/web/html/element/input/hidden/index.html b/files/ja/web/html/element/input/hidden/index.html
new file mode 100644
index 0000000000..c0f6d0fe0d
--- /dev/null
+++ b/files/ja/web/html/element/input/hidden/index.html
@@ -0,0 +1,228 @@
+---
+title: <input type="hidden">
+slug: Web/HTML/Element/input/hidden
+tags:
+  - Element
+  - Forms
+  - HTML
+  - HTML forms
+  - Input
+  - Input Types
+  - Reference
+  - hidden
+translation_of: Web/HTML/Element/input/hidden
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>hidden</code></strong> 型は、フォームの送信時にユーザーが見たり変更したりすることができないデータをウェブ開発者が含めることができます。例えば、現在注文中又は編集中の ID や、一意のセキュリティトークンなどに利用できます。隠し入力欄はページの表示で完全に非表示になり、ページの中で表示させる方法はありません。</span></p>
+
+<div class="note">
+<p><strong>注</strong>: 以下のコードにはライブサンプルがあります。正しく動作していれば、何も見えないはずです。</p>
+</div>
+
+<div id="Basic_example">
+<pre class="brush: html notranslate">&lt;input id="prodId" name="prodId" type="hidden" value="xm234jq"&gt;</pre>
+
+<p>{{ EmbedLiveSample('Basic_example', 600, 40) }}</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value", "値")}}</strong></td>
+   <td>サーバーに送り返したい隠しデータの値を表す {{domxref("DOMString")}}。</td>
+  </tr>
+  <tr>
+   <td><strong>イベント</strong></td>
+   <td>なし。</td>
+  </tr>
+  <tr>
+   <td><strong>対応する共通属性</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL 属性</strong></td>
+   <td><code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>メソッド</strong></td>
+   <td>なし。</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>注</strong>: {{domxref("HTMLElement/input_event", "input")}} および {{domxref("HTMLElement/change_event", "change")}} の各イベントは、この入力型には適用されません。隠し入力欄は JavaScript (<code>hiddenInput.focus()</code> など) を使用してもフォーカスを与えることはできません。</p>
+</div>
+
+<h2 id="Value" name="Value">値</h2>
+
+<p>{{HTMLElement("input")}} 要素の {{htmlattrxref("value", "input")}} 属性は、フォームをサーバーに送信する時に含めたい隠しデータを含みます。これは特に、ユーザーインターフェイスを通じで編集したり確認したりすることはできませんが、ブラウザーの開発者ツールから値を編集することはできます。</p>
+
+<div class="warning">
+<p>ページのコンテンツ内では値がユーザーに表示されませんが、ブラウザーの開発者ツールや「ソースを表示」機能を使用して、見たり編集したりすることができます。 <code>hidden</code> の入力欄をセキュリティの形として当てにしないでください。</p>
+</div>
+
+<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2>
+
+<p>すべての {{HTMLElement("input")}} 要素で共通する属性に加え、 <code>hidden</code> 型の入力欄は次の属性にも対応しています。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">属性</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("name")}}</code></td>
+   <td>他の入力型と同様、フォームを送信した場合に報告される入力欄の名前です。特殊な値 <code>_charset_</code> は、その入力欄の値がフォームの送信に使用される文字エンコーディングとして報告されます。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefname">{{htmlattrdef("name")}}</h3>
+
+<p>これは実際には共通の属性の一つですが、隠し入力欄では特別な用途を持っています。通常、 {{htmlattrxref("name", "input")}} 属性は隠し属性でも他の入力欄と同様に機能します。しかし、フォームが送信された時、 <code>name</code> が <code>_charset_</code> に設定された隠し入力欄は、自動的にフォームを送信するのに使用される文字エンコーディングの値として報告されます。</p>
+
+<h2 id="Using_hidden_inputs" name="Using_hidden_inputs">隠し入力欄の利用</h2>
+
+<p>前述の通り、隠し入力欄はフォームに、一緒にサーバーに送信される、ユーザーが表示または編集できないデータを含めたい場合はどこでも使用できます。使い方を示すいくつかの例をご覧ください。</p>
+
+<h3 id="Tracking_edited_content" name="Tracking_edited_content">編集された内容の追跡</h3>
+
+<p>隠し入力欄のもっとも一般的な用途は、編集フォームを送信したときに、データベースのどのレコードを更新する必要があるかを追跡することです。一般的なワークフローは次のようなものです。</p>
+
+<ol>
+ <li>ユーザーはブログの記事や製品の項目など、管理権を持っているコンテンツの編集することにします。編集ボタンを押して始めます。</li>
+ <li>編集するコンテンツがデータベースから取得され、 HTML フォーム内に読み込まれてユーザーが編集できるようになります。</li>
+ <li>編集後、ユーザーはフォームを送信し、更新されたデータがサーバーに送り返されてデータベースを更新します。</li>
+</ol>
+
+<p>この考え方はステップ2で、更新するレコードの ID を隠し入力欄で保持しておきます。ステップ3でフォームが送信されたとき、 ID は自動的にレコードの中身と共にサーバーに送り返されます。サイトのサーバー側コンポーネントは、 ID によって送信されたデータでどのレコードを更新する必要があるかを正しく特定することができます。</p>
+
+<p>以下の{{anch("Examples", "例")}}の節で、これがどのように見えるかを示す例全体を見ることができます。</p>
+
+<h3 id="Improving_website_security" name="Improving_website_security">ウェブサイトのセキュリティの改善</h3>
+
+<p>隠し入力欄は、ウェブサイトのセキュリティを高めるためにセキュリティトークンや秘密を格納しておくことができます。基本的な考え方としては、例えばオンラインバンキングで他の口座に送金するためのフォームなど、機密を要するフォームにユーザーが記入するときに、秘密を提供することで自分が誰であるか、正しいフォームを利用して送金リクエストを行っているかを証明することができます。</p>
+
+<p>これで悪意のあるユーザーが偽のフォームを作成して、銀行に成りすまし、騙されやすいユーザーを騙して別なところに送金させるようなことを防ぐことができます。この種の攻撃は<a href="/ja/docs/Learn/Server-side/First_steps/Website_security#Cross-Site_Request_Forgery_(CSRF)">クロスサイトリクエストフォージェリ (CSRF)</a> と呼ばれており、非常に多くの信頼されているサーバー側フレームワークがこのような攻撃を防ぐために隠した秘密を使用しています。</p>
+
+<div class="note">
+<p>前述のように、隠し入力欄に秘密を配置することは、本質的に安全ではありません。キーの組み合わせやエンコーディングによって実現されます。隠し入力欄の値は秘密とデータを関連付け、フォームがサーバーに送信されるときに自動的に含められます。本当にウェブサイトを安全にするには、よく設計された秘密を使用する必要があります。</p>
+</div>
+
+<h2 id="Validation" name="Validation">検証</h2>
+
+<p>隠し入力欄は制約検証には関係しません。制約される実際の値を持たないからです。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>以前に作成した編集フォーム ({{anch("Tracking edited content", "編集された内容の追跡")}}を参照) に、隠し入力欄を使用して編集するレコードの ID を記憶する簡単なバージョンを実装する方法を見てみましょう。</p>
+
+<p>編集フォームの HTML はこのようになっているかもしれません。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="title"&gt;Post title:&lt;/label&gt;
+    &lt;input type="text" id="title" name="title" value="My excellent blog post"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="content"&gt;Post content:&lt;/label&gt;
+    &lt;textarea id="content" name="content" cols="60" rows="5"&gt;
+This is the content of my excellent blog post. I hope you enjoy it!
+    &lt;/textarea&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button type="submit"&gt;Update post&lt;/button&gt;
+  &lt;/div&gt;
+  &lt;input type="hidden" id="postId" name="postId" value="34657"&gt;
+&lt;/form&gt;</pre>
+
+<p>簡単な CSS も追加しましょう。</p>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+form {
+  width: 500px;
+}
+
+div {
+  display: flex;
+  margin-bottom: 10px;
+}
+
+label {
+  flex: 2;
+  line-height: 2;
+  text-align: right;
+  padding-right: 20px;
+}
+
+input, textarea {
+  flex: 7;
+  font-family: sans-serif;
+  font-size: 1.1rem;
+  padding: 5px;
+}
+
+textarea {
+  height: 60px;
+}</pre>
+
+<p>サーバーはフォームをユーザーのブラウザーに送信する前に、 ID が "<code>postID</code>" である隠し入力欄の値にデータベース内の投稿の ID を設定し、フォームが戻されたときにこの情報を、変更された情報を更新するデータベースのレコードを知るために使用します。コンテンツの中でこれを扱うためにスクリプトは必要はありません。</p>
+
+<p>出力結果は次のようになります。</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 200) }}</p>
+
+<div class="note">
+<p><strong>注</strong>: この例は GitHub にもあります (<a href="https://github.com/mdn/learning-area/blob/master/html/forms/hidden-input-example/index.html">ソースコード</a>および<a href="https://mdn.github.io/learning-area/html/forms/hidden-input-example/index.html">ライブでの動作の確認</a>も参照してください)。</p>
+</div>
+
+<p>送信されるとき、サーバーへ送信されるフォームデータは以下のようになります。</p>
+
+<p><code>title=My+excellent+blog+post&amp;content=This+is+the+content+of+my+excellent+blog+post.+I+hope+you+enjoy+it!&amp;postId=34657</code></p>
+
+<p>隠し入力欄は全く表示されなくても、データは送信されています。</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#hidden-state-(type=hidden)', '&lt;input type="hidden"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>初回定義</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.2', 'sec-forms.html#hidden-state-typehidden', '&lt;input type="hidden"&gt;')}}</td>
+   <td>{{Spec2('HTML5.2')}}</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-hidden")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/HTML/Forms">HTML フォームガイド</a></li>
+ <li>{{HTMLElement("input")}} および {{domxref("HTMLInputElement")}} インターフェイス</li>
+</ul>
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>&lt;input type="image"&gt;</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>&lt;input type="image"&gt;</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">&lt;input type="submit"&gt;</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">&lt;input type="file"&gt;</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">&lt;input type="submit"&gt;</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">&lt;input type="submit"&gt;</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">&lt;input type="submit"&gt;</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">&lt;input type="submit"&gt;</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>&lt;input type="image"&gt;</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>&lt;img&gt;</code> element.):</p>
+
+<pre class="brush: html notranslate">&lt;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"&gt;</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>&lt;input type="image"&gt;</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>&lt;input type="image"&gt;</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&amp;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&amp;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>&lt;input&gt;</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">&lt;form&gt;
+  &lt;p&gt;Login to your account&lt;/p&gt;
+  &lt;div&gt;
+    &lt;label for="userId"&gt;User ID&lt;/label&gt;
+    &lt;input type="text" id="userId" name="userId"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="pwd"&gt;Password&lt;/label&gt;
+    &lt;input type="password" id="pwd" name="pwd"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;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"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</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">&lt;form&gt;
+  &lt;p&gt;Login to your account&lt;/p&gt;
+  &lt;div&gt;
+    &lt;label for="userId"&gt;User ID&lt;/label&gt;
+    &lt;input type="text" id="userId" name="userId"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="pwd"&gt;Password&lt;/label&gt;
+    &lt;input type="password" id="pwd" name="pwd"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;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"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</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)', '&lt;input type="image"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#image-button-state-%28type=image%29', '&lt;input type="image"&gt;')}}</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>&lt;input&gt;</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>
diff --git a/files/ja/web/html/element/input/index.html b/files/ja/web/html/element/input/index.html
new file mode 100644
index 0000000000..5a7ce1c5ca
--- /dev/null
+++ b/files/ja/web/html/element/input/index.html
@@ -0,0 +1,1376 @@
+---
+title: '<input>: 入力欄 (フォーム入力) 要素'
+slug: Web/HTML/Element/input
+tags:
+  - Element
+  - Forms
+  - HTML
+  - HTML input tag
+  - HTML フォーム
+  - 'HTML:フローコンテンツ'
+  - 'HTML:対話型コンテンツ'
+  - 'HTML:記述コンテンツ'
+  - Reference
+  - Web
+  - ウェブ
+  - データ入力
+  - フォーム
+  - 要素
+translation_of: Web/HTML/Element/input
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">HTML の <strong><code>&lt;input&gt;</code> 要素</strong>は、ユーザーからデータを受け取るための、ウェブベースのフォーム用の対話的なコントロールを作成するために使用します。端末と{{Glossary("user agent", "ユーザーエージェント")}}によりますが、広範に渡る種類のデータ入力やコントロールウィジェットが利用できます。</span> <code>&lt;input&gt;</code> 要素は入力型と属性の組み合わせの数が非常に多いため、 HTML の中で最も強力かつ最も複雑な要素の一つです。</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="&lt;input>_types" name="&lt;input>_types">&lt;input&gt; の型</h2>
+
+<p><code>&lt;input&gt;</code> の動作は {{htmlattrxref("type", "input")}} 属性の値に応じて大きく異なりますので、個別のリファレンスページでさまざまな型を扱っています。この属性を指定しない場合の既定の型は <code>text</code> です。</p>
+
+<p>利用可能な型は次の通りです。</p>
+
+<table class="standard-table">
+ <colgroup>
+  <col>
+  <col style="width: 50%;">
+  <col>
+ </colgroup>
+ <thead>
+  <tr>
+   <th>型</th>
+   <th>説明</th>
+   <th>基本的な例</th>
+   <th>仕様書</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{HTMLElement("input/button", "button")}}</td>
+   <td>プッシュボタンで、既定の動作を持たず、 {{anch('htmlattrdefvalue', 'value')}} 属性の値 (既定では空) を表示します。</td>
+   <td id="examplebutton">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="button" name="button" /&gt;</pre>
+    {{EmbedLiveSample("examplebutton",200,55,"","", "nobutton")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/checkbox", "checkbox")}}</td>
+   <td>チェックボックスで、選択または未選択のうちひとつの値をとることができます。</td>
+   <td id="examplecheckbox">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="checkbox" name="checkbox"/&gt;</pre>
+    {{EmbedLiveSample("examplecheckbox",200,55,"","", "nobutton")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/color", "color")}}</td>
+   <td>色を指定するためのコントロールです。対応しているブラウザーでは、アクティブになったときにカラーピッカーが開きます。</td>
+   <td id="examplecolor">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="color" name="color"/&gt;</pre>
+    {{EmbedLiveSample("examplecolor",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/date", "date")}}</td>
+   <td>日付 (時刻を除く年、月、日) を入力するためのコントロールです。対応しているブラウザーでは、アクティブになったときに日付ピッカーまたは年月日の数値のホイールが開きます。</td>
+   <td id="exampledate">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="date" name="date"/&gt;</pre>
+    {{EmbedLiveSample("exampledate",200,55,"","", "nobutton")}}</td>
+   <td>  {{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/datetime-local", "datetime-local")}}</td>
+   <td>タイムゾーン情報がない日付と時刻を入力するためのコントロールです。対応しているブラウザーでは、アクティブになったときに日付ピッカーまたは日付および時刻部分の数値のホイールが開きます。</td>
+   <td id="exampledtl">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="datetime-local" name="datetime-local"/&gt;</pre>
+    {{EmbedLiveSample("exampledtl",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/email", "email")}}</td>
+   <td>電子メールアドレスを編集するための欄です。 <code>text</code> 入力欄のように見えますが、対応しているブラウザーや動的なキーボードのある端末では、入力値を検証したり、関連するキーボードを表示したりします。</td>
+   <td id="exampleemail">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="email" name="email"/&gt;</pre>
+    {{EmbedLiveSample("exampleemail",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/file", "file")}}</td>
+   <td>ユーザーがファイルを選択するコントロールです。 {{anch('htmlattrdefaccept', 'accept')}} 属性を使用して、コントロールが選択することができるファイル形式を定義することができます。</td>
+   <td id="examplefile">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="file" accept="image/*, text/*" name="file"/&gt;</pre>
+    {{EmbedLiveSample("examplefile",'100%',55,"","", "nobutton")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/hidden", "hidden")}}</td>
+   <td>表示されないコントロールですが、その値はサーバーに送信されます。隣の列には例がありますが、非表示です。</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/image", "image")}}</td>
+   <td>グラフィックの <code>submit</code> ボタンです。 <code>src</code> 属性で定義された画像を表示します。 {{anch('htmlattrdefalt', 'alt')}} 属性は {{anch('htmlattrdefsrc', 'src')}} の画像が見つからないときに表示されます。</td>
+   <td id="exampleimage">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="image" name="image" src="" alt="image input"/&gt;</pre>
+    {{EmbedLiveSample("exampleimage",200,55,"","", "nobutton")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/month", "month")}}</td>
+   <td>タイムゾーン情報がない年と月を入力するためのコントロールです。</td>
+   <td id="examplemonth">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="month" name="month"/&gt;</pre>
+    {{EmbedLiveSample("examplemonth",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/number", "number")}}</td>
+   <td>数値を入力するためのコントロールです。対応していればスピナーを表示し、既定の検証を追加します。動的キーボードを持つ一部の端末では、テンキーを表示します。</td>
+   <td id="examplenumber">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="number" name="number"/&gt;</pre>
+    {{EmbedLiveSample("examplenumber",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/password", "password")}}</td>
+   <td>入力値を隠す1行テキストフィールド。サイトが安全ではない場合はユーザーに警告します。</td>
+   <td id="examplepassword">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="password" name="password"/&gt;</pre>
+    {{EmbedLiveSample("examplepassword",200,55,"","", "nobutton")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/radio", "radio")}}</td>
+   <td>ラジオボタンで、同じ {{anch('htmlattrdefname', 'name')}} の値を持つ複数の選択肢から一つの値を選択することができます。</td>
+   <td id="exampleradio">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="radio" name="radio"/&gt;</pre>
+    {{EmbedLiveSample("exampleradio",200,55,"","", "nobutton")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/range", "range")}}</td>
+   <td>厳密な値であることが重要ではない数値を入力するためのコントロールです。範囲のウィジェットを表示し、既定では中央の値になります。 {{anch('htmlattrdefmin', 'min')}} と {{anch('htmlattrdefmax', 'max')}} の組み合わせで、受け入れる値の範囲を定義することができます。</td>
+   <td id="examplerange">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="range" name="range" min="0" max="25"/&gt;</pre>
+    {{EmbedLiveSample("examplerange",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/reset", "reset")}}</td>
+   <td>フォームのコントロールを既定値に初期化するボタンです。推奨しません。</td>
+   <td id="examplereset">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="reset" name="reset"/&gt;</pre>
+    {{EmbedLiveSample("examplereset",200,55,"","", "nobutton")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/search", "search")}}</td>
+   <td>検索文字列を入力するための単一行のテキスト欄です。入力値から改行が自動的に取り除かれます。対応しているブラウザーでは、入力欄を初期化するための削除アイコンが表示されることがあり、欄の内容を消去するために使用することができます。 Displays a search icon instead of enter key on some devices with dynamic keypads.</td>
+   <td id="examplesearch">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="search" name="search"/&gt;</pre>
+    {{EmbedLiveSample("examplesearch",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/submit", "submit")}}</td>
+   <td>フォームを送信するボタンです。</td>
+   <td id="examplesubmit">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="submit" name="submit"/&gt;</pre>
+    {{EmbedLiveSample("examplesubmit",200,55,"","", "nobutton")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/tel", "tel")}}</td>
+   <td>電話番号を入力するためのコントロールです。動的なテンキーを備えた一部の機器では、電話用のテンキーを表示します。</td>
+   <td id="exampletel">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="tel" name="tel"/&gt;</pre>
+    {{EmbedLiveSample("exampletel",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/text", "text")}}</td>
+   <td>既定値です。単一行の入力欄です。改行は自動的に入力値から取り除かれます。</td>
+   <td id="exampletext">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="text" name="text"/&gt;</pre>
+    {{EmbedLiveSample("exampletext",200,55,"","", "nobutton")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/time", "time")}}</td>
+   <td>タイムゾーン情報がない時刻を入力するためのコントロールです。</td>
+   <td id="exampletime">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="time" name="time"/&gt;</pre>
+    {{EmbedLiveSample("exampletime",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/url", "url")}}</td>
+   <td>URL 入力するための入力欄です。 <code>text</code> 入力欄のように見えますが、対応しているブラウザーや動的なキーボードのある端末では、入力値を検証したり、関連するキーボードを表示したりします。</td>
+   <td id="exampleurl">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="url" name="url"/&gt;</pre>
+    {{EmbedLiveSample("exampleurl",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/week", "week")}}</td>
+   <td>年と週番号で構成される日付を入力するためのコントロールです。週番号はタイムゾーンを伴いません。</td>
+   <td id="exampleweek">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="week" name="week"/&gt;</pre>
+    {{EmbedLiveSample("exampleweek",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <th colspan="4">廃止された値</th>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/datetime", "datetime")}}</td>
+   <td>{{deprecated_inline}} {{obsolete_inline}} UTC タイムゾーンに基づく日付と時刻 (時、分、秒、秒の端数) を入力するためのコントロールです。</td>
+   <td id="exampledatetime">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="datetime" name="datetime"/&gt;</pre>
+    {{EmbedLiveSample("exampledatetime",200,75,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">属性</h2>
+
+<p><code>&lt;input&gt;</code> 要素は属性があるためたいへん強力です。上記の例で説明している {{htmlattrxref("type", "input")}} 属性が最も重要です。すべての <code>&lt;input&gt;</code> 要素が、 {{domxref("HTMLInputElement")}} インターフェイスに基づいているため、、技術的にはまったく同じ属性を共有しています。しかし実際には、ほとんどの属性は一部の特定の入力型にのみ影響を与えます。さらに、属性によっては入力欄に影響を及ぼす方法が入力型によって異なり、入力型によって異なる方法で影響を与えることがあります。</p>
+
+<p>この節では、すべての属性に簡単な説明を書いた一覧表を示します。その後で、それぞれの属性がどの入力型に関連付けられているか、より詳細に説明された一覧を示します。ほとんど、またはすべての入力型に共通する属性については、以下でより詳細に定義します。特定の入力型に固有の属性、またはすべての入力型に共通するが、特定の入力型で使用されたときに特別な動作をする属性は、それぞれの型のページで示します。この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を含みます。 <code>&lt;input&gt;</code> に関連して特に重要な属性は強調表示されています。</p>
+
+<table class="standard-table">
+ <caption>{{htmlelement('input')}} 要素の属性で、<a href="/en-US/docs/Web/HTML/Global_attributes">グローバル HTML 属性</a>を含むもの</caption>
+ <thead>
+  <tr>
+   <th scope="col">属性</th>
+   <th scope="col">型</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{anch('htmlattrdefaccept', 'accept')}}</td>
+   <td>file</td>
+   <td>ファイルアップロードコントロールで期待されるファイル形式のヒント</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefalt', 'alt')}}</td>
+   <td>image</td>
+   <td>image 型の alt 属性です。アクセシビリティのために必要です。</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefautocomplete', 'autocomplete')}}</td>
+   <td>すべて</td>
+   <td>フォームの自動補完機能のためのヒント</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefautofocus', 'autofocus')}}</td>
+   <td>すべて</td>
+   <td>ページが読み込まれたときに、自動的にそのフォームコントロールにフォーカスを設定する</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefcapture', 'capture')}}</td>
+   <td>file</td>
+   <td>ファイルアップロードコントロールのメディアキャプチャのインプットメソッド</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefchecked', 'checked')}}</td>
+   <td>radio, checkbox</td>
+   <td>コマンドやコントロールがチェックされているか</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefdirname', 'dirname')}}</td>
+   <td>text, search</td>
+   <td>フォーム送信時に要素の方向性を送信するために使用するフォームフィールドの名前です。</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefdisabled', 'disabled')}}</td>
+   <td>すべて</td>
+   <td>コントロールが無効であるかどうか</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefform', 'form')}}</td>
+   <td>すべて</td>
+   <td>コントロールを form 要素に関連付ける</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefformaction', 'formaction')}}</td>
+   <td>image, submit</td>
+   <td>フォームの送信に使用する URL</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefformenctype', 'formenctype')}}</td>
+   <td>image, submit</td>
+   <td>フォームの送信に使用するデータセットのエンコード種別</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefformmethod', 'formmethod')}}</td>
+   <td>image, submit</td>
+   <td>フォームの送信に使用する HTTP メソッド</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefformnovalidate', 'formnovalidate')}}</td>
+   <td>image, submit</td>
+   <td>フォームの送信でフォームの検証をバイパス</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefformtarget', 'formtarget')}}</td>
+   <td>image, submit</td>
+   <td>フォーム送信に使用する閲覧コンテキスト</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefheight', 'height')}}</td>
+   <td>image</td>
+   <td>{{htmlelement('img')}} の <code>height</code> 属性と同じで、垂直の高さ</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdeflist', 'list')}}</td>
+   <td>ほぼすべて</td>
+   <td>自動補完オプションの入った {{htmlelement('datalist')}} の id 属性の値</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefmax', 'max')}}</td>
+   <td>数値型</td>
+   <td>最大値</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefmaxlength', 'maxlength')}}</td>
+   <td>password, search, tel, text, url</td>
+   <td><code>value</code> の最大長 (文字数)</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefmin', 'min')}}</td>
+   <td>数値型</td>
+   <td>最小値</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefminlength', 'minlength')}}</td>
+   <td>password, search, tel, text, url</td>
+   <td><code>value</code> の最小長 (文字数)</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefmultiple', 'multiple')}}</td>
+   <td>email, file</td>
+   <td>論理属性。複数の値を許可するかどうか</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefname', 'name')}}</td>
+   <td>すべて</td>
+   <td>入力欄コントロールの名前。名前/値の組の部分としてフォームと一緒に送信される</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefpattern', 'pattern')}}</td>
+   <td>password, text, tel</td>
+   <td><code>value</code> が一致すると妥当となるパターン</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefplaceholder', 'placeholder')}}</td>
+   <td>password, search, tel, text, url</td>
+   <td>フォームコントロールが空の時にフォームコントロール内に表示される内容</td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/HTML/Attributes/readonly">readonly</a></td>
+   <td>ほぼすべて</td>
+   <td>論理属性。値が編集できない</td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/HTML/Attributes/required">required</a></td>
+   <td>ほぼすべて</td>
+   <td>論理属性。フォームが送信できるようにするためには値が必要</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefsize', 'size')}}</td>
+   <td>email, password, tel, text</td>
+   <td>コントロールの大きさ</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefsrc', 'src')}}</td>
+   <td>image</td>
+   <td>{{htmlelement('img')}} の <code>src</code> 属性と同じで、画像リソースのアドレス</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefstep', 'step')}}</td>
+   <td>numeric types</td>
+   <td>有効な増分</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdeftype', 'type')}}</td>
+   <td>all</td>
+   <td>入力フォームコントロールの型</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefvalue', 'value')}}</td>
+   <td>all</td>
+   <td>このフォームコントロールの現在の値。名前/値の組の部分としてフォームと一緒に送信される</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefwidth', 'width')}}</td>
+   <td>image</td>
+   <td>{{htmlelement('img')}} の <code>width</code> 属性と同じ</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>標準属性の説明に続いて、いくつかの追加の非標準属性を列挙します。</p>
+
+<h3 id="個々の属性">個々の属性</h3>
+
+<dl>
+ <dt id="htmlattrdefaccept">{{htmlattrdef("accept")}}</dt>
+ <dd>
+ <p><code>file</code> 入力型に対してのみ有効です。 <code>accept</code> 属性は <code>file</code> アップロードコントロールの中でどのファイル形式が選択可能であるかを定義します。 {{HTMLElement("input/file", "file")}} 入力型を参照してください。</p>
+ </dd>
+ <dt id="htmlattrdefalt">{{htmlattrdef("alt")}}</dt>
+ <dd>
+ <p><code>image</code> ボタンに対してのみ有効です。 alt 属性は画像の代替テキストを提供し、 <a href="#htmlattrdefsrc"><code>src</code></a> の画像が存在しないか、または読み込みに失敗した場合にこの属性の値を表示します。 {{HTMLElement("input/image", "image")}} 入力型を参照してください。</p>
+ </dd>
+ <dt id="htmlattrdefautocomplete">{{htmlattrdef("autocomplete")}}</dt>
+ <dd>
+ <p>(論理属性では<strong>ありません</strong>!) <code><a href="/ja/docs/Web/HTML/Attributes/autocomplete">autocomplete</a></code> 属性は空白区切りの文字列の値を取り、指定された場合は、入力欄が提供する自動補完機能の種類を示します。自動補完のよくある実装は、以前同じ入力欄に入力された値を単に再呼び出しするものですが、もっと複雑な自動補完もあり得ます。例えば、ブラウザーが端末の連絡先リストと連携して、 <code>email</code> 入力欄でメールアドレスを自動補完したりする可能性もあります。許可されている値は<a href="/ja/docs/Web/HTML/Attributes/autocomplete#Values">autocomplete 属性の値</a>を参照してください。</p>
+
+ <p><code>autocomplete</code> 属性は <code>hidden</code>, <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>range</code>, <code>color</code>, <code>password</code> で有効です。この属性は数値またはテキストデータを返さない入力型では効果がなく、 <code>checkbox</code>, <code>radio</code>, <code>file</code> とすべてのボタン型を除いたすべての入力型で有効になります。</p>
+
+ <p>詳しい情報については <a href="/ja/docs/Web/HTML/Attributes/autocomplete">HTML の autocomplete 属性</a>を参照してください。パスワードセキュリティに関する情報や、 <code>autocomplete</code> が <code>hidden</code> に対して他の入力型とどう異なるのかについての情報があります。</p>
+ </dd>
+ <dt id="htmlattrdefautofocus">{{htmlattrdef("autofocus")}}</dt>
+ <dd>
+ <p>論理属性で、指定された場合は、ページの読み込みが完了したとき (またはその要素を含む {{HTMLElement("dialog")}} が表示されたとき) に、自動的にその入力欄がフォーカスを持つことを示します。</p>
+
+ <div class="note">
+ <p><strong>注:</strong> <code>autofocus</code> 属性がついた要素は、 {{domxref("DOMContentLoaded")}} イベントが発生する前にフォーカスを得ることがあります。</p>
+ </div>
+
+ <p>文書中で一つの要素だけが <code>autofocus</code> 属性を持つことができます。複数の要素に付けた場合は、最初にこの属性を持つ要素がフォーカスを受け取ります。</p>
+
+ <p><code>autofocus</code> は <code>hidden</code> 型の入力欄にはフォーカスを受け取ることができないため、使用することができません。</p>
+
+ <div class="warning">
+ <p><strong>警告:</strong> フォームコントロールに自動的にフォーカスを与えると、読み上げ技術を利用している視覚障碍者を混乱させる可能性があります。 <code>autofocus</code> が割り当てられると、読み上げソフトは予告なしにフォームコントロールにその人を「テレポート」させることになるからです。</p>
+ </div>
+
+ <p><code>autofocus</code> 属性を適用する際には、アクセシビリティを慎重に検討してください。フォームコントロールにフォーカスを自動的に設定すると、読み込み時にページのスクロールが発生します。フォーカスを与えると、一部のタッチ端末では動的なキーボードを表示させることにもなります。読み上げソフトはフォーカスを受けているフォームコントロールのラベルをアナウンスする一方、ラベルよりも前は何もアナウンスしませんし、小さな端末を使用している視力のあるユーザーは、同様に先行するコンテンツによって作成された文脈を見逃してしまいます。</p>
+ </dd>
+ <dt id="htmlattrdefcapture">{{htmlattrdef("capture")}}</dt>
+ <dd>
+ <p>HTML Media Capture 仕様書で導入され、 <code>file</code> 入力型に対してのみ有効です。 <code>capture</code> 属性は、どのメディア (マイク、ビデオ、カメラ) を使用して新しいファイルをキャプチャし、対応するシナリオで <code>file</code> アップロードコントロールを使用してアップロードするかを定義します。 {{HTMLElement("input/file", "file")}} 入力型を参照してください。</p>
+ </dd>
+ <dt id="htmlattrdefchecked">{{htmlattrdef("checked")}}</dt>
+ <dd>
+ <p><code>radio</code> 型と <code>checkbox</code> 型の両方で有効で、 <code>checked</code> は論理属性です。 <code>radio</code> 型に存在した場合、そのラジオボタンが同じ名前のラジオボタンのグループの中で現在選択されているものであることを示します。 <code>checkbox</code> 型に存在した場合、 (ページが読み込まれたとき) 既定でチェックボックスがチェックされていることを示します。このチェックボックスが現在チェックされているかどうかを示すものでは<em>ありません</em>。チェックボックスの状態が変更された場合でも、このコンテンツ属性はその変更を反映しません。 (<a href="/ja/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code> の <code>checked</code> IDL 属性</a>のみが更新されます。)</p>
+
+ <div class="note">
+ <p><strong>注:</strong> 他の入力コントロールとは異なり、チェックボックスやラジオボタンの値は、現在 <code>checked</code> の状態にある場合に送信データに含まれます。存在する場合、チェックされたコントロールの名前と値が送信されます。</p>
+
+ <p>例えば、 <code>name</code> が <code>fruit</code> で、 <code>value</code> が <code>cherry</code> であるチェックボックスがチェックされていると、送信されるフォームデータには <code>fruit=cherry</code> が含まれます。チェックボックスがチェックされていない場合、フォームデータには全く含まれません。チェックボックスやラジオボタンの既定の <code>value</code> は <code>on</code> です。</p>
+ </div>
+ </dd>
+ <dt id="htmlattrdefdirname">{{htmlattrdef("dirname")}}</dt>
+ <dd>
+ <p><code>text</code> および <code>search</code> 入力型のみに有効で、 <code>dirname</code> 属性によって要素の書字方向を送信することができます。これが含まれていると、フォームコントロールは2組の名前と値を送信します。1組目は <a href="#htmlattrdefname"><code>name</code></a> と <a href="#htmlattrdefvalue"><code>value</code></a> であり、2組目は名前が <code>dirname</code> の値で、値に <code>ltr</code> または <code>rtl</code> がブラウザーによって設定されます。</p>
+
+ <pre class="notranslate">&lt;form action="page.html" method="post"&gt;
+  &lt;label&gt;Fruit: &lt;input type="text" name="fruit" dirname="fruit.dir" value="cherry"&gt;&lt;/label&gt;
+  &lt;input type="submit"/&gt;
+&lt;/form&gt;
+&lt;!-- page.html?fruit=cherry&amp;fruit.dir=ltr --&gt;
+</pre>
+
+ <p>上記のフォームが送信されると、入力欄は <code>name</code> / <code>value</code> の組である <code>fruit=cherry</code> と、 <code>dirname</code> / 書字方向の組である <code>fruit.dir=ltr</code> が送信されます。</p>
+ </dd>
+ <dt id="htmlattrdefdisabled">{{htmlattrdef("disabled")}}</dt>
+ <dd>
+ <p>論理属性で、存在する場合、ユーザーが入力欄と対話できないことを示します。無効な入力欄は、ふつうより薄い色や、その他のフィールドが使用できないことを示すことを示す形で表示されます。</p>
+
+ <p>特に、無効になった入力欄は {{domxref("Element/click_event", "click")}} イベントを受け取らず、フォームと共に送信されることもありません。</p>
+
+ <div class="note">
+ <p><strong>メモ:</strong> 仕様書で要件とはされていませんが、 Firefox は既定で、ページを再読み込みしても <code>&lt;input&gt;</code> を <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">動的に無効化した状態を維持します</a>。この機能は {{htmlattrxref("autocomplete","input")}} 属性で制御することができます。</p>
+ </div>
+ </dd>
+ <dt id="htmlattrdefform">{{htmlattrdef("form")}}</dt>
+ <dd>
+ <p>文字列で、入力欄が関連づけられた {{HTMLElement("form")}} 要素 (つまり、<strong>フォームオーナー</strong>) を指定します。存在する場合、この文字列値は同一文書内の <code>&lt;form&gt;</code> 要素の {{htmlattrxref("id")}} と一致している必要があります。この属性が指定されない場合は、 <code>&lt;input&gt;</code> 要素は直近の内包するフォームに (もしあれば) 関連付けられます。</p>
+
+ <p><code>form</code> 属性によって、入力欄を文書内のどこに置いても、文書内の他の場所にあるフォームと関連付けることができます。</p>
+
+ <div class="note">
+ <p><strong>メモ:</strong> 入力欄は一つのフォームとしか関連付けることができません。</p>
+ </div>
+ </dd>
+ <dt id="htmlattrdefformaction">{{htmlattrdef('formaction')}}</dt>
+ <dd>
+ <p><code>image</code> および <code>submit</code> 入力型でのみ有効です。詳しくは {{HTMLElement("input/submit", "submit")}} 入力型を参照してください。</p>
+ </dd>
+ <dt id="htmlattrdefformenctype">{{htmlattrdef('formenctype')}}</dt>
+ <dd>
+ <p><code>image</code> および <code>submit</code> 入力型でのみ有効です。詳しくは {{HTMLElement("input/submit", "submit")}} 入力型を参照してください。</p>
+ </dd>
+ <dt id="htmlattrdefformmethod">{{htmlattrdef('formmethod')}}</dt>
+ <dd>
+ <p><code>image</code> および <code>submit</code> 入力型でのみ有効です。詳しくは {{HTMLElement("input/submit", "submit")}} 入力型を参照してください。</p>
+ </dd>
+ <dt id="htmlattrdefformnovalidate">{{htmlattrdef('formnovalidate')}}</dt>
+ <dd>
+ <p><code>image</code> および <code>submit</code> 入力型でのみ有効です。詳しくは {{HTMLElement("input/submit", "submit")}} 入力型を参照してください。</p>
+ </dd>
+ <dt id="htmlattrdefformtarget">{{htmlattrdef('formtarget')}}</dt>
+ <dd>
+ <p><code>image</code> および <code>submit</code> 入力型でのみ有効です。詳しくは {{HTMLElement("input/submit", "submit")}} 入力型を参照してください。</p>
+ </dd>
+ <dt id="htmlattrdefheight">{{htmlattrdef("height")}}</dt>
+ <dd>
+ <p><code>image</code> 入力型でのみ有効です。 <code>height</code> はグラフィックの送信ボタンの表現を表示するための画像ファイルの高さを示します。 {{HTMLElement("input/image", "image")}} 入力型を参照してください。</p>
+ </dd>
+ <dt id="htmlattrdefheight">{{htmlattrdef("id")}}</dt>
+ <dd>
+ <p>すべての入力欄を含む、すべての要素で有効なグローバル属性で、文書全体で一意でなければならない一意の識別子 (ID) を定義します。その目的は、リンクする際に要素を識別することです。この値は、ラベルとフォームコントロールをリンクするための {{htmlelement('label')}} の <code>for</code> 属性の値として使用されます。 {{htmlelement('label')}} を参照してください。</p>
+ </dd>
+ <dt id="htmlattrdefheight">{{htmlattrdef("inputmode")}}</dt>
+ <dd>
+ <p>すべての要素で有効なグローバル属性です、この要素やその内容を編集する際に使用される仮想キーボード設定の種類をブラウザーに示すヒントを提供します。値としては <code>none</code>, <code>text</code>, <code>tel</code>, <code>url</code>, <code>email</code>, <code>numeric</code>, <code>decimal</code>, <code>search</code> があります。</p>
+ </dd>
+ <dt id="htmlattrdeflist">{{htmlattrdef("list")}}</dt>
+ <dd id="datalist">
+ <p><code>list</code> 属性で与えられる値は、同じ文書内にある {{HTMLElement("datalist")}} 要素の {{domxref("Element.id", "id")}} としてください。 <code>&lt;datalist&gt;</code> は、この入力欄でユーザーに提案する事前定義された値のリストを提供します。リストに {{htmlattrxref("type", "input")}} と互換性のない値が含まれていた場合は、提案の選択肢には含まれません。この値は提案として使用されるものであり、要件ではありません。ユーザーはこの定義済みリストから選択することもできるし、別な値を提供することもできます。</p>
+
+ <pre class="brush: html hidden notranslate">&lt;datalist id="colorsxx"&gt;
+  &lt;option&gt;#ff0000&lt;/option&gt;
+  &lt;option&gt;#ee0000&lt;/option&gt;
+  &lt;option&gt;#dd0000&lt;/option&gt;
+  &lt;option&gt;#cc0000&lt;/option&gt;
+  &lt;option&gt;#bb0000&lt;/option&gt;
+&lt;/datalist&gt;
+&lt;datalist id="numbersxx"&gt;
+  &lt;option&gt;0&lt;/option&gt;
+  &lt;option&gt;2&lt;/option&gt;
+  &lt;option&gt;4&lt;/option&gt;
+  &lt;option&gt;8&lt;/option&gt;
+  &lt;option&gt;16&lt;/option&gt;
+  &lt;option&gt;32&lt;/option&gt;
+  &lt;option&gt;64&lt;/option&gt;
+&lt;/datalist&gt;
+&lt;datalist id="fruitsxx"&gt;
+  &lt;option&gt;cherry&lt;/option&gt;
+  &lt;option&gt;banana&lt;/option&gt;
+  &lt;option&gt;mango&lt;/option&gt;
+  &lt;option&gt;orange&lt;/option&gt;
+  &lt;option&gt;blueberry&lt;/option&gt;
+&lt;/datalist&gt;
+&lt;datalist id="urlsxx"&gt;
+  &lt;option&gt;https://developer.mozilla.org&lt;/option&gt;
+  &lt;option&gt;https://caniuse.com/&lt;/option&gt;
+  &lt;option&gt;https://mozilla.com&lt;/option&gt;
+  &lt;option&gt;https://mdn.github.io&lt;/option&gt;
+  &lt;option&gt;https://www.youtube.com/user/firefoxchannel&lt;/option&gt;
+&lt;/datalist&gt;
+
+&lt;p&gt;&lt;label for="textx"&gt;Text&lt;/label&gt; &lt;input type="text" list="fruitsxx" id="textx"/&gt;&lt;/p&gt;
+&lt;p&gt;&lt;label for="colorx"&gt;Color&lt;/label&gt; &lt;input type="color" list="colorsxx" id="colorx"/&gt;&lt;/p&gt;
+&lt;p&gt;&lt;label for="rangex"&gt;Range&lt;/label&gt; &lt;input type="range" min="0" max="64" list="numbersxx" id="rangex"/&gt;&lt;/p&gt;
+&lt;p&gt;&lt;label for="numberx"&gt;Number&lt;/label&gt; &lt;input type="number" min="0" max="64" list="numbersxx" id="numberx"/&gt;&lt;/p&gt;
+&lt;p&gt;&lt;label for="urlx"&gt;URL&lt;/label&gt; &lt;input type="url" list="urlsxx" id="urlx"/&gt;&lt;/p&gt;</pre>
+
+ <p>{{EmbedLiveSample("datalist",400,275,"","", "nobutton")}}</p>
+
+ <p>これは <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>range</code>, <code>color</code> で有効です。</p>
+
+ <p>仕様書によれば、 <code>list</code> 属性は <code>hidden</code>, <code>password</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code> それにボタン型では対応していません。</p>
+
+ <p>ブラウザーによっては、カスタムカラーパレットが提案されたり、範囲に沿ったチェックマークが表示されたり、{{HTMLElement("select")}}のように開くものの、リストにない値を入力できるようになったりすることもあります。他の入力型については<a href="/ja/docs/Web/HTML/Element/datalist#Browser_compatibility">ブラウザーの互換性一覧表</a>を参照してください。</p>
+
+ <p>{{htmlelement('datalist')}} 要素を参照してください。</p>
+ </dd>
+ <dt id="htmlattrdefmax"><a href="/ja/docs/Web/HTML/Attributes/max">{{htmlattrdef("max")}}</a></dt>
+ <dd>
+ <p><code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>range</code> で有効であり、許可される値の範囲の最大値を定義します。要素に入力された {{htmlattrxref("value", "input")}} がこれを超えた場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約の検証</a>に失敗します。 <code>max</code> 属性の値が数値でない場合は、要素に最大値は設定されません。</p>
+
+ <p>特殊な場合があります。データ型が期間を表す場合 (日付や時刻など)、 <code>max</code> の値は <code>min</code> の値よりも小さくなる場合があり、これは範囲が折り返す可能性があることを表します。例えば、これによって午後10時から午前4時までの自国の範囲を指定することができます。</p>
+ </dd>
+ <dt id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</dt>
+ <dd>
+ <p><code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>password</code> で有効であり、ユーザーがフィールドに入力することができる文字数 (UTF-16 コード単位) を定義します。これは <code>0</code> 以上の整数値でなければなりません。 <code>maxlength</code> が指定されなかった場合、または無効な値が指定された場合は、その入力欄には最大長が設定されません。この値は <code>minlength</code> の値以上である必要もあります。</p>
+
+ <p>欄に入力されたテキストの文字数が UTF-16 コード単位で <code>maxlength</code> よりも多いと、この入力欄は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約の検証</a>に失敗します。既定では、ブラウザーはユーザーが <code>maxlength</code> 属性で許可された文字数以上を入力するのを防ぎます。詳しくは{{anch("Client-side validation", "クライアント側検証")}}を参照してください。</p>
+ </dd>
+ <dt id="htmlattrdefmin">{{htmlattrdef("min")}}</dt>
+ <dd>
+ <p><code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>range</code> で有効であり、許可される値の範囲の最も低い値を定義します。要素に入力された {{htmlattrxref("value", "input")}} がこれを下回った場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約の検証</a>に失敗します。 <code>min</code> 属性の値が数値でない場合は、要素に最小値は設定されません。</p>
+
+ <p>この値は <code>max</code> 属性の値以下である必要があります。 <code>min</code> 属性が存在するものの、指定されていなかったり無効であったりした場合は、 <code>min</code> の値は適用されません。 <code>min</code> 属性が有効であり、値が空ではなく <code>min</code> 属性で許可された最小値よりも小さかった場合、制約の検証によりフォームの送信が行われません。詳しくは{{anch("Client-side validation", "クライアント側検証")}}を参照してください。</p>
+
+ <p>特殊な場合があります。データ型が期間を表す場合 (日付や時刻など)、 <code>max</code> の値は <code>min</code> の値よりも小さくなる場合があり、これは範囲が折り返す可能性があることを表します。例えば、これによって午後10時から午前4時までの自国の範囲を指定することができます。</p>
+ </dd>
+ <dt id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</dt>
+ <dd>
+ <p><code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>password</code> で有効であり、ユーザーがフィールドに入力することができる最小文字数 (UTF-16 コード単位) を定義します。これは負数ではなく、 <code>maxlength</code> で指定された値以下の整数値でなければなりません。 <code>minlength</code> が指定されなかった場合、または無効な値が指定された場合は、その入力欄には最小文字数が設定されません。</p>
+
+ <p>欄に入力されたテキストの文字数が UTF-16 コード単位で <code>minlength</code> よりも少ないと、この入力欄は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約の検証</a>に失敗します。詳しくは{{anch("Client-side validation", "クライアント側検証")}}を参照してください。</p>
+ </dd>
+ <dt id="htmlattrdefmultiple">{{htmlattrdef("multiple")}}</dt>
+ <dd>
+ <p>論理属性の <code>multiple</code> は、設定されている場合、ユーザーがウィジェット内でコンマ区切りで複数のメールアドレスを入力できること、または <code>file</code> 入力欄で複数のpファイルを選択することが出えきるinput. See the {{HTMLElement("input/email", "email")}} and {{HTMLElement("input/file", "file")}} input type.</p>
+ </dd>
+ <dt id="htmlattrdefname">{{htmlattrdef("name")}}</dt>
+ <dd>
+ <p>入力コントロールの名前を指定する文字列です。この名前はフォームデータが送信される時に、コントロールの値と共に送信されます。</p>
+
+ <h5 id="Whats_in_a_name" name="Whats_in_a_name">name に入れるもの</h5>
+
+ <p><code>name</code> は (厳密にはそうではありませんが) 必須の属性と考えてください。入力欄に <code>name</code> が指定されていなかった場合や <code>name</code> が空欄だった場合、その入力欄の値はフォームと一緒に送信されません。 (無効なコントロール、チェックされていないラジオボタン、チェックされていないチェックボックス、リセットボタンも送信されません。)</p>
+
+ <p>特殊な場合が2つあります。</p>
+
+ <ol>
+  <li><code>_charset_</code> : <code>&lt;input&gt;</code> 要素の {{HTMLElement("input/hidden", "hidden")}} 型として使用された場合、入力欄の <code>value</code> には自動的に、フォームを送信するのに使用される文字エンコーディングが{{Glossary("user agent", "ユーザーエージェント")}}によって設定されます。</li>
+  <li><code>isindex</code>: 歴史的な理由で、 <code><a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-name">isindex</a></code> という名前は許可されていません。</li>
+ </ol>
+
+ <h5 id="name_and_radio_buttons" name="name_and_radio_buttons">name とラジオボタン</h5>
+
+ <p><a href="#htmlattrdefname"><code>name</code></a> 属性はラジオボタンでは独特の動きをします。</p>
+
+ <p>同名のラジオボタングループ内で、一度にチェックできるラジオボタンは1つのみです。そのグループ内のラジオボタンを選択すると、同じグループ内の現在選択されているラジオボタンの選択が自動的に解除されます。チェックされたラジオボタンの値は、フォームが送信された場合、名前と一緒に送信されます。</p>
+
+ <p>同名のラジオボタンが連続したグループにタブ移動した場合、そのうちの1つにチェックが入っていると、それがフォーカスを受け取ります。ソース順でグループ化されていない場合、グループのうちの1つがチェックされていた場合は、タブ移動でグループ内の最初のラジオボタンに出会ったときに、チェックが入っていないラジオボタンをすべてスキップして、そのグループがフォーカスを受け取ります。言い換えれば、1つがチェックされている場合、グループ内のチェックされていないラジオボタンはスキップされます。どれもチェックされていない場合、同名グループの最初のボタンに到達したときに、ラジオボタングループがフォーカスを受け取ります。</p>
+
+ <p>グループ内のラジオボタンにフォーカスがある場合、矢印キーを使用すれば、ラジオボタンがソースの順序でグループ化されていなくても、同じ名前のすべてのラジオボタンに移動することができます。</p>
+
+ <h5 id="HTMLFormElement.elements">HTMLFormElement.elements</h5>
+
+ <p>入力要素に <code>name</code> が与えられると、その名前は所有するフォーム要素の {{domxref("HTMLFormElement.elements")}} プロパティのプロパティになります。 <code>name</code> が <code>guest</code> に設定されている入力と、 <code>name</code> が <code>hat-size</code> に設定されている入力がある場合、以下のコードを使用することができます。</p>
+
+ <pre class="brush: js notranslate">let form = document.querySelector("form");
+
+let guestName = form.elements.guest;
+let hatSize = form.elements["hat-size"];
+</pre>
+
+ <p>このコードを実行すると、 <code>guestName</code> が {{domxref("HTMLInputElement")}} の <code>guest</code> フィールドになり、 <code>hatSize</code> が <code>hat-size</code> フィールドの</p>
+
+ <div class="warning">
+ <p><strong>警告:</strong> フォームの組み込みプロパティに対応する <code>name</code> をフォーム要素に与えないようにします。なぜなら、対応する入力への参照で定義済みのプロパティやメソッドをオーバーライドしてしまうからです。</p>
+ </div>
+ </dd>
+ <dt id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</dt>
+ <dd>
+ <div id="pattern-include">
+ <p><code>pattern</code> 属性は、指定された場合、入力の {{htmlattrxref("value")}} が一致すれば値が<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約の検証</a>を通過したとみなされる正規表現を指定します。これは {{jsxref("RegExp")}} 型で使用される有効な JavaScript の正規表現でなければならず、これは<a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現のガイド</a>で説明されている通りです。正規表現をコンパイルする際には <code>'u'</code> フラグが指定され、パターンが ASCII ではなく Unicode コードポイントのシーケンスとして扱われます。パターンのテキストの周囲にスラッシュを指定しないでください。</p>
+
+ <p><code>pattern</code> 属性が存在するが、指定されていないか無効な場合、正規表現は適用されず、この属性は完全に無視されます。 <code>pattern</code> 属性が有効で、空でない値がパターンと一致しない場合、制約の検証によりフォームの送信ができなくなります。</p>
+
+ <div class="note">
+ <p><strong>ヒント:</strong> <code>pattern</code> 属性を使用する場合は、期待される書式をユーザーに知らせる説明文を近くに配置してください。また、パターンに一致させるための要件が何であるかを説明するために、 {{htmlattrxref("title", "input")}} 属性を含めることもできます。ほとんどのブラウザーはこのタイトルをツールチップとして表示します。ツールチップは改善手段です。</p>
+ </div>
+ </div>
+
+ <p>詳しくは{{anch("Client-side validation", "クライアント側検証")}}を参照してください。</p>
+ </dd>
+ <dt id="htmlattrdefplaceholder">{{htmlattrdef("placeholder")}}</dt>
+ <dd>
+ <p><code>placeholder</code> 属性は、フィールドでどのような情報が期待されているかについて、ユーザーに簡単なヒントを与える文字列です。説明的なメッセージではなく、予想されるデータのタイプを示す単語または短いフレーズである必要があります。テキストには、改行を含めては<em>いけません</em>。</p>
+
+ <div class="note">
+ <p><strong>注:</strong> <code>placeholder</code> 属性は、フォームを説明するためには他の方法ほど意味的に有用ではなく、コンテンツに予期せぬ技術的な問題を引き起こす可能性があります。詳細は{{SectionOnPage("/ja/docs/Web/HTML/Element/input", "Labels")}}を参照してください。</p>
+ </div>
+ </dd>
+ <dt id="htmlattrdefreadonly">{{htmlattrdef("readonly")}}</dt>
+ <dd>
+ <p>論理属性で、存在すれば、ユーザーが入力欄の値を編集できないことを示します。 <code>readonly</code> 属性は <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>password</code> の各入力型が対応しています。</p>
+
+ <p>詳しくは <a href="/ja/docs/Web/HTML/Attributes/readonly">HTML attribute: <code>readonly</code></a> を参照してください。</p>
+ </dd>
+ <dt id="htmlattrdefrequired">{{htmlattrdef("required")}}</dt>
+ <dd>
+ <p><code>required</code> は論理属性であり、所有するフォームが送信される前に、ユーザーが入力欄の値を指定しなければならないことを示します。 <code>required</code> 属性は <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>password</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code> の各入力型で対応しています。</p>
+
+ <p>See {{anch("Client-side validation")}} and the <a href="/en-US/docs/Web/HTML/Attributes/required">HTML attribute: <code>required</code></a> for more information.</p>
+ </dd>
+ <dt id="htmlattrdefsize">{{htmlattrdef("size")}}</dt>
+ <dd>Valid for <code>email</code>, <code>password</code>, <code>tel</code>, and <code>text</code> <code>input</code> types only. Specifies how much of the input is shown. Basically creates same result as setting CSS <code>width</code> property with a few specialities. The actual unit of the value depends on the input type. For <code>password</code> and <code>text</code> it's number of characters (or <code>em</code> units) and <code>pixel</code>s for others. CSS width takes precedence over size attribute.</dd>
+ <dt id="htmlattrdefsrc">{{htmlattrdef("src")}}</dt>
+ <dd>
+ <p>Valid for the <code>image</code> input button only, the <code>src</code> is string specifying the URL of the image file to display to represent the graphical submit button. See the {{HTMLElement("input/image", "image")}} input type.</p>
+ </dd>
+ <dt id="htmlattrdefstep">{{htmlattrdef("step")}}</dt>
+ <dd>
+ <div id="step-include">
+ <p>Valid for the numeric input types, including <code>number</code>, date/time input types, and <code>range</code>, the <code><a href="/en-US/docs/Web/HTML/Attributes/step">step</a></code> attribute is a number that specifies the granularity that the value must adhere to.</p>
+
+ <p>If not explicitly included, <code>step</code> defaults to 1 for <code>number</code> and <code>range</code>, and 1 unit type (second, week, month, day) for the date/time input types. The value can must be a positive number—integer or float—or the special value <code>any</code>, which means no stepping is implied, and any value is allowed (barring other constraints, such as <code>{{anch("min")}}</code> and <code>{{anch("max")}}</code>).</p>
+
+ <p>If <code>any</code> is not explicity set, valid values for the <code>number</code>, date/time input types, and <code>range</code> input types are equal to the basis for stepping - the <code>{{anch("min")}}</code> value and increments of the step value, up to the <code>{{anch("max")}}</code> value, if specified.</p>
+
+ <p>For example, if you have <code>&lt;input type="number" min="10" step="2"&gt;</code>, then any even integer, <code>10</code> or greater, is valid. If omitted, <code>&lt;input type="number"&gt;</code>, any integer is valid, but floats (like <code>4.2</code>) are not valid, because <code>step</code> defaults to <code>1</code>. For <code>4.2</code> to be valid, <code>step</code> would have had to be set to <code>any</code>, 0.1, 0.2, or any the <code>min</code> value would have had to be a number ending in <code>.2</code>, such as <code>&lt;input type="number" min="-5.2"&gt;</code></p>
+
+ <div class="note">
+ <p><strong>Note:</strong> When the data entered by the user doesn't adhere to the stepping configuration, the value is considered invalid in contraint validation and will match the <code>:invalid</code> pseudoclass.</p>
+ </div>
+ </div>
+
+ <p>The default stepping value for <code>number</code> inputs is <code>1</code>, allowing only integers to be entered, <em>unless</em> the stepping base is not an integer. The default stepping value for <code>time</code> is 1 second (with 900 being equal to 15 minutes).</p>
+
+ <p>See {{anch("Client-side validation")}} for more information.</p>
+ </dd>
+ <dt id="htmlattrdeftype">{{htmlattrdef("tabindex")}}</dt>
+ <dd>
+ <p>Global attribute valid for all elements, including all the input types, an integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation. As all input types except for input of type hidden are focusable, this attribute should not be used on form controls, because doing so would require the management of the focus order for all elements within the document with the risk of harming usability and accessibility if done incorrectly.</p>
+ </dd>
+ <dt id="htmlattrdefformenctype">{{htmlattrdef('title')}}</dt>
+ <dd>
+ <p>Global attribute valid for all elements, including all input types, containing a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip. The title should NOT be used as the primary explanation of the purpose of the form control. Instead, use the {{htmlelement('label')}} element with a <code>for</code> attribute set to the form control's {{htmlattrdef('id')}} attribute. See {{anch("Labels")}} below.</p>
+ </dd>
+ <dt id="htmlattrdeftype">{{htmlattrdef("type")}}</dt>
+ <dd>
+ <p>文字列で、表示するコントロールの型を指定します。例えば、チェックボックスを生成するには、 <code>checkbox</code> の値が使用されます。省略された場合 (または不明な値が指定された場合) は、入力型に <code>text</code> が使用され、テキストの入力欄が生成されます。</p>
+
+ <p>許可されている値は{{anch("&lt;input&gt; types", "&lt;input&gt; の型")}}にあります。</p>
+ </dd>
+ <dt id="htmlattrdefvalue">{{htmlattrdef("value")}}</dt>
+ <dd>
+ <p>入力コントロールの値です。 HTML の中で指定されると、これは初期値となり、その後で JavaScript を使用してそれぞれの {{domxref("HTMLInputElement")}} オブジェクトの <code>value</code> プロパティにアクセスすることで、いつでも変更したり受け取ったりすることができます。 <code>value</code> 属性は常に省略可ですが、 <code>checkbox</code>, <code>radio</code>, <code>hidden</code> においては必須だと考えてください。</p>
+ </dd>
+ <dt id="htmlattrdefwidth">{{htmlattrdef("width")}}</dt>
+ <dd>
+ <p>Valid for the <code>image</code> input button only, the <code>width</code> is the width of the image file to display to represent the graphical submit button. See the {{HTMLElement("input/image", "image")}} input type.</p>
+ </dd>
+</dl>
+
+<h3 id="Non-standard_attributes" name="Non-standard_attributes">標準外の属性</h3>
+
+<p>The following non-standard attributes are also available on some browsers. As a general rule, you should avoid using them unless it can't be helped.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">属性</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("autocorrect")}}</code></td>
+   <td>A string indicating whether or not autocorrect is <code>on</code> or <code>off</code>. <strong>Safari only.</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("incremental")}}</code></td>
+   <td>Whether or not to send repeated {{domxref("HTMLInputElement/search_event", "search")}} events to allow updating live search results while the user is still editing the value of the field. <strong>WebKit and Blink only (Safari, Chrome, Opera, etc.).</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("mozactionhint")}}</code></td>
+   <td>A string indicating the type of action that will be taken when the user presses the <kbd>Enter</kbd> or <kbd>Return</kbd> key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard. <strong>Firefox for Android only</strong>.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("orient")}}</code></td>
+   <td>Sets the orientation of the range slider. <strong>Firefox only</strong>.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("results")}}</code></td>
+   <td>The maximum number of items that should be displayed in the drop-down list of previous search queries. <strong>Safari only.</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("webkitdirectory")}}</code></td>
+   <td>A Boolean indicating whether or not to only allow the user to choose a directory (or directories, if <code>{{anch("multiple")}}</code> is also present)</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</dt>
+ <dd>{{page("/ja/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</dd>
+ <dt>{{htmlattrdef("incremental")}} {{non-standard_inline}}</dt>
+ <dd>{{page("/ja/docs/Web/HTML/Element/input/search", "incremental-include")}}</dd>
+ <dt>{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</dt>
+ <dd>{{page("/en-US/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</dd>
+ <dt>{{htmlattrdef("orient")}} {{non-standard_inline}}</dt>
+ <dd>{{page("/en-US/docs/Web/HTML/Element/input/range", "orient-include")}}</dd>
+ <dt>{{htmlattrdef("results")}} {{non-standard_inline}}</dt>
+ <dd>{{page("/en-US/docs/Web/HTML/Element/input/search", "results-include")}}</dd>
+ <dt>{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}</dt>
+ <dd>{{page("/en-US/docs/Web/HTML/Element/input/file", "webkitdirectory-include")}}</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">メソッド</h2>
+
+<p>以下のメソッドは DOM 内で <code>&lt;input&gt;</code> を表現する {{domxref("HTMLInputElement")}} インターフェイスで提供されます。親インターフェイスである {{domxref("HTMLElement")}}, {{domxref("Element")}}, {{domxref("Node")}}, {{domxref("EventTarget")}} で指定されているメソッドも使用できます。</p>
+
+<dl>
+ <dt>{{domxref("HTMLInputElement.checkValidity", "checkValidity()")}}</dt>
+ <dd>要素の妥当性チェックを直ちに実行し、値が妥当でない場合は文書に対して {{domxref("HTMLInputElement.invalid_event", "invalid")}} イベントを要素に発生させます。</dd>
+ <dt>{{domxref("HTMLInputElement.reportValidity", "reportValidity()")}}</dt>
+ <dd>要素の値が妥当性チェックを通った場合は <code>true</code> を返します。そうでなければ、 <code>false</code> を返します。</dd>
+ <dt>{{domxref("HTMLInputElement.select", "select()")}}</dt>
+ <dd>要素が選択可能な場合、 <code>&lt;input&gt;</code> 要素の内容を選択します。選択可能なテキストコンテンツがない要素 (カラーピッカーまたはカレンダー日付入力など) では、このメソッドは何もしません。</dd>
+ <dt>{{domxref("HTMLInputElement.setCustomValidity", "setCustomValidity()")}}</dt>
+ <dd>入力要素の値が妥当ではないときに表示するカスタムメッセージを設定します。</dd>
+ <dt>{{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}</dt>
+ <dd>入力要素内の文字の指定された範囲のコンテンツを、指定された文字列に設定します。 <code>selectMode</code> 引数を使用して、既存のコンテンツに影響させる方法を制御することができます。</dd>
+ <dt>{{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</dt>
+ <dd>テキストの入力要素内で、指定された文字の範囲を選択します。テキスト入力欄として表現されない入力欄では何もしません。</dd>
+ <dt>{{domxref("HTMLInputElement.stepDown", "stepDown()")}}</dt>
+ <dd>数値入力欄の値を既定で1、または指定された数値の単位だけ減少させます。</dd>
+ <dt>{{domxref("HTMLInputElement.stepUp", "stepUp()")}}</dt>
+ <dd>数値入力欄の値を既定で1、または指定された数値の単位だけ増加させます。</dd>
+</dl>
+
+<h2 id="CSS">CSS</h2>
+
+<p>Inputs, being replaced elements, have a few features not applicable to non form elements. There are CSS selectors that can specification target form controls based on their UI features, also known as UI pseudo-classes. The input element can also be targeted by type with attribute selectors. There are some properties that are especially useful as well.</p>
+
+<h3 id="UI_pseudo-classes" name="UI_pseudo-classes">UI 擬似クラス</h3>
+
+<table class="standard-table">
+ <caption>Captions super relevant to the {{htmlelement("input")}} element:</caption>
+ <thead>
+  <tr>
+   <th>擬似クラス</th>
+   <th>説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Cssxref(":enabled")}}</td>
+   <td>Any currently enabled element that can be activated (selected, clicked on, typed into, etc.) or accept focus and also has a disabled state, in which it can't be activated or accept focus.</td>
+  </tr>
+  <tr>
+   <td>{{Cssxref(":disabled")}}</td>
+   <td>Any currently disabled element that has an enabled state, meaing it otherwise could be activated (selected, clicked on, typed into, etc.) or accept focus were it not disabled.</td>
+  </tr>
+  <tr>
+   <td>{{Cssxref(":read-only")}}</td>
+   <td>Element not editable by the user</td>
+  </tr>
+  <tr>
+   <td>{{Cssxref(":read-write")}}</td>
+   <td>Element that is editable by the user.</td>
+  </tr>
+  <tr>
+   <td>{{Cssxref(":placeholder-shown")}}</td>
+   <td>Element that is currently displaying <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-placeholder">placeholder text</a>, including {{HTMLElement("input")}} and {{HTMLElement("textarea")}} elements with the {{anch('htmlattrdefplaceholder', 'placeholder')}} attribute present that has, as of yet, no value.</td>
+  </tr>
+  <tr>
+   <td>{{Cssxref(":default")}}</td>
+   <td>Form elements that are the default in a group of related elements. Matches {{HTMLElement("input/checkbox", "checkbox")}} and {{HTMLElement("input/radio", "radio")}} input types that were checked on page load or render.</td>
+  </tr>
+  <tr>
+   <td>{{Cssxref(":checked")}}</td>
+   <td>Matches {{HTMLElement("input/checkbox", "checkbox")}} and {{HTMLElement("input/radio", "radio")}} input types that are currently checked (and the ({{HTMLElement("option")}} in a {{HTMLElement("select")}} that is currently selected).</td>
+  </tr>
+  <tr>
+   <td>{{Cssxref(":indeterminate")}}</td>
+   <td>{{HTMLElement("input/checkbox", "checkbox")}} elements whose indeterminate property is set to true by JavaScript, {{HTMLElement("input/radio", "radio")}} elements, when all radio buttons with the same name value in the form are unchecked, and {{HTMLElement("progress")}} elements in an indeterminate state</td>
+  </tr>
+  <tr>
+   <td>{{Cssxref(":valid")}}</td>
+   <td>Form controls that can have constraint validation applied and are currently valid.</td>
+  </tr>
+  <tr>
+   <td>{{Cssxref(":invalid")}}</td>
+   <td>Form controls that have constraint validation applied and are currently not valid. Matches a form control whose value doesn't match the constraints set on it by it's attributes, such as {{anch('htmlattrdefrequired', 'required')}}, {{anch('htmlattrdefpattern', 'pattern')}} , {{anch('htmlattrdefstep', 'step')}} and {{anch('htmlattrdefmax', 'max')}}.</td>
+  </tr>
+  <tr>
+   <td>{{Cssxref(":in-range")}}</td>
+   <td>A non-empty input whose current value is within the range limits specified by the {{anch('htmlattrdefmin', 'min')}} and {{anch('htmlattrdefmax', 'max')}} attributes and the {{anch('htmlattrdefstep', 'step')}} .</td>
+  </tr>
+  <tr>
+   <td>{{Cssxref(":out-of-range")}}</td>
+   <td>A non-empty input whose current value is NOT within the range limits specified by the {{anch('htmlattrdefmin', 'min')}} and {{anch('htmlattrdefmax', 'max')}} attributes or does not adher to the {{anch('htmlattrdefstep', 'step')}} constraint.</td>
+  </tr>
+  <tr>
+   <td>{{Cssxref(":required")}}</td>
+   <td>{{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element that has the {{ htmlattrxref("required", "input")}} attribute set on it. Only matches elements that can be required. The attribute included on a non-requirable element will not make for a match.</td>
+  </tr>
+  <tr>
+   <td>{{Cssxref(":optional")}}</td>
+   <td>{{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element that does NOT have the {{ htmlattrxref("required", "input")}} attribute set on it. Does not match elements that can't be required.</td>
+  </tr>
+  <tr>
+   <td>{{Cssxref(":blank")}}</td>
+   <td>{{HTMLElement("input")}} and {{HTMLElement("textarea")}} elements that currently have no value.</td>
+  </tr>
+  <tr>
+   <td>{{Cssxref(":user-invalid")}}</td>
+   <td>Similar to <code>:invalid</code>, but is activated on blur. Matches invalid input but only after the user interaction, such as by focusing on the control, leaving the control, or attempting to submit the form containing the invalid control.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Examples" name="Examples">例</h4>
+
+<p>We can style a checkbox label based on whether the checkbox is checked or not. In this example, we are styling the {{cssxref('color')}} and {{cssxref('font-weight')}} of the {{htmlelement('label')}} that comes immediately after a checked input. We haven't applied any styles if the <code>input</code> is not checked.</p>
+
+<div id="checkbox_label">
+<pre class="brush: html hidden notranslate">&lt;input id="checkboxInput" type="checkbox"&gt;
+&lt;label for="checkboxInput"&gt;Toggle the checkbox on and off&lt;/label&gt;
+</pre>
+
+<pre class="brush: css notranslate">input:checked + label {
+  color: red;
+  font-weight: bold;
+}
+</pre>
+
+<p>{{EmbedLiveSample('checkbox_label', 500, 80)}}</p>
+</div>
+
+<h3 id="Attribute_selectors" name="Attribute_selectors">属性セレクター</h3>
+
+<p>It is possible to target different types of form controls based on their {{anch('htmlattrdeftype', 'type')}} using <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">attribute selectors</a>. CSS attribute selectors match elements based on either just the presence of a attribute or the value of a given attribute.</p>
+
+<pre class="brush: css notranslate">/* matches a password input */
+input[type="password"] {}
+
+/* matches a form control whose valid values are limited to a range of values*/
+input[min][max] {}
+
+/* matches a form control with with a pattern attribute */
+ input[pattern] {}</pre>
+
+<h3 id="placeholder">::placeholder</h3>
+
+<p>By default, the appearance of placeholder text is a translucent or light gray. The {{cssxref('::placeholder')}} pseudo-element is the input's <a href="/en-US/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">placeholder text</a>. It can be styled with a limited subset of CSS properties.</p>
+
+<pre class="brush: css no-line-numbers notranslate">::placeholder {
+  color: blue;
+}</pre>
+
+<p>Only the subset of CSS properties that apply to the {{cssxref("::first-line")}} pseudo-element can be used in a rule using <code>::placeholder</code> in its selector.</p>
+
+<h3 id="appearance">appearance</h3>
+
+<p>The {{cssxref("appearance")}} property enables the displaying of (almost) any element as a platform-native style based on the operating system's theme as well as the removal of any platform-native styling with the <code>none</code> value.</p>
+
+<p>You could make a <code>&lt;div&gt;</code> look like a radio button with <code>div {appearance: radio;} </code>or a radio look like a checkbox with <code>[type="checkbox] {appearance: checkbox;}</code>, but don't.</p>
+
+<p>Setting <code>appearance: none</code> removes platform native borders, but not functionality.</p>
+
+<h3 id="caret-color">caret-color</h3>
+
+<p>A property specific to text entry-related elements is the CSS {{cssxref("caret-color")}} property, which lets you set the color used to draw the text input caret:</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;label for="textInput"&gt;Note the red caret:&lt;/label&gt;
+&lt;input id="textInput" class="custom" size="32"&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">input.custom {
+  caret-color: red;
+  font: 16px "Helvetica", "Arial", "sans-serif"
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('caret-color', 500, 80)}}</p>
+
+<h3 id="object-position_and_object-fit" name="object-position_and_object-fit">object-position と object-fit</h3>
+
+<p>In certain cases (typically involving non-textual inputs and specialized interfaces), the <code>&lt;input&gt;</code> element is a <a href="/en-US/docs/Web/CSS/Replaced_element">replaced element</a>. When it is, the position and size of the element's size and positioning within its frame can be adjusted using the CSS {{cssxref("object-position")}} and {{cssxref("object-fit")}} properties</p>
+
+<h3 id="Styling" name="Styling">スタイル付け</h3>
+
+<p>For more information about adding color to elements in HTML, see:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a>.</li>
+</ul>
+
+<p>Also see:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms,</a> <a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">advanced styling for HTML forms</a>, and</li>
+ <li>the<a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets"> compatibility table of CSS properties</a>.</li>
+</ul>
+
+<h2 id="Additional_features" name="Additional_features">追加機能</h2>
+
+<h3 id="Labels" name="Labels">ラベル</h3>
+
+<p>ラベルは支援テキストを <code>&lt;input&gt;</code> に関連付けるために必要です。 {{HTMLElement("label")}} 要素は、フォームの入力欄を説明するために、 (レイアウト方法はさておき) <em>常に</em>適切な手段です。 <code>&lt;label&gt;</code> を <code>&lt;input&gt;</code> や {{HTMLElement("textarea")}} に何を入力するべきかを説明するのに使用することは、決して悪い考えではありません。</p>
+
+<h4 id="Associated_labels" name="Associated_labels">関連付けられたラベル</h4>
+
+<p>The semantic pairing of <code>&lt;input&gt;</code> and <code>&lt;label&gt;</code> elements is useful for assistive technologies such as screen readers. By pairing them using the <code>&lt;label&gt;</code>'s {{htmlattrxref("for", "label")}} attribute, you bond the label to the input in a way that lets screen readers describe inputs to users more precisely.</p>
+
+<p>It does not suffice to have plain text adjacent to the <code>&lt;input&gt;</code> element,. Rather, usability and accessibility requires the inclusion of either implicit or explicit {{HTMLElement("label")}}:</p>
+
+<pre class="brush: html notranslate">&lt;!-- inaccessible --&gt;
+&lt;p&gt;Enter your name: &lt;input id="name" type="text" size="30"&gt;&lt;/p&gt;
+
+&lt;!-- implicit label --&gt;
+&lt;p&gt;&lt;label&gt;Enter your name: &lt;input id="name" type="text" size="30"&gt;&lt;/label&gt;&lt;/p&gt;
+
+&lt;!-- explicit label --&gt;
+&lt;p&gt;&lt;label for="name"&gt;Enter your name: &lt;/label&gt;&lt;input id="name" type="text" size="30"&gt;&lt;/p&gt;</pre>
+
+<p>The first example is inaccessible: no relationship exists between the prompt and the <code>&lt;input&gt;</code> element.</p>
+
+<p>In addition to an accessible name, the label provides a larger 'hit' area for mouse and touch screen users to click on or touch. By pairing a <code>&lt;label&gt;</code> with an <code>&lt;input&gt;</code>, clicking on either one will focus the <code>&lt;input&gt;</code>. If you use plain text to "label" your input, this won't happen. Having the prompt part of the activation area for the input is helpful for people with motor control conditions.</p>
+
+<p>As web developers, it's important that we never assume that people will know all the things that we know. The diversity of people using the web—and by extension your web site—practically guarantees that some of your site's visitors will have some variation in thought processes and/or circumstances that leads them to interpret your forms very differently from you without clear and properly-presented labels.</p>
+
+<h4 id="Placeholders_are_not_accessible" name="Placeholders_are_not_accessible">プレイスホルダーはアクセシブルではない</h4>
+
+<p>{{htmlattrxref("placeholder", "input")}} 属性で、 <code>&lt;input&gt;</code> 要素が空の時にコンテンツ領域に表示されるテキストを指定することができます。プレイスホルダーは、フォームを理解するために必要なものであってはいけません。ラベルではありませんし、その代用として使用すべきではありません。プレイスホルダーは入力例を示すために使用されるものであり、説明やプロンプトではありません。プレイスホルダーは、読み上げソフトがアクセスできないだけでなく、ユーザーがフォームコントロールにテキストを入力したり、フォームコントロールにすでに値があったりする場合、プレイスホルダーはなくなります。自動ページ翻訳機能を持つブラウザーは、翻訳時にこの属性をスキップする、すなわち <code>placeholder</code> が翻訳されないことがあります。</p>
+
+<div class="blockIndicator note">
+<p>避けることができるのであれば、 {{htmlattrxref("placeholder", "input")}} 属性を使用しないでください。 <code>&lt;input&gt;</code> 要素にラベルを付ける樋津陽があるのであれば、 {{HTMLElement("label")}} 属性を使用してください。</p>
+</div>
+
+<h3 id="Client-side_validation" name="Client-side_validation">クライアント側検証</h3>
+
+<p>In addition to using CSS to style inputs based on the {{cssxref(":valid")}} or {{cssxref(":invalid")}} UI states based on the current state of each input, as noted in the {{anch('UI pseudo-classes')}} section above, the browser provides for client-side validation on (attempted) form submission. On form submission, if there is a form control that fails constraint validation, supporting browsers will display an error message on the first invalid form control; displaying a default message based on the error type, or a message set by you.</p>
+
+<p>Some input types and other attributes place limits on what values are valid for a given input. For example, <code>&lt;input type="number" min="2" max="10" step="2"&gt;</code> means only the number 2, 4, 6, 8, or 10 are valid. Several errors could occur, including a <code>rangeUnderflow</code> error if the value is less than 2, <code>rangeOverflow</code> if greater than 10, <code>stepMismatch</code> if the value is a number between 2 and 10, but not an even integer (does not match the requirements of the <code>step</code> attribute), or <code>typeMismatch</code> if the value is not a number.</p>
+
+<p>For the input types whose domain of possible values is periodic (that is, at the highest possible value, the values wrap back around to the beginning rather than ending), it's possible for the values of the {{htmlattrxref("max")}} and {{htmlattrxref("min")}} properties to be reversed, which indicates that the range of permitted values starts at <code>min</code>, wraps around to the lowest possible value, then continues on until <code>max</code> is reached. This is particularly useful for dates and times, such as when you want to allow the range to be from 8 PM to 8 AM:</p>
+
+<pre class="brush: html notranslate">&lt;input type="time" min="20:00" max="08:00" name="overnight"&gt;</pre>
+
+<p>Specific attributes and their values can lead to a specific error {{domxref('ValidityState')}}:</p>
+
+<table class="standard-table">
+ <caption>Validity object errors depend on the {{htmlelement('input')}} attributes and their values:</caption>
+ <thead>
+  <tr>
+   <th scope="col">属性</th>
+   <th scope="col">関連するプロパティ/th&gt;</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{anch('htmlattrdefmax', 'max')}}</td>
+   <td>{{domxref('validityState.rangeOverflow')}}</td>
+   <td>Occurs when the value is greater than the maximum value as defined by the <code>max</code> attribute</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefmaxlength', 'maxlength')}}</td>
+   <td>{{domxref('validityState.tooLong')}}</td>
+   <td>Occurs when the number of characters is greater than the number allowed by the <code>maxlength</code> property</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefmin', 'min')}}</td>
+   <td>{{domxref('validityState.rangeUnderflow')}}</td>
+   <td>Occurs when the value is less than the minimum value as defined by the <code>min</code> attribute</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefminlength', 'minlength')}}</td>
+   <td>{{domxref('validityState.tooShort')}}</td>
+   <td>Occurs when the number of characters is less than the number required by the <code>minlength</code> property</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefpattern', 'pattern')}}</td>
+   <td>{{domxref('validityState.patternMismatch')}}</td>
+   <td>Occurs when a pattern attribute is included with a valid regular expression and the <code>value</code> does not match it.</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefrequired', 'required')}}</td>
+   <td>{{domxref('validityState.valueMissing')}}</td>
+   <td>Occurs when the <code>required</code> attribute is present but the value is <code>null</code> or radio or checkbox is not checked.</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefstep', 'step')}}</td>
+   <td>{{domxref('validityState.stepMismatch')}}</td>
+   <td>The value doesn't match the step increment. Increment default is <code>1</code>, so only integers are valid on<code> type="number"</code> is step is not included. <code>step="any"</code> will never throw this error.</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdeftyoe', 'type')}}</td>
+   <td>{{domxref('validityState.typeMismatch')}}</td>
+   <td>Occurs when the value is not of the correct type, for example a email does not contain an <code>@</code> or a url doesn't contain a protocol.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>フォームコントロールに <code>required</code> 属性がない場合、値がない場合や空文字列出会った場合は無効にはなりません。 <code>required</code> 以外の上記の属性があった場合も、空文字列でエラーにはなりません。</p>
+
+<p>We can set limits on what values we accept, and supporting browsers will natively validate these form values and alert the user if there is a mistake when the form is submitted.</p>
+
+<p>In addition to the errors described in the table above, the <code>validityState</code> interface contains the <code>badInput</code>, <code>valid</code>, and <code>customError</code> boolean readonly properties. The validity object includes:</p>
+
+<ul>
+ <li>{{domxref('validityState.valueMissing')}}</li>
+ <li>{{domxref('validityState.typeMismatch')}}</li>
+ <li>{{domxref('validityState.patternMismatch')}}</li>
+ <li>{{domxref('validityState.tooLong')}}</li>
+ <li>{{domxref('validityState.tooShort')}}</li>
+ <li>{{domxref('validityState.rangeUnderflow')}}</li>
+ <li>{{domxref('validityState.rangeOverflow')}}</li>
+ <li>{{domxref('validityState.stepMismatch')}}</li>
+ <li>{{domxref('validityState.badInput')}}</li>
+ <li>{{domxref('validityState.valid')}}</li>
+ <li>{{domxref('validityState.customError')}}</li>
+</ul>
+
+<p>For each of these Boolean properties, a value of <code>true</code> indicates that the specified reason validation may have failed is true, with the exception of the <code>valid</code> property, which is <code>true</code> if the element's value obeys all constraints.</p>
+
+<p>If there is an error, supporting browsers will both alert the user and prevent the form from being submitted. A word of caution: if a custom error is set to a truthy value (anything other than the empty string or <code>null</code>), the form will be be prevented from being submitted. If there is no custom error message, and none of the other properties return true, <code>valid</code> will be true, and the form can be submitted.</p>
+
+<pre class="brush: js notranslate">function validate(input) {
+  let validityState_object = input.validity;
+  if(validityState_object.valueMissing) {
+     input.setCustomValidity('A value is required');
+  } else if (input.rangeUnderflow) {
+    input.setCustomValidity('Your value is too low');
+  } else if (input.rangeOverflow) {
+    input.setCustomValidity('Your value is too high');
+  } else {
+    input.setCustomValidity('');
+  }
+}</pre>
+
+<p>The last line, setting the custom validity message to the error string is vital. If the user makes an error, and the validity is set, it will fail to submit, even if all of the values are valid, until the message is <code>null</code>.</p>
+
+<h4 id="Example" name="Example">例</h4>
+
+<p>フィールドの検査に失敗したときに、独自のエラーメッセージを表示させたい場合は、 <code>&lt;input&gt;</code> (および関連する) 要素で利用できる<a href="/ja/docs/Web/API/Constraint_validation#Constraint_validation_interfaces">制約検証機能</a>を使用する必要があります。以下のような形を取ってください。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label for="name"&gt;ユーザー名を入力してください (英大文字および小文字): &lt;/label&gt;
+  &lt;input type="text" name="name" id="name" required pattern="[A-Za-z]+"&gt;
+  &lt;button&gt;Submit&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>基本的な HTML フォーム検証機能では、フォームを送信しようとしたときに、有効な値が入力されていなかったり、 <code>pattern</code> と一致しない値が入力されていたりすると、既定のエラーメッセージを生成します。</p>
+
+<p>独自のエラーメッセージで代替したい場合は、以下のような JavaScript を使用することができます。</p>
+
+<pre class="brush: js notranslate">const nameInput = document.querySelector('input');
+const form = document.querySelector('form');
+
+nameInput.addEventListener('input', () =&gt; {
+  nameInput.setCustomValidity('');
+  nameInput.checkValidity();
+});
+
+nameInput.addEventListener('invalid', () =&gt; {
+  if(nameInput.value === '') {
+    nameInput.setCustomValidity('名前を入力してください。');
+  } else {
+    nameInput.setCustomValidity('ユーザー名には英大文字と小文字のみが使えます。入力しなおしてください。');
+  }
+});</pre>
+
+<p>この例は次のように表示されます。</p>
+
+<p>{{EmbedLiveSample('Client-side_validation')}}</p>
+
+<p>簡単に言えば、以下の通りです。</p>
+
+<ul>
+ <li>input 要素が妥当であるかの状態をチェックするために、値が変更されるたびに <code>checkValidity()</code> メソッドを <code>input</code> イベントハンドラーから呼び出します。</li>
+ <li>値が妥当ではない場合、 <code>invalid</code> イベントが発行され、 <code>invalid</code> イベントのハンドラー関数が実行されます。この関数の中で、値が無効である原因が空欄であるためであるか、パターンに一致しないためであるかを確認し、 <code>if()</code> ブロックを使用して、独自の検証エラーメッセージを設定します。</li>
+ <li>結果として、送信ボタンが押されたときに入力値が妥当ではない場合は、独自のエラーメッセージのうちの一つが表示されます。</li>
+ <li>妥当である場合は、期待通りに送信されます。この場合、独自の検証は <code>setCustomValidity()</code> を空文字列で呼び出すことで中断されます。従って、 <code>input</code> イベントが発生するたびにこれが行われます。以前、独自の検証が設定され、これを行わないと、送信時に妥当な値を持っていたとしても、入力欄は無効であるとして登録されます。</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Always validate input constraints both client side and server side. Constraint validation doesn't remove the need for validation on the <em>server side</em>. Invalid values can still be sent by older browsers or by bad actors.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>メモ</strong>: Firefox は多くの版で、同様の方法で独自のエラーメッセージを設定することができる、独自のエラー属性 — <code>x-moz-errormessage</code> — に対応していました。これはバージョン66で削除されました ({{bug(1513890)}} を参照)。</p>
+</div>
+
+<h3 id="Localization" name="Localization">ローカライゼーション</h3>
+
+<p>&lt;input&gt; 型によっては、入力可能な文字列がロケールに依存します。ロケールによっては 1,000.00 が有効な数値である一方、ロケールによっては有効な数値は 1.000,00 です。</p>
+
+<p>Firefox は (少なくとも <code>type="number"</code> において) ユーザーの入力内容を検証する際に、ロケールを特定するために以下の経験則を使用します。</p>
+
+<ul>
+ <li>当該要素または親要素の <code>lang</code>/<code>xml:lang</code> 属性で指定された言語</li>
+ <li>HTTP の Content-Language ヘッダーで指定された言語</li>
+ <li>何も指定されていない場合は、ブラウザーのロケール</li>
+</ul>
+
+<h2 id="Technical_summary" name="Technical_summary">技術的概要</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th>
+   <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、リスト化、サブミット可能、リセット可能、フォーム関連要素、<a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>。{{htmlattrxref("type", "input")}} の値が <code>hidden</code> でない場合はラベル付け可能要素、知覚可能コンテンツ。</td>
+  </tr>
+  <tr>
+   <th scope="row">許可されている内容</th>
+   <td>なし。これは{{Glossary("empty element", "空要素")}}です。</td>
+  </tr>
+  <tr>
+   <th scope="row">タグの省略</th>
+   <td>開始タグは必須。終了タグを記述してはなりません。</td>
+  </tr>
+  <tr>
+   <th scope="row">許可されている親要素</th>
+   <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素。</td>
+  </tr>
+  <tr>
+   <th scope="row">Implicit ARIA role</th>
+   <td>
+    <ul>
+     <li><code>type=button</code>: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></li>
+     <li><code>type=checkbox</code>: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role">checkbox</a></code></li>
+     <li><code>type=email</code>
+      <ul>
+       <li>with no <code>list</code> attribute: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></code></li>
+       <li>with <code>list</code> attribute: {{ARIARole("combobox")}}</li>
+      </ul>
+     </li>
+     <li><code>type=image</code>: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></li>
+     <li><code>type=number</code>: {{ARIARole("spinbutton")}}</li>
+     <li><code>type=radio</code>: {{ARIARole("radio")}}</li>
+     <li><code>type=range</code>: {{ARIARole("slider")}}</li>
+     <li><code>type=reset</code>: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></li>
+     <li><code>type=search</code>
+      <ul>
+       <li>with no <code>list</code> attribute: {{ARIARole("searchbox")}}</li>
+       <li>with <code>list</code> attribute: {{ARIARole("combobox")}}</li>
+      </ul>
+     </li>
+     <li><code>type=submit</code>: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></li>
+     <li><code>type=tel</code>
+      <ul>
+       <li>with no <code>list</code> attribute: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></code></li>
+       <li>with <code>list</code> attribute: {{ARIARole("combobox")}}</li>
+      </ul>
+     </li>
+     <li><code>type=text</code>
+      <ul>
+       <li>with no <code>list</code> attribute: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></code></li>
+       <li>with <code>list</code> attribute: {{ARIARole("combobox")}}</li>
+      </ul>
+     </li>
+     <li><code>type=url</code>
+      <ul>
+       <li>with no <code>list</code> attribute: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></code></li>
+       <li>with <code>list</code> attribute: {{ARIARole("combobox")}}</li>
+      </ul>
+     </li>
+     <li><code>type=color|date|datetime-local|file|hidden|month|password|time|week</code>: <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">no corresponding role</a></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">許可されている ARIA ロール</th>
+   <td>
+    <ul>
+     <li><code>type=button</code>: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}</li>
+     <li><code>type=checkbox</code>: {{ARIARole("button")}} when used with <code>aria-pressed</code>, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("option")}}, {{ARIARole("switch")}}</li>
+     <li><code>type=image</code>: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}</li>
+     <li><code>type=radio</code>: {{ARIARole("menuitemradio")}}</li>
+     <li><code>type=text</code> with no <code>list</code> attribute: {{ARIARole("combobox")}}, {{ARIARole("searchbox")}}, {{ARIARole("spinbutton")}}</li>
+     <li><code>type=color|date|datetime|datetime-local|email|file|hidden|month|number|password|range|reset|search|submit|tel|url|week</code> または <code>text</code> に <code>list</code> 属性が付いたもの: 許可されている <code>role</code> なし</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">DOM インターフェイス</th>
+   <td>{{domxref("HTMLInputElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<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-input-element', '&lt;input&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Media Capture', '#the-capture-attribute','capture attribute')}}</td>
+   <td>{{Spec2('HTML Media Capture')}}</td>
+   <td><code>capture</code> 属性を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-input-element', '&lt;input&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '&lt;form&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<h3 id="Labels_2" name="Labels_2">ラベル</h3>
+
+<p>When including inputs, it is an accessibilty requirement to add labels along side. This is needed so those who use assistive technologies can tell what the input is for. Also, clicking or touching a label gives focus to the label's associated form control. This improves the accessibility and usability for sighted users, increases the area a user can click or touch to activate the form control. this is especially useful (and even needed) for radio buttons and checkboxes, which are tiny. For more information about labels in general see {{anch("Labels")}} .</p>
+
+<p>次の例は、上記の形で <code>&lt;label&gt;</code> を <code>&lt;input&gt;</code> 要素に関連付ける方法の例です。 <code>&lt;input&gt;</code> に <code>id</code> 属性を設定する必要があります。そして <code>&lt;label&gt;</code> には入力欄の <code>id</code> と同じ値を持つ <code>for</code> 属性が必要になります。</p>
+
+<pre class="notranslate">&lt;label for="peas"&gt;Do you like peas?&lt;/label&gt;
+&lt;input type="checkbox" name="peas" id="peas"&gt;
+</pre>
+
+<h3 id="Size" name="Size">大きさ</h3>
+
+<p>フォーム入力欄のような対話型要素は、簡単に有効化できるだけの大きさを持たせてください。これにより、手足の不自由な人や、スタイラスや指のような精度の低い入力方法を使用している人など、様々な人にとって有用です。対話型の大きさとしては、 44×44 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels">CSS ピクセル</a> を最小値とすることが推奨されています。</p>
+
+<ul>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1</a></li>
+ <li><a href="http://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Target Size and 2.5.5 | Adrian Roselli</a></li>
+ <li><a href="https://a11yproject.com/posts/large-touch-targets/">Quick test: Large touch targets - The A11Y Project</a></li>
+</ul>
+
+<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>
+
+<div>{{Compat("html.elements.input")}}</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">フォーム制約検証</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めての HTML フォーム</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">HTML フォームを構成する方法</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブのフォームウィジェット</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Forms/Form_validation">フォームデータの検証</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">CSS property compatibility table</a></li>
+</ul>
diff --git a/files/ja/web/html/element/input/month/index.html b/files/ja/web/html/element/input/month/index.html
new file mode 100644
index 0000000000..a7c5bfed63
--- /dev/null
+++ b/files/ja/web/html/element/input/month/index.html
@@ -0,0 +1,490 @@
+---
+title: <input type="month">
+slug: Web/HTML/Element/input/month
+tags:
+  - Date picker
+  - Element
+  - Form input
+  - Forms
+  - HTML
+  - HTML forms
+  - HTML input
+  - Input
+  - Input Element
+  - Input Type
+  - Number
+  - Reference
+  - month
+translation_of: Web/HTML/Element/input/month
+---
+<div>{{HTMLRef("Input_types")}}</div>
+
+<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>month</code></strong> 型は、ユーザーが年と月を入力できるようにする入力フィールドを作成し、年と月を簡単に入力できるようにします。値は "<code>YYYY-MM</code>" の形式の文字列で、 <code>YYYY</code> は4桁の年、 <code>MM</code> は月の番号です。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-month.html", "tabbed-shorter")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>コントロールのユーザーインターフェイスは、一般にブラウザーによって異なります。現時点では対応が不安定であり、デスクトップ版の Chrome/Opera と Edge — および最新のバージョンのモバイルブラウザー — のみに利用可能な実装があります。 <code>month</code> 入力欄に対応していないブラウザーでは、コントロールは単純な <code><a href="/ja/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code> に格下げされますが、入力されたテキストが期待されている形式であることを保証するための自動検証が行われることもあります。</p>
+
+<p><code>month</code> に対応していないブラウザーを使用している場合のために、このスクリーンショットで Chrome と Opera でどのように見えるかを示します。右端にある下向き矢印をクリックすると、年と月を選択できる日付選択が表示されます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15391/month-control-chrome.png" style="display: block; height: 216px; margin: 0px auto; width: 273px;"></p>
+
+<p>Microsoft Edge では、 <code>month</code> コントロールはこのように表示されます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15393/month-control-edge.png" style="display: block; height: 389px; margin: 0px auto; width: 227px;"></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value", "値")}}</strong></td>
+   <td>年と月を表す {{domxref("DOMString")}}、または空欄</td>
+  </tr>
+  <tr>
+   <td><strong>イベント</strong></td>
+   <td>{{domxref("HTMLElement/change_event", "change")}} および {{domxref("HTMLElement/input_event", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>対応している共通属性</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("step", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL 属性</strong></td>
+   <td><code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>メソッド</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value" name="Value">値</h2>
+
+<p>{{domxref("DOMString")}} で、入力欄に入力された年と月の値を YYYY-MM (4桁以上の年に続いてハイフン ("<code>-</code>")、続いて2桁の月) の形式で表します。この入力型で使用される時刻の値の形式について詳しくは、 <a href="/ja/docs/Web/HTML/Date_and_time_formats">HTML で使われる日付や時刻の形式</a>の<a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">月の文字列をご覧ください。</a></p>
+
+<p><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">入力コントロールの既定値は、次のように {{htmlattrxref("value", "input")}} 属性に年と月を入れることで設定することができます。</a></p>
+
+<div id="value-example-1">
+<pre class="brush: html notranslate"><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">&lt;label for="bday-month"&gt;生まれた月は？&lt;/label&gt;
+&lt;input id="bday-month" type="month" name="bday-month" value="2017-06"&gt;</a></pre>
+
+<p><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">{{EmbedLiveSample('value-example-1', 600, 60)}}</a></p>
+</div>
+
+<p><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">一点気を付けなければならないことは、表示される日付の書式は実際の <code>value</code> とは異なるということです。多くの{{Glossary("user agent", "ユーザーエージェント")}}は、年と月をユーザーのオペレーティングシステムに設定されたロケールに適した形式で表示しますが、日付の <code>value</code> は常に <code>yyyy-MM</code> の書式です。</a></p>
+
+<p><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">When the above value is submitted to the server, for example, it will look like <code>bday-month=1978-06</code>.</a></p>
+
+<p><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">次のように、 JavaScript で {{domxref("HTMLInputElement.value", "value")}} プロパティを使用して、日付の値を取得したり設定したりすることもできます。</a></p>
+
+<div id="value-example-2">
+<div class="hidden">
+<pre class="brush: html notranslate"><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">&lt;label for="bday-month"&gt;生まれた月は？&lt;/label&gt;
+&lt;input id="bday-month" type="month" name="bday-month" value="2017-06"&gt;</a></pre>
+</div>
+
+<pre class="brush: js notranslate"><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">var monthControl = document.querySelector('input[type="month"]');
+monthControl.value = '1978-06';</a></pre>
+
+<p><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">{{EmbedLiveSample("value-example-2", 600, 60)}}</a></p>
+</div>
+
+<h2 id="Additional_attributes" name="Additional_attributes"><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">追加の属性</a></h2>
+
+<p><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">すべての {{HTMLElement("input")}} 型で共通する属性に加え、 <code>month</code> 型の入力欄は次の属性にも対応しています。</a></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">属性</a></th>
+   <th scope="col"><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">説明</a></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings"><code>{{anch("list")}}</code></a></td>
+   <td><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">オプションで自動補完の定義済みの選択肢を含む &lt;datalist&gt; 要素の id</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings"><code>{{anch("max")}}</code></a></td>
+   <td><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">受け付ける最新の年月</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings"><code>{{anch("min")}}</code></a></td>
+   <td><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">受け付ける最古の年月</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings"><code>{{anch("readonly")}}</code></a></td>
+   <td><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">論理属性で、存在すれば、入力欄の値が編集できないことを示す</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings"><code>{{anch("step")}}</code></a></td>
+   <td><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">上下の矢印で値を調整する時や、検証に使用する刻み値</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p id="htmlattrdeflist"><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">{{page("/ja/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</a></p>
+
+<h3 id="htmlattrdefmax"><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">{{htmlattrdef("max")}}</a></h3>
+
+<p><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">最新の年月で、上記の{{anch("Value", "値")}}で説明した文字列の書式です。要素に入力された {{htmlattrxref("value", "input")}} がこの日付よりも後の場合、要素は</a><a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code>max</code> 属性の値が "<code>yyyy-MM</code>" の書式に従う妥当な文字列でない場合、要素は最大値を持ちません。</p>
+
+<p>この値は <code>min</code> 属性で指定されたものより後か、同じ年月を指定する必要があります。</p>
+
+<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3>
+
+<p>受け付ける最古の年月で、前述と同じ <code>yyyy-MM</code> の書式です。要素の {{htmlattrxref("value", "input")}} がこれより前の場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code>min</code> 属性の値が "<code>yyyy-MM-dd</code>" の書式に従う妥当な文字列でない場合、要素は最小値を持ちません。</p>
+
+<p>この値は <code>max</code> 属性で指定されたものより前か、同じ年月を指定する必要があります。</p>
+
+<h3 id="htmlattrdefreadonly">{{htmlattrdef("readonly")}}</h3>
+
+<p>論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 <code>value</code> は、 JavaScript コードから直接 {{domxref("HTMLInputElement.value")}} プロパティを設定することで変更することができます。</p>
+
+<div class="note">
+<p><strong>注:</strong> 読み取り専用フィールドは値を持てないため、 <code>required</code> は <code>readonly</code> 属性も指定されている入力欄には効果がありません。</p>
+</div>
+
+<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/number", "step-include")}}</p>
+
+<p><code>date</code> 入力欄では、 <code>step</code> の値は月数で指定され、倍率は1です (数値も月単位であるため)。 <code>step</code> の既定値は 1 です。</p>
+
+<h2 id="Using_month_inputs" name="Using_month_inputs">month 入力欄の使用</h2>
+
+<p>日付に関する入力欄は (<code>month</code> を含め) 一見すると便利に見えます。日付の選択に簡単なユーザーインターフェイスを提供し、サーバーに送信するデータの書式をユーザーのロケールに関係なく正規化してくれます。しかし、現時点ではブラウザーの対応が限定されているため、 <code>&lt;input type="month"&gt;</code> には問題があります。</p>
+
+<p><code>&lt;input type="month"&gt;</code> の基本的な使い方と少し複雑な使い方を見てみてから、その後でブラウザーの互換性の問題を緩和するアドバイスを提供しましょう ({{anch("Handling browser support", "ブラウザーの互換性の扱い")}} を参照してください)。</p>
+
+<h3 id="Basic_uses_of_month" name="Basic_uses_of_month">月入力の基本的な使用</h3>
+
+<p>もっとも単純な <code>&lt;input type="month"&gt;</code> の使用方法は、次のように基本的な {{HTMLElement("input")}} と {{htmlelement("label")}} 要素の組み合わせです。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label for="bday-month"&gt;生まれた月を入力してください。&lt;/label&gt;
+  &lt;input id="bday-month" type="month" name="bday-month"&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Basic_uses_of_month', 600, 40)}}</p>
+
+<h3 id="Setting_maximum_and_minimum_dates" name="Setting_maximum_and_minimum_dates">日付の最大値と最小値の設定</h3>
+
+<p>{{htmlattrxref("min", "input")}} および {{htmlattrxref("max", "input")}} 属性を使用して、ユーザーが選択できる日付の範囲を制限することができます。次の例では、日付の最小値を <code>1900-01</code> に、日付の最大値を <code>1999-12</code> に指定しています。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label for="bday-month"&gt;生まれた月を入力してください。&lt;/label&gt;
+  &lt;input id="bday-month" type="month" name="bday-month"
+         min="1900-01" max="1999-12"&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40)}}</p>
+
+<p>次のような結果になります。</p>
+
+<ul>
+ <li>1900年1月から1999年12月までの間の月のみが選択できます。この範囲から外れた月は、コントロール内でスクロールできません。</li>
+ <li>使用しているブラウザーによりますが、指定された範囲外の月が月選択で選択できないか (Edge など)、無効になるものの ({{anch("Validation", "検証")}} を参照) 選択できるか (Chrome など) だということが分かるでしょう。</li>
+</ul>
+
+<h3 id="Controlling_input_size" name="Controlling_input_size">入力欄の寸法の制御</h3>
+
+<p><code>&lt;input type="month"&gt;</code> は {{htmlattrxref("size", "input")}} のような寸法に関する属性には対応していません。寸法を変更する必要がある場合は、 <a href="/ja/docs/Web/CSS">CSS</a> を使用する必要があります。</p>
+
+<h2 id="Validation" name="Validation">検証</h2>
+
+<p>既定で、 <code>&lt;input type="month"&gt;</code> は入力された値の検証を行いません。ユーザーインターフェイスの実装は一般的に、日付でないものの入力をさせないからです。これは便利です。しかし、それでも <code>month</code> 入力欄を空のまま、または無効な日付 (例えば4月32日など) を入力してフォームを送信することが可能です。</p>
+
+<p>これを防ぐために、 {{htmlattrxref("min", "input")}} と {{htmlattrxref("max", "input")}} を用いて利用可能な日を制限することができ ({{anch("Setting maximum and minimum dates", "日付の最大値と最小値の設定")}} を参照)、加えて {{htmlattrxref("required", "input")}} 属性を用いて、日付を入力することを必須にすることができます。結果として、対応しているブラウザーは、範囲外の日付や空の日付フィールドを送信しようとするとエラーを表示します。</p>
+
+<p>例を見てみましょう。ここで日付の最小値と最大値を設定し、入力欄を必須にしました。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="month"&gt;何月にいらっしゃいますか？ (夏期間のみ、 yyyy-mm)&lt;/label&gt;
+    &lt;input id="month" type="month" name="month"
+           min="2017-06" max="2017-09" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+      &lt;input type="submit" value="フォームを送信"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>年と月を指定せずに (または設定した範囲を外れた日付を) 送信しようとすると、ブラウザーはエラーを表示します。例を実行してみましょう。</p>
+
+<p>{{EmbedLiveSample('Validation', 600, 120)}}</p>
+
+<p>対応しているブラウザーで入力しなかった場合のスクリーンショットです。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15395/month-required.png" style="display: block; margin: 0 auto;"></p>
+
+<p>上記の例の CSS です。 CSS の {{cssxref(":valid")}} および {{cssxref(":invalid")}} プロパティを使用して、現在の値が有効かどうかに基づいてスタイルを設定しています。アイコンは入力欄そのものではなく、入力欄の隣の {{htmlelement("span")}} に置くようにしないと、 Chrome ではコントロールの内側にコンテンツを生成するので、正しく整形したり表示したりすることができません。</p>
+
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute;
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+
+<div class="warning">
+<p><strong>重要</strong>: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用にはなりません。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、誤った種類のデータなど) が送信された場合に障害が発生するおそれがあります。</p>
+</div>
+
+<h2 id="Handling_browser_support" name="Handling_browser_support">ブラウザーの対応の扱い</h2>
+
+<p>前述のように、現時点で日付入力を書く上で一番の問題は、多くの主要なブラウザーがまだすべてを実装している訳ではないということです。デスクトップでは Chrome/Opera と Edge のみが対応しており、モバイルでは多くの最新のブラウザーが対応しています。例えば、 <code>month</code> の選択画面は Android 版 Chrome ではこのように表示されます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15397/month-android.png" style="display: block; margin: 0 auto;"></p>
+
+<p>対応していないブラウザーでは、文字列入力欄に安全に格下げされますが、これはユーザーインターフェイスの一貫性 (表示されるコントロールが異なること) とデータの扱いの両方で問題を生みます。</p>
+
+<p>2番目の問題はより深刻です。すでに述べたように、 <code>month</code> 入力欄では、実際の値が常に <code>yyyy-mm</code> の書式で正規化されます。一方、既定の設定では、 <code>text</code> 入力欄ではどの書式で入力されるかの認識がなく、以下のように人間が日付を書く様々な方法で入力される可能性があります。</p>
+
+<ul>
+ <li><code>yyyy/mm</code> (2018/07)</li>
+ <li><code>yyyymm</code> (201807)</li>
+ <li><code>mm-yyyy</code> (07-2018)</li>
+ <li><code>yyyy-mm</code> (2018-07)</li>
+ <li><code>Month yyyy</code> (July 2018)</li>
+ <li>... などなど。</li>
+</ul>
+
+<p>これを回避する方法の一つは、 <code>month</code> 入力欄に {{htmlattrxref("pattern", "input")}} 属性を付けることです。 <code>month</code> 入力欄はこれを使用しないので、 <code>text</code> 入力欄などとして扱うようフォールバックされたときに、このパターンを使用します。例えば、次の例を <code>month</code> 入力欄に未対応のブラウザーで見てみてください。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="month"&gt;何月にいらっしゃいますか？ (夏期間のみ、 yyyy-mm)&lt;/label&gt;
+    &lt;input id="month" type="month" name="month"
+           min="2017-06" max="2017-09" required
+           pattern="[0-9]{4}-[0-9]{2}"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+      &lt;input type="submit" value="フォームを送信"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}</p>
+
+<p><code>nnnn-nn</code> のパターン (<code>n</code> は数字の0から9) に一致しない文字列を入力して送信しようとすると、エラーメッセージが表示される (そして入力欄が無効として強調表示される) のが分かるでしょう。もちろん、これでユーザーが無効な日付を入力したり (<code>0000-42</code> など)、パターンに合わない誤った書式の日付が入力されたりすることを止めることはできません。</p>
+
+<p>また、ユーザーが数ある日付形式の中で期待されるものがどれであるかを知らない可能性もあります。後はその分の作業が残っています。</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute;
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+</div>
+
+<p>(すべての主要なブラウザーが対応するまでの間) ブラウザーに依存しない方法によってフォームで日付を扱う最善の方法は、ユーザーが年と月を別々なコントロール ({{htmlelement("select")}} 要素が一般的です。以下の実装を見てください) に入力するようにするか、 <a href="https://jqueryui.com/datepicker/">jQuery date picker</a> のような JavaScript ライブラリを使用することです。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例では、ユーザーが都市と月を選択できるよう設計されたユーザーインターフェイスの要素を2組作成します。一つ目はネイティブの <code>month</code> 入力欄であり、もう一つは年と月を個別に選択することができる一組の {{HTMLElement("select")}} 要素で、まだ <code>&lt;input type="month"&gt;</code> に対応していないブラウザーのためのものです。</p>
+
+<p>{{EmbedLiveSample('Examples', 600, 140)}}</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>年と月を入力するフォームはこのようになります。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div class="nativeDatePicker"&gt;
+    &lt;label for="month-visit"&gt;何月にいらっしゃいますか？&lt;/label&gt;
+    &lt;input type="month" id="month-visit" name="month-visit"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;p class="fallbackLabel"&gt;何月にいらっしゃいますか？&lt;/p&gt;
+  &lt;div class="fallbackDatePicker"&gt;
+    &lt;div&gt;
+      &lt;span&gt;
+        &lt;select id="year" name="year"&gt;
+        &lt;/select&gt;
+        &lt;label for="year"&gt;年&lt;/label&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;select id="month" name="month"&gt;
+          &lt;option selected&gt;1&lt;/option&gt;
+          &lt;option&gt;2&lt;/option&gt;
+          &lt;option&gt;3&lt;/option&gt;
+          &lt;option&gt;4&lt;/option&gt;
+          &lt;option&gt;5&lt;/option&gt;
+          &lt;option&gt;6&lt;/option&gt;
+          &lt;option&gt;7&lt;/option&gt;
+          &lt;option&gt;8&lt;/option&gt;
+          &lt;option&gt;9&lt;/option&gt;
+          &lt;option&gt;10&lt;/option&gt;
+          &lt;option&gt;11&lt;/option&gt;
+          &lt;option&gt;12&lt;/option&gt;
+        &lt;/select&gt;
+        &lt;label for="month"&gt;月&lt;/label&gt;
+      &lt;/span&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p><code>nativeDatePicker</code> の ID がついた {{HTMLElement("div")}} は、年と月をリクエストするために <code>month</code> 入力欄を用いるのに対し、 <code>fallbackDatePicker</code> の ID がついた <code>&lt;div&gt;</code> は代わりに一組の <code>&lt;select&gt;</code> 要素を使用します。一つ目は年を、二つ目は月を入力します。</p>
+
+<p>月を選択する <code>&lt;select&gt;</code> は、変化しないので月をハードコーディングしています (ローカライズの問題が残っていますが)。年に利用できる値は、現在の年に応じて動的に生成されます (どのように動作するかについての詳細な説明は、以下のコードのコメントを参照してください)。</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute;
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+</div>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>どちらの方法を使用するかを選択し、非ネイティブの年の <code>&lt;select&gt;</code> に年の一覧を設定する JavaScript コードは以下の通りです。</p>
+
+<p>この例の面白いもう一つの部分は、機能の検出コードです。ブラウザーが <code>&lt;input type="month"&gt;</code> に対応しているかどうかを検出するために、新たな {{htmlelement("input")}} 要素を生成し、その <code>type</code> を <code>month</code> に設定して、すぐに type に何が設定されたかをチェックします。対応していないブラウザーでは、 <code>month</code> が フォールバックされて <code>text</code> が返されます。 <code>&lt;input type="month"&gt;</code> に対応していない場合は、ネイティブの日付選択を非表示にしてフォールバック用の選択ユーザーインターフェイスを表示します。</p>
+
+<pre class="brush: js notranslate">// define variables
+var nativePicker = document.querySelector('.nativeDatePicker');
+var fallbackPicker = document.querySelector('.fallbackDatePicker');
+var fallbackLabel = document.querySelector('.fallbackLabel');
+
+var yearSelect = document.querySelector('#year');
+var monthSelect = document.querySelector('#month');
+
+// hide fallback initially
+fallbackPicker.style.display = 'none';
+fallbackLabel.style.display = 'none';
+
+// test whether a new date input falls back to a text input or not
+var test = document.createElement('input');
+
+try {
+  test.type = 'month';
+} catch (e) {
+  console.log(e.description);
+}
+
+// if it does, run the code inside the if() {} block
+if(test.type === 'text') {
+  // hide the native picker and show the fallback
+  nativePicker.style.display = 'none';
+  fallbackPicker.style.display = 'block';
+  fallbackLabel.style.display = 'block';
+
+  // populate the years dynamically
+  // (the months are always the same, therefore hardcoded)
+  populateYears();
+}
+
+function populateYears() {
+  // get the current year as a number
+  var date = new Date();
+  var year = date.getFullYear();
+
+  // Make this year, and the 100 years before it available in the year &lt;select&gt;
+  for(var i = 0; i &lt;= 100; i++) {
+    var option = document.createElement('option');
+    option.textContent = year-i;
+    yearSelect.appendChild(option);
+  }
+}</pre>
+
+<div class="note">
+<p><strong>注</strong>: 53週ある年もあることを忘れないでください（<a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">年あたりの週数</a>を参照）。商品のアプリを開発するときはこれを念頭に置いておく必要があります。</p>
+</div>
+
+<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#month-state-(type=month)', '&lt;input type="month"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("html.elements.input.input-month")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>全般的な {{HTMLElement("input")}} およびその操作に使用する{{domxref("HTMLInputElement")}} インターフェイス</li>
+ <li><a href="/ja/docs/Web/HTML/Date_and_time_formats">HTML で使用される日付と時刻の書式</a></li>
+ <li><a href="/ja/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">日付と時刻の選択のチュートリアル</a></li>
+ <li><code><a href="/ja/docs/Web/HTML/Element/input/datetime-local">&lt;input type="datetime-local"&gt;</a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/date">&lt;input type="date"&gt;</a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/time">&lt;input type="time"&gt;</a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/week">&lt;input type="week"&gt;</a></code></li>
+ <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li>
+</ul>
diff --git a/files/ja/web/html/element/input/number/index.html b/files/ja/web/html/element/input/number/index.html
new file mode 100644
index 0000000000..8177c9f00f
--- /dev/null
+++ b/files/ja/web/html/element/input/number/index.html
@@ -0,0 +1,451 @@
+---
+title: <input type="number">
+slug: Web/HTML/Element/input/number
+tags:
+  - Element
+  - Forms
+  - HTML
+  - HTML forms
+  - Input
+  - Input Element
+  - Input Type
+  - Number
+  - Reference
+translation_of: Web/HTML/Element/input/number
+---
+<div>{{HTMLRef("Input_types")}}</div>
+
+<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>number</code></strong> 型は、ユーザーに数値を入力させるために使用されます。数値以外の入力を除外するための値検証機能を内蔵しています。</span>ブラウザーによっては、マウスや指先のタップを使用して値をユーザーが値を増減させるための矢印を提供していることもあります。</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-number.html", "tabbed-shorter")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p><code>number</code> 型に対応していないブラウザーでは、 <code>number</code> 入力欄は <code>text</code> 入力欄で代替されます。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value", "値")}}</strong></td>
+   <td>数字を表す {{jsxref("Number")}}、または空欄</td>
+  </tr>
+  <tr>
+   <td><strong>イベント</strong></td>
+   <td>{{domxref("HTMLElement/change_event", "change")}} および {{domxref("HTMLElement/input_event", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>対応している共通属性</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL 属性</strong></td>
+   <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code></td>
+  </tr>
+  <tr>
+   <td><strong>メソッド</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value" name="Value">値</h2>
+
+<p>入力欄に入力された数字の値を表す {{jsxref("Number")}} です。 {{htmlattrxref("value", "input")}} 属性に数値を設定することで、次のように入力欄の既定値を設定することができます。</p>
+
+<pre class="brush: html notranslate">&lt;input id="number" type="number" value="42"&gt;</pre>
+
+<p>{{EmbedLiveSample('Value', 600, 40)}}</p>
+
+<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2>
+
+<p>すべての {{HTMLElement("input")}} 型で共通する属性に加え、 <code>number</code> 型の入力欄は次の属性にも対応しています。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">属性</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("list")}}</code></td>
+   <td>任意の定義済み自動補完の選択肢を保持する {{HTMLElement("datalist")}} 要素の <code>id</code> です。</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("max")}}</code></td>
+   <td>この入力欄で受け付ける最大値</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("min")}}</code></td>
+   <td>この入力欄で受け付ける最小値</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("placeholder")}}</code></td>
+   <td>入力欄の中が空の時に表示される入力例の値</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("readonly")}}</code></td>
+   <td>論理値で、値が読み取り専用であるかを示す</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("step")}}</code></td>
+   <td>上下の矢印で値を調整する時や、検証に使用する刻み値</td>
+  </tr>
+ </tbody>
+</table>
+
+<p id="htmlattrdeflist">{{page("/ja/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p>
+
+<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3>
+
+<p>この入力欄が受け付ける最大値です。要素に入力された {{htmlattrxref("value", "input")}} がこれを超えた場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code>max</code> 属性の値が数値でない場合、要素は最大値を持ちません。</p>
+
+<p>この値は <code>min</code> 属性の値より大きいか、等しくしなければなりません。</p>
+
+<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3>
+
+<p>この入力欄が受け付ける最小値です。要素の {{htmlattrxref("value", "input")}} がこれより小さい場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code>min</code> 属性の値が数値でない場合、要素は最小値を持ちません。</p>
+
+<p>この値は <code>max</code> 属性の値より小さいか、等しくしなければなりません。</p>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>
+
+<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3>
+
+<div id="step-include">
+<p><code>step</code> 属性は値が吸着する粒度を指定する数値、または後述する特殊な値 <code>any</code> です。刻みの基準値に等しい値 (指定されていれば <code>{{anch("min")}}</code>、そうでなければ {{htmlattrxref("value", "input")}}、どちらも設定されていなければ適切な既定値) のみが妥当となります。</p>
+
+<p>文字列値の <code>any</code> は刻みがなく、どの値でも許可されることを意味します (<code>{{anch("min")}}</code> や <code>{{anch("max")}}</code> など、他の制約に制限されます)。</p>
+
+<div class="note">
+<p><strong>注:</strong> ユーザーがデータを入力したときには刻みの設定には吸着せず、{{Glossary("user agent", "ユーザーエージェント")}}は直近の妥当な値、同じ距離の値の選択肢が二つあった場合は、正の方向の推奨値に丸められます。</p>
+</div>
+</div>
+
+<p><code>number</code> 入力欄の既定の刻み値は <code>1</code> であり、刻みの基準値が整数ではない場合を<em>除いて</em>、整数の入力のみを許可します。</p>
+
+<h2 id="Using_number_inputs" name="Using_number_inputs">number 入力欄の使用</h2>
+
+<p><code>&lt;input type="number"&gt;</code> 要素は、フォームに数値を入力するユーザーインターフェイスとロジックを構築する際に、作業を簡略化するのに役立ちます。 <code>type</code> の値に正しく <code>number</code> を設定して数値入力を作成すると、入力された文字列が数値かどうかが自動的に検証されるようになり、通常は値を1つずつ上下するための上下ボタンの組み合わせが表示されます。</p>
+
+<div class="warning">
+<p><strong>重要</strong>: 論理的には、数値入力欄の中に数字以外を入力することはできないはずです。これらは、ブラウザー間でこれに関するいくつかの意見の相違があるようです。 {{bug(1398528)}} を参照してください。</p>
+</div>
+
+<div class="note">
+<p><strong>注</strong>: ユーザーが HTML をその場面の裏でいじることができることを意識しておくことは極めて重要です。ですから、安全を目的として、サイトでクライアント側の値検証機能のみを使用しては<em>いけません</em>。何らかのセキュリティ上の問題を含む可能性がある値が提供されるトランザクションの場合は、いずれもサーバー側で値検証を行う<em>必要があります</em>。</p>
+</div>
+
+<p>モバイルブラウザーでは、ユーザーが値を入力しようとした時に、数値入力に適した特別なキーボードを表示することで、使い勝手をさらに向上させます。次のスクリーンショットは、 Android の Firefox で撮影されたものです。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14963/number-keyboard-fxa.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<h3 id="A_simple_number_input" name="A_simple_number_input">単純な数値入力</h3>
+
+<p>最も基本的なフォームでは、次のように数値入力を実装することができます。</p>
+
+<pre class="brush: html notranslate">&lt;label for="ticketNum"&gt;購入するチケットの枚数:&lt;/label&gt;
+&lt;input id="ticketNum" type="number" name="ticketNum" value="0"&gt;</pre>
+
+<p>{{EmbedLiveSample('A_simple_number_input', 600, 40)}}</p>
+
+<p>数値入力は空の場合と単一の数値が入力された場合に妥当とみなされますが、それ以下は無効とみなされます。 {{htmlattrxref("required", "input")}} 属性が使用された場合は、入力欄が空の場合に妥当とみなされなくなります。</p>
+
+<div class="note">
+<p><strong>注</strong>: <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number">有効な浮動小数点数</a>を受け入れることができます (つまり、 <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a> でも <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a> でもないもの)。</p>
+</div>
+
+<h3 id="Placeholders" name="Placeholders">プレイスホルダー</h3>
+
+<p>フォームがどのような入力データを取るのかについての行内のヒントを提供すると、有益なことがあります。これはページのデザインでそれぞれの {{HTMLElement("input")}} に説明のラベルを付けることができない場合に特に重要になります。ここで<strong>プレイスホルダー</strong>が登場します。プレイスホルダーはほとんどの場合、入力される <code>value</code> が取るべき値の形式のヒントを説明するために使用される値です。これは <code>value</code> が <code>""</code> の時に入力欄の中に表示されます。入力欄にデータが入力されると、プレイスホルダーは非表示になり、入力欄が空欄になると、プレイスホルダーは再度表示されます。</p>
+
+<p>ここで、 <code>number</code> 入力欄に "<code>10の倍数</code>" というプレイスホルダーを設定します。なお、プレイスホルダーが非表示になったり再表示されたりするのは、入力欄の中身を変更したときです。</p>
+
+<pre class="brush: html notranslate">&lt;input type="number" placeholder="10の倍数"&gt;</pre>
+
+<p>{{EmbedLiveSample('Placeholders', 600, 40)}}</p>
+
+<h3 id="Controlling_step_size" name="Controlling_step_size">刻み幅の制御</h3>
+
+<p>既定で、数値を増減させるための増減ボタンは、1刻みで値を増減させます。 {{htmlattrxref("step", "input")}} 属性を設定することで、刻みの量を指定する数値の値を変更できます。上記の例は10の倍数を指定すると言っていますので、 <code>step</code> の値を <code>10</code> にすることが妥当でしょう。</p>
+
+<pre class="brush: html notranslate">&lt;input type="number" placeholder="multiple of 10" step="10"&gt;</pre>
+
+<p>{{EmbedLiveSample('Controlling_step_size', 600, 40)}}</p>
+
+<p>この例で、増減ボタンが値を1ずつではなく10ずつ増減させることが分かるでしょう。手動で10の倍数ではない数値を入力することができますが、無効な値とみなされるでしょう。</p>
+
+<h3 id="Specifying_minimum_and_maximum_values" name="Specifying_minimum_and_maximum_values">最小値と最大値の指定</h3>
+
+<p>{{htmlattrxref("min", "input")}} 及び {{htmlattrxref("max", "input")}} 属性を使用して、入力欄が保持できる最小値と最大値を指定することができます。例えば、最小値を <code>0</code> に、最大値を <code>100</code> に設定する例をご紹介しましょう。</p>
+
+<pre class="brush: html notranslate">&lt;input type="number" placeholder="multiple of 10" step="10" min="0" max="100"&gt;</pre>
+
+<p>{{EmbedLiveSample('Specifying_minimum_and_maximum_values', 600, 40)}}</p>
+
+<p>更新したこの版では、増減ボタンで0未満や100より大きい数値を設定することができないことにお気づきでしょう。手動でこの範囲の外の値を入力することもできますが、無効な値とみなされるでしょう。</p>
+
+<h3 id="Allowing_decimal_values" name="Allowing_decimal_values">小数が使用できるようにする</h3>
+
+<p>数値入力の問題の一つが、既定で刻みが1になっていることです。小数を含む数値 (たとえば "1.0") を入力しようとすると、無効な値とみなされるでしょう。小数が必要な値を入力させたい場合は、これを <code>step</code> の値に反映させる必要があります（例えば <code>step="0.01"</code> で小数第2位まで許可します）。単純な例を示します。</p>
+
+<pre class="brush: html notranslate">&lt;input type="number" placeholder="1.0" step="0.01" min="0" max="10"&gt;</pre>
+
+<p>{{EmbedLiveSample("Allowing_decimal_values", 600, 40)}}</p>
+
+<p>この例では <code>0.0</code> から <code>10.0</code> までで、小数第2位までの値が許容されます。この例では "9.52" は妥当になりますが、 "9.521" は妥当ではありません。</p>
+
+<h3 id="Controlling_input_size" name="Controlling_input_size">入力欄の寸法の制御</h3>
+
+<p><code>number</code> 型の {{HTMLElement("input")}} 要素では、 {{htmlattrxref("size", "input")}} のような寸法を決める属性には対応していません。入力欄の寸法を変更するには <a href="/ja/docs/Web/CSS">CSS</a> に頼る必要があります。</p>
+
+<p>例えば、入力欄の幅を数字3桁の入力に必要なだけの幅に調整するには、 HTML に {{htmlattrxref("id")}} を設定し、これから入力欄を短くしたときに文字列が表示できなくならないように、プレイスホルダーを短縮します。</p>
+
+<pre class="brush: html notranslate">&lt;input type="number" placeholder="x10" step="10" min="0" max="100" id="number"&gt;</pre>
+
+<p>それから、要素の <code>id</code> が <code>#number</code> である要素の幅を短くします。</p>
+
+<pre class="brush: css notranslate">#number {
+  width: 3em;
+}</pre>
+
+<p>結果は以下のように表示されます。</p>
+
+<p>{{EmbedLiveSample('Controlling_input_size', 600, 40)}}</p>
+
+<h3 id="Offering_suggested_values" name="Offering_suggested_values">サジェスト値の提供</h3>
+
+<p>{{htmlattrxref("list", "input")}} 属性に、サジェスト値あたり一つの {{HTMLElement("option")}} 要素を含んだ {{HTMLElement("datalist")}} の {{htmlattrxref("id")}} を値として入れることにより、ユーザーの選択することができる既定の選択肢のリストを提供することができます。それぞれの <code>option</code> の <code>value</code> は、数値入力ボックスのサジェスト値に関係します。</p>
+
+<pre class="brush: html notranslate">&lt;input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers"&gt;
+&lt;span class="validity"&gt;&lt;/span&gt;
+
+&lt;datalist id="defaultNumbers"&gt;
+  &lt;option value="10045678"&gt;
+  &lt;option value="103421"&gt;
+  &lt;option value="11111111"&gt;
+  &lt;option value="12345678"&gt;
+  &lt;option value="12999922"&gt;
+&lt;/datalist&gt;</pre>
+
+<p>{{EmbedLiveSample("Offering_suggested_values", 600, 40)}}</p>
+
+<div class="note">
+<p><code>number</code> 入力欄での {{htmlattrxref("list", "input")}} 属性の使用はすべてのブラウザーで対応しているわけではありません。例えば Chrome や Opera では動作しますが、 Firefox では動作しません。</p>
+</div>
+
+<h2 id="Validation" name="Validation">検証</h2>
+
+<p>すでに <code>number</code> 入力欄における幾つかの検証機能については言及しましたが、ここで確認してみましょう。</p>
+
+<ul>
+ <li><code>&lt;input type="number"&gt;</code> 要素は、数値 (または <code>required</code> が指定されていない場合は空欄) ではない入力を自動的に違反とします。</li>
+ <li>{{htmlattrxref("required", "input")}} 属性を使用すると、空欄の入力を違反とします。 (つまり、入力欄は埋める<em>必要があります</em>。)</li>
+ <li>{{htmlattrxref("step", "input")}} 属性を使用すると、妥当な値を特定の刻みの値 (例えば、10の倍数) に制約することができます。</li>
+ <li>{{htmlattrxref("min", "input")}} および {{htmlattrxref("max", "input")}} 属性を使用すると、妥当な値の下限と上限を設けることができます。</li>
+</ul>
+
+<p>次の例は上記の機能のすべてを例示しており、また幾らか CSS を用いて、 <code>input</code> の値によって、妥当または違反のアイコンを表示するようにします。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="balloons"&gt;風船の注文数 (10の倍数):&lt;/label&gt;
+    &lt;input id="balloons" type="number" name="balloons" step="10" min="0" max="100" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="submit"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample("Validation", 600, 80)}}</p>
+
+<p>様々な違反する値を入力して、フォームを送信しようとしてみてください。例えば、値なし、0未満または100を超えた値、10の倍数ではない値、数値でない値などです。そして、それぞれにおいてブラウザーがどのようなエラーメッセージを表示するかを確認してください。</p>
+
+<p>この例で適用される CSS は以下の通りです。</p>
+
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+}
+
+input:invalid+span:after {
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+
+<p>ここで、 {{cssxref(":invalid")}} および {{cssxref(":valid")}} 擬似クラスを用いて、隣の {{htmlelement("span")}} 要素の生成コンテンツとして無効または妥当の適切なアイコンを表示し、妥当性の視覚的なインジケーターにすることができます。</p>
+
+<p>別な <code>&lt;span&gt;</code> 要素に入れたのは自由度を高めるためです。ブラウザーによっては一部の種類のフォーム入力欄において、あまり効果的に生成コンテンツを表示できないことがあります (<a href="/ja/docs/Web/HTML/Element/input/date#Validation"><code>&lt;input type="date"&gt;</code> の検証</a>の節の例を読んでください)。</p>
+
+<div class="warning">
+<p><strong>重要</strong>: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するサーバースクリプトの代用には<em>なりません</em>。</p>
+
+<p>HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML をバイパスし、サーバーに直接データを送信することも可能です。</p>
+
+<p>サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、間違った種類のデータなど) がデータベースに入力された場合に災害が発生するおそれがあります。</p>
+</div>
+
+<h3 id="Pattern_validation" name="Pattern_validation">パターンによる値検証</h3>
+
+<p><code>&lt;input type="number"&gt;</code> 要素は {{htmlattrxref("pattern", "input")}} 属性を使用して、入力された値が特定の正規表現パターンを満たすようにすることに対応していません。</p>
+
+<p>これは、 number 入力欄は数値以外の何が入力されても妥当にはならないからであり、上記で説明したとおり、 {{htmlattrxref("min", "input")}} および {{htmlattrxref("max", "input")}} 属性を用いて妥当な数値の最大値および最小値を制約することができます。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>すでに既定では増分が <code>1</code> であるという事実を扱いましたので、 {{htmlattrxref("step", "input")}} 属性を使用して実数を入力できるようにすることができます。もう少し詳しく見てみましょう。</p>
+
+<p>以下の例は、ユーザーの身長を入力するフォームです。既定では慎重をメートル単位で受け付けますが、関連するボタンをクリックすることでフォームがフィートとインチを受け付けるように変更することができます。メートル単位の身長の入力欄は小数第2位まで受け付けます。</p>
+
+<p>{{EmbedLiveSample("Examples", 600, 100)}}</p>
+
+<p>HTML は次のようになります。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+    &lt;div class="metersInputGroup"&gt;
+        &lt;label for="meters"&gt;あなたの身長を入力してください (メートル):&lt;/label&gt;
+        &lt;input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="例 1.78" required&gt;
+        &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div class="feetInputGroup" style="display: none;"&gt;
+        &lt;span&gt;あなたの身長を入力してください — &lt;/span&gt;
+        &lt;label for="feet"&gt;フィート:&lt;/label&gt;
+        &lt;input id="feet" type="number" name="feet" min="0" step="1"&gt;
+        &lt;span class="validity"&gt;&lt;/span&gt;
+        &lt;label for="inches"&gt;インチ:&lt;/label&gt;
+        &lt;input id="inches" type="number" name="inches" min="0" max="11" step="1"&gt;
+        &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;input type="button" class="meters" value="身長をフィートとインチで入力"&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+        &lt;input type="submit" value="フォームを送信"&gt;
+    &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>これまでの記事ですでに見てきた属性の多くを使用していることがわかります。センチメートル単位のメートル値を受け入れるため、 <code>step</code> の値を <code>0.01</code> に設定して、 <em>1.78</em> のような値が無効とされないようにしました。また、その入力欄のプレイスホルダーも提供しました。</p>
+
+<p>最初はフィートとインチの入力欄を <code>style="display: none;"</code> を使用して非表示にしているため、既定はメートルでの入力です。</p>
+
+<p>次に、 CSS に進みます。これは、以前に見た検証のスタイル付けととても良く似ています。ここで注目するところはありません。</p>
+
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute;
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+
+<p>そして最後に、 JavaScript です。</p>
+
+<pre class="brush: js notranslate">let metersInputGroup = document.querySelector('.metersInputGroup');
+let feetInputGroup = document.querySelector('.feetInputGroup');
+let metersInput = document.querySelector('#meters');
+let feetInput = document.querySelector('#feet');
+let inchesInput = document.querySelector('#inches');
+let switchBtn = document.querySelector('input[type="button"]');
+
+switchBtn.addEventListener('click', function() {
+  if(switchBtn.getAttribute('class') === 'meters') {
+    switchBtn.setAttribute('class', 'feet');
+    switchBtn.value = '身長をメートルで入力';
+
+    metersInputGroup.style.display = 'none';
+    feetInputGroup.style.display = 'block';
+
+    feetInput.setAttribute('required', '');
+    inchesInput.setAttribute('required', '');
+    metersInput.removeAttribute('required');
+
+    metersInput.value = '';
+  } else {
+    switchBtn.setAttribute('class', 'meters');
+    switchBtn.value = '身長をフィートとインチで入力';
+
+    metersInputGroup.style.display = 'block';
+    feetInputGroup.style.display = 'none';
+
+    feetInput.removeAttribute('required');
+    inchesInput.removeAttribute('required');
+    metersInput.setAttribute('required', '');
+
+    feetInput.value = '';
+    inchesInput.value = '';
+  }
+});</pre>
+
+<p>いくつかの変数を宣言した後、イベントリスナーを <code>button</code> に追加し、切り替えの仕組みを制御しています。これはとても単純で、ほとんどがボタンの <code>class</code> と {{HTMLElement("label")}} を変更するためのものであり、そしてボタンが押されたときに2組の入力の display 値を更新しています。</p>
+
+<p>(なお、ここではメートルとフィート/インチの間の変換は行っていませんが、実際のウェブアプリケーションではおそらく行うでしょう。)</p>
+
+<div class="note">
+<p><strong>注:</strong> ユーザーがボタンをクリックしたとき、 <code>required</code> 属性を非表示にする入力欄から削除し、 <code>value</code> 属性を空にしています。これは入力欄の両方の組が入力されていなくてもフォームを送信することができるようにしています。これはユーザーが意図していないデータをフォームが送信しないことを保証するものでもあります。</p>
+
+<p>これを行わないと、フィート/インチ<strong>と</strong>メートルの両方を入力してフォームを送信することができてしまいます。</p>
+</div>
+
+<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#number-state-(type=number)', '&lt;input type="number"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>初回定義</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#number-state-typenumber', '&lt;input type="number"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</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-number")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/HTML/Forms">HTML フォームガイド</a></li>
+ <li>{{HTMLElement("input")}}</li>
+ <li><code><a href="/ja/docs/Web/HTML/Element/input/tel">&lt;input type="tel"&gt;</a></code></li>
+ <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li>
+</ul>
diff --git a/files/ja/web/html/element/input/password/index.html b/files/ja/web/html/element/input/password/index.html
new file mode 100644
index 0000000000..16dbe563b6
--- /dev/null
+++ b/files/ja/web/html/element/input/password/index.html
@@ -0,0 +1,315 @@
+---
+title: <input type="password">
+slug: Web/HTML/Element/input/password
+tags:
+  - Element
+  - Forms
+  - HTML
+  - HTML Input Types
+  - HTML Inputs
+  - HTML Password Input
+  - HTML forms
+  - HTML input tag
+  - Input Types
+  - Reference
+  - Web
+  - password
+translation_of: Web/HTML/Element/input/password
+---
+<div>{{HTMLRef("Input_types")}}</div>
+
+<p><span class="seoSummary"><code>&lt;input&gt;</code> 要素の <strong><code>password</code></strong> 型は、パスワードを安全に入力する方法を提供します。</span>この要素はプレーンテキストの 1 行編集コントロールとして表示され、そのテキストは読み取られることがないように、1 つ 1 つの文字がアスタリスク ("*") やドット ("•") のような記号に置き換えられ、隠されます。この文字は{{Glossary("user agent", "ユーザーエージェント")}}や {{Glossary("OS")}} によって変わります。</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-password.html", "tabbed-standard")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>詳細な入力プロセスの動作は、ブラウザーによって異なっている場合があります。例えば、モバイル端末ではしばしば、ユーザーが思ったとおりのキーを押したかどうかを確かめることができるように、入力した文字を、隠す前に一瞬だけ表示します。これは特に、キーのサイズが小さく、押し間違いが起こりやすい、仮想キーボードの場合に役立ちます。</p>
+
+<div class="note">
+<p>パスワードのような機密情報が含まれているフォーム (ログインフォームなど) は、 HTTPS で送信するべきです。現在では多くのブラウザーで、安全ではないログインフォームの場合に警告を行う仕組みが実装されています。詳細は<a href="/ja/docs/Web/Security/Insecure_passwords">安全でないパスワード</a>を参照してください。</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value", "値")}}</strong></td>
+   <td>パスワードを表す {{domxref("DOMString")}}、または空欄</td>
+  </tr>
+  <tr>
+   <td><strong>イベント</strong></td>
+   <td>{{event("change")}} および {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>対応している共通属性</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("inputmode", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}}, {{htmlattrxref("size", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL 属性</strong></td>
+   <td><code>selectionStart</code>, <code>selectionEnd</code>, <code>selectionDirection</code>, <code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>メソッド</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value" name="Value">値</h2>
+
+<p>{{htmlattrxref("value", "input")}} 属性は、パスワードを入力するために使われているテキスト編集コントロールの、現在の内容である {{domxref("DOMString")}} を格納します。ユーザーが何も入力していない場合、この値は空文字列 (<code>" "</code>) です。{{htmlattrxref("required")}} プロパティが指定されている場合、パスワード編集ボックスが妥当となるためには、空文字列以外の値を含まなければなりません。</p>
+
+<p>{{htmlattrxref("pattern", "input")}} 属性が指定されている場合、<code>"password"</code> コントロールの内容は、その値が検証をパスした場合のみ、妥当とみなされます。詳細は {{anch("Validation")}} を参照してください。</p>
+
+<div class="note">
+<p>改行文字の LF (U+000A) と CR (U+000D) は <code>"password"</code> の値には許容されません。パスワードコントロールに値がセットされるとき、LF 及び CR は値から取り除かれます。</p>
+</div>
+
+<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2>
+
+<p>型に関係なくすべての {{HTMLElement("input")}} 要素を操作する属性に加え、 <code>password</code> 型の入力欄は次の属性にも対応しています。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">属性</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("maxlength")}}</code></td>
+   <td>値が取りうる UTF-16 文字単位での最大長</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("minlength")}}</code></td>
+   <td>妥当と判断される最小文字数</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("pattern")}}</code></td>
+   <td>妥当と判断されるために、入力欄の内容が一致する必要がある正規表現</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("placeholder")}}</code></td>
+   <td>空欄の時に入力欄に表示される入力例の値</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("readonly")}}</code></td>
+   <td>入力欄の内容を読み取り専用にするかどうかを示す論理属性</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("size")}}</code></td>
+   <td>入力欄の長さを何文字分にするかを表す数値</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3>
+
+<p>ユーザーがパスワード入力欄に入力することができる (UTF-16 コード単位での) 最大文字数です。 0 以上の整数値である必要があります。 <code>maxlength</code> が指定されていないか、無効な値が指定されていると、パスワード入力欄には最大文字数が設定されません。この値は <code>minlength</code> の値以上である必要もあります。</p>
+
+<p>フィールドに入力されたテキストの長さが UTF-16 コード単位で <code>maxlength</code> の長さを超えていると、その入力欄は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。</p>
+
+<h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3>
+
+<p>ユーザーがパスワード入力欄に入力することができる (UTF-16 コード単位での) 最小文字数です。これは非負の整数値で、 <code>maxlength</code> で指定された値以下である必要があります。 <code>minlength</code> が指定されていないか、無効な値が指定されていると、パスワード入力欄には最小文字数が設定されません。</p>
+
+<p>入力欄のテキストの長さが UTF-16 コード単位で <code>minlength</code> の長さよりも短いと、その入力欄は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。</p>
+
+<h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/text", "pattern-include")}}</p>
+
+<p>pattern の使用はパスワード入力において、ユーザーが幅広い種類の文字クラスを使用した有効なパスワードを選択して使用するのに役立ちます。パターンを使用すると、大文字・小文字の規則、数桁の数字や区切り記号などの使用を義務づけることができます。詳細と例については{{anch("Validation", "検証")}}の節を参照してください。</p>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p>
+
+<h3 id="htmlattrdefreadonly">{{htmlattrdef("readonly")}}</h3>
+
+<p>論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 <code>value</code> は、 JavaScript コードから直接 {{domxref("HTMLInputElement.value")}} プロパティを設定することで変更することができます。</p>
+
+<div class="note">
+<p><strong>注:</strong> 読み取り専用フィールドは値を持てないため、 <code>required</code> は <code>readonly</code> 属性も指定されている入力欄には効果がありません。</p>
+</div>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p>
+
+<h2 id="Using_password_inputs" name="Using_password_inputs">パスワード入力欄の使用</h2>
+
+<p>パスワード入力ボックスは通常、他のテキスト入力ボックスのように動作します。主な違いは、ユーザーの近くにいる人がパスワードを読み取ることを防ぐために、その内容を隠すことです。</p>
+
+<h3 id="A_simple_password_input" name="A_simple_password_input">シンプルなパスワード入力欄</h3>
+
+<p>以下は最も基本的なパスワード入力欄で、{{HTMLElement("label")}} 要素を使ったラベルとともに設置されています。</p>
+
+<pre class="brush: html notranslate">&lt;label for="userPassword"&gt;Password: &lt;/label&gt;
+&lt;input id="userPassword" type="password"&gt;</pre>
+
+<p>{{EmbedLiveSample("A_simple_password_input", 600, 40)}}</p>
+
+<h3 id="Allowing_autocomplete" name="Allowing_autocomplete">オートコンプリートを許可する</h3>
+
+<p>パスワードを自動的に入力するため、ユーザーのパスワードマネージャを許可するには、{{htmlattrxref("autocomplete", "input")}} 属性を指定します。パスワードの場合、通常は次のいずれかの値をとります。</p>
+
+<dl>
+ <dt><code>"on"</code></dt>
+ <dd>ブラウザー、あるいはパスワードマネージャが自動的にパスワード欄を埋めることを許可します。これは、<code>"current-password"</code> あるいは<code>"new-password"</code> を使用するほど有益ではありません。</dd>
+ <dt><code>"off"</code></dt>
+ <dd>ブラウザー、あるいはパスワードマネージャが自動的にパスワード欄を埋めることを許可しません。いくつかのソフトウェアはこの値を無視しますが、それは通常、ユーザーの安全なパスワードの実践を維持する能力を、阻害するものであることに注意してください。</dd>
+ <dt><code>"current-password"</code></dt>
+ <dd>ブラウザー、あるいはパスワードマネージャがサイトのための現在のパスワードを入力することを許可します。この値はブラウザー、あるいはパスワードマネージャに、そのサイトの既知のパスワードを自動的に入力させ、新しいパスワードを提案するものではないもので、<code>"on"</code> よりも多くの情報を提供します。</dd>
+ <dt><code>"new-password"</code></dt>
+ <dd>ブラウザー、あるいはパスワードマネージャが、そのサイトの新しいパスワードを自動的に入力することを許可します。これは「パスワードの変更」や「新規ユーザー」フォームの、ユーザーに新しいパスワードを求める入力欄で使われます。新しいパスワードは、パスワードマネージャによって、複数の方法で生成される場合があります。単に新しく提示されるパスワードで埋めるかもしれませんし、あるいは新しいパスワードを生成するインターフェイスを、ユーザーに見せるかもしれません。</dd>
+</dl>
+
+<div id="Autocomplete_sample1">
+<pre class="brush: html notranslate">&lt;label for="userPassword"&gt;Password:&lt;/label&gt;
+&lt;input id="userPassword" type="password" autocomplete="current-password"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Autocomplete_sample1", 600, 40)}}</p>
+
+<h3 id="Making_the_password_mandatory" name="Making_the_password_mandatory">パスワードを必須にする</h3>
+
+<p>ユーザーのブラウザーに対し、フォームの送信前に、パスワード欄が妥当な値を持っていなければならないことを伝えるためには、ただ {{htmlattrxref("required", "input")}} 論理属性を指定するだけです。</p>
+
+<pre class="brush: html notranslate">&lt;label for="userPassword"&gt;Password: &lt;/label&gt;
+&lt;input id="userPassword" type="password" required&gt;
+&lt;input type="submit" value="Submit"&gt;</pre>
+
+<p>{{EmbedLiveSample("Making_the_password_mandatory", 600, 40)}}</p>
+
+<h3 id="Specifying_an_input_mode" name="Specifying_an_input_mode">入力モードを指定する</h3>
+
+<p>推奨する、または必須となるパスワードの構文ルールが、標準キーボードよりも、代替となるテキスト入力インターフェースから恩恵を受ける場合、特定のものを要求するために {{htmlattrxref("inputmode", "input")}} 属性を使用することができます。この最も明快な用途は、 PIN のようにパスワードが数字で構成されていることを必要とする場合です。例えば、仮想キーボードを持つモバイル端末では、パスワードの入力をより簡単にするため、フルキーボードの代わりに、数字のキーパッドレイアウトに切り替えることを選択するかもしれません。 PIN が１回限りの使用であれば、 {{htmlattrxref("autocomplete", "input")}} 属性を <code>off</code> または <code>one-time-code</code> のどちらかに設定してサジェストが保存されないようにしてください。</p>
+
+<pre class="brush: html notranslate">&lt;label for="pin"&gt;PIN: &lt;/label&gt;
+&lt;input id="pin" type="password" inputmode="numeric"&gt;</pre>
+
+<p>{{EmbedLiveSample("Specifying_an_input_mode", 600, 40)}}</p>
+
+<h3 id="Setting_length_requirements" name="Setting_length_requirements">長さの要件を設定する</h3>
+
+<p>普通、{{htmlattrxref("minlength", "input")}} 属性や {{htmlattrxref("maxlength", "input")}} 属性を使って、許容する最小の長さと最大の長さをパスワードに適用することができます。この例では、直前の例を拡張して、ユーザーの PIN が 4 〜 8文字でなければならないことを指定しています。{{htmlattrxref("size", "input")}} 属性は、パスワード入力コントロールが 8 文字分の幅であることを保証するために使用されています。</p>
+
+<pre class="brush: html notranslate">&lt;label for="pin"&gt;PIN:&lt;/label&gt;
+&lt;input id="pin" type="password" inputmode="numeric" minlength="4"
+       maxlength="8" size="8"&gt;</pre>
+
+<p>{{EmbedLiveSample("Setting_length_requirements", 600, 40)}}</p>
+
+<h3 id="Selecting_text" name="Selecting_text">テキストを選択する</h3>
+
+<p>他のテキスト入力コントロールのように、 {{domxref("HTMLInputElement.select", "select()")}} メソッドを使って、パスワード欄のすべてのテキストを選択することができます。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;label for="userPassword"&gt;Password: &lt;/label&gt;
+&lt;input id="userPassword" type="password" size="12"&gt;
+&lt;button id="selectAll"&gt;Select All&lt;/button&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">document.getElementById("selectAll").onclick = function() {
+  document.getElementById("userPassword").select();
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Selecting_text", 600, 40)}}</p>
+
+<p>また、{{domxref("HTMLInputElement.selectionStart", "selectionStart")}} や {{domxref("HTMLInputElement.selectionEnd", "selectionEnd")}} を使って、コントロールの文字がどの範囲で選択されているかを取得または設定することができ、{{domxref("HTMLInputElement.selectionDirection", "selectionDirection")}} を使って、どの方向に選択が発生したのか（あるいは広げようとしているのか。プラットフォームに依存します。詳細は各ドキュメントを参照してください）を知ることができます。しかしながら、与えられるテキストは隠されており、その有用性は幾分か制限されています。</p>
+
+<h2 id="Validation" name="Validation">検証</h2>
+
+<p>もしアプリケーションが文字セットの制限を有している場合、あるいは入力されたパスワードの実際の内容について、他の何らかの要件がある場合には、{{htmlattrxref("pattern", "input")}} 属性を使って、パスワードがそれらの要件に合致しているか自動的に確認するための正規表現を設定することができます。</p>
+
+<p>この例では、4 〜 8 文字の 16 進数の数字のみが妥当です。</p>
+
+<div id="Validation_sample1">
+<pre class="brush: html notranslate">&lt;label for="hexId"&gt;Hex ID: &lt;/label&gt;
+&lt;input id="hexId" type="password" pattern="[0-9a-fA-F]{4,8}"
+       title="Enter an ID consisting of 4-8 hexadecimal digits"
+       autocomplete="new-password"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Validation_sample1", 600, 40)}}</p>
+
+<dl>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>
+ <p>この論理属性は、そのパスワード欄がやり取りに利用できないことを示します。また、無効な入力欄の値は、フォームとともに送信されません。</p>
+ </dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Requesting_a_Social_Security_number" name="Requesting_a_Social_Security_number">社会保障番号を要求する</h3>
+
+<p>この例では、<a href="https://ja.wikipedia.org/wiki/%E7%A4%BE%E4%BC%9A%E4%BF%9D%E9%9A%9C%E7%95%AA%E5%8F%B7#%E6%AD%A3%E5%BD%93%E3%81%AA%E7%95%AA%E5%8F%B7">妥当なアメリカ合衆国の社会保障番号</a>の形式に合致する入力のみが受け付けられます。これらの数字はアメリカ合衆国において、税や個人の識別を目的として使われており、その形式は "123-45-6789" です。各種、それぞれのグループ内でどのような値が許可されているかについてのルールも存在しています。</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;label for="ssn"&gt;SSN:&lt;/label&gt;
+&lt;input type="password" id="ssn" inputmode="numeric" minlength="9" maxlength="12"
+    pattern="(?!000)([0-6]\d{2}|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d{4}"
+    required autocomplete="off"&gt;
+&lt;br&gt;
+&lt;label for="ssn"&gt;Value:&lt;/label&gt;
+&lt;span id="current"&gt;&lt;/span&gt;</pre>
+
+<p>ここでは {{htmlattrxref("pattern", "input")}} を使って、入力される値を、正当な社会保障番号を示す文字列に制限しています。明らかに、この正規表現は、妥当な SSN であることを保証していません（社会保障局のデータベースにアクセスしているわけではないので）が、その番号が SSN になり得るものであることは保証しています。一般に、値が妥当になり得ないことを避けています。加えて、3 つの数字のグループがスペース、ダッシュ ("-") で区切る、あるいは区切らないことを許容しています。</p>
+
+<p>{{htmlattrxref("inputmode", "input")}} が  <code>"numeric"</code> にセットされ、より入力しやすくするために、仮想キーボードを持つ端末が数字キーパッドレイアウトに切り替えることを支援しています。{{htmlattrxref("minlength", "input")}} と {{htmlattrxref("maxlength", "input")}} がそれぞれ 9 と 12 にセットされ、値が 9 〜 12 文字 (前者はグループ間の区切り文字無し、後者は有り) であることを要件としています。 {{htmlattrxref("required", "input")}} 属性は、このコントロールが値を持っていなければならないことを示すために使われています。最後に、 {{htmlattrxref("autocomplete", "input")}} が <code>"off"</code> にセットされており、これはまったくパスワードではないので、パスワードマネージャーが値をセットしようとすることを回避しています。</p>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<p>これは実にシンプルなコードで、入力された SSN を見られるように、画面に表示するためのものです。これは明らかに、パスワード欄の目的を損ねるものですが、<code>pattern</code> を試すには役立ちます。</p>
+
+<pre class="brush: js notranslate">var ssn = document.getElementById("ssn");
+var current = document.getElementById("current");
+
+ssn.oninput = function(event) {
+  current.innerHTML = ssn.value;
+}</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample("Requesting_a_Social_Security_number", 600, 60)}}</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#password-state-(type=password)', '&lt;input type="password"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>初回定義</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#password-state-typepassword', '&lt;input type="password"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</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-password")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li>
+</ul>
diff --git a/files/ja/web/html/element/input/radio/index.html b/files/ja/web/html/element/input/radio/index.html
new file mode 100644
index 0000000000..820eb38d46
--- /dev/null
+++ b/files/ja/web/html/element/input/radio/index.html
@@ -0,0 +1,376 @@
+---
+title: <input type="radio">
+slug: Web/HTML/Element/input/radio
+tags:
+  - Choosing Options
+  - Element
+  - Form Options
+  - HTML
+  - HTML Input Types
+  - HTML forms
+  - HTML input
+  - Input
+  - Input Types
+  - Options
+  - Radio Buttons
+  - Radio Groups
+  - Reference
+  - form
+  - radio
+  - radio button
+translation_of: Web/HTML/Element/input/radio
+---
+<div>{{HTMLRef("Input_types")}}</div>
+
+<p><span class="seoSummary">{{htmlelement("input")}} 要素の <strong><code>radio</code></strong> 型は、一般に<strong>ラジオグループ</strong>、すなわち関連するオプションの組み合わせを示すラジオボタンの集まりです。</span>グループ内でラジオボタンは一つしか同時に選択することができません。ラジオボタンはふつう、小さな円で描かれ、選択されたら塗りつぶしや強調表示されます。</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-radio.html", "tabbed-standard")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a></div>
+
+<p><a href="https://github.com/mdn/interactive-examples">をクローンしてプルリクエストを送信してください。</a></p>
+
+
+
+<div id="Basic_example">
+<p><a href="https://github.com/mdn/interactive-examples">ラジオボタンと呼ばれるのは、以下のように外見や操作方法が古い型のラジオのプッシュボタンに似ているからです。</a></p>
+
+<p><a href="https://github.com/mdn/interactive-examples"><img alt="古い時代のラジオボタンの外観を示します。" src="https://mdn.mozillademos.org/files/15610/old-radio.jpg" style="height: 400px; width: 600px;" title="古い時代のラジオの写真"></a></p>
+</div>
+
+<div class="note">
+<p><a href="https://github.com/mdn/interactive-examples"><strong>注</strong>: </a><a href="/ja/docs/Web/HTML/Element/input/checkbox">チェックボックス</a>はラジオボタンに似ていますが、重要な違いがあります。ラジオボタンは一組の中で一つの値を選択するように設計されているのに対し、チェックボックスは個別に値をオンまたはオフに設定できます。複数のコントロールが存在するところでは、ラジオボタンは全体の中で一つを選択できますが、チェックボックスは複数の値を選択することができます。</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value", "値")}}</strong></td>
+   <td>ラジオボタンの値を表す {{domxref("DOMString")}}</td>
+  </tr>
+  <tr>
+   <td><strong>イベント</strong></td>
+   <td>{{event("change")}} および {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>対応している共通属性</strong></td>
+   <td><code>checked</code> および <code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>IDL 属性</strong></td>
+   <td><code>{{anch("checked")}}</code> および <code>{{anch("value")}}</code></td>
+  </tr>
+  <tr>
+   <td><strong>メソッド</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value" name="Value">値</h2>
+
+<p><code>value</code> 属性はラジオボタンの値を持つ {{domxref("DOMString")}} です。値は{{Glossary("user agent", "ユーザーエージェント")}}がユーザーに表示することはありません。代わりに、グループ内のどのラジオボタンが選択されているかを識別するために使用されます。</p>
+
+<h3 id="Defining_a_radio_group" name="Defining_a_radio_group">ラジオグループの定義</h3>
+
+<p>ラジオグループは、グループ内のそれぞれのラジオボタンに同じ {{htmlattrxref("name", "input")}} を設定することで定義します。ラジオグループが確立されると、グループ内のラジオボタンを選択すると、同じグループの現在選択されているラジオボタンが自動的に選択解除されます。</p>
+
+<p>ページ内には、固有の <code>name</code> を持っている限り、好きなだけの数のラジオグループを作成することができます。</p>
+
+<p>例えば、フォームでユーザーに希望する問い合わせ方法を尋ねる必要がある場合、3つのラジオボタンを作成し、それぞれの <code>name</code> プロパティに <code>contact</code> を設定しますが、1つは {{htmlattrxref("value", "input")}} を <code>email</code> に、1つは value を <code>phone</code> に、1つは value を <code>mail</code> に設定します。ユーザーは <code>value</code> または <code>name</code> を見ることはありません (表示させるコードを追加しない限り)。</p>
+
+<p>最終的な HTML はこのようになります。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;p&gt;希望する連絡方法を選択してください。&lt;/p&gt;
+  &lt;div&gt;
+    &lt;input type="radio" id="contactChoice1"
+     name="contact" value="email"&gt;
+    &lt;label for="contactChoice1"&gt;電子メール&lt;/label&gt;
+
+    &lt;input type="radio" id="contactChoice2"
+     name="contact" value="phone"&gt;
+    &lt;label for="contactChoice2"&gt;電話&lt;/label&gt;
+
+    &lt;input type="radio" id="contactChoice3"
+     name="contact" value="mail"&gt;
+    &lt;label for="contactChoice3"&gt;郵便&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button type="submit"&gt;送信&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>ここでは三つのラジオボタンがあり、それぞれの <code>name</code> が <code>contact</code> に設定されており、それぞれのラジオボタンを個別に識別するための固有の <code>value</code> を持っています。それぞれは固有の {{domxref("Element.id", "id")}} も持っており、 {{HTMLElement("label")}} 要素の {{htmlattrxref("for", "label")}} 属性でラジオボタンにラベルを結びつけるために使われます。</p>
+
+<p>この例をこちらで試すことができます。</p>
+
+<p>{{EmbedLiveSample('Defining_a_radio_group', 600, 130)}}</p>
+
+<h3 id="Data_representation_of_a_radio_group" name="Data_representation_of_a_radio_group">ラジオグループのデータ表現</h3>
+
+<p>ラジオボタンが選択された状態で上記のフォームが送信されると、フォームのデータには <code>contact=<var>value</var></code> の形の項目が含まれます。例えば、ユーザーが「電話」ラジオボタンをクリックしてからフォームを送信すると、フォームのデータには <code>contact=phone</code> という行が含まれます。</p>
+
+<p>HTML で <code>value</code> 属性を省略すると、送信されたフォームデータのそのグループには <code>on</code> の値が割り当てられます。この場合、ユーザーが「電話」をクリックしてフォームを送信したのに、結果のフォームデータが <code>contact=on</code> となるため有益ではありません。ですから、 <code>value</code> 属性を設定することを忘れないようにしてください。</p>
+
+<div class="note">
+<p><strong>注</strong>: フォームが送信されたときにラジオボタンが全く選択されていないと、ラジオグループが送信されたフォームにまったく含まれず、報告される値がなくなります。</p>
+</div>
+
+<p>実際には、フォームがグループ内のラジオボタンをまったく選択しない状態で送信するのを許可することは一般的ではないので、既定で一つを <code>checked</code> 状態を設定しておくことには意味があります。下記の{{anch("Selecting a radio button by default", "既定のラジオボタンの選択")}}を参照してください。</p>
+
+<p>例に若干のコードを加えて、このフォームで生成されるデータを確認できるようにしましょう。 HTML を変更して、フォームデータを出力するための {{HTMLElement("pre")}} を追加します。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;p&gt;希望する連絡方法を選択してください。&lt;/p&gt;
+  &lt;div&gt;
+    &lt;input type="radio" id="contactChoice1"
+           name="contact" value="email"&gt;
+    &lt;label for="contactChoice1"&gt;電子メール&lt;/label&gt;
+    &lt;input type="radio" id="contactChoice2"
+           name="contact" value="phone"&gt;
+    &lt;label for="contactChoice2"&gt;電話&lt;/label&gt;
+    &lt;input type="radio" id="contactChoice3"
+           name="contact" value="mail"&gt;
+    &lt;label for="contactChoice3"&gt;郵便&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button type="submit"&gt;送信&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
+&lt;pre id="log"&gt;
+&lt;/pre&gt;
+</pre>
+
+<p>それから、いくらかの <a href="/ja/docs/Web/JavaScript">JavaScript</a> を追加して、ユーザーが「送信」ボタンをクリックしたときに発生する {{domxref("HTMLFormElement/submit_event", "submit")}} イベントのイベントリスナーを設定します。</p>
+
+<pre class="brush: js notranslate">var form = document.querySelector("form");
+var log = document.querySelector("#log");
+
+form.addEventListener("submit", function(event) {
+  var data = new FormData(form);
+  var output = "";
+  for (const entry of data) {
+    output = output + entry[0] + "=" + entry[1] + "\r";
+  };
+  log.innerText = output;
+  event.preventDefault();
+}, false);</pre>
+
+<p>この例を試してみて、 <code>contact</code> グループに二つ以上の結果が出ないことを確認してください。</p>
+
+<p>{{EmbedLiveSample("Data_representation_of_a_radio_group", 600, 130)}}</p>
+
+<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2>
+
+<p>すべての {{HTMLElement("input")}} 型で共通する属性に加え、 <code>radio</code> 型の入力は次の属性にも対応しています。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">属性</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("checked")}}</code></td>
+   <td>論理属性で、このラジオボタンがグループ内で項目が現在選択されているかどうかを示す</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("value")}}</code></td>
+   <td>ラジオボタンがオンになっている場合に、フォームを投稿したときラジオボタンの値として使用される文字列</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefchecked">{{htmlattrdef("checked")}}</h3>
+
+<p>論理属性で、もしあれば、このラジオボタンがラジオグループ内で現在選択されているものであることを示します。</p>
+
+<p>他のブラウザーとは異なり、 Firefox は既定でページ読み込みを通して <code>&lt;input&gt;</code> の<a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">チェック状態を維持します</a>。この機能を制御するには {{htmlattrxref("autocomplete","input")}} 属性を使用してください。</p>
+
+<h3 id="htmlattrdefvalue">{{htmlattrdef("value")}}</h3>
+
+<p><code>value</code> はすべての {{HTMLElement("input")}} で共通のものの一つです。しかし、 <code>radio</code> 型の入力欄では特別な目的になります。フォームが送信されるとき、現在チェックされているラジオボタンのみがサーバーに送信され、報告される値は <code>value</code> 属性の値になります。 <code>value</code> が指定されていない場合は、既定で <code>on</code> という文字列になります。これは前述の{{anch("Value", "値")}}の節で説明しています。</p>
+
+<h2 id="Using_radio_inputs" name="Using_radio_inputs">ラジオボタンの使用</h2>
+
+<p>上記で最も基本的なラジオボタンの使用方法を見てきました。他に必要になりそうなラジオボタンに関するよく使われる機能や技術を見てみましょう。</p>
+
+<h3 id="Selecting_a_radio_button_by_default" name="Selecting_a_radio_button_by_default">既定のラジオボタンの選択</h3>
+
+<p>ラジオボタンを既定で選択状態にするには、単に <code>checked</code> 属性を加えるだけです。前回の例を更新するとこのようになります。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;p&gt;希望する連絡方法を選択してください。&lt;/p&gt;
+  &lt;div&gt;
+    &lt;input type="radio" id="contactChoice1"
+     name="contact" value="email" checked&gt;
+    &lt;label for="contactChoice1"&gt;電子メール&lt;/label&gt;
+
+    &lt;input type="radio" id="contactChoice2"
+     name="contact" value="phone"&gt;
+    &lt;label for="contactChoice2"&gt;電話&lt;/label&gt;
+
+    &lt;input type="radio" id="contactChoice3"
+     name="contact" value="mail"&gt;
+    &lt;label for="contactChoice3"&gt;郵便&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button type="submit"&gt;送信&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Selecting_a_radio_button_by_default', 600, 130)}}</p>
+
+<p>In this case, the first radio button is now selected by default.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you put the <code>checked</code> attribute on more than one radio button, later instances will override earlier ones; that is, the last <code>checked</code> radio button will be the one that is selected. This is because only one radio button in a group can ever be selected at once, and the user agent automatically deselects others each time a new one is marked as checked.</p>
+</div>
+
+<h3 id="Providing_a_bigger_hit_area_for_your_radio_buttons" name="Providing_a_bigger_hit_area_for_your_radio_buttons">ラジオボタンのヒット領域を大きくする</h3>
+
+<p>In the above examples, you may have noticed that you can select a radio button by clicking on its associated {{htmlelement("label")}} element, as well as on the radio button itself. This is a really useful feature of HTML form labels that makes it easier for users to click the option they want, especially on small-screen devices like smartphones.</p>
+
+<p>Beyond accessibility, this is another good reason to properly set up <code>&lt;label&gt;</code> elements on your forms.</p>
+
+<h2 id="Validation" name="Validation">検証</h2>
+
+<p>Radio buttons don't participate in constraint validation; they have no real value to be constrained.</p>
+
+<h2 id="Styling_radio_inputs" name="Styling_radio_inputs">ラジオボタンの整形</h2>
+
+<p>The following example shows a slightly more thorough version of the example we've seen throughout the article, with some additional styling, and with better semantics established through use of specialized elements. The HTML looks like this:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;希望する連絡方法を選択してください。&lt;/legend&gt;
+    &lt;div&gt;
+      &lt;input type="radio" id="contactChoice1"
+       name="contact" value="email" checked&gt;
+      &lt;label for="contactChoice1"&gt;電子メール&lt;/label&gt;
+
+      &lt;input type="radio" id="contactChoice2"
+       name="contact" value="phone"&gt;
+      &lt;label for="contactChoice2"&gt;電話&lt;/label&gt;
+
+      &lt;input type="radio" id="contactChoice3"
+       name="contact" value="mail"&gt;
+      &lt;label for="contactChoice3"&gt;郵便&lt;/label&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;button type="submit"&gt;送信&lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;</pre>
+
+<p>There's not much new to note here except for the addition of {{htmlelement("fieldset")}} and {{htmlelement("legend")}} elements, which help to group the functionality nicely and in a semantic way.</p>
+
+<p>The CSS involved is a bit more significant:</p>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+div:first-of-type {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 5px;
+}
+
+label {
+  margin-right: 15px;
+  line-height: 32px;
+}
+
+input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+
+  border: 2px solid #999;
+  transition: 0.2s all linear;
+  margin-right: 5px;
+
+  position: relative;
+  top: 4px;
+}
+
+input:checked {
+  border: 6px solid black;
+}
+
+button,
+legend {
+  color: white;
+  background-color: black;
+  padding: 5px 10px;
+  border-radius: 0;
+  border: 0;
+  font-size: 14px;
+}
+
+button:hover,
+button:focus {
+  color: #999;
+}
+
+button:active {
+  background-color: white;
+  color: black;
+  outline: 1px solid black;
+}</pre>
+
+<p>Most notable here is the use of the {{cssxref("-moz-appearance")}} property (with prefixes needed to support some browsers). By default, radio buttons (and <a href="/ja/docs/Web/HTML/Element/input/checkbox">checkboxes</a>) are styled with the operating system's native styles for those controls. By specifying <code>appearance: none</code>, you can remove the native styling altogether, and create your own styles for them. Here we've used a {{cssxref("border")}} along with {{cssxref("border-radius")}} and a {{cssxref("transition")}} to create a nice animating radio selection. Notice also how the {{cssxref(":checked")}} pseudo-class is used to specify the styles for the radio button's appearance when selected.</p>
+
+<div class="note">
+<p><strong>Compatibility note</strong>: If you wish to use the {{cssxref("appearance")}} property, you should test it very carefully. Although it is supported in most modern browsers, its implementation varies widely. In older browsers, even the keyword <code>none</code> does not have the same effect across different browsers, and some do not support it at all. The differences are smaller in the newest browsers.</p>
+</div>
+
+<p>{{EmbedLiveSample('Styling_radio_inputs', 600, 120)}}</p>
+
+<p>Notice that when clicking on a radio button, there's a nice, smooth fade out/in effect as the two buttons change state. In addition, the style and coloring of the legend and submit button are customized to have strong contrast. This might not be a look you'd want in a real web application, but it definitely shows off the possibilities.</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#radio-button-state-(type=radio)', '&lt;input type="radio"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#radio-button-state-(type=radio)', '&lt;input type="radio"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("html.elements.input.input-radio")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{HTMLElement("input")}} およびそれが実装している {{domxref("HTMLInputElement")}} インターフェイス</li>
+ <li>{{domxref("RadioNodeList")}}: ラジオボタンのリストを表現するインターフェイス</li>
+ <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li>
+</ul>
diff --git a/files/ja/web/html/element/input/range/index.html b/files/ja/web/html/element/input/range/index.html
new file mode 100644
index 0000000000..41888581fb
--- /dev/null
+++ b/files/ja/web/html/element/input/range/index.html
@@ -0,0 +1,525 @@
+---
+title: <input type="range">
+slug: Web/HTML/Element/input/range
+tags:
+  - Element
+  - Forms
+  - HTML
+  - HTML forms
+  - HTML input tag
+  - HTML フォーム
+  - Input
+  - Range
+  - Reference
+  - Web
+  - slider
+  - スライダー
+  - フォーム
+  - 要素
+translation_of: Web/HTML/Element/input/range
+---
+<div>{{HTMLRef("Input_types")}}</div>
+
+<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>range</code></strong> 型は、ユーザーに一定の値より小さくなく、別な一定の値より大きくない数値を指定させるために使用します。しかし、厳密な値は重要であるとはされません。これは通常、 {{HTMLElement('input/number', 'number')}} 入力型のようなテキスト入力ボックスではなく、スライダーやダイアルコントロールを用いて表現されます。</span>この種のウィジェットは厳密なものではないので、コントロールの値が厳密なものではない限り、通常は使用するべきではありません。</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>ユーザーのブラウザーが <code>range</code> 型に対応していない場合は、 <code>{{HTMLElement('input/text', 'text')}}</code> 入力で代替されて扱われます。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value", "値")}}</strong></td>
+   <td>選択された数値を表す文字列を含む {{domxref("DOMString")}}。 {{jsxref("Number")}} として値を取得するには {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} を使用する。</td>
+  </tr>
+  <tr>
+   <td><strong>イベント</strong></td>
+   <td>{{event("change")}} および {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>対応している共通属性</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("max", "input")}}, {{htmlattrxref("min", "input")}}, {{htmlattrxref("step", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL 属性</strong></td>
+   <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code></td>
+  </tr>
+  <tr>
+   <td><strong>メソッド</strong></td>
+   <td>{{domxref("HTMLInputElement.stepDown", "stepDown()")}} および {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Validation" name="Validation">検証</h3>
+
+<p>利用可能なパターン検証はありません。しかし、以下の形で自動検証が行われます。</p>
+
+<ul>
+ <li>{{htmlattrxref("value", "input")}} が何かに設定されており、妥当な浮動小数点数に変換できない場合、入力が不正な入力になるので検証に失敗します。</li>
+ <li>値は {{htmlattrxref("min", "input")}} より小さくはなりません。この既定値は 0 です。</li>
+ <li>値は {{htmlattrxref("max", "input")}} より大きくはなりません。この既定値は 100 です。</li>
+ <li>値は {{htmlattrxref("step", "input")}} の倍数になります。この既定値は 1 です。</li>
+</ul>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p>{{htmlattrxref("value", "input")}} 属性は、選択された数値を表す文字列が入った {{domxref("DOMString")}} です。値は空文字列 (<code>""</code>) にはなりません。既定値は指定された最大値と最小値の中間値で、ただし最大値が最小値を下回っている場合は、既定値は <code>min</code> 属性の値に設定されます。既定値を特定するアルゴリズムは次の通りです。</p>
+
+<pre class="brush: js notranslate">defaultValue = (rangeElem.max &lt; rangeElem.min) ? rangeElem.min
+               : rangeElem.min + (rangeElem.max - rangeElem.min)/2;</pre>
+
+<p>最小値よりも小さな値を設定しようとすると、最小値に設定されます。同様に、最大値よりも大きな値を設定しようとすると、最大値に設定される結果になります。</p>
+
+<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2>
+
+<p>すべての {{HTMLElement("input")}} 型で共通する属性に加え、 <code>range</code> 型の入力欄は次の属性にも対応しています。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">属性</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("list")}}</code></td>
+   <td>オプションで自動補完の定義済みの選択肢を含む &lt;datalist&gt; 要素の id</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("max")}}</code></td>
+   <td>許可されている最大値</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("min")}}</code></td>
+   <td>許可されている最小値</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("step")}}</code></td>
+   <td>ユーザーインターフェイスと検証の両方で使用される刻み値</td>
+  </tr>
+ </tbody>
+</table>
+
+<p id="htmlattrdeflist">{{page("/ja/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p>
+
+<p>See the <a href="#A_range_control_with_hash_marks">range control with hash marks</a> below for an example of how the options on a range are denoted in supported browsers</p>
+
+<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3>
+
+<p>許可されている値の範囲の最大値です。要素に入力された {{htmlattrxref("value", "input")}} がこれを超えた場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code> 属性の値が数値でない場合、要素は最大値を持ちません。</p>
+
+<p>この値は <code><a href="/ja/docs/Web/HTML/Attributes/min">min</a></code> 属性の値より大きいか、等しくしなければなりません。 <a href="/ja/docs/Web/HTML/Attributes/max">HTML の <code>max</code> 属性</a>を参照してください。</p>
+
+<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3>
+
+<p>許可されている値の範囲の最小値です。要素の {{htmlattrxref("value", "input")}} がこれより小さい場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code>min</code> 属性の値が数値でない場合、要素は最小値を持ちません。</p>
+
+<p>この値は <code><a href="/ja/docs/Web/HTML/Attributes/max">min</a></code> 属性の値より小さいか、等しくしなければなりません。 <a href="/ja/docs/Web/HTML/Attributes/min">HTML の <code>min</code> 属性</a>を参照してください。</p>
+
+<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/number", "step-include")}}</p>
+
+<p><code>range</code> 入力欄の既定の刻み値は1であり、刻みの基準値が整数ではない場合を<em>除いて</em>、整数の入力のみを許可します。例えば、 <code>min</code> に -10 を、 <code>value</code> に 1.5 を設定した場合、 <code>step</code> が 1 の場合は正の方向に 1.5, 2.5, 3.5,... など、負の方向に -0.5, -1.5, -2.5,... などのみが許可されます。 <a href="/ja/docs/Web/HTML/Attributes/step">HTML の <code>step</code> 属性</a>を参照してください。</p>
+
+<h3 id="Non_Standard_Attributes" name="Non_Standard_Attributes">標準外の属性</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">属性</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("orient")}}</code></td>
+   <td>範囲のスライダーの向きを設定します。 <strong>Firefox のみ。</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>{{htmlattrdef("orient")}} {{non-standard_inline}}</dt>
+ <dd id="orient-include">CSS の標準外の -moz-orient non-standard プロパティは、 {{htmlelement('progress')}} および {{htmlelement('meter')}} 要素に影響し、範囲スライダーの向きを定義する <code>orient</code> 属性を定義します。値は <code>horizontal</code> が範囲を水平方向に描画することを、 <code>vertical</code> が範囲を垂直に描画することを意味します。</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p>注: 以下の input 型の属性のうち、 <code>accept</code>, <code>alt</code>, <code>checked</code>, <code>dirname</code>, <code>formaction</code>, <code>formenctype</code>, <code>formmethod</code>, <code>formnovalidate</code>, <code>formtarget</code>, <code>height</code>, <code>maxlength</code>, <code>minlength</code>, <code>multiple</code>, <code>pattern</code>, <code>placeholder</code>, <code>readonly</code>, <code>required</code>, <code>size</code>, <code>src</code>, <code>width</code> は範囲入力には適用されません。これらの属性が含まれた場合は無視されます。</p>
+</div>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p><code>number</code> 型がユーザーに数値を入力させ、任意で値を最小値と最大値の間に強制することができるものですので、具体的な値を入力する必要があります。 <code>range</code> 入力型は、どの値が選択されているかをユーザーが気にする、または知る必要がない場合に、ユーザーに値を尋ねることができます。</p>
+
+<p>range 入力欄がよく使用される場合の例をいくつか示します。</p>
+
+<ul>
+ <li>ボリュームやバランス、フィルター制御のようなオーディオの制御。</li>
+ <li>カラーチャネル、透過度、明るさなどの色の構成の制御。</li>
+ <li>難易度、視点距離、ワールドサイズなどのゲームの構成の制御。</li>
+ <li>パスワードマネージャーが生成するパスワードの長さ。</li>
+</ul>
+
+<p>原則として、ユーザーが実際の数値自体よりも最大値と最小値の間のパーセント値に関心がある場合は、 range 入力が最有力候補になります。例えば、ホームステレオの音量制御では、ユーザーは通常「音量を0.5に設定する」ではなく、「音量を最大値の半分くらいに設定する」と考えます。</p>
+
+<h3 id="Specifying_the_minimum_and_maximum" name="Specifying_the_minimum_and_maximum">最小値と最大値の指定</h3>
+
+<p>既定では、最小値は0で最大値は100です。これが望むものでないのであれば、 {{htmlattrxref("min", "input")}} や {{htmlattrxref("max", "input")}} 属性の値を変更することで、簡単に範囲を変更することができます。浮動小数点値にすることもできます。</p>
+
+<p>例えば、ユーザーに-10から10までの値を尋ねるのであれば、次のようにすることができます。</p>
+
+<pre class="brush: html notranslate">&lt;input type="range" min="-10" max="10"&gt;</pre>
+
+<p>{{EmbedLiveSample("Specifying_the_minimum_and_maximum", 600, 40)}}</p>
+
+<h3 id="Setting_the_values_granularity" name="Setting_the_values_granularity">値の精度の設定</h3>
+
+<p>By default, the granularity, is 1, meaning that the value is always an integer. You can change the {{htmlattrxref("step")}} attribute to control the granularity. For example, If you need a value between 5 and 10, accurate to two decimal places, you should set the value of <code>step</code> to 0.01:</p>
+
+<div id="Granularity_sample1">
+<pre class="brush: html notranslate">&lt;input type="range" min="5" max="10" step="0.01"&gt;</pre>
+
+<p>{{EmbedLiveSample("Granularity_sample1", 600, 40)}}</p>
+</div>
+
+<p>If you want to accept any value regardless of how many decimal places it extends to, you can specify a value of <code>any</code> for the {{htmlattrxref("step", "input")}} attribute:</p>
+
+<div id="Granularity_sample2">
+<pre class="brush: html notranslate">&lt;input type="range" min="0" max="3.14" step="any"&gt;</pre>
+
+<p>{{EmbedLiveSample("Granularity_sample2", 600, 40)}}</p>
+
+<p>This example lets the user select any value between 0 and π without any restriction on the fractional part of the value selected.</p>
+</div>
+
+<h3 id="Adding_hash_marks_and_labels" name="Adding_hash_marks_and_labels">ハッシュマークとラベルの追加</h3>
+
+<p>The HTML specification gives browsers some flexibility on how to present the range control. Nowhere is this flexibility more apparent than in the area of hash marks and, to a lesser degree, labels. The specification describes how to add custom points to the range control using the {{htmlattrxref("list", "input")}} attribute and a {{HTMLElement("datalist")}} element, but does not have any requirements or even recommendations for standardized hash or tick marks along the length of the control.</p>
+
+<h4 id="Range_control_mockups" name="Range_control_mockups">範囲コントロールのモックアップ</h4>
+
+<p>Since browsers have this flexibility, and to date none support all of the features HTML defines for range controls, here are some mockups to show you what you might get on macOS in a browser which supports them.</p>
+
+<h5 id="An_unadorned_range_control" name="An_unadorned_range_control">簡素な範囲コントロール</h5>
+
+<p>This is what you get if you don't specify a {{htmlattrxref("list", "input")}} attribute, or if the browser doesn't support it.</p>
+
+<table class="fullwidth standard-table">
+ <tbody>
+  <tr>
+   <th>HTML</th>
+   <th>Examples</th>
+  </tr>
+  <tr>
+   <td rowspan="4">
+    <pre class="brush: html notranslate">
+&lt;input type="range"&gt;</pre>
+   </td>
+   <th>Screenshot</th>
+  </tr>
+  <tr>
+   <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14989/macslider-plain.png" style="height: 28px; width: 184px;"></td>
+  </tr>
+  <tr>
+   <th>Live</th>
+  </tr>
+  <tr>
+   <td>{{EmbedLiveSample("An_unadorned_range_control",200,55,"","", "nobutton")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h5 id="A_range_control_with_hash_marks" name="A_range_control_with_hash_marks">ハッシュマーク付きの範囲コントロール</h5>
+
+<p>This range control is using a <code>list</code> attribute specifying the ID of a {{HTMLElement("datalist")}} which defines a series of hash marks on the control. There are eleven of them, so that there's one at 0% as well as at each 10% mark. Each point is represented using an {{HTMLElement("option")}} element with its {{htmlattrxref("value", "option")}} set to the range's value at which a mark should be drawn.</p>
+
+<table class="fullwidth standard-table">
+ <tbody>
+  <tr>
+   <th>HTML</th>
+   <th>Examples</th>
+  </tr>
+  <tr>
+   <td rowspan="4">
+    <pre class="brush: html notranslate">
+&lt;input type="range" list="tickmarks"&gt;
+
+&lt;datalist id="tickmarks"&gt;
+  &lt;option value="0"&gt;&lt;/option&gt;
+  &lt;option value="10"&gt;&lt;/option&gt;
+  &lt;option value="20"&gt;&lt;/option&gt;
+  &lt;option value="30"&gt;&lt;/option&gt;
+  &lt;option value="40"&gt;&lt;/option&gt;
+  &lt;option value="50"&gt;&lt;/option&gt;
+  &lt;option value="60"&gt;&lt;/option&gt;
+  &lt;option value="70"&gt;&lt;/option&gt;
+  &lt;option value="80"&gt;&lt;/option&gt;
+  &lt;option value="90"&gt;&lt;/option&gt;
+  &lt;option value="100"&gt;&lt;/option&gt;
+&lt;/datalist&gt;
+</pre>
+   </td>
+   <th>Screenshot</th>
+  </tr>
+  <tr>
+   <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14991/macslider-ticks.png" style="height: 28px; width: 184px;"></td>
+  </tr>
+  <tr>
+   <th>Live</th>
+  </tr>
+  <tr>
+   <td>{{EmbedLiveSample("A_range_control_with_hash_marks_and_labels",200,55,"","", "nobutton")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h5 id="A_range_control_with_hash_marks_and_labels" name="A_range_control_with_hash_marks_and_labels">ハッシュマークとラベル付きの範囲コントロール</h5>
+
+<p>You can add labels to your range control by adding the {{htmlattrxref("label", "option")}} attribute to the {{HTMLElement("option")}} elements corresponding to the tick marks you wish to have labels for.</p>
+
+<table class="fullwidth standard-table">
+ <tbody>
+  <tr>
+   <th>HTML</th>
+   <th>Examples</th>
+  </tr>
+  <tr>
+   <td rowspan="4">
+    <pre class="brush: html notranslate">
+&lt;input type="range" list="tickmarks"&gt;
+
+&lt;datalist id="tickmarks"&gt;
+  &lt;option value="0" label="0%"&gt;&lt;/option&gt;
+  &lt;option value="10"&gt;&lt;/option&gt;
+  &lt;option value="20"&gt;&lt;/option&gt;
+  &lt;option value="30"&gt;&lt;/option&gt;
+  &lt;option value="40"&gt;&lt;/option&gt;
+  &lt;option value="50" label="50%"&gt;&lt;/option&gt;
+  &lt;option value="60"&gt;&lt;/option&gt;
+  &lt;option value="70"&gt;&lt;/option&gt;
+  &lt;option value="80"&gt;&lt;/option&gt;
+  &lt;option value="90"&gt;&lt;/option&gt;
+  &lt;option value="100" label="100%"&gt;&lt;/option&gt;
+&lt;/datalist&gt;
+</pre>
+   </td>
+   <th>Screenshot</th>
+  </tr>
+  <tr>
+   <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14993/macslider-labels.png" style="height: 44px; width: 184px;"></td>
+  </tr>
+  <tr>
+   <th>Live</th>
+  </tr>
+  <tr>
+   <td>{{EmbedLiveSample("A_range_control_with_hash_marks_and_labels",200,55,"","", "nobutton")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: Currently, no browser fully supports these features. Firefox doesn't support hash marks and labels at all, for example, while Chrome supports hash marks but doesn't support labels. Version 66 (66.0.3359.181) of Chrome supports labels but the {{htmlelement("datalist")}} tag has to be styled with CSS as its {{cssxref("display")}} property is set to <code>none</code> by default, hiding the labels.</p>
+</div>
+
+<h3 id="Change_the_orientation" name="Change_the_orientation">方向の変更</h3>
+
+<div class="xhidden">
+<p>By default, if a browser renders a range input as a slider, it will render it so that the knob slides left and right. When supported, we will be able to make the range vertical, to slide up and down with CSS by declaring a height value greater than the width value.<strong> </strong>This is not actually implemented yet by any of the major browsers. (See Firefox {{bug(981916)}}, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">Chrome bug 341071</a>). It also, perhaps, may still be <a href="https://github.com/whatwg/html/issues/4177">under discussion</a>.</p>
+
+<p>In the meantime, we can make the range vertical by rotating it using using CSS transforms, or, by targeting each browser engine with their own method, which includes setting the {{cssxref('appearance')}} to <code>slider-vertical</code>, by using a non-standard <code>orient</code> attribute in Firefox, or by changing the text direction for Internet Explorer and Edge.</p>
+
+<p>Consider this range control:</p>
+
+<div id="Orientation_sample1">
+<pre class="brush: html notranslate">&lt;input type="range" id="volume" min="0" max="11" value="7" step="1"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Orientation_sample1", 200, 200, "https://mdn.mozillademos.org/files/14983/Orientation_sample1.png")}}</p>
+
+<p>This control is horizontal (at least on most if not all major browers; others might vary).</p>
+
+<h3 id="Standards">Standards</h3>
+
+<p>According to the specification, making it vertical requires adding CSS to change the dimensions of the control so that it's taller than it is wide, like this:</p>
+
+<div id="Orientation_sample2">
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">#volume {
+  height: 150px;
+  width: 50px;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;input type="range" id="volume" min="0" max="11" value="7" step="1"&gt;</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Orientation_sample2", 200, 200, "https://mdn.mozillademos.org/files/14985/Orientation_sample2.png")}}</p>
+</div>
+</div>
+
+<p>Unfortunately, no major browsers currently support vertical range controls directly.</p>
+
+<h3 id="transform_rotate-90deg">transform: rotate(-90deg)</h3>
+
+<p>You can, however, create a vertical range control by drawing a horizontal range control on its side. The easiest way is to use CSS: by applying a {{cssxref("transform")}} to rotate the element, you can make it vertical. Let's take a look.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<p>The HTML needs to be updated to wrap the {{HTMLElement("input")}} in a {{HTMLElement("div")}} to let us correct the layout after the transform is performed (since transforms don't automatically affect the layout of the page):</p>
+
+<pre class="brush: html notranslate">&lt;div class="slider-wrapper"&gt;
+  &lt;input type="range" min="0" max="11" value="7" step="1"&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<p>Now we need some CSS. First is the CSS for the wrapper itself; this specifies the display mode and size we want so that the page lays out correctly; in essence, it's reserving an area of the page for the slider so that the rotated slider fits into the reserved space without making a mess of things.</p>
+
+<pre class="brush: css notranslate">.slider-wrapper {
+  display: inline-block;
+  width: 20px;
+  height: 150px;
+  padding: 0;
+}
+</pre>
+
+<p>Then comes the style information for the <code>&lt;input&gt;</code> element within the reserved space:</p>
+
+<pre class="brush: css notranslate">.slider-wrapper input {
+  width: 150px;
+  height: 20px;
+  margin: 0;
+  transform-origin: 75px 75px;
+  transform: rotate(-90deg);
+}</pre>
+
+<p>The size of the control is set to be 150 pixels long by 20 pixels tall. The margins are set to 0 and the {{cssxref("transform-origin")}} is shifted to the middle of the space the slider rotates through; since the slider is configured to be 150 pixels wide, it rotates through a box which is 150 pixels on each side. Offsetting the origin by 75px on each axis means we will rotate around the center of that space. Finally, we rotate counter-clockwise by 90°. The result: a range input which is rotated so the maximum value is at the top and the minimum value is at the bottom.</p>
+
+<p>{{EmbedLiveSample("transform_rotate-90deg", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}</p>
+
+<h3 id="appearance_property">appearance property</h3>
+
+<p>The {{cssxref('appearance')}} property has a non-standard value of <code>slider-vertical</code> that, well, makes sliders vertical.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<p>We use the same HTML as in the previous examples:</p>
+
+<pre class="brush: html notranslate">&lt;input type="range" min="0" max="11" value="7" step="1"&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<p>We target just the inputs with a type of range:</p>
+
+<pre class="brush: css notranslate">input[type="range"] {
+  -webkit-appearance: slider-vertical;
+}</pre>
+
+<p>{{EmbedLiveSample("appearance_property", 200, 200)}}</p>
+
+<h3 id="orient_attribute">orient attribute</h3>
+
+<p>In Firefox only, there is a non-standard <code>orient</code> property.</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<p>Use similar HTML as in the previous examples, we add the attribute with a value of <code>vertical</code>:</p>
+
+<pre class="brush: html notranslate">&lt;input type="range" min="0" max="11" value="7" step="1" orient="vertical"&gt;
+</pre>
+
+<p>{{EmbedLiveSample("orient_attribute", 200, 200)}}</p>
+
+<h3 id="writing-mode_bt-lr">writing-mode: bt-lr;</h3>
+
+<p>The {{cssxref('writing-mode')}} property should generally not be used to alter text direction for internationalization or localization purposes, but can be used for special effects. </p>
+
+<h4 id="HTML_5">HTML</h4>
+
+<p>We use the same HTML as in the previous examples:</p>
+
+<pre class="brush: html notranslate">&lt;input type="range" min="0" max="11" value="7" step="1"&gt;
+</pre>
+
+<h4 id="CSS_4">CSS</h4>
+
+<p>We target just the inputs with a type of range, changing the writing mode from the default to <code>bt-lr</code>, or bottom-to-top and left-to-right:</p>
+
+<pre class="brush: css notranslate">input[type="range"] {
+  writing-mode: bt-lr;
+}</pre>
+
+<p>{{EmbedLiveSample("writing-mode_bt-lr", 200, 200)}}</p>
+
+<h3 id="Putting_it_all_together">Putting it all together</h3>
+
+<p>As each of the above examples works in different browsers, you can put all of them in a single example to make it work cross browser:</p>
+
+<h4 id="HTML_6">HTML</h4>
+
+<p>We keep the <code>orient</code> attribute with a value of <code>vertical</code> for Firefox:</p>
+
+<pre class="brush: html notranslate">&lt;input type="range" min="0" max="11" value="7" step="1" orient="vertical"&gt;
+</pre>
+
+<h4 id="CSS_5">CSS</h4>
+
+<p>We target just the inputs with a type of range, changing the writing mode from the default to <code>bt-lr</code>, or bottom-to-top and left-to-right, for Edge and Internet Explorer, and add <code>-webkit-appearance: slider-vertical</code> for all -webkit-based browsers:</p>
+
+<pre class="brush: css notranslate">input[type="range"] {
+  writing-mode: bt-lr;
+  -webkit-appearance: slider-vertical;
+}</pre>
+
+<p>{{EmbedLiveSample("Putting_it_all_together", 200, 200)}}</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#range-state-(type=range)', '&lt;input type="range"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>初回定義</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#range-state-typerange', '&lt;input type="range"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</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-range")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/HTML/Forms">HTML フォーム</a></li>
+ <li>{{HTMLElement("input")}} およびそれに基づく {{domxref("HTMLInputElement")}} インターフェイス</li>
+ <li><code><a href="/ja/docs/Web/HTML/Element/input/number">&lt;input type="number"&gt;</a></code></li>
+ <li>{{domxref('validityState.rangeOverflow')}} および {{domxref('validityState.rangeUnderflow')}}</li>
+ <li><a href="/ja/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode">ConstantSourceNode による複数の引数の制御</a></li>
+ <li><a href="https://css-tricks.com/sliding-nightmare-understanding-range-input">Styling the range element</a></li>
+ <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li>
+</ul>
diff --git a/files/ja/web/html/element/input/reset/index.html b/files/ja/web/html/element/input/reset/index.html
new file mode 100644
index 0000000000..50f1991f43
--- /dev/null
+++ b/files/ja/web/html/element/input/reset/index.html
@@ -0,0 +1,177 @@
+---
+title: <input type="reset">
+slug: Web/HTML/Element/input/reset
+tags:
+  - Element
+  - Form Button
+  - Form input
+  - Forms
+  - HTML
+  - HTML forms
+  - Input
+  - Input Types
+  - Reference
+  - Reset Button
+  - reset
+translation_of: Web/HTML/Element/input/reset
+---
+<div>{{HTMLRef("Input_types")}}</div>
+
+<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>reset</code></strong> 型はボタンとして表示され、既定の {{domxref("Element/click_event", "click")}} イベントのハンドラーは、フォーム内の入力欄すべてを初期値にリセットします。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-reset.html", "tabbed-standard")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<div class="note">
+<p>通常、フォームにリセットボタンを配置するべきではありません。このようなボタンは便利なものではなく、間違ってボタンをクリックしてしまったユーザーをイライラさせる可能性が高くなります (<a href="/ja/docs/Web/HTML/Element/input/submit">送信ボタン</a>をクリックしようとしているときにクリックしてしまうことが多いです)。</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value", "値")}}</strong></td>
+   <td>ボタンのラベルとして使用する {{domxref("DOMString")}}</td>
+  </tr>
+  <tr>
+   <td><strong>イベント</strong></td>
+   <td>{{domxref("Element/click_event", "click")}}</td>
+  </tr>
+  <tr>
+   <td><strong>対応している共通属性</strong></td>
+   <td>{{htmlattrxref("type", "input")}} および {{htmlattrxref("value", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL 属性</strong></td>
+   <td><code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>メソッド</strong></td>
+   <td>なし</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value" name="Value">値</h2>
+
+<p><code>&lt;input type="reset"&gt;</code> 要素の {{htmlattrxref("value", "input")}} 属性は、ボタンのラベルとして表示される {{domxref("DOMString")}} を示します。 <code>reset</code> などのボタンは他の値を持ちません。</p>
+
+<div id="summary-example3">
+<pre class="brush: html notranslate">&lt;input type="reset" value="フォームをリセット"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p>
+
+<p><code>value</code> を指定しなかった場合は、既定のラベルが付いたボタンが表示されます (通常は「リセット」ですが、{{Glossary("user agent", "ユーザーエージェント")}}によって異なります)。</p>
+
+<div id="summary-example1">
+<pre class="brush: html notranslate">&lt;input type="reset"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p>
+
+<h2 id="Using_reset_buttons" name="Using_reset_buttons">リセットボタンの使用</h2>
+
+<p><code>&lt;input type="reset"&gt;</code> ボタンはフォームをリセットするために使用されます。独自のボタンを作成して JavaScript を使用してカスタマイズしたいのであれば、 <code><a href="/ja/docs/Web/HTML/Element/input/button">&lt;input type="button"&gt;</a></code> またはよりよい {{htmlelement("button")}} 要素を使用してください。</p>
+
+<h3 id="A_simple_reset_button" name="A_simple_reset_button">単純なリセットボタン</h3>
+
+<p>単純なリセットボタンを作成するところから始めましょう。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="example"&gt;Type in some sample text&lt;/label&gt;
+    &lt;input id="example" type="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="reset" value="フォームをリセット"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
+</pre>
+
+<p>次のように表示されます。</p>
+
+<p>{{EmbedLiveSample("A_simple_reset_button", 650, 100)}}</p>
+
+<p>テキストフィールドにいくらかテキストを入力してから、リセットボタンを押してみてください。</p>
+
+<h3 id="Adding_a_reset_keyboard_shortcut" name="Adding_a_reset_keyboard_shortcut">リセットのショートカットキーの追加</h3>
+
+<p>リセットボタンにショートカットキーを追加するには — あらゆる {{HTMLElement("input")}} で通用する方法としてと — グローバル属性の {{htmlattrxref("accesskey")}} を使用します。</p>
+
+<p>この例では、 <kbd>r</kbd> がアクセスキーとして指定されます (<kbd>r</kbd> はブラウザーや OS の組み合わせによる特定の修飾キーを押しながら押す必要があります {{htmlattrxref("accesskey")}} に有益なリストがあります)。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="example"&gt;Type in some sample text&lt;/label&gt;
+    &lt;input id="example" type="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="reset" value="Reset the form"
+     accesskey="r"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample("Adding_a_reset_keyboard_shortcut", 650, 100)}}</p>
+
+<p>上記の例の問題点は、アクセスキーが何であるかをユーザーが知る方法がないことです。これは特に、一般的には競合を避けるために修飾キーが標準的ではないために特に問題になります。サイトを構築する際には、サイトデザインの邪魔にならないような方法でこの情報を提供するようにしてください (例えば、サイトのアクセスキーについての情報を指す簡単にアクセスできるリンクを提供するなど)。ボタンにツールチップを追加する ({{htmlattrxref("title")}} 属性を使う) ことも役立ちますが、アクセシビリティのためには完全な解決策ではありません。</p>
+
+<h3 id="Disabling_and_enabling_a_reset_button" name="Disabling_and_enabling_a_reset_button">リセットボタンの無効化と有効化</h3>
+
+<p>リセットボタンを無効化するには、以下のようにグローバル属性の {{htmlattrxref("disabled")}} を指定するだけです。</p>
+
+<div id="disable-example1">
+<pre class="brush: html notranslate">&lt;input type="reset" value="Disabled" disabled&gt;</pre>
+</div>
+
+<p>実行時に <code>disabled</code> を <code>true</code> または <code>false</code> に設定することで、ボタンを有効化したり無効化したりすることができます。 JavaScript では、これは <code>btn.disabled = true</code> や <code>btn.disabled = false</code> のようになります。</p>
+
+<div class="note">
+<p><strong>注</strong>: ボタンの有効化や無効化についてのより詳しい情報は、 <code><a href="/ja/docs/Web/HTML/Element/input/button#Disabling_and_enabling_a_button">&lt;input type="button"&gt;</a></code> のページを参照してください。</p>
+</div>
+
+<h2 id="Validation" name="Validation">検証</h2>
+
+<p>ボタンは制約の検証には関係しません。制約を受ける実際の値を持っていません。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>上記に簡単な例を挙げました。リセットボタンについては、これ以上言うことはありません。</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#reset-button-state-(type=reset)', '&lt;input type="reset"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#reset-button-state-(type=reset)', '&lt;input type="reset"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</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-reset")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{HTMLElement("input")}} およびそれが実装している {{domxref("HTMLInputElement")}} インターフェイス</li>
+ <li><a href="/ja/docs/Learn/Forms/Basic_native_form_controls#Actual_buttons">フォームとボタン</a></li>
+ <li><a href="/ja/docs/Web/Accessibility/ARIA/forms">フォーム (アクセシビリティ)</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Forms">HTML フォーム</a></li>
+ <li>{{HTMLElement("button")}} 要素</li>
+ <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li>
+</ul>
diff --git a/files/ja/web/html/element/input/search/index.html b/files/ja/web/html/element/input/search/index.html
new file mode 100644
index 0000000000..c181272801
--- /dev/null
+++ b/files/ja/web/html/element/input/search/index.html
@@ -0,0 +1,475 @@
+---
+title: <input type="search">
+slug: Web/HTML/Element/input/search
+tags:
+  - Form input
+  - Forms
+  - HTML
+  - HTML forms
+  - Input Type
+  - Reference
+  - Search
+translation_of: Web/HTML/Element/input/search
+---
+<div>{{HTMLRef("Input_types")}}</div>
+
+<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <code><strong>search</strong></code> 型は、ユーザーが検索クエリを入力するために設計されたテキスト入力欄です。 <code><a href="/ja/docs/Web/HTML/Element/input/text">text</a></code> 入力欄と機能的には同じですが、{{Glossary("user agent", "ユーザーエージェント")}}は別なスタイルを適用するかもしれません。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-search.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>検索フィールドに含まれる値を表す {{domxref("DOMString")}}。</td>
+  </tr>
+  <tr>
+   <td><strong>イベント</strong></td>
+   <td>{{domxref("HTMLElement/change_event", "change")}} および {{domxref("HTMLElement/input_event", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>対応している共通属性</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("required", "input")}}, {{htmlattrxref("size", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL 属性</strong></td>
+   <td><code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>メソッド</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value" name="Value">値</h2>
+
+<p>{{htmlattrxref("value", "input")}} 属性は、テキスト入力欄に入力された現在のテキストの値が入っている {{domxref("DOMString")}} です。 JavaScript では {{domxref("HTMLInputElement.value")}} プロパティを使ってこれを受け取ることができます。</p>
+
+<pre class="brush: js notranslate">searchTerms = mySearch.value;
+</pre>
+
+<p>入力欄に検証の制約がない場合 (詳しくは{{anch("Validation", "検証")}}を参照)、値は任意の文字列又は空文字列 (<code>""</code>) になることがあります。</p>
+
+<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2>
+
+<p>型に関係なくすべての {{HTMLElement("input")}} 要素を操作する属性に加え、 <code>search</code> 型の入力欄は次の属性にも対応しています。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">属性</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("list")}}</code></td>
+   <td>オプションで自動補完の定義済みの選択肢を含む &lt;datalist&gt; 要素の id</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("maxlength")}}</code></td>
+   <td>入力欄が受け付ける最大文字数</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("minlength")}}</code></td>
+   <td>入力欄が取りうる、妥当と判断される最小文字列長</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("pattern")}}</code></td>
+   <td>妥当と判断されるために、入力欄の内容が一致する必要がある正規表現</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("placeholder")}}</code></td>
+   <td>空欄の時に入力欄に表示される入力例の値</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("readonly")}}</code></td>
+   <td>入力欄の内容を読み取り専用にするかどうかを示す論理属性</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("size")}}</code></td>
+   <td>入力欄の長さを何文字分にするかを表す数値</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("spellcheck")}}</code></td>
+   <td>入力欄でスペルチェックを有効にするかどうか、既定のスペルチェック構成を利用するかを制御する</td>
+  </tr>
+ </tbody>
+</table>
+
+<p id="htmlattrdeflist">{{page("/en-US/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p>
+
+<h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3>
+
+<p>ユーザーが検索フィールドに入力することができる (UTF-16 コード単位での) 最大文字数です。 0 以上の整数値である必要があります。 <code>maxlength</code> が指定されていないか、無効な値が指定されていると、検索フィールドには最大文字数が設定されません。この値は <code>minlength</code> の値以上である必要もあります。</p>
+
+<p>フィールドに入力されたテキストの長さが UTF-16 コード単位で <code>maxlength</code> の長さを超えていると、その入力欄は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。</p>
+
+<h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3>
+
+<p>ユーザーが検索フィールドに入力することができる (UTF-16 コード単位での) 最小文字数です。これは非負の整数値で、 <code>maxlength</code> で指定された値以下である必要があります。 <code>minlength</code> が指定されていないか、無効な値が指定されていると、検索フィールドには最小文字数が設定されません。</p>
+
+<p>入力欄のテキスト値の長さが UTF-16 コード単位で <code>minlength</code> の長さよりも短いと、その検索フィールドは<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。</p>
+
+<h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/text", "pattern-include")}}</p>
+
+<p>詳細や例については{{anch("Specifying a pattern", "パターンの指定")}}を参照してください。</p>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p>
+
+<h3 id="htmlattrdefspellcheck">{{htmlattrdef("spellcheck")}}</h3>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/text", "spellcheck-include")}}</p>
+
+<h2 id="Non-standard_attributes" name="Non-standard_attributes">標準外の属性</h2>
+
+<p>以下の標準外の属性が検索入力フィールドで利用できます。一般的な規則として、できれば使用することを避けてください。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">属性</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("autocorrect")}}</code></td>
+   <td>入力フィールドの編集中にオートコレクトを行うかどうか。 <strong>Safari のみ。</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("incremental")}}</code></td>
+   <td>ユーザーがフィールドの値を編集している間、ライブで検索結果を更新できるように繰り返して {{event("search")}} イベントを送信するかどうか。 <strong>WebKit and Blink only (Safari, Chrome, Opera, etc.).</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("mozactionhint")}}</code></td>
+   <td>入力欄を編集している間、ユーザーが <kbd>Enter</kbd> または <kbd>Return</kbd> キーを押したときに実行されるアクションを示す文字列です。これは仮想キーボードのキーに適切なラベルを特定するために使用します。 <strong>Android 版 Firefox のみ。</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("results")}}</code></td>
+   <td>以前の検索クエリのドロップダウンリストに表示されるアイテムの最大数。 <strong>Safari のみ。</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefautocorrect_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p>
+
+<h3 id="htmlattrdefincremental_non-standard_inline">{{htmlattrdef("incremental")}} {{non-standard_inline}}</h3>
+
+<div id="incremental-include">
+<p>論理属性 <code>incremental</code> は WebKit および Blink 拡張で (そのため Safari, Opera, Chrome, などで対応)、もし存在すれば、{{Glossary("user agent", "ユーザーエージェント")}}に入力をライブ検索として処理します。ユーザーがフィールドの値を編集すると、ユーザーエージェントは {{event("search")}} イベントを検索ボックスを表す {{domxref("HTMLInputElement")}} オブジェクトへ送信します。これにより、ユーザーが検索を編集するたびに、コードからリアルタイムに検索結果を更新することができます。</p>
+
+<p><code>incremental</code> が指定されていない場合、 {{event("search")}} イベントはユーザーが明示的に検索を実行した時のみ (フィールドを編集中に <kbd>Enter</kbd> または <kbd>Return</kbd> キーを押すなど) 送信されます。</p>
+
+<p><code>search</code> イベントは発生頻度が制限されているため、実装により定義された間隔よりも頻繁に送信されることはありません。</p>
+</div>
+
+<h3 id="htmlattrdefmozactionhint_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p>
+
+<h3 id="htmlattrdefresults_non-standard_inline">{{htmlattrdef("results")}} {{non-standard_inline}}</h3>
+
+<div id="results-include">
+<p><code>results</code> 属性は、 Safari のみが対応していますが、数値で {{HTMLElement("input")}} 要素が本来持っている過去の検索クエリのドロップダウンメニューに表示される項目の最大数を上書きします。</p>
+
+<p>値は非負の10進数でなければなりません。提供されなかった場合、または無効な値が指定された場合、ブラウザー既定の項目の最大数が使用されます。</p>
+</div>
+
+<h2 id="Using_search_inputs" name="Using_search_inputs">検索入力欄の使用</h2>
+
+<p><code>search</code> 型の <code>&lt;input&gt;</code> 要素は、 <code>text</code> 型ととても似ていますが、検索用語を扱うことに特化している点が異なります。どちらも基本的には同じ動作をしますが、ユーザーエージェントによっては既定で異なるスタイルを選択するかもしれません (そしてもちろん、サイトは独自のスタイルを適用することができます)。</p>
+
+<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;input type="search" id="mySearch" name="q"&gt;
+    &lt;button&gt;Search&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>これは次のように表示されます。</p>
+
+<p>{{EmbedLiveSample("Basic_example", 600, 40)}}</p>
+
+<p><code>q</code> は検索入力に与えられる最も一般的な <code>name</code> ですが、そうすることが必須ではありません。送信すると、サーバーに送信されるデータの名前と値の組は <code>q=searchterm</code> となります。</p>
+
+<div class="note">
+<p>入力欄に {{htmlattrxref("name", "input")}} を設定することを忘れないでください。そうしないと送信されません。</p>
+</div>
+
+<h3 id="Differences_between_search_and_text_types" name="Differences_between_search_and_text_types">search 型と text 型の違い</h3>
+
+<p>主な違いはブラウザーによる扱い方です。特筆するべき最初のことは、ブラウザーによっては×印を表示して、クリックすると簡単に検索語を削除できることです。次のスクリーンショットは Chrome のものです。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15235/chrome-cross-icon.png" style="display: block; height: 31px; margin: 0px auto; width: 144px;"></p>
+
+<p>加えて、最近のブラウザーは以前ドメイン内で入力された検索用語を自動的に格納し、そのドメインの検索入力欄で従属的な検索が行われたときに、自動補完オプションに上がってくるようにする傾向があります。これは同じ又は似た検索を繰り返して行う傾向があるユーザーにとって便利です。次のスクリーンショットは Firefox のものです。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15237/firefox-auto-complete.png" style="display: block; height: 83px; margin: 0px auto; width: 171px;">この点について、検索フォームに適用することができる有用なテクニックを見てみましょう。</p>
+
+<h3 id="Setting_placeholders" name="Setting_placeholders">プレイスホルダーの設定</h3>
+
+<p>{{htmlattrxref("placeholder","input")}} 属性を使用して、テキスト入力欄の内部に有用なプレイスホルダーを提供することで、何を入力すればよいかのヒントを提供することができます。次の例を見てください。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;input type="search" id="mySearch" name="q"
+     placeholder="Search the site..."&gt;
+    &lt;button&gt;Search&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>プレイスホルダーの表示方法を以下で確認できます。</p>
+
+<p>{{EmbedLiveSample("Setting_placeholders", 600, 40)}}</p>
+
+<h3 id="Search_form_labels_and_accessibility" name="Search_form_labels_and_accessibility">検索フォームのラベルとアクセシビリティ</h3>
+
+<p>検索フォームの一つの問題はアクセシビリティです。一般的なデザインの慣例では、検索フィールドにラベルがなく (虫眼鏡のアイコンや同類のものはあります)、検索フォームの目的はふつう、よく見えるユーザーにとっては配置から明らかです (<a href="https://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">この例ではよくあるパターンを示しています</a>)。</p>
+
+<p>しかし、これは、検索入力が何であるかを言葉で示していないため、読み上げソフトの利用者に混乱を引き起こす可能性があります。 ビジュアルデザインに影響を与えないこの方法の1つは、 <a href="/ja/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> の機能を使用することです。</p>
+
+<ul>
+ <li><code>&lt;form&gt;</code> フォームの <code>role</code> 属性の値が <code>search</code> であることで、読み上げソフトがフォームが検索フォームであることをアナウンスします。</li>
+ <li>これで十分ではない場合、 {{HTMLElement("input")}} 自身の <code>aria-label</code> 属性を使用することができます。これは読み上げソフトによって読み上げられ説明的なテキストラベルです。これは非視覚的な <code>&lt;label&gt;</code> と同等のものです。</li>
+</ul>
+
+<p>例を見てみましょう。</p>
+
+<pre class="brush: html notranslate">&lt;form role="search"&gt;
+  &lt;div&gt;
+    &lt;input type="search" id="mySearch" name="q"
+     placeholder="Search the site..."
+     aria-label="Search through site content"&gt;
+    &lt;button&gt;Search&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>プレイスホルダーがどう表示されるかを以下で確認できます。</p>
+
+<p>{{EmbedLiveSample("Search_form_labels_and_accessibility", 600, 40)}}</p>
+
+<p>前回の例から見かけ上の違いはありませんが、読み上げソフトのユーザーは追加情報を得る方法があります。</p>
+
+<div class="note">
+<p><strong>注</strong>: このようなアクセシビリティ機能の詳細ついては、 <a href="/ja/docs/Learn/Accessibility/WAI-ARIA_basics#SignpostsLandmarks">Signposts/Landmarks</a> をご覧ください。</p>
+</div>
+
+<h3 id="Physical_input_element_size" name="Physical_input_element_size">物理的な入力要素の寸法</h3>
+
+<p>入力ボックスの物理的な寸法は、 {{htmlattrxref("size", "input")}} 属性を使って制御することができます。これによって、テキスト入力欄が一度に表示できる文字数を指定することができます。これは要素の幅に影響し、幅をピクセル数ではなく文字数で指定することができます。例えば、この例の中では、入力欄は30文字の幅です。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;input type="search" id="mySearch" name="q"
+    placeholder="Search the site..." size="30"&gt;
+    &lt;button&gt;Search&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>結果はこの広い入力ボックスになります。</p>
+
+<p>{{ EmbedLiveSample('Physical_input_element_size', 600, 40) }}</p>
+
+<h2 id="Validation" name="Validation">検証</h2>
+
+<p><code>search</code> 型の <code>&lt;input&gt;</code> 要素は、通常の <code>text</code> 入力欄と同じ検証機能が利用できます。一般に検索ボックスに検証機能を使うことはあまりないでしょう。多くの場合、ユーザーは何でも入力できますが、既存の形式のデータに対して検索を行う場合など、考慮するべきケースも多少あります。</p>
+
+<div class="note">
+<p><strong>注</strong>: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するサーバースクリプトの代用には<em>なりません</em>。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、間違った種類のデータなど) がデータベースに入力された場合に災害が発生するおそれがあります。</p>
+</div>
+
+<h3 id="A_note_on_styling" name="A_note_on_styling">スタイルにおけるメモ</h3>
+
+<p>ユーザーにとって値が妥当かそうでないかが分かりやすくなるように、フォーム要素のスタイル付けに便利な擬似クラスが利用できます。 {{cssxref(":valid")}} 及び {{cssxref(":invalid")}} です。この節では、以下の CSS を使用して入力欄の値が妥当であれば隣にチェックマークを表示し、妥当な値でなければ隣にバツ (X) マークを表示します。</p>
+
+<pre class="brush: css notranslate">input:invalid ~ span:after {
+    content: '✖';
+    padding-left: 5px;
+    position: absolute;
+}
+
+input:valid ~ span:after {
+    content: '✓';
+    padding-left: 5px;
+    position: absolute;
+}</pre>
+
+<p>このテクニックにはフォーム要素の後に配置される {{htmlelement("span")}} 要素も必要で、これがアイコンのホルダーとして動作します。ブラウザーによっては一部の入力型で、直後に配置されたアイコンをうまく表示できないことがあるのでこれが必要です。</p>
+
+<h3 id="Making_input_required" name="Making_input_required">入力を必須にする</h3>
+
+<p>入力を行わないとフォームの送信が許可されないようにするための簡単な方法として、 {{htmlattrxref("required", "input")}} 属性を使うことができます。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;input type="search" id="mySearch" name="q"
+    placeholder="Search the site..." required&gt;
+    &lt;button&gt;Search&lt;/button&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">input {
+  margin-right: 10px;
+}
+
+input:invalid ~ span:after {
+    content: '✖';
+    padding-left: 5px;
+    position: absolute;
+}
+
+input:valid ~ span:after {
+    content: '✓';
+    padding-left: 5px;
+    position: absolute;
+}</pre>
+</div>
+
+<p>次のように表示されます。</p>
+
+<p>{{ EmbedLiveSample('Making_input_required', 600, 40) }}</p>
+
+<p>加えて、何も検索用語を入力せずに送信しようとすると、ブラウザーがメッセージを表示します。以下のものは Firefox の例です。</p>
+
+<p><img alt="form field with attached message that says Please fill out this field" src="https://mdn.mozillademos.org/files/15241/firefox-required-message.png" style="display: block; margin: 0 auto;"></p>
+
+<p>入力欄の中に無効な異なるデータ型を持つフォームを送信しようとすれば、下記の例のように、異なるメッセージが表示されるでしょう。</p>
+
+<h3 id="Input_value_length" name="Input_value_length">入力値の長さ</h3>
+
+<p>{{htmlattrxref("minlength", "input")}} 属性を使用して入力された値の最小の長さ (文字数) を指定することができます。同様に、 {{htmlattrxref("maxlength", "input")}} を使用して入力された値の最大長を文字数で設定します。</p>
+
+<p>以下の例では、入力値が4～8文字の長さであることが求められます。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="mySearch"&gt;Search for user&lt;/label&gt;
+    &lt;input type="search" id="mySearch" name="q"
+    placeholder="User IDs are 4–8 characters in length" required
+    size="30" minlength="4" maxlength="8"&gt;
+    &lt;button&gt;Search&lt;/button&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">input {
+  margin-right: 10px;
+}
+
+input:invalid ~ span:after {
+    content: '✖';
+    padding-left: 5px;
+    position: absolute;
+}
+
+input:valid ~ span:after {
+    content: '✓';
+    padding-left: 5px;
+    position: absolute;
+}</pre>
+</div>
+
+<p>This renders like so:</p>
+
+<p>{{ EmbedLiveSample('Input_value_length', 600, 40) }}</p>
+
+<p>４文字未満でフォームを送信しようとすると、適切なエラーメッセージが表示されます (ブラウザーによって異なります)。８文字を超えて入力しようとしても、ブラウザーが許しません。</p>
+
+<h3 id="Specifying_a_pattern" name="Specifying_a_pattern">パターンの指定</h3>
+
+<p>{{htmlattrxref("pattern", "input")}} 属性を使用して、入力値が妥当と判断されるために一致しなければならない正規表現を指定することができます (入力値を検証するために正規表現を使うための短期コースは<a href="/ja/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression">正規表現による検証</a>をご覧ください)。</p>
+
+<p>例を見てみましょう。製品 ID の検索フォームを提供し、 ID はすべてが2文字の英字に続いて4桁の番号です。以下の例でそれに対応します。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="mySearch"&gt;Search for product by ID:&lt;/label&gt;
+    &lt;input type="search" id="mySearch" name="q"
+    placeholder="two letters followed by four numbers" required
+    size="30" pattern="[A-z]{2}[0-9]{4}"&gt;
+    &lt;button&gt;Search&lt;/button&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">input {
+  margin-right: 10px;
+}
+
+input:invalid ~ span:after {
+    content: '✖';
+    padding-left: 5px;
+    position: absolute;
+}
+
+input:valid ~ span:after {
+    content: '✓';
+    padding-left: 5px;
+    position: absolute;
+}</pre>
+</div>
+
+<p>次のように表示されます。</p>
+
+<p>{{ EmbedLiveSample('Specifying_a_pattern', 600, 40) }}</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p><a class="external external-icon" href="https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-aria-roles">website-aria-roles</a> の例ので使用した検索フォーム (<a class="external external-icon" href="http://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">ライブで見る</a>) が良い例です。</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', 'input.html#text-(type=text)-state-and-search-state-(type=search)', '&lt;input type="search"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>初回定義</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#text-typetext-state-and-search-state-typesearch', '&lt;input type="search"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</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-search")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/HTML/Forms">HTML Forms</a></li>
+ <li>{{HTMLElement("input")}} および {{domxref("HTMLInputElement")}} インターフェイスに基づいています。</li>
+ <li><code><a href="/ja/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code></li>
+ <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li>
+</ul>
diff --git a/files/ja/web/html/element/input/submit/index.html b/files/ja/web/html/element/input/submit/index.html
new file mode 100644
index 0000000000..269fc8345b
--- /dev/null
+++ b/files/ja/web/html/element/input/submit/index.html
@@ -0,0 +1,286 @@
+---
+title: <input type="submit">
+slug: Web/HTML/Element/input/submit
+tags:
+  - Element
+  - Form Button
+  - Form input
+  - HTML
+  - HTML forms
+  - Input
+  - Input Types
+  - Reference
+  - Submit Form
+  - button
+  - form
+  - submit
+  - submit button
+translation_of: Web/HTML/Element/input/submit
+---
+<div>{{HTMLRef("Input_types")}}</div>
+
+<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>submit</code></strong> 型は、ボタンとして描画されます。 {{domxref("Element/click_event", "click")}} イベントが発生したとき (ふつうはユーザーがボタンをクリックしたとき)、{{Glossary("user agent", "ユーザーエージェント")}}はサーバーへフォームを送信しようとします。</span></p>
+
+<div id="summary-example2">
+<pre class="brush: html notranslate">&lt;input type="submit" value="リクエストを送信"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("summary-example2", 650, 30)}}</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value", "値")}}</strong></td>
+   <td>ボタンのラベルとして使用する {{domxref("DOMString")}}</td>
+  </tr>
+  <tr>
+   <td><strong>イベント</strong></td>
+   <td>{{domxref("Element/click_event", "click")}}</td>
+  </tr>
+  <tr>
+   <td><strong>対応している共通属性</strong></td>
+   <td>{{htmlattrxref("type", "input")}} および {{htmlattrxref("value", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL 属性</strong></td>
+   <td><code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>メソッド</strong></td>
+   <td>なし</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value" name="Value">値</h2>
+
+<p><code>&lt;input type="submit"&gt;</code> 要素の {{htmlattrxref("value", "input")}} 属性は、ボタンのラベルとして表示される {{domxref("DOMString")}} を示します。ボタンはその他の真の値を持ちません。</p>
+
+<div id="summary-example3">
+<pre class="brush: html notranslate">&lt;input type="submit" value="Send Request"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p>
+
+<p><code>value</code> を指定しなかった場合、ボタンにはユーザーエージェントによって選ばれた既定のラベルが表示されます。このラベルは「送信」または「クエリを送信」などのものです。次のものはこのブラウザーにおける送信ボタンの既定のラベルです。</p>
+
+<div id="summary-example1">
+<pre class="brush: html notranslate">&lt;input type="submit"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p>
+
+<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2>
+
+<p>すべての {{HTMLElement("input")}} 型で共通する属性に加え、 <code>submit</code> 型の入力欄は次の属性にも対応しています。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">属性</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("formaction")}}</code></td>
+   <td>フォームのデータの送信先の URL。もしあれば、フォームの {{htmlattrxref("action", "form")}} 属性を上書きする</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("formenctype")}}</code></td>
+   <td>文字列で、フォームのデータに使用するエンコーディング型を指定</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("formmethod")}}</code></td>
+   <td>フォームを送信する際に使用する HTTP メソッド ({{HTTPMethod("get")}} または {{HTTPMethod("post")}})</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("formnovalidate")}}</code></td>
+   <td>論理属性で、存在する場合、サーバーにデータを送信する前にフォームのフィールドに<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>をしないことを示す</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("formtarget")}}</code></td>
+   <td>フォームを送信した後で、サーバーから返されるレスポンスを読み込む先の{{Glossary("browsing context", "閲覧コンテキスト")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<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/image">&lt;input type="image"&gt;</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">&lt;input type="file"&gt;</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/image">&lt;input type="image"&gt;</a></code> および {{HTMLElement("button")}} 要素でも使用できます。</p>
+
+<h3 id="htmlattrdefformmethod">{{htmlattrdef("formmethod")}}</h3>
+
+<p>文字列で、フォームのデータを送信するときに使用する HTTP メソッドを示します。この値は所有者であるフォームの {{htmlattrxref("method", "form")}} を上書きします。許可されている値は次の通りです。</p>
+
+<dl>
+ <dt><code>get</code></dt>
+ <dd>URL は <code>formaction</code> または {{htmlattrxref("action", "form")}} 属性で指定された URL に疑問符 ("?") を追加し、 <code>formenctype</code> または {{htmlattrxref("enctype", "form")}} 属性で指定された方法でエンコードされたフォームのデータが続くものになります。この URL は HTTP の {{HTTPMethod("get")}} リクエストを用いてサーバーに送信されます。このメソッドは ASCII 文字のみを含む単純なフォームでうまく動作し、副作用はありません。これが既定値です。</dd>
+ <dt><code>post</code></dt>
+ <dd>フォームのデータは、 <code>formaction</code> または {{htmlattrxref("action", "form")}} で指定された URL に HTTP の {{HTTPMethod("post")}} メソッドを用いて送信されるリクエストの本文に含められます。このメソッドは複雑なデータやファイルの添付に対応しています。</dd>
+ <dt><code>dialog</code></dt>
+ <dd>このメソッドは、入力欄が関連付けられたダイアログを閉じるだけで、フォームのデータをまったく送信しない場合ことを表すために使用します。</dd>
+</dl>
+
+<p>この属性は <code><a href="/ja/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</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/image">&lt;input type="image"&gt;</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/image">&lt;input type="image"&gt;</a></code> および {{HTMLElement("button")}} 要素でも使用できます。</p>
+
+<h2 id="Using_submit_buttons" name="Using_submit_buttons">submit ボタンの使用</h2>
+
+<p><code>&lt;input type="submit"&gt;</code> buttons are used to submit forms. If you want to create a custom button and then customize the behavior using JavaScript, you need to use <code><a href="/ja/docs/Web/HTML/Element/input/button">&lt;input type="button"&gt;</a></code>, or better still, a {{htmlelement("button")}} element.</p>
+
+<p>If you choose to use <code>&lt;button&gt;</code> elements to create the buttons in your form, keep this in mind: if there's only one <code>&lt;button&gt;</code> inside the {{HTMLElement("form")}}, that button will be treated as the "submit" button. So you should be in the habit of expressly specifying which button is the submit button.</p>
+
+<h3 id="A_simple_submit_button">A simple submit button</h3>
+
+<p>We'll begin by creating a form with a simple submit button:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="example"&gt;Let's submit some text&lt;/label&gt;
+    &lt;input id="example" type="text" name="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="submit" value="送信"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
+</pre>
+
+<p>次のように表示されます。</p>
+
+<p>{{EmbedLiveSample("A_simple_submit_button", 650, 100)}}</p>
+
+<p>テキストフィールドにいくらかテキストを入力してから、送信ボタンを押してみてください。</p>
+
+<p>Upon submitting, the data name/value pair gets sent to the server. In this instance, the string will be <code>text=<em>usertext</em></code>, where "usertext" is the text entered by the user, encoded to preserve special characters. Where and how the data is submitted depends on the configuration of the <code>&lt;form&gt;</code>; see <a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a> for more details.</p>
+
+<h3 id="Adding_a_submit_keyboard_shortcut">Adding a submit keyboard shortcut</h3>
+
+<p>Keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard. To add a keyboard shortcut to a submit button — just as you would with any {{HTMLElement("input")}} for which it makes sense — you use the {{htmlattrxref("accesskey")}} global attribute.</p>
+
+<p>In this example, <kbd>s</kbd> is specified as the access key (you'll need to press <kbd>s</kbd> plus the particular modifier keys for your browser/OS combination. In order to avoid conflicts with the user agent's own keyboard shortcuts, different modifier keys are used for access keys than for other shortcuts on the host computer. See {{htmlattrxref("accesskey")}} for further details.</p>
+
+<p>Here's the previous example with the <kbd>s</kbd> access key added:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="example"&gt;Let's submit some text&lt;/label&gt;
+    &lt;input id="example" type="text" name="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="submit" value="Send"
+     accesskey="s"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>For example, in Firefox for Mac, pressing <kbd>Control</kbd>-<kbd>Option</kbd>-<kbd>S</kbd> triggers the Send button, while Chrome on Windows uses <kbd>Alt</kbd>+<kbd>S</kbd>.</p>
+
+<p>{{EmbedLiveSample("Adding_a_submit_keyboard_shortcut", 650, 100)}}</p>
+
+<p>The problem with the above example is that the user will not know what the access key is! This is especially true since the modifiers are typically non-standard to avoid conflicts. When building a site, be sure to provide this information in a way that doesn't interfere with the site design (for example by providing an easily accessible link that points to information on what the site access keys are). Adding a tooltip to the button (using the {{htmlattrxref("title")}} attribute) can also help, although it's not a complete solution for accessibility purposes.</p>
+
+<h3 id="Disabling_and_enabling_a_submit_button">Disabling and enabling a submit button</h3>
+
+<p>To disable a submit button, simply specify the {{htmlattrxref("disabled")}} global attribute on it, like so:</p>
+
+<div id="disable-example1">
+<pre class="brush: html notranslate">&lt;input type="submit" value="Disabled" disabled&gt;</pre>
+</div>
+
+<p>You can enable and disable buttons at run time by simply setting <code>disabled</code> to <code>true</code> or <code>false</code>; in JavaScript this looks like <code>btn.disabled = true</code> or <code>btn.disabled = false</code>.</p>
+
+<div class="note">
+<p>See the <code><a href="/ja/docs/Web/HTML/Element/input/button#Disabling_and_enabling_a_button">&lt;input type="button"&gt;</a></code> page for more ideas about enabling and disabling buttons.</p>
+</div>
+
+<h2 id="Validation" name="Validation">検証</h2>
+
+<p>送信ボタンは制約の検証には参加しません。制約を受ける実際の値を持っていません。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>We've included simple examples above. There isn't really anything more to say about submit buttons. There's a reason this kind of control is sometimes called a "simple button."</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#submit-button-state-(type=submit)', '&lt;input type="submit"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#submit-button-state-(type=submit)', '&lt;input type="submit"&gt;')}}</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-submit")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{HTMLElement("input")}} およびそれが実装している {{domxref("HTMLInputElement")}} インターフェイス</li>
+ <li><a href="/ja/docs/Learn/Forms/Basic_native_form_controls#Actual_buttons">フォームとボタン</a></li>
+ <li><a href="/ja/docs/Web/Accessibility/ARIA/forms">フォーム (アクセシビリティ)</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Forms">HTML フォーム</a></li>
+ <li>{{HTMLElement("button")}} 要素</li>
+ <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li>
+</ul>
diff --git a/files/ja/web/html/element/input/tel/index.html b/files/ja/web/html/element/input/tel/index.html
new file mode 100644
index 0000000000..07198f4c82
--- /dev/null
+++ b/files/ja/web/html/element/input/tel/index.html
@@ -0,0 +1,544 @@
+---
+title: <input type="tel">
+slug: Web/HTML/Element/input/tel
+tags:
+  - Element
+  - Form Inputs
+  - Forms
+  - HTML
+  - HTML forms
+  - HTML input
+  - Input
+  - Input Element
+  - Input Type
+  - Phone Numbers
+  - Reference
+  - Telephone Numbers
+  - tel
+translation_of: Web/HTML/Element/input/tel
+---
+<div>{{HTMLRef("Input_types")}}</div>
+
+<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <code><strong>tel</strong></code> 型は、ユーザーに電話番号を入力または編集させるために使用します。 <code><a href="/ja/docs/Web/HTML/Element/input/email">&lt;input type="email"&gt;</a></code> や <code><a href="/ja/docs/Web/HTML/Element/input/url">&lt;input type="url"&gt;</a></code> とは異なり、送信前に値が特定の書式であると自動的には検証されません。電話番号の書式は世界中で様々だからです。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-tel.html", "tabbed-standard")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p><code>tel</code> の入力欄は機能的に標準の <code>text</code> 入力欄と同じであるという事実にもかかわらず、便利な用途を提供します。もっとも手っ取り早く表れるのは、モバイルブラウザー — 特に携帯電話のもの — では、電話番号の入力に最適化された専用のキーパッドを表示することがあります。電話番号の専用の入力型を使用すると、カスタム検証を追加して電話番号の扱いをもっと便利にすることができます。</p>
+
+<div class="note">
+<p><strong>注</strong>: <code>tel</code> 型に対応していないブラウザーでは、通常の {{HTMLElement("input/text", "text")}} 入力欄で代用されます。</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value", "値")}}</strong></td>
+   <td>電話番号を表す {{domxref("DOMString")}}、または空欄</td>
+  </tr>
+  <tr>
+   <td><strong>イベント</strong></td>
+   <td>{{domxref("HTMLElement/change_event", "change")}} および {{domxref("HTMLElement/input_event", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>対応している共通属性</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("size", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL 属性</strong></td>
+   <td><code>list</code>, <code>selectionStart</code>, <code>selectionEnd</code>, <code>selectionDirection</code>, and <code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>メソッド</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value" name="Value">値</h2>
+
+<p>{{HTMLElement("input")}} 要素の {{htmlattrxref("value", "input")}} 属性には、電話番号を表す文字列、または空文字列 (<code>""</code>) の {{domxref("DOMString")}} が入ります。</p>
+
+<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2>
+
+<p>型に関係なくすべての {{HTMLElement("input")}} 要素を操作する属性に加え、電話番号型の入力欄は次の属性にも対応しています。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">属性</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("list")}}</code></td>
+   <td>オプションで自動補完の定義済みの選択肢を含む &lt;datalist&gt; 要素の id</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("maxlength")}}</code></td>
+   <td>妥当な入力として受け入れるための、 UTF-16 文字単位の最大長</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("minlength")}}</code></td>
+   <td>フィールドの内容が妥当と判断される最小文字列長</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("pattern")}}</code></td>
+   <td>制約検証に通るために入力された値が一致する必要がある正規表現</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("placeholder")}}</code></td>
+   <td>値がない時にフィールド内に表示される入力例の値</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("readonly")}}</code></td>
+   <td>論理属性で、存在すれば、フィールドの内容をユーザーが編集できないことを示す</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("size")}}</code></td>
+   <td>画面上における入力フィールドの幅の文字数</td>
+  </tr>
+ </tbody>
+</table>
+
+<p id="htmlattrdeflist">{{page("/ja/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p>
+
+<h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3>
+
+<p>ユーザーが電話番号フィールドに入力することができる (UTF-16 コード単位での) 最大文字数です。 0 以上の整数値である必要があります。 <code>maxlength</code> が指定されていないか、無効な値が指定されていると、電話番号フィールドには最大文字数が設定されません。この値は <code>minlength</code> の値以上である必要もあります。</p>
+
+<p>フィールドに入力された長さが UTF-16 コード単位で <code>maxlength</code> の長さを超えていると、その入力欄は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。</p>
+
+<h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3>
+
+<p>ユーザーが電話番号フィールドに入力することができる (UTF-16 コード単位での) 最小文字数です。これは非負の整数値で、 <code>maxlength</code> で指定された値以下である必要があります。 <code>minlength</code> が指定されていないか、無効な値が指定されていると、電話番号フィールドには最小文字数が設定されません。</p>
+
+<p>入力欄のテキストの長さが UTF-16 コード単位で <code>minlength</code> の長さよりも短いと、電話番号フィールドは<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。</p>
+
+<h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/text", "pattern-include")}}</p>
+
+<p>詳細と例については後述の{{anch("Pattern validation", "パターン検証")}}を参照してください。</p>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p>
+
+<h2 id="Non-standard_attributes" name="Non-standard_attributes">標準外の属性</h2>
+
+<p>ブラウザーによっては、以下の標準外の属性が利用できます。一般的な規則として、できれば使用することを避けてください。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">属性</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("autocorrect")}}</code></td>
+   <td>この入力フィールドの編集中にオートコレクトを許可するかどうか。 <strong>Safari のみ。</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("mozactionhint")}}</code></td>
+   <td>入力欄を編集している間、ユーザーが <kbd>Enter</kbd> または <kbd>Return</kbd> キーを押したときに実行されるアクションを示す文字列です。これは仮想キーボードのキーに適切なラベルを特定するために使用します。 <strong>Android 版 Firefox for のみ。</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefautocorrect_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p>
+
+<h3 id="htmlattrdefmozactionhint_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p>
+
+<h2 id="tel_入力欄の使用">tel 入力欄の使用</h2>
+
+<p>ウェブにおいて、電話番号はとてもよく収集されるデータの種類です。例えば、何らかの会員登録や通信販売サイトで、商取引や緊急時連絡の目的でユーザーに電話番号を尋ねることが良くあります。一般的にどのように電話番号が入力されるかを考えれば、残念ながら「1つのサイズですべてに合う」ような解決策は現実的ではありません。</p>
+
+<p>幸い、自分でサイトの要件を検討し、自分で適切なレベルの検証を実装することができます。詳しくは、以下の{{anch("Validation", "検証")}}をご覧ください。</p>
+
+<h3 id="Custom_keyboards" name="Custom_keyboards">カスタムキーボード</h3>
+
+<p>One of the main advantages of <code>&lt;input type="tel"&gt;</code> is that it causes mobile browsers to display a special keyboard for entering phone numbers. For example, here's what the keypads look like on a couple of devices.</p>
+
+<table class="standard-table">
+ <caption>Examples of custom keyboards on mobile devices.</caption>
+ <thead>
+  <tr>
+   <th scope="col">Firefox for Android</th>
+   <th scope="col">WebKit iOS (Safari/Chrome/Firefox)</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><img alt="Firefox for Android screen shot" src="https://mdn.mozillademos.org/files/15441/fx-android-tel.png" style="height: 640px; width: 360px;"></td>
+   <td><img alt="Firefox for iOS screenshot" src="https://mdn.mozillademos.org/files/15603/iphone-tel-keyboard-50pct.png" style="height: 640px; width: 360px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="A_simple_tel_input" name="A_simple_tel_input">単純な tel 入力欄</h3>
+
+<p>In its most basic form, a tel input can be implemented like this:</p>
+
+<pre class="brush: html notranslate">&lt;label for="telNo"&gt;Phone number:&lt;/label&gt;
+&lt;input id="telNo" name="telNo" type="tel"&gt;</pre>
+
+<p>{{ EmbedLiveSample('A_simple_tel_input', 600, 40) }}</p>
+
+<p>There is nothing magical going on here. When submitted to the server, the above input's data would be represented as, for example, <code>telNo=+12125553151</code>.</p>
+
+<h3 id="Placeholders" name="Placeholders">プレイスホルダー</h3>
+
+<p>Sometimes it's helpful to offer an in-context hint as to what form the input data should take. This can be especially important if the page design doesn't offer descriptive labels for each {{HTMLElement("input")}}. This is where <strong>placeholders</strong> come in. A placeholder is a value that demonstrates the form the <code>value</code> should take by presenting an example of a valid value, which is displayed inside the edit box when the element's <code>value</code> is <code>""</code>. Once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.</p>
+
+<p>Here, we have an <code>tel</code> input with the placeholder <code>123-4567-8901</code>. Note how the placeholder disappears and reappears as you manipulate the contents of the edit field.</p>
+
+<pre class="brush: html notranslate">&lt;input id="telNo" name="telNo" type="tel"
+       placeholder="123-4567-8901"&gt;</pre>
+
+<p>{{ EmbedLiveSample('Placeholders', 600, 40) }}</p>
+
+<h3 id="Controlling_the_input_size" name="Controlling_the_input_size">入力欄の寸法の制御</h3>
+
+<p>You can control not only the physical length of the input box, but also the minimum and maximum lengths allowed for the input text itself.</p>
+
+<h4 id="Physical_input_element_size" name="Physical_input_element_size">物理的な入力欄の寸法</h4>
+
+<p>The physical size of the input box can be controlled using the {{htmlattrxref("size", "input")}} attribute. With it, you can specify the number of characters the input box can display at a time. In this example, for instance, the <code>tel</code> edit box is 20 characters wide:</p>
+
+<pre class="brush: html notranslate">&lt;input id="telNo" name="telNo" type="tel"
+       size="20"&gt;</pre>
+
+<p>{{ EmbedLiveSample('Physical_input_element_size', 600, 40) }}</p>
+
+<h4 id="Element_value_length" name="Element_value_length">要素の値の長さ</h4>
+
+<p>The <code>size</code> is separate from the length limitation on the entered telephone number. You can specify a minimum length, in characters, for the entered telephone number using the {{htmlattrxref("minlength", "input")}} attribute; similarly, use {{htmlattrxref("maxlength", "input")}} to set the maximum length of the entered telephone number.</p>
+
+<p>The example below creates a 20-character wide telephone number entry box, requiring that the contents be no shorter than 9 characters and no longer than 14 characters.</p>
+
+<pre class="brush: html notranslate">&lt;input id="telNo" name="telNo" type="tel"
+       size="20" minlength="9" maxlength="14"&gt;</pre>
+
+<p>{{EmbedLiveSample("Element_value_length", 600, 40) }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: The above attributes do affect {{anch("Validation")}} — the above example's inputs will count as invalid if the length of the value is less than 9 characters, or more than 14. Most browser won't even let you enter a value over the max length.</p>
+</div>
+
+<h3 id="Providing_default_options" name="Providing_default_options">既定のオプションの提供</h3>
+
+<p>これまでどおり、 {{htmlattrxref("value", "input")}} 属性を設定することで <code>tel</code> 入力欄に既定値を指定することができます。</p>
+
+<div id="Default_value">
+<pre class="brush: html notranslate">&lt;input id="telNo" name="telNo" type="tel"
+       value="333-4444-4444"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Default_value", 600, 40)}}</p>
+
+<h4 id="Offering_suggested_values" name="Offering_suggested_values">サジェスト値の提供</h4>
+
+<p>Taking it a step farther, you can provide a list of default phone number values from which the user can select. To do this, use the {{htmlattrxref("list", "input")}} attribute. This doesn't limit the user to those options, but does allow them to select commonly-used telephone numbers more quickly. This also offers hints to {{htmlattrxref("autocomplete", "input")}}. The <code>list</code> attribute specifies the ID of a {{HTMLElement("datalist")}} element, which in turn contains one {{HTMLElement("option")}} element per suggested value; each <code>option</code>'s <code>value</code> is the corresponding suggested value for the telephone number entry box.</p>
+
+<pre class="brush: html notranslate">&lt;label for="telNo"&gt;Phone number: &lt;/label&gt;
+&lt;input id="telNo" name="telNo" type="tel" list="defaultTels"&gt;
+
+&lt;datalist id="defaultTels"&gt;
+  &lt;option value="111-1111-1111"&gt;
+  &lt;option value="122-2222-2222"&gt;
+  &lt;option value="333-3333-3333"&gt;
+  &lt;option value="344-4444-4444"&gt;
+&lt;/datalist&gt;</pre>
+
+<p>{{EmbedLiveSample("Offering_suggested_values", 600, 40)}}</p>
+
+<p>With the {{HTMLElement("datalist")}} element and its {{HTMLElement("option")}}s in place, the browser will offer the specified values as potential values for the email address; this is typically presented as a popup or drop-down menu containing the suggestions. While the specific user experience may vary from one browser to another, typically clicking in the edit box presents a drop-down of the suggested email addresses. Then, as the user types, the list is adjusted to show only filtered matching values. Each typed character narrows down the list until the user makes a selection or types a custom value.</p>
+
+<p>Here's a screenshot of what that might look like:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15605/phone-number-with-options.png" style="border-style: solid; border-width: 1px; height: 150px; width: 684px;"></p>
+
+<h2 id="Validation" name="Validation">検証</h2>
+
+<p>As we've touched on before, it's quite difficult to provide a one-size-fits-all client-side validation solution for phone numbers. So what can we do? Let's consider some options.</p>
+
+<div class="warning">
+<p><strong>重要</strong>: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用には<em>なりません</em>。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、間違った種類のデータなど) が送信された場合に災害が発生するおそれがあります。</p>
+</div>
+
+<h3 id="Making_telephone_numbers_required" name="Making_telephone_numbers_required">電話番号を必須にする</h3>
+
+<p>You can make it so that an empty input is invalid and won't be submitted to the server using the {{htmlattrxref("required", "input")}} attribute. For example, let's use this HTML:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="telNo"&gt;Enter a telephone number (required): &lt;/label&gt;
+    &lt;input id="telNo" name="telNo" type="tel" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>And let's include the following CSS to highlight valid entries with a checkmark and invalid entries with a cross:</p>
+
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute; content: '✖';
+  padding-left: 5px;
+  color: #8b0000;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+  color: #009000;
+}</pre>
+
+<p>The output looks like this:</p>
+
+<p>{{EmbedLiveSample("Making_telephone_numbers_required", 700, 70)}}</p>
+
+<h3 id="Pattern_validation" name="Pattern_validation">パターンによる値検証</h3>
+
+<p>If you want to further restrict entered numbers so they also have to conform to a specific pattern, you can use the {{htmlattrxref("pattern","input")}} attribute, which takes as its value a {{Glossary("regular expression")}} that entered values have to match.</p>
+
+<p>In this example we'll use the same CSS as before, but our HTML is changed to look like this:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="telNo"&gt;Enter a telephone number (in the form xxx-xxx-xxxx): &lt;/label&gt;
+    &lt;input id="telNo" name="telNo" type="tel" required
+           pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute; content: '✖';
+  padding-left: 5px;
+  color: #8b0000;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+  color: #009000;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("Pattern_validation", 700, 70)}}</p>
+
+<p>Notice how the entered value is reported as invalid unless the pattern xxx-xxx-xxxx is matched; for instance, 41-323-421 won't be accepted. Neither will 800-MDN-ROCKS. However, 865-555-6502 will be accepted. This particular pattern is obviously only useful for certain locales — in a real application you'd probably have to vary the pattern used depending on the locale of the user.</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>In this example, we present a simple interface with a {{htmlelement("select")}} element that lets the user choose which country they're in, and a set of <code>&lt;input type="tel"&gt;</code> elements to let them enter each part of their phone number; there is no reason why you can't have multiple <code>tel</code> inputs.</p>
+
+<p>Each input has a {{htmlattrxref("placeholder","input")}} attribute to show a hint to sighted users about what to enter into it, a {{htmlattrxref("pattern","input")}} to enforce a specific number of characters for the desired section, and an <code>aria-label</code> attribute to contain a hint to be read out to screenreader users about what to enter into it.</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="country"&gt;Choose your country:&lt;/label&gt;
+    &lt;select id="country" name="country"&gt;
+      &lt;option&gt;UK&lt;/option&gt;
+      &lt;option selected&gt;US&lt;/option&gt;
+      &lt;option&gt;Germany&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;p&gt;Enter your telephone number: &lt;/p&gt;
+    &lt;span class="areaDiv"&gt;
+      &lt;input id="areaNo" name="areaNo" type="tel" required
+             placeholder="Area code" pattern="[0-9]{3}"
+             aria-label="Area code"&gt;
+      &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/span&gt;
+    &lt;span class="number1Div"&gt;
+      &lt;input id="number1" name="number1" type="tel" required
+             placeholder="First part" pattern="[0-9]{3}"
+             aria-label="First part of number"&gt;
+      &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/span&gt;
+    &lt;span class="number2Div"&gt;
+      &lt;input id="number2" name="number2" type="tel" required
+             placeholder="Second part" pattern="[0-9]{4}"
+             aria-label="Second part of number"&gt;
+      &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>The JavaScript is relatively simple — it contains an {{domxref("GlobalEventHandlers.onchange", "onchange")}} event handler that, when the <code>&lt;select&gt;</code> value is changed, updates the <code>&lt;input&gt;</code> element's <code>pattern</code>, <code>placeholder</code>, and <code>aria-label</code> to suit the format of telephone numbers in that country/territory.</p>
+
+<pre class="brush: js notranslate">var selectElem = document.querySelector("select");
+var inputElems = document.querySelectorAll("input");
+
+selectElem.onchange = function() {
+  for(var i = 0; i &lt; inputElems.length; i++) {
+    inputElems[i].value = "";
+  }
+
+  if(selectElem.value === "US") {
+    inputElems[2].parentNode.style.display = "inline";
+
+    inputElems[0].placeholder = "Area code";
+    inputElems[0].pattern = "[0-9]{3}";
+
+    inputElems[1].placeholder = "First part";
+    inputElems[1].pattern = "[0-9]{3}";
+    inputElems[1].setAttribute("aria-label","First part of number");
+
+    inputElems[2].placeholder = "Second part";
+    inputElems[2].pattern = "[0-9]{4}";
+    inputElems[2].setAttribute("aria-label","Second part of number");
+  } else if(selectElem.value === "UK") {
+    inputElems[2].parentNode.style.display = "none";
+
+    inputElems[0].placeholder = "Area code";
+    inputElems[0].pattern = "[0-9]{3,6}";
+
+    inputElems[1].placeholder = "Local number";
+    inputElems[1].pattern = "[0-9]{4,8}";
+    inputElems[1].setAttribute("aria-label","Local number");
+  } else if(selectElem.value === "Germany") {
+    inputElems[2].parentNode.style.display = "inline";
+
+    inputElems[0].placeholder = "Area code";
+    inputElems[0].pattern = "[0-9]{3,5}";
+
+    inputElems[1].placeholder = "First part";
+    inputElems[1].pattern = "[0-9]{2,4}";
+    inputElems[1].setAttribute("aria-label","First part of number");
+
+    inputElems[2].placeholder = "Second part";
+    inputElems[2].pattern = "[0-9]{4}";
+    inputElems[2].setAttribute("aria-label","Second part of number");
+  }
+}</pre>
+
+<p>The example looks like this:</p>
+
+<p>{{EmbedLiveSample('Examples', 600, 140)}}</p>
+
+<p>This is an interesting idea, which goes to show a potential solution to the problem of dealing with international phone numbers. You would have to extend the example of course to provide the correct pattern for potentially every country, which would be a lot of work, and there would still be no foolproof guarantee that the users would enter their numbers correctly.</p>
+
+<p>It makes you wonder if it is worth going to all this trouble on the client-side, when you could just let the user enter their number in whatever format they wanted on the client-side and then validate and sanitize it on the server. But this choice is yours to make.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+margin-bottom: 10px;
+position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute; content: '✖';
+  padding-left: 5px;
+  color: #8b0000;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+  color: #009000;
+}</pre>
+</div>
+
+<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', '#telephone-state-(type=tel)', '&lt;input type="tel"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>初回定義</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#tel-state-typetel', '&lt;input type="tel"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</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-tel")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/HTML/Forms">HTML フォームガイド</a></li>
+ <li><a href="/ja/docs/Web/Accessibility/ARIA/forms">フォームとアクセシビリティ</a></li>
+ <li>{{HTMLElement("input")}}
+  <ul>
+   <li><code><a href="/ja/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code></li>
+   <li><code><a href="/ja/docs/Web/HTML/Element/input/email">&lt;input type="email"&gt;</a></code></li>
+  </ul>
+ </li>
+ <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li>
+</ul>
diff --git a/files/ja/web/html/element/input/text/index.html b/files/ja/web/html/element/input/text/index.html
new file mode 100644
index 0000000000..b1e4a6db94
--- /dev/null
+++ b/files/ja/web/html/element/input/text/index.html
@@ -0,0 +1,471 @@
+---
+title: <input type="text">
+slug: Web/HTML/Element/input/text
+tags:
+  - Form input
+  - Forms
+  - HTML
+  - HTML forms
+  - Input
+  - Input Type
+  - Reference
+  - Text
+  - text entry
+  - text input
+translation_of: Web/HTML/Element/input/text
+---
+<div>{{HTMLRef("Input_types")}}</div>
+
+<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <code><strong>text</strong></code> 型は、基本的な単一行のテキスト入力欄を生成します。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}</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>テキスト入力欄に含まれる文字列を表す {{domxref("DOMString")}}。</td>
+  </tr>
+  <tr>
+   <td><strong>イベント</strong></td>
+   <td>{{event("change")}} および {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>対応している共通属性</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} and {{htmlattrxref("size", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL 属性</strong></td>
+   <td>{{htmlattrxref("list", "input")}}, <code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>メソッド</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value" name="Value">値</h2>
+
+<p> {{htmlattrxref("value", "input")}} 属性は、テキスト入力欄に入力された現在のテキストの値が入っている {{domxref("DOMString")}} です。 JavaScript では {{domxref("HTMLInputElement.value", "value")}} プロパティを使ってこれを受け取ることができます。</p>
+
+<pre class="brush: js notranslate">let theText = myTextInput.value;
+</pre>
+
+<p>入力欄に検証の制約がない場合 (詳しくは{{anch("Validation", "検証")}}を参照)、値は空文字列 ("") にすることができます。</p>
+
+<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2>
+
+<p>型に関係なくすべての {{HTMLElement("input")}} 要素を操作する属性に加え、 <code>text</code> 型の入力欄は次の属性にも対応しています。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">属性</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("list")}}</code></td>
+   <td>任意の定義済みの自動補完オプションを含む&lt;datalist&gt; 要素の id</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("maxlength")}}</code></td>
+   <td>入力欄が受け付ける最大文字数</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("minlength")}}</code></td>
+   <td>入力欄が取りうる、妥当と判断される最小文字列長</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("pattern")}}</code></td>
+   <td>妥当と判断されるために、入力欄の内容が一致する必要がある正規表現</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("placeholder")}}</code></td>
+   <td>空欄の時に入力欄に表示される入力例の値</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("readonly")}}</code></td>
+   <td>入力欄の内容を読み取り専用にするかどうかを示す論理属性</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("size")}}</code></td>
+   <td>入力欄の長さを何文字分にするかを表す数値</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("spellcheck")}}</code></td>
+   <td>入力欄でスペルチェックを有効にするかどうか、既定のスペルチェック構成を利用するかを制御する</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdeflist">{{htmlattrdef("list")}}</h3>
+
+<p>list 属性の値は、同じ文書内にある {{HTMLElement("datalist")}} 要素の {{domxref("Element.id", "id")}} です。 {{HTMLElement("datalist")}} は、この入力欄でユーザーに提案するための事前定義された値のリストを提供します。リストの中の値のうち {{htmlattrxref("type", "input")}} と互換性のないものは、提案されるオプションには含まれません。提供される値は提案であり、要件ではありません。ユーザーはこの定義済みリストから選択することも、異なる値を提供することもできます。</p>
+
+<h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3>
+
+<p>ユーザーが <code>text</code> 入力欄に入力することができる (UTF-16 コード単位での) 最大文字数です。 0 以上の整数値である必要があります。 <code>maxlength</code> が指定されていないか、無効な値が指定されていると、 <code>text</code> 入力欄には最大文字数が設定されません。この値は <code>minlength</code> の値以上である必要もあります。</p>
+
+<p>フィールドのテキスト値の長さが UTF-16 コード単位で <code>maxlength</code> の長さを超えていると、その入力欄は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。</p>
+
+<h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3>
+
+<p>ユーザーが <code>text</code> 入力欄に入力することができる (UTF-16 コード単位での) 最小文字数です。これは非負の整数値で、 <code>maxlength</code> で指定された値以下である必要があります。 <code>minlength</code> が指定されていないか、無効な値が指定されていると、 <code>text</code> 入力欄には最小文字数が設定されません。</p>
+
+<p>入力欄のテキスト値の長さが UTF-16 コード単位で <code>minlength</code> の長さよりも短いと、その入力欄は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。</p>
+
+<h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3>
+
+<div id="pattern-include">
+<p><code>pattern</code> 属性は、指定する場合は正規表現であり、入力欄の {{htmlattrxref("value")}} が<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に合格するためにはこれと一致しなければなりません。これは {{jsxref("RegExp")}} 型で使用される JavaScript の妥当な正規表現である必要があり、これは<a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現のガイド</a>で記述されています。正規表現がコンパイルされるときに <code>'u'</code> フラグが指定されるので、パターンは ASCII ではなく Unicode コードポイントの並びとして扱われます。パターンのテキストをスラッシュで囲んではいけません。</p>
+
+<p>指定されたパターンがないかか無効である場合は、正規表現は適用されず、この属性は完全に無視されます。</p>
+
+<div class="note">
+<p><strong>Tip:</strong> {{htmlattrxref("title", "input")}} 属性を使用してテキストを指定すると、多くのブラウザーでパターンに一致する要件が何であるかを説明するツールチップを表示することができます。近くに他の説明テキストを配置する必要があります。</p>
+</div>
+</div>
+
+<p>詳細や例については{{anch("Specifying a pattern", "パターンの指定")}}を参照してください。</p>
+
+<h3 id="htmlattrdefplaceholder">{{htmlattrdef("placeholder")}}</h3>
+
+<p><code>placeholder</code> 属性は文字列で、その欄にどのような種類の情報が求められるかについてのユーザーに対する短いヒントを提供します。これは求められるデータの種類を紹介する一語または短い句であり、説明的なメッセージではありません。テキストには改行を含めることは<em>できません</em>。</p>
+
+<p>コントロールの内容が単一の書字方向 ({{Glossary("LTR")}} または {{Glossary("RTL")}}) であるものの、プレイスホルダーを逆の方向に表示する必要がある場合、 Unicode 双方向アルゴリズム書式文字を使用してプレイスホルダーの中で書字方向を上書きすることができます。これらの文字については、{{SectionOnPage("/ja/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm", "Unicode 制御文字を使用した書字方向の上書き")}}を参照してください。</p>
+
+<div class="note">
+<p><strong>注:</strong> 可能であれば <code>placeholder</code> を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、{{SectionOnPage("/ja/docs/Web/HTML/Element/input", "Labels and placeholders", "ラベルとプレイスホルダー")}}を参照してください。</p>
+</div>
+
+<h3 id="htmlattrdefreadonly">{{htmlattrdef("readonly")}}</h3>
+
+<p>論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 <code>value</code> は、 JavaScript コードから直接 {{domxref("HTMLInputElement.value")}} プロパティを設定することで変更することができます。</p>
+
+<div class="note">
+<p><strong>注:</strong> 読み取り専用フィールドは値を持てないため、 <code>required</code> は <code>readonly</code> 属性も指定されている入力欄には効果がありません。</p>
+</div>
+
+<h3 id="htmlattrdefsize">{{htmlattrdef("size")}}</h3>
+
+<p><code>size</code> 属性は数値であり、入力欄の幅を何文字分とするかを示します。値はゼロより大きな数値である必要があり、既定値は20です。文字の幅は様々であるため、これは正確ではない可能性もあり、依存することはできません。結果の入力欄は文字数やフォント (使用中の {{cssxref("font")}} 設定) によって、指定された文字数より狭くなったり広くなったりすることがあります。</p>
+
+<p>これはユーザーがフィールドに入力することができる文字数の制限を設定するものでは<em>ありません</em>。これは一度に見える文字数をおよそ指定するだけです。入力データの長さの上限を設定するには、 <code>{{anch("maxlength")}}</code> 属性を使用してください。</p>
+
+<h3 id="htmlattrdefspellcheck">{{htmlattrdef("spellcheck")}}</h3>
+
+<p><code>spellcheck</code> はグローバル属性で、要素でスペルチェックを有効にするかどうかを示します。内容が編集可能なものすべてに使用することができますが、ここでは <code>spellcheck</code> 属性の {{HTMLElement("input")}} 要素の使用に関して特に考えます。 <code>spellcheck</code> で利用できる値は次の通りです。</p>
+
+<dl>
+ <dt><code>false</code></dt>
+ <dd>この要素でスペルチェックを無効にします。</dd>
+ <dt><code>true</code></dt>
+ <dd>この要素でスペルチェックを有効にします。</dd>
+ <dt>"" (空文字列) または値なし</dt>
+ <dd>スペルチェックについて、要素の既定の動作に従います。これは親の <code>spellcheck</code> 設定や、その他の要因に基づくことがあります。</dd>
+</dl>
+
+<p>入力欄では、 {{anch("readonly")}} 属性が設定されておらず、かつ無効になっていない場合にスペルチェックを有効にすることができます。</p>
+
+<p><code>spellcheck</code> を読み取ることで返される値は、{{Glossary("user agent", "ユーザーエージェント")}}の設定によって上書きされる場合、コントロール内のスペルチェックの実際の状態を反映しない可能性があります。</p>
+
+<h2 id="Non-standard_attributes" name="Non-standard_attributes">標準外の属性</h2>
+
+<p>ブラウザーによっては、以下の標準外の属性が利用できます。一般的な規則として、できれば使用することを避けてください。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">属性</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("autocorrect")}}</code></td>
+   <td>オートコレクトを行うかどうかを <code>on</code> または <code>off</code> で示します。 <strong>Safari のみ。</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("mozactionhint")}}</code></td>
+   <td>入力欄を編集している間、ユーザーが <kbd>Enter</kbd> または <kbd>Return</kbd> キーを押したときに実行されるアクションを示す文字列です。これは仮想キーボードのキーに適切なラベルを特定するために使用します。 <strong>Android 版 Firefox for のみ。</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefautocorrect_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3>
+
+<div id="autocorrect-include">
+<p>Safari 拡張である <code>autocorrect</code> 属性は文字列で、ユーザーがこの欄を編集している間に自動修正を有効にするかどうかを示します。次の値が許されています。</p>
+
+<dl>
+ <dt><code>on</code></dt>
+ <dd>構成されていれば、打ち間違いの自動修正や、テキストの置き換え処理を有効にします。</dd>
+ <dt><code>off</code></dt>
+ <dd>自動修正やテキストの置き換えを無効にします。</dd>
+</dl>
+</div>
+
+<h3 id="htmlattrdefmozactionhint_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3>
+
+<div id="mozactionhint-include">
+<p>Mozilla 拡張で Android 版 Firefox で対応しており、ユーザーがフィールドを編集中に <kbd>Enter</kbd> キーや <kbd>Return</kbd> キーを押した場合に行われるアクションの種類のヒントを提供します。この情報は仮想キーボードの <kbd>Enter</kbd> キーにどのようなラベルを使用するかを決定するために使用されます。</p>
+
+<div class="note">
+<p><strong>注:</strong> これはグローバル属性 {{htmlattrxref("enterkeyhint")}} として<a href="https://html.spec.whatwg.org/#input-modalities:-the-enterkeyhint-attribute">標準化されています</a>が、まだ広くは実装されていません。 Firefox の実装状態の変遷を確認するには、 {{bug(1490661)}} を参照してください。</p>
+</div>
+
+<p>許可されている値は <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code>, <code>send</code> です。ブラウザーはこのヒントを使用して、 Enter キーにどのラベルを置くかを決定します。</p>
+</div>
+
+<h2 id="Using_text_inputs" name="Using_text_inputs">テキスト入力欄の使用</h2>
+
+<p><code>text</code> 型の <code>&lt;input&gt;</code> 要素は、基本的な単一行の入力欄を作成します。どこでも、ユーザーに単一行の値を入力させたい場所で、もっと具体的な入力型が値の中にない場合 (例えば、<a href="/ja/docs/Web/HTML/Element/input/datetime-local">日付</a>、 <a href="/ja/docs/Web/HTML/Element/input/url">URL</a>、<a href="/ja/docs/Web/HTML/Element/input/email">メールアドレス</a>、<a href="/ja/docs/Web/HTML/Element/input/search">検索語</a>など、もっと良い選択肢が利用できるもの) に使用します。</p>
+
+<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="uname"&gt;Choose a username: &lt;/label&gt;
+    &lt;input type="text" id="uname" name="name"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>これは次のように表示されます。</p>
+
+<p>{{EmbedLiveSample("Basic_example", 600, 50)}}</p>
+
+<p>送信されると、サーバーに送信される名前と値の組のデータは <code>uname=Chris</code> になります (送信前に入力値として "Chris" が入力された場合)。 {{HTMLElement("input")}} 要素に {{htmlattrxref("name", "input")}} 属性を入れ忘れてはいけません。さもないと、テキスト入力欄の値が送信されるデータに含まれなくなります。</p>
+
+<h3 id="Setting_placeholders" name="Setting_placeholders">プレイスホルダーの設定</h3>
+
+<p> {{htmlattrxref("placeholder","input")}} 属性を使用して、テキスト入力欄の内部に有用なプレイスホルダーを提供することで、何を入力すればよいかのヒントを提供することができます。次の例を見てください。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="uname"&gt;Choose a username: &lt;/label&gt;
+    &lt;input type="text" id="uname" name="name"
+           placeholder="Lower case, all one word"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>プレイスホルダーがどう表示されるかを以下で確認できます。</p>
+
+<p>{{EmbedLiveSample("Setting_placeholders", 600, 50)}}</p>
+
+<p>プレイスホルダーはふつう、要素の前景色よりも薄い色で表示され、ユーザーが入力欄にテキストを入力し始めると (または、 <code>value</code> 属性に設定することで、プログラム的に値を設定する場合も) 自動的に消滅します。</p>
+
+<h3 id="Physical_input_element_size" name="Physical_input_element_size">物理的な入力要素の寸法</h3>
+
+<p>入力ボックスの物理的な寸法は、 {{htmlattrxref("size", "input")}} 属性を使って制御することができます。これによって、テキスト入力欄が一度に表示できる文字数を指定することができます。これは要素の幅に影響し、幅をピクセル数ではなく文字数で指定することができます。例えば、この例の中では、入力欄は30文字の幅です。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="uname"&gt;Choose a username: &lt;/label&gt;
+    &lt;input type="text" id="uname" name="name"
+           placeholder="Lower case, all one word"
+           size="30"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{ EmbedLiveSample('Physical_input_element_size', 600, 50) }}</p>
+
+<h2 id="Validation" name="Validation">検証</h2>
+
+<p><code>text</code> 型の <code>&lt;input&gt;</code> 要素は、適用される自動的な検証はありませんが (基本的なテキスト入力欄は、自由な文字列を受け付けることが求められるからです)、以下に解説するように、クライアント側の検証のオプションがいくつか利用できます。</p>
+
+<div class="note">
+<p><strong>注</strong>: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するサーバースクリプトの代用には<em>なりません</em>。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、間違った種類のデータなど) がデータベースに入力された場合に災害が発生するおそれがあります。</p>
+</div>
+
+<h3 id="A_note_on_styling" name="A_note_on_styling">スタイルにおけるメモ</h3>
+
+<p>ユーザーにとって値が妥当かそうでないかが分かりやすくなるように、フォーム要素のスタイル付けに便利な擬似クラスが利用できます。 {{cssxref(":valid")}} および {{cssxref(":invalid")}} です。この節では、以下の CSS を使用して入力欄の値が妥当であれば隣にチェックマークを表示し、妥当な値でなければ隣にバツ (X) マークを表示します。</p>
+
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute; content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+
+<p>このテクニックにはフォーム要素の後に配置される {{htmlelement("span")}} 要素も必要で、これがアイコンのホルダーとして動作します。ブラウザーによっては一部の入力型で、直後に配置されたアイコンをうまく表示できないことがあるのでこれが必要です。</p>
+
+<h3 id="Making_input_required" name="Making_input_required">入力を必須にする</h3>
+
+<p>入力を行わないとフォームの送信が許可されないようにするための簡単な方法として、 {{htmlattrxref("required","input")}} 属性を使うことができます。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="uname"&gt;Choose a username: &lt;/label&gt;
+    &lt;input type="text" id="uname" name="name" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre>
+</div>
+
+<p>次のように表示されます。</p>
+
+<p>{{ EmbedLiveSample('Making_input_required', 600, 70) }}</p>
+
+<p>検索用語を入力せずにフォームを送信しようとした場合、ブラウザーはエラーメッセージを表示します。</p>
+
+<h3 id="Input_value_length" name="Input_value_length">入力値の長さ</h3>
+
+<p> {{htmlattrxref("minlength", "input")}} 属性を使用して入力された値の最小の長さ (文字数) を指定することができます。同様に、 {{htmlattrxref("maxlength", "input")}} を使用して入力された値の最大長を文字数で設定します。</p>
+
+<p>以下の例では、入力値が4～8文字の長さであることが求められます。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="uname"&gt;Choose a username: &lt;/label&gt;
+    &lt;input type="text" id="uname" name="name" required size="10"
+           placeholder="Username"
+           minlength="4" maxlength="8"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre>
+</div>
+
+<p>以下のように表示されます。</p>
+
+<p>{{ EmbedLiveSample('Input_value_length', 600, 70) }}</p>
+
+<p>４文字未満でフォームを送信しようとすると、適切なエラーメッセージが表示されます (ブラウザーによって異なります)。８文字を超えて入力しようとしても、ブラウザーが許しません。</p>
+
+<div class="note">
+<p><strong>Note:</strong> <code>minlength</code> を指定して <code>required</code> を指定しないと、ユーザーが値を指定する必要がなくなるので、入力は妥当と判断されます。</p>
+</div>
+
+<h3 id="Specifying_a_pattern" name="Specifying_a_pattern">パターンの指定</h3>
+
+<p> {{htmlattrxref("pattern","input")}} 属性を使用して、入力値が妥当と判断されるために一致しなければならない正規表現を指定することができます (入力値を検証するために正規表現を使うための短期コースは<a href="/ja/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression">正規表現による検証</a>をご覧ください)。</p>
+
+<p>以下の例では、4～8文字の値で、英小文字のみが含まれているという要件の制約を与えます。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="uname"&gt;Choose a username: &lt;/label&gt;
+    &lt;input type="text" id="uname" name="name" required size="45"
+           pattern="[a-z]{4,8}"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;p&gt;Usernames must be lowercase and 4-8 characters in length.&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+p {
+  font-size: 80%;
+  color: #999;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute;
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+</div>
+
+<p>次のように表示されます。</p>
+
+<p>{{ EmbedLiveSample('Specifying_a_pattern', 600, 110) }}</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p> <a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">最初の HTML フォーム</a>および <a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">HTML フォームの構成方法</a>の記事の文脈で、良いテキスト入力欄の例を見ることができます。</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', 'input.html#text-(type=text)-state-and-search-state-(type=search)', '&lt;input type="text"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>初回定義</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#text-typetext-state-and-search-state-typesearch', '&lt;input type="text"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</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-text")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/HTML/Forms">HTML フォーム</a></li>
+ <li>{{HTMLElement("input")}} およびそれに基づく {{domxref("HTMLInputElement")}} インターフェイス</li>
+ <li><code><a href="/ja/docs/Web/HTML/Element/input/search">&lt;input type="search"&gt;</a></code></li>
+ <li>{{HTMLElement("textarea")}}: 複数行のテキスト入力欄</li>
+ <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li>
+</ul>
diff --git a/files/ja/web/html/element/input/time/index.html b/files/ja/web/html/element/input/time/index.html
new file mode 100644
index 0000000000..5b27633b50
--- /dev/null
+++ b/files/ja/web/html/element/input/time/index.html
@@ -0,0 +1,554 @@
+---
+title: <input type="time">
+slug: Web/HTML/Element/input/time
+tags:
+  - Element
+  - Forms
+  - HTML
+  - HTML Input Types
+  - HTML forms
+  - HTML input
+  - Input
+  - Input Element
+  - Input Type
+  - Reference
+  - Time
+translation_of: Web/HTML/Element/input/time
+---
+<div>{{HTMLRef("Input_types")}}</div>
+
+<p><span class="seoSummary">{{htmlelement("input")}} 要素の <strong><code>time</code></strong> 型は、ユーザーが簡単に時刻 (時と分、任意で秒) を入力できるように設計された入力欄を生成します。</span></p>
+
+<p>コントロールのユーザーインターフェイスは、ブラウザーによってまちまちです。最近のブラウザーは対応が進んでおり、 Safari は有名なブラウザーの中で唯一実装していません。 Safari やその他の <code>&lt;time&gt;</code> に対応していないブラウザーでは、このコントロールは単純な <code><a href="/ja/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code> に格下げされます。</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-time.html", "tabbed-standard")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Appearance" name="Appearance">外観</h2>
+
+<h3 id="Chrome_and_Opera" name="Chrome_and_Opera">Chrome と Opera</h3>
+
+<p>Chrome/Opera では、 <code>time</code> コントロールはシンプルで、時と分をオペレーティングシステムのロケールに従って12時制または24時制で入力するスロットと、現在選択中の部分を増減するための上下の矢印から成ります。コントロールの値を消去する "X" ボタンが提供されています。</p>
+
+<p><img alt="Chrome の12時制の time input" src="https://mdn.mozillademos.org/files/16417/chrome_time.PNG" style="height: 30px; width: 93px;"> 12-hour</p>
+
+<p><img alt="Chrome の24時制の time input" src="https://mdn.mozillademos.org/files/15399/chrome-time.png" style="height: 30px; width: 79px;"> 24-hour</p>
+
+<h3 id="Firefox">Firefox</h3>
+
+<p>Firefox の <code>time</code> コントロールは Chrome のものとよく似ていますが、上下の矢印があります。これも時刻の入力には、システムのロケールに従って12時制または24時制の書式を使用します。コントロールの値を消去するための "X" ボタンがあります。</p>
+
+<p><img alt="Firefox の12時制の time input" src="https://mdn.mozillademos.org/files/15403/firefox-time.png" style="height: 29px; width: 106px;"> 12-hour</p>
+
+<p><img alt="Firefox の24時制の time input" src="https://mdn.mozillademos.org/files/16461/firefox-time-24.png" style="height: 29px; width: 80px;"> 24-hour</p>
+
+<h3 id="Edge">Edge</h3>
+
+<p>Edge の <code>time</code> コントロールはいくらかもっと精巧で、時と分を選択するスライドリールが開きます。 Chrome のように、時刻の入力にはシステムのロケールに従って12時制または24時制を使用します。</p>
+
+<p><img alt="Edge の12時制の time input" src="https://mdn.mozillademos.org/files/16418/edge_time.PNG" style="display: block; height: 290px; width: 188px;"> 12-hour</p>
+
+<p><img alt="Edge の24時制の time input" src="https://mdn.mozillademos.org/files/15401/edge-time.png" style="display: block; height: 290px; width: 129px;"> 24-hour</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value", "値")}}</strong></td>
+   <td>時刻を表す {{domxref("DOMString")}}、または空欄。</td>
+  </tr>
+  <tr>
+   <td><strong>イベント</strong></td>
+   <td>{{domxref("HTMLElement/change_event", "change")}} および {{domxref("HTMLElement/input_event", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>対応する共通属性</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("step", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL 属性</strong></td>
+   <td><code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>, <code>list</code>.</td>
+  </tr>
+  <tr>
+   <td><strong>メソッド</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value" name="Value">値</h2>
+
+<div id="value-sample1">
+<p>入力欄に入力された時刻を表す {{domxref("DOMString")}} です。 <code>&lt;input&gt;</code> 要素が作成されたときに、次のように {{htmlattrxref("value", "input")}} 属性の中に時刻を含めることで、既定値を設定することができます。</p>
+
+<pre class="brush: html notranslate">&lt;label for="appt-time"&gt;予約時刻を選んでください: &lt;/label&gt;
+&lt;input id="appt-time" type="time" name="appt-time" value="13:30"&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('value-sample1', 600, 60) }}</p>
+
+<p>次のように、 {{domxref("HTMLInputElement.value")}} プロパティを使って JavaScript の date 値を取得したり設定したりすることができます。</p>
+
+<pre class="brush: js notranslate">var timeControl = document.querySelector('input[type="time"]');
+timeControl.value = '15:30';</pre>
+
+<h3 id="Time_value_format" name="Time_value_format">時刻値の書式</h3>
+
+<p><code>time</code> 入力欄の <code>value</code> は、常に先頭にゼロを含む24時制で <code>hh:mm</code> の書式であり、ユーザーのロケール (またはユーザーエージェント) に基づいて選択される入力書式とは関係ありません。時刻が秒を含む場合 ({{anch("Using the step attribute", "step 属性の使用")}}を参照) は、書式は常に <code>hh:mm:ss</code> です。この入力型で使用される時刻の値の形式について詳しくは、 <a href="/ja/docs/Web/HTML/Date_and_time_formats">HTML で使われる日付や時刻の形式</a>の<a href="/ja/docs/Web/HTML/Date_and_time_formats#Time_strings">時刻の文字列</a>をご覧ください。</p>
+
+<p>この例では、時刻を入力すると time 入力欄の値が、どのように変化するかを見ることができます。</p>
+
+<p>最初に、 HTML を見てください。これは以前見たラベルと入力欄だけで十分にシンプルですが、 {{HTMLElement("p")}} 要素と、 <code>time</code> 入力欄の値を表示する {{HTMLElement("span")}} があります。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label for="startTime"&gt;開始時刻: &lt;/label&gt;
+  &lt;input type="time" id="startTime"&gt;
+  &lt;p&gt;
+    &lt;code&gt;time&lt;/code&gt; 入力欄の値: &lt;code&gt;
+            "&lt;span id="value"&gt;n/a&lt;/span&gt;"&lt;/code&gt;.
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<p>JavaScript コードは、 time 入力欄に {{domxref("HTMLElement/input_event", "input")}} イベントを監視するコードを追加し、 input 要素の中身が変更されるたびに呼び出されるようにします。これが発生すると、 <code>&lt;span&gt;</code> 要素の中身が input 要素の新しい値で置き換えられます。</p>
+
+<pre class="brush: js notranslate">var startTime = document.getElementById("startTime");
+var valueSpan = document.getElementById("value");
+
+startTime.addEventListener("input", function() {
+  valueSpan.innerText = startTime.value;
+}, false);</pre>
+
+<p>{{EmbedLiveSample("Time_value_format", 600, 80)}}</p>
+
+<p><code>time</code> 入力欄を含むフォームが送信されると、フォームのデータに含められる前に値がエンコードされます。 time 入力欄のフォームのデータ項目は、常に <code>name=hh%3Amm</code> の形式か、秒が含まれる場合は <code>name=hh%3Amm%3ass</code> の形式になります ({{anch("Using the step attribute", "step 属性の利用")}}を参照してください)。</p>
+
+<p>追加の属性</p>
+
+<p>すべての {{HTMLElement("input")}} 要素で共通する属性に加え、 <code>time</code> 型の入力欄は次の属性にも対応しています。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("list")}}</code></td>
+   <td>任意の定義済みの自動補完オプションを含む&lt;datalist&gt; 要素の id</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("max")}}</code></td>
+   <td>受け付ける最も遅い時刻、{{anch("Time value format", "時刻値の書式")}}の構文による</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("min")}}</code></td>
+   <td>妥当な入力として受け付ける最も早い時刻</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("readonly")}}</code></td>
+   <td>論理属性で、存在する場合、 <code>time</code> 入力欄の内容はユーザーが編集できないことを示す</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("step")}}</code></td>
+   <td>ユーザーインターフェイスや制約検証に使用する刻み値</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="callout-box">多くのデータ型とは異なり、時刻値は<strong>周期的範囲</strong>を持ち、値が最大値に達すると、最初の値に折り返します。例えば、 <code>min</code> を <code>14:00</code> に、 <code>max</code> を <code>2:00</code> に設定すると、許可される時間の値は午後2時から始まり、深夜を経て次の日の午前2時で終わります。詳しくは、この記事の<a href="#Making_min_and_max_cross_midnight">最小値と最大値が真夜中をまたぐようにする</a>の節をご覧ください。</div>
+
+<p id="htmlattrdeflist">{{page("/ja/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p>
+
+<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3>
+
+<p>文字列で、受け付ける最も遅い時刻を示し、前述の同じ{{anch("Time value format", "時刻値の書式")}}で指定します。指定された文字列が妥当な時刻でなければ、最大値は設定されません。</p>
+
+<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3>
+
+<p>文字列で、受け付ける最も速い時刻を示し、前述の{{anch("Time value format", "時刻値の書式")}}で与えられます。指定された値が妥当な時刻の文字列でなければ、最小値は設定されません。</p>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>
+
+<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/number", "step-include")}}</p>
+
+<p><code>time</code> 入力欄では、 <code>step</code> の値は秒数で指定され、 1000 が乗じられます (ミリ秒単位の数値であるため)。 <code>step</code> の既定値は 60 であり、60秒 (1分、60000ミリ秒) を表します。</p>
+
+<p><em>現時点で、 <code>time</code> 入力欄で <code>step</code> に <code>any</code> の値が何を意味するかが不明確です。これは情報が決定次第、更新されるでしょう。</em></p>
+
+<h2 id="Using_time_inputs" name="Using_time_inputs">time 入力欄の利用</h2>
+
+<p>日時の入力型の中で <code>time</code> はブラウザーが最も広く対応していますが、まだすべてとは言えないため、日付と時刻を入力する代替手段を提供する必要があり、そうすれば Safari のユーザー (およびその他の未対応のブラウザーのユーザー) も簡単に時刻の値を入力できるようになります。</p>
+
+<p><code>&lt;input type="time"&gt;</code> の基本的な使い方と少し複雑な使い方を見てみてから、その後でブラウザーの互換性の問題を緩和するアドバイスを提供しましょう ({{anch("Handling browser support", "ブラウザーの互換性の扱い")}}を参照してください)。</p>
+
+<h3 id="Basic_uses_of_time" name="Basic_uses_of_time">時刻入力欄の基本的な使用</h3>
+
+<p>もっとも単純な <code>&lt;input type="time"&gt;</code> の使用方法は、次のような基本的な <code>&lt;input&gt;</code> と {{htmlelement("label")}} 要素の組み合わせです。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label for="appt-time"&gt;予約時刻を選んでください: &lt;/label&gt;
+  &lt;input id="appt-time" type="time" name="appt-time"&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Basic_uses_of_time', 600, 40)}}</p>
+
+<h3 id="Controlling_input_size" name="Controlling_input_size">入力欄の寸法の制御</h3>
+
+<p><code>&lt;input type="time"&gt;</code> は、 {{htmlattrxref("size", "input")}} のようなコントロールの寸法に関する属性には対応していません。寸法を変更する必要がある場合は、 <a href="/ja/docs/Web/CSS">CSS</a> を使用する必要があります。</p>
+
+<h3 id="Using_the_step_attribute" name="Using_the_step_attribute">step 属性の使用</h3>
+
+<p>{{htmlattrxref("step", "input")}} 属性を使用して、時刻を上下させるときに加減する時間の大きさを変更することができます (例えば、小さな矢印ウィジェットをクリックしたときに10分単位で時刻が動くように)。</p>
+
+<div class="note">
+<p>このプロパティはブラウザー間で異なる結果になることがあり、完全に信頼できるものではありません。</p>
+</div>
+
+<p>これは整数の値を取り、増加させたい秒数と同じ値になります。既定値は60秒、または1分です。60秒 (1分) よりも小さな値を指定した場合は、 <code>time</code> 入力欄は時と分の隣に秒の入力領域を表示します。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label for="appt-time"&gt;予約時刻を選んでください: &lt;/label&gt;
+  &lt;input id="appt-time" type="time" name="appt-time" step="2"&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Using_the_step_attribute', 600, 40)}}</p>
+
+<p>上下の操作を行う矢印を表示するブラウザーである Chrome と Opera では、矢印をクリックすると秒の値が2秒単位で変わりますが、時と分には影響しません。分 (または時) の刻みは、分 (または時) の数を秒数で指定した場合のみ使用されます (120 で2分刻み、 7200 で2時間刻みなど)。</p>
+
+<p>Firefox では矢印はなく、 <code>step</code> の値は使用されません。しかし、この値を提供すると、秒の入力欄が分の部分のとなりに追加されます。</p>
+
+<p>step の値は Edge には効果がないようです。</p>
+
+<div class="note">
+<p><code>step</code> を使用しても、検証は正しく動作しないようです (次の節にある通り)。</p>
+</div>
+
+<h2 id="Validation" name="Validation">検証</h2>
+
+<p>既定では、 <code>&lt;input type="time"&gt;</code> は入力された値の検証を行いません。ユーザーインターフェイスの実装は一般的に、日付でないものの入力をさせないからです。 (<code>time</code> 入力欄をユーザーエージェントが完全に対応していると仮定すれば) これは便利ですが、値を空文字列 (<code>""</code>) にすることが許されているため、値が正しい時刻文字列であることを完全に信頼することはできません。また、およそ妥当な時刻に見えるが正しくない値、例えば <code>25:05</code> を入力したりすることが可能です。</p>
+
+<h3 id="Setting_maximum_and_minimum_times" name="Setting_maximum_and_minimum_times">時刻の最大値と最小値の設定</h3>
+
+<p>{{htmlattrxref("min", "input")}} および {{htmlattrxref("max", "input")}} 属性を使用して、ユーザーが選択できる時刻を制限することができます。次の例では、時刻の最小値を <code>12:00</code> に、時刻の最大値を <code>18:00</code> に設定しています。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label for="appt-time"&gt;予約時刻を選んでください (営業時間 12:00～18:00): &lt;/label&gt;
+  &lt;input id="appt-time" type="time" name="appt-time"
+         min="12:00" max="18:00"&gt;
+  &lt;span class="validity"&gt;&lt;/span&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Setting_maximum_and_minimum_times', 600, 40)}}</p>
+
+<p>上記の例の CSS です。 CSS の {{cssxref(":valid")}} および {{cssxref(":invalid")}} プロパティを使用して、現在の値が有効かどうかに基づいてスタイルを設定しています。アイコンは入力欄そのものではなく、入力欄の隣の {{htmlelement("span")}} に置くようにしないと、 Chrome ではコントロールの内側にコンテンツを生成するので、正しく整形したり表示したりすることができません。</p>
+
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute;
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+
+<p>ここでの結果は次のようになります。</p>
+
+<ul>
+ <li>12:00 から 18:00 までの時刻だけが有効として表示されます。この範囲を外れた時刻は無効として表示されます。</li>
+ <li>使用しているブラウザーによっては、指定された範囲を外れた時刻が選択できることが分かります (Edge など)。</li>
+</ul>
+
+<h4 id="Making_min_and_max_cross_midnight" name="Making_min_and_max_cross_midnight">最小値と最大値が真夜中をまたぐようにする</h4>
+
+<p>{{htmlattrxref("min", "input")}} 属性に {{htmlattrxref("max", "input")}} 属性よりも大きな値を設定することで、有効な時間帯が真夜中をまたぐようにするために、有効な時間帯を真夜中で折り返させることができます。この機能は他の入力型では対応していません。この機能は<a href="https://html.spec.whatwg.org/C/#has-a-reversed-range">仕様書内</a>に存在するものの、まだ全体では対応されていません。 Chrome ベースのブラウザーでは82版から対応しており、 Firefox は76版から対応しています。 Safari が追加するかどうか、いつ追加するかはまだ情報がありません。そうなることを見越して、準備しておきましょう。</p>
+
+<pre class="brush: js notranslate">const input = document.createElement('input');
+input.type = 'time';
+input.min = '23:00';
+input.max = '01:00';
+input.value = '23:59';
+
+if (input.validity.valid &amp;&amp; input.type === 'time') {
+  // &lt;input type=time&gt; が範囲の折り返しに対応している
+} else {
+  // &lt;input type=time&gt; が範囲の折り返しに対応していない
+}
+</pre>
+
+<h3 id="Making_times_required" name="Making_times_required">時刻を必須にする</h3>
+
+<p>加えて、 {{htmlattrxref("required", "input")}} 属性を使用して、時刻の入力を必須にすることができます。結果として、対応するブラウザーでは設定範囲外または空欄の time 入力欄を送信しようとすると、エラーを表示します。</p>
+
+<p>例を見てみましょう。時刻の最小値と最大値を設定し、かつ入力欄を必須に設定しています。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="appt-time"&gt;予約時刻を選んでください (営業時間 12:00～18:00): &lt;/label&gt;
+    &lt;input id="appt-time" type="time" name="appt-time"
+           min="12:00" max="18:00" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+      &lt;input type="submit" value="フォームを送信"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>フォームに不完全な時刻 (または設定された範囲外の時刻) を設定して送信しようとすると、ブラウザーはエラーを表示します。例を実行してみてください。</p>
+
+<p>{{ EmbedLiveSample('Making_times_required', 600, 120) }}</p>
+
+<p><code>time</code> 入力欄に対応していないブラウザーを使用している場合は、こちらのスクリーンショットを参照してください。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15405/firefox-validation-message.png" style="display: block; margin: 0 auto;"></p>
+
+<div class="warning">
+<p><strong>重要</strong>: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用にはなりません。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、間違った種類のデータなど) が送信された場合に災害が発生するおそれがあります。</p>
+</div>
+
+<h2 id="Handling_browser_support" name="Handling_browser_support">ブラウザーの対応の扱い</h2>
+
+<p>前述の通り、 Safari やその他の少数派のブラウザーは、まだ time 入力欄にネイティブに対応していません。一般に、それ以外では、よく対応されています。 — 特にモバイルプラットフォームでは、時刻の値を指定するのにとても良いユーザーインターフェイスを持つ傾向があります。例えば、 Android 版 Chrome の <code>time</code> ピッカーは次のようになっています。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15407/chrome-android-time.png" style="display: block; margin: 0 auto;"></p>
+
+<p>対応していないブラウザーでは、文字列入力欄に安全に格下げされますが、これはユーザーインターフェイスの一貫性 (表示されるコントロールが異なること) とデータの扱いの両方で問題を生みます。</p>
+
+<p>2番目の問題はより深刻です。すでに述べたように、 <code>time</code> 入力欄では、実際の値が常に <code>hh:mm</code> または <code>hh:mm:ss</code> の書式で正規化されます。一方、文字列入力欄では、既定でブラウザーは時刻がどの書式で入力されるかの認識がなく、以下のように人間が時刻を書く様々な方法で入力される可能性があります。</p>
+
+<ul>
+ <li><code>3.00 pm</code></li>
+ <li><code>3:00pm</code></li>
+ <li><code>15:00</code></li>
+ <li><code>午後3時</code></li>
+ <li>etc.</li>
+</ul>
+
+<p>これを回避する方法の一つとして、 <code>time</code> 入力欄に {{htmlattrxref("pattern", "input")}} 属性を付けるという方法があります。 <code>time</code> 入力欄はこれを使用しないので、 <code>text</code> 入力欄にフォールバックされたときにに使用されます。例えば、次の例を未対応のブラウザーで見てみてください。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="appt-time"&gt;予約時刻を選んでください (営業時間 12:00～18:00): &lt;/label&gt;
+    &lt;input id="appt-time" type="time" name="appt-time"
+           min="12:00" max="18:00" required
+           pattern="[0-9]{2}:[0-9]{2}"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+      &lt;input type="submit" value="フォームを送信"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Handling_browser_support', 600, 100)}}</p>
+
+<p><code>nn:nn</code> のパターン (<code>n</code> は数字の0から9) に一致しない文字列を入力して送信しようとすると、エラーメッセージが表示される (そして入力欄が無効として強調表示される) のが分かるでしょう。もちろん、これではユーザーが無効な日付を入力したり、誤った形式で日付や時刻を入力したりすることを止めることはできません。</p>
+
+<p>それから、ユーザーからはどの様な時刻の書式が期待されているかが正確にわからないという問題があります。</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute;
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+</div>
+
+<p>ブラウザーに依存しない方法によってフォームで時刻を扱う最善の方法は、現時点では、時と分 (および必要であれば秒) を別々なコントロール ({{htmlelement("select")}} 要素が一般的です。以下の実装を見てください) にするか、 <a href="http://timepicker.co/">jQuery timepicker plugin</a> のような JavaScript ライブラリを使用することです。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例では、時刻を選択するユーザーインターフェイスの要素を2組生成します。ネイティブの <code>&lt;input type="time"&gt;</code> 入力欄と、ネイティブの入力に対応しない古いブラウザー向けの、2つの {{htmlelement("select")}} 要素による時刻選択です。</p>
+
+<p>{{EmbedLiveSample('Examples', 600, 140)}}</p>
+
+<p>HTML は次のようになります。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div class="nativeTimePicker"&gt;
+    &lt;label for="appt-time"&gt;予約時刻を選んでください (営業時間 12:00～18:00): &lt;/label&gt;
+      &lt;input id="appt-time" type="time" name="appt-time"
+             min="12:00" max="18:00" required&gt;
+      &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/div&gt;
+  &lt;p class="fallbackLabel"&gt;予約時刻を選んでください (営業時間 12:00～18:00):&lt;/p&gt;
+  &lt;div class="fallbackTimePicker"&gt;
+    &lt;div&gt;
+      &lt;span&gt;
+        &lt;select id="hour" name="hour"&gt;
+        &lt;label for="hour"&gt;時&lt;/label&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;select id="minute" name="minute"&gt;
+        &lt;label for="minute"&gt;分&lt;/label&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p><code>&lt;select&gt;</code> 要素に入れる時と分の値は、動的に生成されます。</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute;
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+</div>
+
+<p>もう一つの面白い部分は、機能の検出コードです。ブラウザーが <code>&lt;input type="time"&gt;</code> に対応しているかどうかを検出するために、新たな {{htmlelement("input")}} 要素を生成し、その <code>type</code> を <code>time</code> に設定してみて、すぐにどの type に設定されたかをチェックします。 <code>time</code> 型に対応していないブラウザーでは、 <code>time</code> 型が <code>text</code> 型で代替されます。 <code>&lt;input type="time"&gt;</code> に対応していない場合は、ネイティブの時刻入力欄を非表示にしてフォールバック用の ({{htmlelement("select")}}) による選択ユーザーインターフェイスを表示します。</p>
+
+<pre class="brush: js notranslate">// 変数の宣言
+var nativePicker = document.querySelector('.nativeTimePicker');
+var fallbackPicker = document.querySelector('.fallbackTimePicker');
+var fallbackLabel = document.querySelector('.fallbackLabel');
+
+var hourSelect = document.querySelector('#hour');
+var minuteSelect = document.querySelector('#minute');
+
+// 最初はフォールバックを非表示にする
+fallbackPicker.style.display = 'none';
+fallbackLabel.style.display = 'none';
+
+// 新しい日付入力が文字列入力にフォールバックされるかどうか
+var test = document.createElement('input');
+
+try {
+  test.type = 'time';
+} catch (e) {
+  console.log(e.description);
+}
+
+// もし文字列入力になるならば、 if() {} ブロックの中のコードを実行する
+if(test.type === 'text') {
+  // ネイティブの日付選択を隠してフォールバック版を表示
+  nativePicker.style.display = 'none';
+  fallbackPicker.style.display = 'block';
+  fallbackLabel.style.display = 'block';
+
+  // 時と分を動的に生成する
+  populateHours();
+  populateMinutes();
+}
+
+function populateHours() {
+  // 時刻の &lt;select&gt; に営業時間の6時間分を生成する
+  for(var i = 12; i &lt;= 18; i++) {
+    var option = document.createElement('option');
+    option.textContent = i;
+    hourSelect.appendChild(option);
+  }
+}
+
+function populateMinutes() {
+  // 分の &lt;select&gt; に1時間内の60分を生成する
+  for(var i = 0; i &lt;= 59; i++) {
+    var option = document.createElement('option');
+    option.textContent = (i &lt; 10) ? ("0" + i) : i;
+    minuteSelect.appendChild(option);
+  }
+}
+
+// 時が18になったら、分を00に設定する
+// — 18:00 以降を選択できなくする
+ function setMinutesToZero() {
+   if(hourSelect.value === '18') {
+     minuteSelect.value = '00';
+   }
+ }
+
+ hourSelect.onchange = setMinutesToZero;
+ minuteSelect.onchange = setMinutesToZero;</pre>
+
+<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#time-state-(type=time)', '&lt;input type="time"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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-time")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>全般的な {{HTMLElement("input")}} およびその操作に使用する {{domxref("HTMLInputElement")}} インターフェイス</li>
+ <li><a href="/ja/docs/Web/HTML/Date_and_time_formats">HTML で使われる日付や時刻の形式</a></li>
+ <li><a href="/ja/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">日付と時刻の選択のチュートリアル</a></li>
+ <li><code><a href="/ja/docs/Web/HTML/Element/input/datetime-local">&lt;input type="datetime-local"&gt;</a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/date">&lt;input type="date"&gt;</a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/week">&lt;input type="week"&gt;</a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/month">&lt;input type="month"&gt;</a></code></li>
+ <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li>
+</ul>
diff --git a/files/ja/web/html/element/input/url/index.html b/files/ja/web/html/element/input/url/index.html
new file mode 100644
index 0000000000..bfb3d59913
--- /dev/null
+++ b/files/ja/web/html/element/input/url/index.html
@@ -0,0 +1,427 @@
+---
+title: <input type="url">
+slug: Web/HTML/Element/input/url
+tags:
+  - Element
+  - Form Control
+  - Form Inputs
+  - Forms
+  - HTML
+  - HTML Input Types
+  - HTML forms
+  - Input
+  - Input Type
+  - Reference
+  - Text
+  - URL
+  - control
+translation_of: Web/HTML/Element/input/url
+---
+<div>{{HTMLRef("Input_types")}}</div>
+
+<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <code><strong>url</strong></code> 型は、ユーザーに URL を入力および編集させるために使用します。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-url.html", "tabbed-shorter")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>入力値はフォームの送信前に自動的に検証され、空欄または正しい形式の URL のどちらかであることが確認されます。 CSS の {{cssxref(":valid")}} および {{cssxref(":invalid")}} 擬似クラスが自動的に適用され、フィールド上の現在の値が妥当なメールアドレスであるかどうかを視覚的に示します。</p>
+
+<p><code>url</code> 型に対応していないブラウザーでは、 <code>url</code> 入力欄は標準の {{HTMLElement("input/text", "text")}} 入力欄で代替されます。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value", "値")}}</strong></td>
+   <td>URL を表す {{domxref("DOMString")}}、または空欄</td>
+  </tr>
+  <tr>
+   <td><strong>イベント</strong></td>
+   <td>{{event("change")}} および {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>対応している共通属性</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}}, {{htmlattrxref("size", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL 属性</strong></td>
+   <td><code>list</code>, <code>value</code>, <code>selectionEnd</code>, <code>selectionDirection</code></td>
+  </tr>
+  <tr>
+   <td><strong>メソッド</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value" name="Value">値</h2>
+
+<p>{{HTMLElement("input")}} 要素の {{htmlattrxref("value", "input")}} 属性は {{domxref("DOMString")}} で、自動的に URL の構文として検証されます。より具体的に言うと、検証を通る値の書式は下記の2通りがあります。</p>
+
+<ol>
+ <li>空文字列 ("")。ユーザーが値を入力しないか、または値が削除されたことを表します。</li>
+ <li>単一の正しい形式の絶対 URL。 URL が実在する必要はありませんが、少なくとも正しい書式です。簡単に言えば、 <code>urlscheme://restofurl</code> の形です。</li>
+</ol>
+
+<p>{{anch("Validation", "検証")}}の節で、どのようなメールアドレスが正しい形式であると検証されるかの詳細を参照してください。</p>
+
+<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2>
+
+<p>型に関係なくすべての {{HTMLElement("input")}} 要素を操作する属性に加え、 <code>url</code> 型の入力欄は次の属性にも対応しています。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">属性</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("list")}}</code></td>
+   <td>オプションで自動補完の定義済みの選択肢を含む &lt;datalist&gt; 要素の id</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("maxlength")}}</code></td>
+   <td>入力欄が受け付ける最大文字数</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("minlength")}}</code></td>
+   <td>入力欄が取りうる、妥当と判断される最小文字列長</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("pattern")}}</code></td>
+   <td>妥当と判断されるために、入力欄の内容が一致する必要がある正規表現</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("placeholder")}}</code></td>
+   <td>空欄の時に入力欄に表示される入力例の値</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("readonly")}}</code></td>
+   <td>入力欄の内容を読み取り専用にするかどうかを示す論理属性</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("size")}}</code></td>
+   <td>入力欄の長さを何文字分にするかを表す数値</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("spellcheck")}}</code></td>
+   <td>入力欄でスペルチェックを有効にするかどうか、既定のスペルチェック構成を利用するかを制御する</td>
+  </tr>
+ </tbody>
+</table>
+
+<p id="htmlattrdeflist">{{page("/ja/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p>
+
+<h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3>
+
+<p>ユーザーが <code>url</code> 入力欄に入力することができる (UTF-16 コード単位での) 最大文字数です。 0 以上の整数値である必要があります。 <code>maxlength</code> が指定されていないか、無効な値が指定されていると、 <code>url</code> 入力欄には最大文字数が設定されません。この値は <code>minlength</code> の値以上である必要もあります。</p>
+
+<p>フィールドの URL の長さが UTF-16 コード単位で <code>maxlength</code> の長さを超えていると、その入力欄は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。</p>
+
+<h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3>
+
+<p>ユーザーが <code>url</code> 入力欄に入力することができる (UTF-16 コード単位での) 最小文字数です。これは非負の整数値で、 <code>maxlength</code> で指定された値以下である必要があります。 <code>minlength</code> が指定されていないか、無効な値が指定されていると、 <code>url</code> 入力欄には最小文字数が設定されません。</p>
+
+<p>入力欄の URL の長さが UTF-16 コード単位で <code>minlength</code> の長さよりも短いと、その入力欄は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。</p>
+
+<h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/text", "pattern-include")}}</p>
+
+<p>詳細と例については{{anch("Pattern validation", "パターン検証")}}の節を参照してください。</p>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/text", "spellcheck", 0, 1, 2)}}</p>
+
+<h2 id="Non-standard_attributes" name="Non-standard_attributes">標準外の属性</h2>
+
+<p>ブラウザーによっては、以下の標準外の属性が利用できます。一般的な規則として、できれば使用することを避けてください。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">属性</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("autocorrect")}}</code></td>
+   <td>オートコレクトを行うかどうかを <code>on</code> または <code>off</code> で示します。 <strong>Safari のみ。</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("mozactionhint")}}</code></td>
+   <td>入力欄を編集している間、ユーザーが <kbd>Enter</kbd> または <kbd>Return</kbd> キーを押したときに実行されるアクションを示す文字列です。これは仮想キーボードのキーに適切なラベルを特定するために使用します。 <strong>Android 版 Firefox for のみ。</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/text", "autocorrect", 0, 1, 2)}}</p>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/text", "mozactionhint", 0, 1, 2)}}</p>
+
+<h2 id="Using_URL_inputs" name="Using_URL_inputs">URL 入力欄の使用</h2>
+
+<p>When you create a URL input with the proper <code>type</code> value, <code>url</code>, you get automatic validation that the entered text is at least in the correct form to potentially be a legitimate URL. This can help avoid cases in which the user mis-types their web site's address, or provides an invalid one.</p>
+
+<p>It's important, however, to note that this is not enough to ensure that the specified text is a URL which actually exists, corresponds to the user of the site, or is acceptable in any other way. It simply ensures that the value of the field is properly formatted to be a URL.</p>
+
+<div class="note">
+<p><strong>注</strong>: ユーザーが HTML をその場面の裏でいじることができることを意識しておくことは極めて重要です。ですから、安全を目的として、サイトでクライアント側の値検証機能のみを使用しては<em>いけません</em>。何らかのセキュリティ上の問題を含む可能性がある値が提供されるトランザクションの場合は、いずれもサーバー側で値検証を行う<em>必要があります</em>。</p>
+</div>
+
+<h3 id="A_simple_URL_input" name="A_simple_URL_input">A simple URL input</h3>
+
+<p>Currently, all browsers which implement this element implement it as a standard text input field with basic validation features. In its most basic form, a URL input can be implemented like this:</p>
+
+<pre class="brush: html notranslate">&lt;input id="myURL" name="myURL" type="url"&gt;</pre>
+
+<p>{{ EmbedLiveSample('A_simple_URL_input', 600, 40) }}</p>
+
+<p>Notice that it's considered valid when empty and when a single validly-formatted URL address is entered, but is otherwise not considered valid. By adding the {{htmlattrxref("required", "input")}} attribute, only properly-formed URLs are allowed; the input is no longer considered valid when empty.</p>
+
+<p>There is nothing magical going on here. Submitting this form would cause the following data to be sent to the server: <code>myURL=http%3A%2F%2Fwww.example.com</code>. Note how characters are escaped as necessary.</p>
+
+<h3 id="Placeholders">Placeholders</h3>
+
+<p>Sometimes it's helpful to offer an in-context hint as to what form the input data should take. This can be especially important if the page design doesn't offer descriptive labels for each {{HTMLElement("input")}}. This is where <strong>placeholders</strong> come in. A placeholder is a value that demonstrates the form the <code>value</code> should take by presenting an example of a valid value, which is displayed inside the edit box when the element's <code>value</code> is "". Once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.</p>
+
+<p>Here, we have a <code>url</code> input with the placeholder <code>http://www.example.com</code>. Note how the placeholder disappears and reappears as you manipulate the contents of the edit field.</p>
+
+<pre class="brush: html notranslate">&lt;input id="myURL" name="myURL" type="url"
+       placeholder="http://www.example.com"&gt;</pre>
+
+<p>{{ EmbedLiveSample('Placeholders', 600, 40) }}</p>
+
+<h3 id="Controlling_the_input_size">Controlling the input size</h3>
+
+<p>You can control not only the physical length of the input box, but also the minimum and maximum lengths allowed for the input text itself.</p>
+
+<h4 id="Physical_input_element_size">Physical input element size</h4>
+
+<p>The physical size of the input box can be controlled using the {{htmlattrxref("size", "input")}} attribute. With it, you can specify the number of characters the input box can display at a time. In this example, for instance, the <code>url</code> edit box is 30 characters wide:</p>
+
+<pre class="brush: html notranslate">&lt;input id="myURL" name="myURL" type="url"
+       size="30"&gt;</pre>
+
+<p>{{ EmbedLiveSample('Physical_input_element_size', 600, 40) }}</p>
+
+<h4 id="Element_value_length">Element value length</h4>
+
+<p>The <code>size</code> is separate from the length limitation on the entered URL itself. You can specify a minimum length, in characters, for the entered URL using the {{htmlattrxref("minlength", "input")}} attribute; similarly, use {{htmlattrxref("maxlength", "input")}} to set the maximum length of the entered URL. If <code>maxLength</code> exceeds <code>size</code>, the input box's contents will scroll as needed to show the current selection or insertion point as the content is manipulated.</p>
+
+<p>The example below creates a 30-character wide URL address entry box, requiring that the contents be no shorter than 10 characters and no longer than 80 characters.</p>
+
+<pre class="brush: html notranslate">&lt;input id="myURL" name="myURL" type="url"
+       size="30" minlength="10" maxlength="80"&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Element_value_length", 600, 40) }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: These attributes also affect validation; a value shorter or longer than the specified minimum/maximum lengths will be classified as invalid; in addition most browsers will simply refuse to let the user enter a value longer than the specified maximum length.</p>
+</div>
+
+<h3 id="Providing_default_options">Providing default options</h3>
+
+<p>As always, you can provide a default value for a <code>url</code> input box by setting its {{htmlattrxref("value", "input")}} attribute:</p>
+
+<div id="Default_value">
+<pre class="brush: html notranslate">&lt;input id="myURL" name="myURL" type="url"
+       value="http://www.example.com"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Default_value", 600, 40)}}</p>
+
+<h4 id="Offering_suggested_values">Offering suggested values</h4>
+
+<p>Taking it a step farther, you can provide a list of default options from which the user can select by specifying the {{htmlattrxref("list", "input")}} attribute. This doesn't limit the user to those options, but does allow them to select commonly-used URLs more quickly. This also offers hints to {{htmlattrxref("autocomplete", "input")}}. The <code>list</code> attribute specifies the ID of a {{HTMLElement("datalist")}}, which in turn contains one {{HTMLElement("option")}} element per suggested value; each <code>option</code>'s <code>value</code> is the corresponding suggested value for the URL entry box.</p>
+
+<pre class="brush: html notranslate">&lt;input id="myURL" name="myURL" type="url"
+       list="defaultURLs"&gt;
+
+&lt;datalist id="defaultURLs"&gt;
+  &lt;option value="https://developer.mozilla.org/"&gt;
+  &lt;option value="http://www.google.com/"&gt;
+  &lt;option value="http://www.microsoft.com/"&gt;
+  &lt;option value="https://www.mozilla.org/"&gt;
+  &lt;option value="http://w3.org/"&gt;
+&lt;/datalist&gt;</pre>
+
+<p>{{EmbedLiveSample("Offering_suggested_values", 600, 40)}}</p>
+
+<p>With the {{HTMLElement("datalist")}} element and its {{HTMLElement("option")}}s in place, the browser will offer the specified values as potential values for the URL; this is typically presented as a popup or drop-down menu containing the suggestions. While the specific user experience may vary from one browser to another, typically clicking in the edit box presents a drop-down of the suggested URLs. Then, as the user types, the list is adjusted to show only matching values. Each typed character narrows down the list until the user makes a selection or types a custom value.</p>
+
+<h4 id="Using_labels_for_suggested_values">Using labels for suggested values</h4>
+
+<p>You can opt to include the {{htmlattrxref("label", "option")}} attribute on one or all of your <code>&lt;option&gt;</code> elements to provide textual labels. Some browsers may display only the labels, while others may display both the label and the URL.</p>
+
+<pre class="brush: html notranslate">&lt;input id="myURL" name="myURL" type="url"
+       list="defaultURLs"&gt;
+
+&lt;datalist id="defaultURLs"&gt;
+  &lt;option value="https://developer.mozilla.org/" label="MDN Web Docs"&gt;
+  &lt;option value="http://www.google.com/" label="Google"&gt;
+  &lt;option value="http://www.microsoft.com/" label="Microsoft"&gt;
+  &lt;option value="https://www.mozilla.org/" label="Mozilla"&gt;
+  &lt;option value="http://w3.org/" label="W3C"&gt;
+&lt;/datalist&gt;</pre>
+
+<p>{{EmbedLiveSample("Using_labels_for_suggested_values", 600, 40)}}</p>
+
+<h2 id="Validation">Validation</h2>
+
+<p>There are two levels of content validation available for <code>url</code> inputs. First, there's the standard level of validation offered to all {{HTMLElement("input")}}s, which automatically ensures that the contents meet the requirements to be a valid URL. But there's also the option to add additional filtering to ensure that your own specialized needs are met, if you have any.</p>
+
+<div class="warning">
+<p><strong>Important</strong>: HTML form validation is <em>not</em> a substitute for scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database.</p>
+</div>
+
+<h3 id="Basic_validation">Basic validation</h3>
+
+<p>Browsers that support the <code>url</code> input type automatically provide validation to ensure that only text that matches the standard format for URLs is entered into the input box.</p>
+
+<p>The syntax of a URL is fairly intricate. It's defined by WHATWG's <a href="https://url.spec.whatwg.org/">URL Living Standard</a> and is described for newcomers in our article <a href="/ja/docs/Learn/Common_questions/What_is_a_URL">What is a URL?</a></p>
+
+<h3 id="Making_a_URL_required">Making a URL required</h3>
+
+<p>As mentioned earlier, to make a URL entry required before the form can be submitted (you can't leave the field blank), you just need to include the {{htmlattrxref("required", "input")}} attribute on the input.</p>
+
+<div id="Default_value">
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;input id="myURL" name="myURL" type="url" required&gt;
+  &lt;button&gt;Submit&lt;/button&gt;
+&lt;/form&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Making_a_URL_required", 600, 40)}}</p>
+
+<p>Try submitting the above form with no value entered to see what happens.</p>
+
+<h3 id="Pattern_validation" name="Pattern_validation">パターンによる値検証</h3>
+
+<p>If you need the entered URL to be restricted further than just "any string that looks like a URL," you can use the {{htmlattrxref("pattern", "input")}} attribute to specify a {{Glossary("regular expression")}} the value must match for the value to be valid.</p>
+
+<p>For example, let's say you're building a support page for employees of Myco, Inc. which will let them contact their IT department for help if one of their pages has a problem. In our simplified form, the user needs to enter the URL of the page that has a problem, and a message describing what is wrong. But we want the URL to only successfully validate if the entered URL is in a Myco domain.</p>
+
+<p>Since inputs of type <code>url</code> validate against both the standard URL validation <em>and</em> the specified {{htmlattrxref("pattern", "input")}}, you can implement this easily. Let's see how:</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+  position: relative;
+  }
+
+  input[type="number"] {
+    width: 100px;
+  }
+
+  input + span {
+    padding-right: 30px;
+  }
+
+  input:invalid+span:after {
+    position: absolute; content: '✖';
+    padding-left: 5px;
+  }
+
+  input:valid+span:after {
+    position: absolute;
+    content: '✓';
+    padding-left: 5px;
+  }</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="myURL"&gt;Enter the problem website address:&lt;/label&gt;
+    &lt;input id="myURL" name="myURL" type="url"
+           required pattern=".*\.myco\..*"
+           title="The URL must be in a Myco domain"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="myComment"&gt;What is the problem?&lt;/label&gt;
+    &lt;input id="myComment" name="myComment" type="text"
+           required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Pattern_validation", 700, 150)}}</p>
+
+<p>First of all, the {{htmlattrxref("required", "input")}} attribute is specified, making it mandatory that a valid email address be provided.</p>
+
+<p>Second, in the <code>url</code> input we set <code>pattern</code> to <code>".*\.myco\..*"</code>. This simple regular expression requests a string that has any number of characters, followed by a dot, followed by "myco", followed by a dot, followed by any number of characters. And because the browser runs both the standard URL filter <em>and</em> our custom pattern against the specified text, we wind up with a validation which says "make sure this is a valid URL, and also in a Myco domain."</p>
+
+<p>This isn't perfect, but it is good enough for this simple demo's requirements.</p>
+
+<p>It's advisable to use the {{htmlattrxref("title")}} attribute along with <code>pattern</code>. If you do, the <code>title</code> <em>must</em> describe the pattern; it should explain what format the data should take on, rather than any other information. That's because the <code>title</code> may be displayed or spoken as part of a validation error message. For example, the browser might present the message "The entered text doesn't match the required pattern." followed by your specified <code>title</code>. If your <code>title</code> is something like "URL", the result would be the message "The entered text doesn't match the required pattern. URL", which is not a good user experience.</p>
+
+<p>That's why, instead, we specify the string "The URL must be in a myco domain". By doing that, the resulting full error message might be something like "The entered text doesn't match the required pattern. The URL should be in a myco domain."</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you run into trouble while writing your validation regular expressions and they're not working properly, check your browser's console; there may be helpful error messages there to aid you in solving the problem.</p>
+</div>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>There's not much else to say about <code>url</code> type inputs; check the {{anch("Pattern validation")}} and {{anch("Using URL inputs")}} sections for numerous examples.</p>
+
+<p>You can also find our <a href="https://github.com/mdn/learning-area/blob/master/html/forms/url-example/index.html">pattern validation example on GitHub</a> (see it <a href="https://mdn.github.io/learning-area/html/forms/url-example/">running live also</a>).</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#url-state-(type=url)', '&lt;input type="url"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>初回定義</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#url-state-typeurl', '&lt;input type="url"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("URL", "#urls", "URL syntax")}}</td>
+   <td>{{Spec2("URL")}}</td>
+   <td>Living Standard</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-url")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/HTML/Forms">HTML フォームガイド</a></li>
+ <li>{{HTMLElement("input")}}</li>
+ <li><code><a href="/ja/docs/Web/HTML/Element/input/tel">&lt;input type="tel"&gt;</a></code></li>
+ <li><code><a href="/ja/docs/Web/HTML/Element/input/email">&lt;input type="email"&gt;</a></code></li>
+ <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li>
+</ul>
diff --git a/files/ja/web/html/element/input/week/index.html b/files/ja/web/html/element/input/week/index.html
new file mode 100644
index 0000000000..4434d448d9
--- /dev/null
+++ b/files/ja/web/html/element/input/week/index.html
@@ -0,0 +1,398 @@
+---
+title: <input type="week">
+slug: Web/HTML/Element/input/week
+tags:
+  - Element
+  - Forms
+  - HTML
+  - HTML Input Types
+  - HTML forms
+  - HTML input
+  - Input
+  - Input Element
+  - Input Type
+  - Input Types
+  - Reference
+  - Week
+  - Weeks
+translation_of: Web/HTML/Element/input/week
+---
+<div>{{HTMLRef("Input_types")}}</div>
+
+<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>week</code></strong> 型は、年と、その年の <a href="https://en.wikipedia.org/wiki/ISO_8601#Week_dates">ISO 8601 週番号</a> (つまり、第1週から第<a href="https://en.wikipedia.org/wiki/ISO_8601#Week_dates">52または53</a>週) を簡単に入力することができる入力欄を生成します。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-week.html", "tabbed-shorter")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>コントロールのユーザーインターフェイスは、ブラウザーによって様々です。現時点ではブラウザー間の対応は限定的で、 Chrome/Opera と Microsoft Edge のみが対応しています。対応していないブラウザーでは、このコントロールは単純な <code><a href="/ja/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code> に格下げされます。</p>
+
+<p>Chrome/Opera では、 <code>week</code> コントロールは週と年の値を埋めるスロット、もっと視覚的に選択するためのポップアップカレンダーインターフェイス、コントロールの値を消去するための "X" ボタンを提供します。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15409/week-control-chrome.png" style="display: block; height: 235px; margin: 0px auto; width: 320px;"></p>
+
+<p>Edge の <code>week</code> コントロールはもう少し凝っており、年と週を選ぶスライドするリールが開きます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15411/week-control-edge.png" style="display: block; height: 391px; margin: 0px auto; width: 227px;"></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value", "値")}}</strong></td>
+   <td>年と週を表す {{domxref("DOMString")}}、または空欄</td>
+  </tr>
+  <tr>
+   <td><strong>イベント</strong></td>
+   <td>{{domxref("HTMLElement/change_event", "change")}} および {{domxref("HTMLElement/input_event", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>対応している共通属性</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("step", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL 属性</strong></td>
+   <td><code>list</code>, <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code></td>
+  </tr>
+  <tr>
+   <td><strong>メソッド</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value" name="Value">値</h2>
+
+<p>{{domxref("DOMString")}} で、入力欄に入力された年と週を表します。この入力型で使われる日時値の形式は、 <a href="/ja/docs/Web/HTML/Date_and_time_formats">HTML で使われる日付や時刻の形式</a>の<a href="/ja/docs/Web/HTML/Date_and_time_formats#Format_of_a_valid_week_string">HTML で使われる日付や時刻の形式</a>で説明しています。</p>
+
+<p>次のように {{htmlattrxref("value", "input")}} 属性に値を入れることで、既定値を設定することができます。</p>
+
+<pre class="brush: html notranslate">&lt;label for="week"&gt;どの週に始めたいですか。&lt;/label&gt;
+&lt;input id="week" type="week" name="week" value="2017-W01"&gt;</pre>
+
+<p>{{EmbedLiveSample('Value', 600, 60)}}</p>
+
+<p>一点気を付けなければならないことは、実際の <code>value</code> は常に <code>yyyy-Www</code> の書式であり、表示される書式はこれとは異なる可能性があるということです。例えば、上記の値をサーバーに送信すると、ブラウザーは <code>Week 01, 2017</code> のように表示するかもしれませんが、送信される値は常に <code>week=2017-W01</code> のようになります。</p>
+
+<p>次のように、 JavaScript から入力要素の {{domxref("HTMLInputElement.value", "value")}} プロパティを使用して、値を取得したり設定したりすることもできます。</p>
+
+<pre class="brush: js notranslate">var weekControl = document.querySelector('input[type="week"]');
+weekControl.value = '2017-W45';</pre>
+
+<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2>
+
+<p>すべての {{HTMLElement("input")}} 型で共通する属性に加え、 <code>week</code> 型の入力欄は次の属性にも対応しています。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">属性</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("max")}}</code></td>
+   <td>妥当な入力として受け付ける最も遅い年と週</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("min")}}</code></td>
+   <td>妥当な入力として受け付ける最も早い年と週</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("readonly")}}</code></td>
+   <td>論理属性で、存在する場合、入力欄の内容はユーザーが編集できないことを示す</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("step")}}</code></td>
+   <td>ユーザーインターフェイスや制約検証に使用する刻み値 (許される値の間隔)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3>
+
+<p>受け付ける (時間的に) 最も遅い年と週番号で、上記の{{anch("Value", "値")}}の節で説明した文字列書式です。要素に入力された {{htmlattrxref("value", "input")}} がこれを超えた場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code>max</code> 属性の値が妥当な週の文字列ではない場合、要素は最大値を持ちません。</p>
+
+<p>この値は <code>min</code> 属性で指定されたものより後か、同じ年と週を指定する必要があります。</p>
+
+<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3>
+
+<p>受け付ける最も早い年と週です。要素の {{htmlattrxref("value", "input")}} がこれより小さいと、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。属性の値が妥当な週の文字列ではない場合、要素は最小値を持ちません。</p>
+
+<p>この値は <code>max</code> 属性で指定されたものより前か、同じ年と週を指定する必要があります。</p>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>
+
+<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3>
+
+<p>{{page("/ja/docs/Web/HTML/Element/input/number", "step-include")}}</p>
+
+<p><code>week</code> 入力欄では、 <code>step</code> の値は週数で指定され、 604,800,000 が乗じられます (ミリ秒単位の数値であるため)。 <code>step</code> の既定値は 1 であり、1週を表します。既定の刻みの既定値は -259,200,000 で、これは1970年の最初の週 (<code>1970-W01</code>) です。</p>
+
+<p><em>現時点で、 <code>week</code> 入力欄で <code>step</code> に <code>any</code> の値が何を意味するかが不明確です。これは情報が決定次第、更新されるでしょう。</em></p>
+
+<h2 id="Using_week_inputs" name="Using_week_inputs">week 入力欄の使用</h2>
+
+<p>week 入力欄は一見すると便利に見えます。簡単に週を選択するユーザーインターフェイスを提供し、ユーザーのロケールに関係なく、データ形式を正規化してサーバーに送信するからです。しかし、ブラウザーの互換性が限られているため、 <code>&lt;input type="week"&gt;</code> には問題があります。</p>
+
+<p><code>&lt;input type="week"&gt;</code> の基本的な使い方と少し複雑な使い方を見てみてから、その後でブラウザーの互換性の問題を緩和するアドバイスを提供しましょう ({{anch("Handling browser support", "ブラウザーの互換性の扱い")}}を参照してください)。</p>
+
+<h3 id="Basic_uses_of_week" name="Basic_uses_of_week">week の基本的な使用</h3>
+
+<p>もっとも単純な <code>&lt;input type=week&gt;</code> の使用方法は、次のように基本的な <code>&lt;input&gt;</code> と {{htmlelement("label")}} 要素の組み合わせです。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label for="week"&gt;どの週から始めたいですか。&lt;/label&gt;
+  &lt;input id="week" type="week" name="week"&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Basic_uses_of_week', 600, 40)}}</p>
+
+<h3 id="Controlling_input_size" name="Controlling_input_size">入力欄の寸法の制御</h3>
+
+<p><code>&lt;input type="week"&gt;</code> は {{htmlattrxref("size", "input")}} のような寸法に関する属性には対応していません。寸法を変更する必要がある場合は、 <a href="/ja/docs/Web/CSS">CSS</a> を使用する必要があります。</p>
+
+<h3 id="Using_the_step_attribute" name="Using_the_step_attribute">step 属性の使用</h3>
+
+<p>{{htmlattrxref("step", "input")}} 属性を使用して、週の番号が増加または減少するときに飛ばす番号を変更することができるはずですが、対応しているブラウザーでも何も動作していないようです。</p>
+
+<h2 id="Validation" name="Validation">検証</h2>
+
+<p>既定で、 <code>&lt;input type="week"&gt;</code> は入力された値の検証を行いません。ユーザーインターフェイスの実装は一般的に、妥当な年と週でないものの入力をさせず、これは便利ですが、それでも入力欄を空のままにすることができ、また選択できる週の範囲を制限したくなるかもしれません。</p>
+
+<h3 id="Setting_maximum_and_minimum_weeks" name="Setting_maximum_and_minimum_weeks">週の最大値と最小値の設定</h3>
+
+<p>{{htmlattrxref("min", "input")}} および {{htmlattrxref("max", "input")}} 属性を使用して、ユーザーが選択することができる有効な週を制限することができます。以下の例では、最小値を <code>Week 01, 2017</code> に、最大値を <code>Week 52, 2017</code> に設定しています。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label for="week"&gt;どの週から始めたいですか。&lt;/label&gt;
+  &lt;input id="week" type="week" name="week"
+         min="2017-W01" max="2017-W52"&gt;
+  &lt;span class="validity"&gt;&lt;/span&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Setting_maximum_and_minimum_weeks', 600, 40)}}</p>
+
+<p>上記の例の CSS です。 CSS の {{cssxref(":valid")}} および {{cssxref(":invalid")}} プロパティを使用して、現在の値が有効かどうかに基づいてスタイルを設定しています。アイコンは入力欄そのものではなく、入力欄の隣の {{htmlelement("span")}} に置くようにしないと、 Chrome ではコントロールの内側にコンテンツを生成するので、正しく整形したり表示したりすることができません。</p>
+
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute;
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+
+<p>この結果は、対応するブラウザーでは2017年の第1週から第52週の間が有効に見え、選択することができます。</p>
+
+<h3 id="Making_week_values_required" name="Making_week_values_required">週の値を必須にする</h3>
+
+<p>加えて、 {{htmlattrxref("required", "input")}} 属性を使用して、週の入力を必須にすることができます。結果として、対応するブラウザーでは週の入力欄が空欄の場合にエラーを表示します。</p>
+
+<p>例を見てみましょう。週の最小値と最大値を設定し、かつフィールドを必須に設定しています。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="week"&gt;どの週から始めたいですか。&lt;/label&gt;
+    &lt;input id="week" type="week" name="week"
+         min="2017-W01" max="2017-W52" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+      &lt;input type="submit" value="Submit form"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>フォームに値を設定せずに送信しようとすると、ブラウザーはエラーを表示します。例を実行してみてください。</p>
+
+<p>{{EmbedLiveSample('Making_week_values_required', 600, 120)}}</p>
+
+<p>対応していないブラウザーを使用したときのスクリーンショットです。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15415/week-validation-chrome.png" style="display: block; height: 85px; margin: 0px auto; width: 473px;"></p>
+
+<div class="warning">
+<p><strong>重要</strong>: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用にはなりません。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、間違った種類のデータなど) が送信された場合に災害が発生するおそれがあります。</p>
+</div>
+
+<h2 id="Handling_browser_support" name="Handling_browser_support">ブラウザーの対応の扱い</h2>
+
+<p>前述のように、現時点で week 入力欄を利用する上で一番の問題はブラウザーの互換性です。デスクトップでは Safari と Firefox は対応しておらず、 IE の古いバージョンも対応していません。</p>
+
+<p>Android や iOS のようなモバイルプラットフォームは、このような入力型が実に有効であり、タッチスクリーン環境で実に簡単に値を選択できる専用のユーザーインターフェイスコントロールを提供します。例えば、 Android 版 Chrome の <code>week</code> 選択は、次のようになっています。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15413/week-chrome-android.png" style="display: block; margin: 0 auto;"></p>
+
+<p>対応していないブラウザーでは安全にテキスト入力欄に格下げされますが、これはユーザーインターフェイスの一貫性 (表示されるコントロールが異なること) とデータの扱いの二つの問題を生じます。</p>
+
+<p>二つ目の問題はより深刻です。すでに述べたように、 <code>week</code> 入力欄では、実際の値が常に <code>yyyy-Www</code> の書式で正規化されます。ブラウザーが一般的なテキスト入力欄にフォールバックした場合、ユーザーが正しい書式で入力するよう案内することができません (そして、おそらく認識できません)。人間が週の値を書くには、次のように色々な方法があります。</p>
+
+<ul>
+ <li><code>Week 1 2017</code></li>
+ <li><code>Jan 2-8 2017</code></li>
+ <li><code>2017-W01</code></li>
+ <li>etc.</li>
+</ul>
+
+<p>ブラウザーに依存しない方法によってフォームで年と週を扱う最善の方法は、現時点では年と週を別々なコントロール ({{htmlelement("select")}} 要素で入力するものが一般的です。以下の実装を見てください) にするか、 <a href="https://jqueryui.com/datepicker/">jQuery date picker</a> のような JavaScript ライブラリを使用することです。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例では、週を選択するユーザーインターフェイスの要素を2組生成します。ネイティブの <code>&lt;input type="week"&gt;</code> 入力欄と、 <code>week</code> 入力欄に対応しない古いブラウザーで年と週を選択するための、２つの {{htmlelement("select")}} 要素です。</p>
+
+<p>{{EmbedLiveSample('Examples', 600, 140)}}</p>
+
+<p>HTML は次のようになります。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div class="nativeWeekPicker"&gt;
+    &lt;label for="week"&gt;どの週から始めたいですか。&lt;/label&gt;
+    &lt;input id="week" type="week" name="week"
+           min="2017-W01" max="2018-W52" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;p class="fallbackLabel"&gt;どの週から始めたいですか。&lt;/p&gt;
+  &lt;div class="fallbackWeekPicker"&gt;
+    &lt;div&gt;
+      &lt;span&gt;
+        &lt;label for="week"&gt;Week:&lt;/label&gt;
+        &lt;select id="fallbackWeek" name="week"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;label for="year"&gt;Year:&lt;/label&gt;
+        &lt;select id="year" name="year"&gt;
+          &lt;option value="2017" selected&gt;2017&lt;/option&gt;
+          &lt;option value="2018"&gt;2018&lt;/option&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>週の値は以下の JavaScript のコードで動的に生成されます。</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute;
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+</div>
+
+<p>もう一つの面白い部分は、機能の検出コードです。ブラウザーが <code>&lt;input type="week"&gt;</code> に対応しているかどうかを検出するために、新たな {{htmlelement("input")}} 要素を生成し、その <code>type</code> を <code>week</code> に設定てみて、すぐに type に何が設定されたかをチェックします。 <code>datetime-local</code> 型に対応していないブラウザーでは、 <code>week</code> 型が <code>text</code> 型へフォールバックされます。 <code>&lt;input type="week"&gt;</code> に対応していない場合は、ネイティブの日時入力欄を非表示にしてフォールバック用の ({{htmlelement("select")}}) による選択ユーザーインターフェイスを表示します。</p>
+
+<pre class="brush: js notranslate">// 変数を定義
+var nativePicker = document.querySelector('.nativeWeekPicker');
+var fallbackPicker = document.querySelector('.fallbackWeekPicker');
+var fallbackLabel = document.querySelector('.fallbackLabel');
+
+var yearSelect = document.querySelector('#year');
+var weekSelect = document.querySelector('#fallbackWeek');
+
+// 最初はフォールバックを非表示にする
+fallbackPicker.style.display = 'none';
+fallbackLabel.style.display = 'none';
+
+// 新しい日付入力が文字列入力にフォールバックされるかどうか
+var test = document.createElement('input');
+
+try {
+  test.type = 'week';
+} catch (e) {
+  console.log(e.description);
+}
+
+// もし文字列入力になるならば、 if() {} ブロックの中のコードを実行する
+if(test.type === 'text') {
+  // ネイティブの日付選択を隠してフォールバック版を表示
+  nativePicker.style.display = 'none';
+  fallbackPicker.style.display = 'block';
+  fallbackLabel.style.display = 'block';
+
+  // 週を動的に生成する
+  populateWeeks();
+}
+
+function populateWeeks() {
+  // 週の選択肢を52週で生成
+  for(var i = 1; i &lt;= 52; i++) {
+    var option = document.createElement('option');
+    option.textContent = (i &lt; 10) ? ("0" + i) : i;
+    weekSelect.appendChild(option);
+  }
+}</pre>
+
+<div class="note">
+<p><strong>注</strong>: 53週ある年もあることを忘れないでください（<a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">年あたりの週数</a>を参照）。商品のアプリを開発するときはこれを念頭に置いておく必要があります。</p>
+</div>
+
+<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#week-state-(type=week)', '&lt;input type="week"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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-week")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>全般的な {{HTMLElement("input")}} およびその操作に使用する{{domxref("HTMLInputElement")}} インターフェイス</li>
+ <li><a href="/ja/docs/Web/HTML/Date_and_time_formats">HTML で使用される日付と時刻の書式</a></li>
+ <li><code><a href="/ja/docs/Web/HTML/Element/input/datetime-local">&lt;input type="datetime-local"&gt;</a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/date">&lt;input type="date"&gt;</a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/time">&lt;input type="time"&gt;</a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/month">&lt;input type="month"&gt;</a></code></li>
+ <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li>
+</ul>