2021/11/23 時点の英語版に同期

2 files changed, 263 insertions, 290 deletions

diff --git a/files/ja/web/html/element/input/tel/index.md b/files/ja/web/html/element/input/tel/index.md
index f61b231a90..2deac5682b 100644
--- a/files/ja/web/html/element/input/tel/index.md
+++ b/files/ja/web/html/element/input/tel/index.md
@@ -3,7 +3,7 @@ title: <input type="tel">
 slug: Web/HTML/Element/input/tel
 tags:
   - 要素
-  - フォーム入力s
+  - フォーム入力
   - フォーム
   - HTML
   - HTML フォーム
@@ -13,288 +13,277 @@ tags:
   - 入力型
   - Phone Numbers
   - リファレンス
-  - Telephone Numbers
-  - tel
+browser-compat: html.elements.input.input-tel
 translation_of: Web/HTML/Element/input/tel
 ---
+
 {{HTMLRef("Input_types")}}
 
-<span class="seoSummary">{{HTMLElement("input")}} 要素の `<strong>tel</strong>` 型は、ユーザーに電話番号を入力または編集させるために使用します。 [`&lt;input type="email"&gt;`](/ja/docs/Web/HTML/Element/input/email) や [`&lt;input type="url"&gt;`](/ja/docs/Web/HTML/Element/input/url) とは異なり、送信前に値が特定の書式であると自動的には検証されません。電話番号の書式は世界中で様々だからです。</span>
+{{HTMLElement("input")}} 要素の **`tel`** 型は、ユーザーに電話番号を入力または編集させるために使用します。 [`<input type="email">`](/ja/docs/Web/HTML/Element/input/email) や [`<input type="url">`](/ja/docs/Web/HTML/Element/input/url) とは異なり、送信前に値が特定の書式であると自動的には検証されません。電話番号の書式は世界中で様々だからです。
 
 {{EmbedInteractiveExample("pages/tabbed/input-tel.html", "tabbed-standard")}}
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 [https://github.com/mdn/interactive-examples](https://github.com/mdn/interactive-examples) をクローンしてプルリクエストを送信してください。</div>
-
 `tel` の入力欄は機能的に標準の `text` 入力欄と同じであるという事実にもかかわらず、便利な用途を提供します。もっとも手っ取り早く表れるのは、モバイルブラウザー — 特に携帯電話のもの — では、電話番号の入力に最適化された専用のキーパッドを表示することがあります。電話番号の専用の入力型を使用すると、カスタム検証を追加して電話番号の扱いをもっと便利にすることができます。
 
-<div class="note">
-<strong>注</strong>: `tel` 型に対応していないブラウザーでは、通常の {{HTMLElement("input/text", "text")}} 入力欄で代用されます。
-</div>
+> **Note:** `tel` 型に対応していないブラウザーでは、通常の {{HTMLElement("input/text", "text")}} 入力欄で代用されます。
 
 <table class="properties">
- <tbody>
-  <tr>
-   <td><strong>{{anch("値")}}</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>`list`, `selectionStart`, `selectionEnd`, `selectionDirection`, and `value`</td>
-  </tr>
-  <tr>
-   <td><strong>メソッド</strong></td>
-   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td><strong>{{anch("値")}}</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>,
+        <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>
 
 ## 値
 
 {{HTMLElement("input")}} 要素の {{htmlattrxref("value", "input")}} 属性には、電話番号を表す文字列、または空文字列 (`""`) の {{domxref("DOMString")}} が入ります。
 
-<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2>
+## 追加の属性
 
 型に関係なくすべての {{HTMLElement("input")}} 要素を操作する属性に加え、電話番号型の入力欄は次の属性にも対応しています。
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">属性</th>
-   <th scope="col">説明</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>`{{anch("list")}}`</td>
-   <td>オプションで自動補完の定義済みの選択肢を含む &lt;datalist&gt; 要素の id</td>
-  </tr>
-  <tr>
-   <td>`{{anch("maxlength")}}`</td>
-   <td>妥当な入力として受け入れるための、 UTF-16 文字単位の最大長</td>
-  </tr>
-  <tr>
-   <td>`{{anch("minlength")}}`</td>
-   <td>フィールドの内容が妥当と判断される最小文字列長</td>
-  </tr>
-  <tr>
-   <td>`{{anch("pattern")}}`</td>
-   <td>制約検証に通るために入力された値が一致する必要がある正規表現</td>
-  </tr>
-  <tr>
-   <td>`{{anch("placeholder")}}`</td>
-   <td>値がない時にフィールド内に表示される入力例の値</td>
-  </tr>
-  <tr>
-   <td>`{{anch("readonly")}}`</td>
-   <td>論理属性で、存在すれば、フィールドの内容をユーザーが編集できないことを示す</td>
-  </tr>
-  <tr>
-   <td>`{{anch("size")}}`</td>
-   <td>画面上における入力フィールドの幅の文字数</td>
-  </tr>
- </tbody>
-</table>
+### list
+
+list 属性の値は、同じ文書内にある {{HTMLElement("datalist")}} 要素の {{domxref("Element.id", "id")}} です。 {{HTMLElement("datalist")}} は、この入力欄でユーザーに提案するための事前定義された値のリストを提供します。リストの中の値のうち {{htmlattrxref("type", "input")}} と互換性のないものは、提案されるオプションには含まれません。提供される値は提案であり、要件ではありません。ユーザーはこの定義済みリストから選択することも、異なる値を提供することもできます。
+
+
+### maxlength
+
+ユーザーが電話番号フィールドに入力することができる（UTF-16 コード単位での）最大文字数です。 0 以上の整数値である必要があります。 `maxlength` が指定されていないか、無効な値が指定されていると、電話番号フィールドには最大文字数が設定されません。この値は `minlength` の値以上である必要もあります。
 
-<p id="htmlattrdeflist">{{page("/ja/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p>
+フィールドに入力された長さが UTF-16 コード単位で `maxlength` の長さを超えていると、その入力欄は[制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation)に失敗します。
 
-<h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3>
+### minlength
 
-ユーザーが電話番号フィールドに入力することができる (UTF-16 コード単位での) 最大文字数です。 0 以上の整数値である必要があります。 `maxlength` が指定されていないか、無効な値が指定されていると、電話番号フィールドには最大文字数が設定されません。この値は `minlength` の値以上である必要もあります。
+ユーザーが電話番号フィールドに入力することができる（UTF-16 コード単位での）最小文字数です。これは非負の整数値で、 `maxlength` で指定された値以下である必要があります。 `minlength` が指定されていないか、無効な値が指定されていると、電話番号フィールドには最小文字数が設定されません。
 
-フィールドに入力された長さが UTF-16 コード単位で `maxlength` の長さを超えていると、その入力欄は[制約検証](/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation)に失敗します。
+入力欄のテキストの長さが UTF-16 コード単位で `minlength` の長さよりも短いと、電話番号フィールドは[制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation)に失敗します。
 
-<h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3>
+### pattern
 
-ユーザーが電話番号フィールドに入力することができる (UTF-16 コード単位での) 最小文字数です。これは非負の整数値で、 `maxlength` で指定された値以下である必要があります。 `minlength` が指定されていないか、無効な値が指定されていると、電話番号フィールドには最小文字数が設定されません。
+`pattern` 属性は、指定する場合は正規表現であり、入力欄の {{htmlattrxref("value")}} が[制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation)に合格するためにはこれと一致しなければなりません。これは {{jsxref("RegExp")}} 型で使用される JavaScript の妥当な正規表現である必要があり、これは[正規表現のガイド](/ja/docs/Web/JavaScript/Guide/Regular_Expressions)で記述されています。正規表現がコンパイルされるときに `'u'` フラグが指定されるので、パターンは ASCII ではなく Unicode コードポイントの並びとして扱われます。パターンのテキストをスラッシュで囲んではいけません。
 
-入力欄のテキストの長さが UTF-16 コード単位で `minlength` の長さよりも短いと、電話番号フィールドは[制約検証](/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation)に失敗します。
+指定されたパターンがないかか無効である場合は、正規表現は適用されず、この属性は完全に無視されます。
 
-<h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3>
+> **Note:** {{htmlattrxref("title", "input")}} 属性を使用してテキストを指定すると、多くのブラウザーでパターンに一致する要件が何であるかを説明するツールチップを表示することができます。近くに他の説明テキストを配置する必要があります。
 
-{{page("/ja/docs/Web/HTML/Element/input/text", "pattern-include")}}
+詳細と例については後述の{{anch("パターン検証")}}を参照してください。
 
-詳細と例については後述の{{anch("Pattern validation", "パターン検証")}}を参照してください。
+### placeholder
 
-{{page("/ja/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}
+`placeholder` 属性は文字列で、その欄にどのような種類の情報が求められるかについてのユーザーに対する短いヒントを提供します。これは求められるデータの種類を紹介する一語または短い句であり、説明的なメッセージではありません。テキストには改行を含めることは<em>できません</em>。
 
-{{page("/ja/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}
+コントロールの内容がある書字方向 ({{Glossary("LTR")}} または {{Glossary("RTL")}}) であるものの、プレイスホルダーを逆の方向に表示する必要がある場合、 Unicode 双方向アルゴリズム書式文字を使用してプレイスホルダーの中で書字方向を上書きすることができます。詳しくは、[双方向テキストでの Unicode コードの使い方（英語）](https://www.w3.org/International/questions/qa-bidi-unicode-controls)を参照してください。
 
-{{page("/ja/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}
+> **Note:** 可能であれば `placeholder` を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、[\<input>: 入力欄 (フォーム入力) 要素](/ja/docs/Web/HTML/Element/input)の[プレイスホルダーはアクセシブルではない](/ja/docs/Web/HTML/Element/input#プレイスホルダーはアクセシブルではない)を参照してください。
 
-<h2 id="Non-standard_attributes" name="Non-standard_attributes">標準外の属性</h2>
+### readonly
+
+論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 `value` は、 JavaScript コードから直接 {{domxref("HTMLInputElement")}} の `value` プロパティを設定することで変更することができます。
+
+> **Note:** 読み取り専用フィールドは値を持てないため、 `required` は `readonly` 属性も指定されている入力欄には効果がありません。
+
+### size
+
+`size` 属性は数値であり、入力欄の幅を何文字分とするかを示します。値はゼロより大きな数値である必要があり、既定値は 20 です。文字の幅は様々であるため、これは正確ではない可能性もあり、依存することはできません。結果の入力欄は文字数やフォント（使用中の {{cssxref("font")}} 設定）によって、指定された文字数より狭くなったり広くなったりすることがあります。
+
+これはユーザーがフィールドに入力することができる文字数の制限を設定するものではありません。これは一度に見える文字数をおよそ指定するだけです。入力データの長さの上限を設定するには、 `{{anch("maxlength")}}` 属性を使用してください。
+
+## 標準外の属性
 
 ブラウザーによっては、以下の標準外の属性が利用できます。一般的な規則として、できれば使用することを避けてください。
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">属性</th>
-   <th scope="col">説明</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>`{{anch("autocorrect")}}`</td>
-   <td>この入力フィールドの編集中にオートコレクトを許可するかどうか。 <strong>Safari のみ。</strong></td>
-  </tr>
-  <tr>
-   <td>`{{anch("mozactionhint")}}`</td>
-   <td>入力欄を編集している間、ユーザーが <kbd>Enter</kbd> または <kbd>Return</kbd> キーを押したときに実行されるアクションを示す文字列です。これは仮想キーボードのキーに適切なラベルを特定するために使用します。 <strong>Android 版 Firefox for のみ。</strong></td>
-  </tr>
- </tbody>
-</table>
+### autocorrect
 
-<h3 id="htmlattrdefautocorrect_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3>
+Safari 拡張である `autocorrect` 属性は文字列で、ユーザーがこの欄を編集している間に自動修正を有効にするかどうかを示します。次の値が許されています。
 
-{{page("/ja/docs/Web/HTML/Element/input/text", "autocorrect-include")}}
+- `on`
+  - : 構成されていれば、打ち間違いの自動修正や、テキストの置き換え処理を有効にします。
+- `off`
+  - : 自動修正やテキストの置き換えを無効にします。
 
-<h3 id="htmlattrdefmozactionhint_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3>
+### mozactionhint
 
-{{page("/ja/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}
+Mozilla 拡張で Android 版 Firefox で対応しており、ユーザーがフィールドを編集中に <kbd>Enter</kbd> キーや <kbd>Return</kbd> キーを押した場合に行われるアクションの種類のヒントを提供します。この情報は仮想キーボードの <kbd>Enter</kbd> キーにどのようなラベルを使用するかを決定するために使用されます。
 
-<h2 id="tel_入力欄の使用">tel 入力欄の使用</h2>
+> **Note:** これはグローバル属性 {{htmlattrxref("enterkeyhint")}} として[標準化されています](https://html.spec.whatwg.org/#input-modalities:-the-enterkeyhint-attribute)が、まだ広くは実装されていません。 Firefox の実装状態の変遷を確認するには、 {{bug(1490661)}} を参照してください。
+
+許可されている値は `go`, `done`, `next`, `search`, `send` です。ブラウザーはこのヒントを使用して、 Enter キーにどのラベルを置くかを決定します。
+
+## tel 入力欄の使用
 
 ウェブにおいて、電話番号はとてもよく収集されるデータの種類です。例えば、何らかの会員登録や通信販売サイトで、商取引や緊急時連絡の目的でユーザーに電話番号を尋ねることが良くあります。一般的にどのように電話番号が入力されるかを考えれば、残念ながら「1つのサイズですべてに合う」ような解決策は現実的ではありません。
 
 幸い、自分でサイトの要件を検討し、自分で適切なレベルの検証を実装することができます。詳しくは、以下の{{anch("検証")}}をご覧ください。
 
-<h3 id="Custom_keyboards" name="Custom_keyboards">カスタムキーボード</h3>
-
-One of the main advantages of `&lt;input type="tel"&gt;` 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.
-
-<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>
+### カスタムキーボード
+
+`<input type="tel">` の主な利点の一つは、携帯電話のブラウザーに電話番号を入力するための特別なキーボードを表示させることです。例えば、いくつかの端末でキーパッドがどのように表示されるかを示します。
 
-<h3 id="A_simple_tel_input" name="A_simple_tel_input">単純な tel 入力欄</h3>
+| Android 版 Firefox                                    | WebKit iOS (Safari/Chrome/Firefox)                           |
+| ------------------------------------------------------ | ------------------------------------------------------------ |
+| ![Android 版 Firefox のスクリーンショット](fx-android-tel.png) | ![iOS 版 Firefox のスクリーンショット](iphone-tel-keyboard-50pct.png) |
 
-In its most basic form, a tel input can be implemented like this:
+### 単純な tel 入力欄
 
-<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>
+最も基本的なフォームにおいて、 tel 入力欄は次のように実装することができます。
+
+```html
+<label for="telNo">電話番号:</label>
+<input id="telNo" name="telNo" type="tel">
+```
 
 {{ EmbedLiveSample('A_simple_tel_input', 600, 40) }}
 
-There is nothing magical going on here. When submitted to the server, the above input's data would be represented as, for example, `telNo=+12125553151`.
+ここでは何も不思議なことは起こりません。サーバーに送信されると、上記の入力のデータは、例えば `telNo=+12125553151` のように表現されます。
 
-<h3 id="Placeholders" name="Placeholders">プレイスホルダー</h3>
+### プレイスホルダー
 
-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 `value` should take by presenting an example of a valid value, which is displayed inside the edit box when the element's `value` is `""`. Once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.
+入力データがどのような形式を取るべきか、文脈上のヒントを提供することが役立つ場合があります。これは、ページのデザインがそれぞれの {{HTMLElement("input")}} に説明的なラベルを提供していない場合に特に重要になることがあります。ここが**プレイスホルダー**の登場する場面です。プレイスホルダーは `value` が取るべきフォームを示す値で、有効な値の例を提示します。この値は要素の `value` が `""` の時にエディットボックス内に表示されます。ボックスにデータが入力されると、プレイスホルダーが消え、ボックスが空になると、プレイスホルダーが再び表示されます。
 
-Here, we have an `tel` input with the placeholder `123-4567-8901`. Note how the placeholder disappears and reappears as you manipulate the contents of the edit field.
+ここでは、 `123-4567-8901` というプレイスホルダーを持つ `tel` 入力欄があります。編集フィールドの内容を操作すると、プレイスホルダーが消えたり現れたりすることに注意してください。
 
-<pre class="brush: html notranslate">&lt;input id="telNo" name="telNo" type="tel"
-       placeholder="123-4567-8901"&gt;</pre>
+```html
+<input id="telNo" name="telNo" type="tel"
+       placeholder="123-4567-8901">
+```
 
 {{ EmbedLiveSample('Placeholders', 600, 40) }}
 
-<h3 id="Controlling_the_input_size" name="Controlling_the_input_size">入力欄の寸法の制御</h3>
+### 入力欄の寸法の制御
 
-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.
+入力ボックスの物理的な長さだけでなく、入力テキスト自体に許される最小・最大の長さも制御することができます。
 
-<h4 id="Physical_input_element_size" name="Physical_input_element_size">物理的な入力欄の寸法</h4>
+#### 物理的な入力欄の寸法
 
-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 `tel` edit box is 20 characters wide:
+入力ボックスの物理的な大きさは、 {{htmlattrxref("size", "input")}} 属性で制御することが可能です。この属性により、入力ボックスが一度に表示できる文字数を指定することができます。この例では、例えば `tel` のエディットボックスの幅は 20 文字です。
 
-<pre class="brush: html notranslate">&lt;input id="telNo" name="telNo" type="tel"
-       size="20"&gt;</pre>
+```html
+<input id="telNo" name="telNo" type="tel"
+       size="20">
+```
 
 {{ EmbedLiveSample('Physical_input_element_size', 600, 40) }}
 
-<h4 id="Element_value_length" name="Element_value_length">要素の値の長さ</h4>
+#### 要素の値の長さ
 
-The `size` 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.
+`size` は、入力される電話番号の長さの制限とは別のものです。入力される電話番号の長さの最小値は {{htmlattrxref("minlength", "input")}} 属性で指定でき、同様に、入力される電話番号の長さの最大値は {{htmlattrxref("maxlength", "input")}} 属性で設定することができます。
 
-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.
+以下の例では、幅 20 文字の電話番号入力ボックスを作成し、入力内容は 9 文字以下、 14 文字以下であることを要求しています。
 
-<pre class="brush: html notranslate">&lt;input id="telNo" name="telNo" type="tel"
-       size="20" minlength="9" maxlength="14"&gt;</pre>
+```html
+<input id="telNo" name="telNo" type="tel"
+       size="20" minlength="9" maxlength="14">
+```
 
 {{EmbedLiveSample("Element_value_length", 600, 40) }}
 
-<div class="note">
-<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.
-</div>
+> **Note:** 上記の属性は{{anch("検証")}}に影響します。 - 上記の例では、値の長さが 9 文字未満、または 14 文字以上の場合、入力は無効とみなされます。ほとんどのブラウザーでは、最大長を超える値を入力することさえできません。
+
+### 既定のオプションの提供
 
-<h3 id="Providing_default_options" name="Providing_default_options">既定のオプションの提供</h3>
+#### value 属性を言使用した単一の既定値の提供
 
-これまでどおり、 {{htmlattrxref("value", "input")}} 属性を設定することで `tel` 入力欄に既定値を指定することができます。
+他と同様に、 `tel` 入力欄に {{htmlattrxref("value", "input")}} 属性を設定することで既定値を指定することができます。
 
-<div id="Default_value">
-<pre class="brush: html notranslate">&lt;input id="telNo" name="telNo" type="tel"
-       value="333-4444-4444"&gt;</pre>
-</div>
+```html
+<input id="telNo" name="telNo" type="tel"
+       value="333-4444-4444">
+```
 
-{{EmbedLiveSample("Default_value", 600, 40)}}
+{{EmbedLiveSample("Providing_a_single_default_using_the_value_attribute", 600, 40)}}
 
-<h4 id="Offering_suggested_values" name="Offering_suggested_values">サジェスト値の提供</h4>
+#### サジェスト値の提供
 
-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 `list` attribute specifies the ID of a {{HTMLElement("datalist")}} element, which in turn contains one {{HTMLElement("option")}} element per suggested value; each `option`'s `value` is the corresponding suggested value for the telephone number entry box.
+さらに一歩進んで、電話番号の既定値のリストを用意し、そこからユーザーが選択できるようにすることも可能です。これには {{htmlattrxref("list", "input")}} 属性を使用します。これはユーザーをこれらの選択肢に限定しませんが、よく使われる電話番号をより迅速に選択できるようにします。これは  {{htmlattrxref("autocomplete", "input")}} へのヒントも提供します。 `list` 属性は {{HTMLElement("datalist")}} 要素の ID を指定し、この要素は 1 つの提案値につき 1 つの {{HTMLElement("option")}} 要素を含んでおり、それぞれの `option` の `value` は電話番号入力ボックスの対応する提案値となっています。
 
-<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;
+```html
+<label for="telNo">電話番号: </label>
+<input id="telNo" name="telNo" type="tel" list="defaultTels">
 
-&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>
+<datalist id="defaultTels">
+  <option value="111-1111-1111">111-1111-1111</option>
+  <option value="122-2222-2222">122-2222-2222</option>
+  <option value="333-3333-3333">333-3333-3333</option>
+  <option value="344-4444-4444">344-4444-4444</option>
+</datalist>
+```
 
 {{EmbedLiveSample("Offering_suggested_values", 600, 40)}}
 
-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.
+{{HTMLElement("datalist")}} 要素とその {{HTMLElement("option")}} が配置されると、ブラウザーは電話番号の候補として指定された値を提供します。これは通常、候補を含むポップアップまたはドロップダウンメニューとして表示されます。具体的な使い勝手はブラウザーによって異なるかもしれませんが、通常、編集ボックスをクリックすると、提案された電話番号がドロップダウンで表示されます。その後、ユーザーが文字を入力すると、リストが調整され、フィルタリングされた一致する値のみが表示されます。ユーザーが選択するか、独自の値を入力するまで、入力された文字ごとにリストが絞り込まれます。
 
-Here's a screenshot of what that might look like:
+以下は、その様子のスクリーンショットです。
 
-<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;">
+![](phone-number-with-options.png)
 
-<h2 id="Validation" name="Validation">検証</h2>
+## 検証
 
-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.
+以前にも触れましたが、電話番号で万能のクライアント側検証方法を提供することは非常に困難です。では、どうすればいいのでしょうか。いくつかの選択肢を考えてみましょう。
 
-<div class="warning">
-<strong>重要</strong>: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用には<em>なりません</em>。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、間違った種類のデータなど) が送信された場合に災害が発生するおそれがあります。
-</div>
+> **Warning:** HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用には*なりません*>。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ（または大きすぎるデータ、間違った種類のデータなど）が送信された場合に災害が発生するおそれがあります。
 
-<h3 id="Making_telephone_numbers_required" name="Making_telephone_numbers_required">電話番号を必須にする</h3>
+### 電話番号を必須にする
 
-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:
+空の入力を無効として、サーバーに送信されないようにするには、 {{htmlattrxref("required", "input")}} 属性を使用します。例えば、このような HTML を使ってみましょう。
 
-<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>
+```html
+<form>
+  <div>
+    <label for="telNo">電話番号を入力してください (必須): </label>
+    <input id="telNo" name="telNo" type="tel" required>
+    <span class="validity"></span>
+  </div>
+  <div>
+    <button>送信</button>
+  </div>
+</form>
+```
 
-And let's include the following CSS to highlight valid entries with a checkmark and invalid entries with a cross:
+そして、有効な入力をチェックマークで、無効な入力をバッテンで強調するために、以下の CSS を記述してみましょう。
 
-<pre class="brush: css notranslate">div {
+```css
+div {
   margin-bottom: 10px;
   position: relative;
 }
@@ -318,32 +307,35 @@ input:valid+span:after {
   content: '✓';
   padding-left: 5px;
   color: #009000;
-}</pre>
+}
+```
 
-The output looks like this:
+出力結果は次のようになります。
 
 {{EmbedLiveSample("Making_telephone_numbers_required", 700, 70)}}
 
-<h3 id="Pattern_validation" name="Pattern_validation">パターンによる値検証</h3>
+### パターンによる値検証
 
-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.
+入力された数値をさらに制限し、特定のパターンに適合させたい場合は、{{htmlattrxref("pattern","input")}}属性を使用してください。この属性は、入力された値が一致すべき{{Glossary("regular expression", "正規表現")}}を値として取ります。
 
-In this example we'll use the same CSS as before, but our HTML is changed to look like this:
+この例では、前と同じ CSS を使用しますが、 HTML は次のように変更します。
 
-<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>
+```html
+<form>
+  <div>
+    <label for="telNo">電話番号を入力してください (xxx-xxx-xxxx 形式で): </label>
+    <input id="telNo" name="telNo" type="tel" required
+           pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
+    <span class="validity"></span>
+  </div>
+  <div>
+    <button>送信</button>
+  </div>
+</form>
+```
 
-<div class="hidden">
-<pre class="brush: css notranslate">div {
+```css hidden
+div {
   margin-bottom: 10px;
   position: relative;
 }
@@ -367,61 +359,64 @@ input:valid+span:after {
   content: '✓';
   padding-left: 5px;
   color: #009000;
-}</pre>
-</div>
+}
+```
 
 {{EmbedLiveSample("Pattern_validation", 700, 70)}}
 
-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.
+入力された値は、 xxx-xxx-xxxx というパターンに一致しない限り、無効であると報告されることに注意してください。例えば、 41-323-421 は受け入れられません。 800-MDN-ROCKS も同様です。しかし、 865-555-6502 は受理されます。実際のアプリケーションでは、ユーザーのロケールに応じて使用するパターンを変更する必要があるでしょう。
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-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 `&lt;input type="tel"&gt;` elements to let them enter each part of their phone number; there is no reason why you can't have multiple `tel` inputs.
+この例では、ユーザーにどの国にいるかを選択させる {{htmlelement("select")}} 要素と、電話番号の各部分を入力させる一連の `<input type="tel">` 要素でシンプルなインターフェイスを表します。複数の `tel` 入力欄を使ってはいけないという理由はありません。
 
-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 `aria-label` attribute to contain a hint to be read out to screenreader users about what to enter into it.
+それぞれの入力欄には {{htmlattrxref("placeholder","input")}} 属性があり、目の見えるユーザーが何を入力すればよいかのヒントを表示します。また {{htmlattrxref("pattern","input")}} で、求められる部分で指定された文字数を強制します。さらに [`aria-label`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-label) 属性があり、画面リーダーのユーザーに何を入力すればよいかのヒントを読み上げることができるようになっています。
 
-<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
+```html
+<form>
+  <div>
+    <label for="country">国を選択してください:</label>
+    <select id="country" name="country">
+      <option>UK</option>
+      <option selected>US</option>
+      <option>Germany</option>
+    </select>
+  </div>
+  <div>
+    <p>電話番号を入力してください: </p>
+    <span class="areaDiv">
+      <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
+             aria-label="Area code">
+      <span class="validity"></span>
+    </span>
+    <span class="number1Div">
+      <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
+             aria-label="First part of number">
+      <span class="validity"></span>
+    </span>
+    <span class="number2Div">
+      <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>
-
-The JavaScript is relatively simple — it contains an {{domxref("GlobalEventHandlers.onchange", "onchange")}} event handler that, when the `&lt;select&gt;` value is changed, updates the `&lt;input&gt;` element's `pattern`, `placeholder`, and `aria-label` to suit the format of telephone numbers in that country/territory.
-
-<pre class="brush: js notranslate">var selectElem = document.querySelector("select");
+             aria-label="Second part of number">
+      <span class="validity"></span>
+    </span>
+  </div>
+  <div>
+    <button>送信</button>
+  </div>
+</form>
+```
+
+この JavaScript は比較的単純で、 {{domxref("GlobalEventHandlers.onchange", "onchange")}} イベントハンドラーを含んでおり、 `<select>` の値が変更されると `<input>` 要素の `pattern`, `placeholder`, `aria-label` をその国/地域の電話番号の形式に合わせて更新するようになっています。
+
+```js
+var selectElem = document.querySelector("select");
 var inputElems = document.querySelectorAll("input");
 
 selectElem.onchange = function() {
-  for(var i = 0; i &lt; inputElems.length; i++) {
+  for(var i = 0; i < inputElems.length; i++) {
     inputElems[i].value = "";
   }
 
@@ -461,18 +456,19 @@ selectElem.onchange = function() {
     inputElems[2].pattern = "[0-9]{4}";
     inputElems[2].setAttribute("aria-label","Second part of number");
   }
-}</pre>
+}
+```
 
-The example looks like this:
+この例は次のように見えます。
 
 {{EmbedLiveSample('Examples', 600, 140)}}
 
-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.
+これは面白いアイデアで、国際電話番号の取り扱いの問題を解決する可能性を示しています。この例を拡張して、潜在的にすべての国に対して正しいパターンを提供しなければなりませんが、これは大変な作業ですし、ユーザーが自分の番号を正しく入力するというフールプルーフの保証もありません。
 
-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.
+クライアント側でこれだけ大変なことをするべきなのか、クライアント側ではユーザーが好きな書式で任意の数字を入力し、サーバー側でサニタイズすればよいのではないかとも思うでしょう。しかし、この選択はあなたがすることです。
 
-<div class="hidden">
-<pre class="brush: css notranslate">div {
+```css hidden
+div {
 margin-bottom: 10px;
 position: relative;
 }
@@ -496,47 +492,24 @@ input:valid+span:after {
   content: '✓';
   padding-left: 5px;
   color: #009000;
-}</pre>
-</div>
+}
+```
 
 ## 仕様書
 
-<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>
+{{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("html.elements.input.input-tel")}}
+{{Compat}}
 
 ## 関連情報
 
-<ul>
- <li>[HTML フォームガイド](/ja/docs/Learn/HTML/Forms)</li>
- <li>[フォームとアクセシビリティ](/ja/docs/Web/Accessibility/ARIA/forms)</li>
- <li>{{HTMLElement("input")}}
-  <ul>
-   <li>[`&lt;input type="text"&gt;`](/ja/docs/Web/HTML/Element/input/text)</li>
-   <li>[`&lt;input type="email"&gt;`](/ja/docs/Web/HTML/Element/input/email)</li>
-  </ul>
- </li>
- <li>[CSS プロパティの互換性](/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls)</li>
-</ul>
+- [HTML フォームガイド](/ja/docs/Learn/Forms)
+- [フォームとアクセシビリティ](/ja/docs/Web/Accessibility/ARIA/forms)
+- {{HTMLElement("input")}}
+
+  - [`<input type="text">`](/ja/docs/Web/HTML/Element/input/text)
+  - [`<input type="email">`](/ja/docs/Web/HTML/Element/input/email)
+
+- [CSS プロパティの互換性](/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls)
diff --git a/files/ja/web/html/element/input/tel/phone-number-with-options.png b/files/ja/web/html/element/input/tel/phone-number-with-options.png
new file mode 100644
index 0000000000..d5b55abe44
--- /dev/null
+++ b/files/ja/web/html/element/input/tel/phone-number-with-options.png