Web/HTML/Element/input を更新 (#351)

* Web/HTML/Element/input を更新

- 2021/03/27 までの英語版の変更を反映
- 未翻訳部分を翻訳完了
- 一部の用語を見直し（文書内で一貫性を確保するため）

* 空白が開いていなかったのを修正

1 files changed, 246 insertions, 257 deletions

diff --git a/files/ja/web/html/element/input/index.html b/files/ja/web/html/element/input/index.html
index 5a7ce1c5ca..a045573951 100644
--- a/files/ja/web/html/element/input/index.html
+++ b/files/ja/web/html/element/input/index.html
@@ -2,14 +2,18 @@
 title: '<input>: 入力欄 (フォーム入力) 要素'
 slug: Web/HTML/Element/input
 tags:
+  - Data entry
   - Element
   - Forms
   - HTML
+  - HTML forms
   - HTML input tag
   - HTML フォーム
-  - 'HTML:フローコンテンツ'
-  - 'HTML:対話型コンテンツ'
-  - 'HTML:記述コンテンツ'
+  - HTML:フローコンテンツ
+  - HTML:対話型コンテンツ
+  - HTML:記述コンテンツ
+  - Input
+  - MakeBrowserAgnostic
   - Reference
   - Web
   - ウェブ
@@ -26,7 +30,7 @@ translation_of: Web/HTML/Element/input
 
 <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>
+<h2 id="input_types">&lt;input&gt; の型</h2>
 
 <p><code>&lt;input&gt;</code> の動作は {{htmlattrxref("type", "input")}} 属性の値に応じて大きく異なりますので、個別のリファレンスページでさまざまな型を扱っています。この属性を指定しない場合の既定の型は <code>text</code> です。</p>
 
@@ -43,7 +47,6 @@ translation_of: Web/HTML/Element/input
    <th>型</th>
    <th>説明</th>
    <th>基本的な例</th>
-   <th>仕様書</th>
   </tr>
  </thead>
  <tbody>
@@ -51,220 +54,197 @@ translation_of: Web/HTML/Element/input
    <td>{{HTMLElement("input/button", "button")}}</td>
    <td>プッシュボタンで、既定の動作を持たず、 {{anch('htmlattrdefvalue', 'value')}} 属性の値 (既定では空) を表示します。</td>
    <td id="examplebutton">
-    <pre class="brush: html hidden notranslate">
+    <pre class="brush: html hidden">
 &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">
+    <pre class="brush: html hidden">
 &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">
+    <pre class="brush: html hidden">
 &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">
+    <pre class="brush: html hidden">
 &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">
+    <pre class="brush: html hidden">
 &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">
+    <pre class="brush: html hidden">
 &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">
+    <pre class="brush: html hidden">
 &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>
+   <td><input id="userId" name="userId" type="hidden" value="abc123"></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">
+    <pre class="brush: html hidden">
 &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">
+    <pre class="brush: html hidden">
 &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">
+    <pre class="brush: html hidden">
 &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>入力値を隠す単一行テキストフィールド。サイトが安全ではない場合はユーザーに警告します。</td>
    <td id="examplepassword">
-    <pre class="brush: html hidden notranslate">
+    <pre class="brush: html hidden">
 &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">
+    <pre class="brush: html hidden">
 &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">
+    <pre class="brush: html hidden">
 &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">
+    <pre class="brush: html hidden">
 &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>検索文字列を入力するための単一行のテキスト欄です。入力値から改行が自動的に取り除かれます。対応しているブラウザーでは、入力欄を初期化するための削除アイコンが表示されることがあり、欄の内容を消去するために使用することができます。動的なキーパッドを持つ一部の端末では、 Enter キーの代わりに検索アイコンを表示します。</td>
    <td id="examplesearch">
-    <pre class="brush: html hidden notranslate">
+    <pre class="brush: html hidden">
 &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">
+    <pre class="brush: html hidden">
 &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">
+    <pre class="brush: html hidden">
 &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>既定値です。単一行のテキスト入力欄です。改行は自動的に入力値から取り除かれます。</td>
    <td id="exampletext">
-    <pre class="brush: html hidden notranslate">
+    <pre class="brush: html hidden">
 &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">
+    <pre class="brush: html hidden">
 &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>URL を入力するための入力欄です。 <code>text</code> 入力欄のように見えますが、対応しているブラウザーや動的なキーボードのある端末では、入力値を検証したり、関連するキーボードを表示したりします。</td>
    <td id="exampleurl">
-    <pre class="brush: html hidden notranslate">
+    <pre class="brush: html hidden">
 &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">
+    <pre class="brush: html hidden">
 &lt;input type="week" name="week"/&gt;</pre>
     {{EmbedLiveSample("exampleweek",200,55,"","", "nobutton")}}</td>
-   <td>{{HTMLVersionInline("5")}}</td>
   </tr>
   <tr>
-   <th colspan="4">廃止された値</th>
+   <th colspan="3">廃止された値</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">
+    <pre class="brush: html hidden">
 &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>
+<h2 id="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>
+ <caption>{{htmlelement('input')}} 要素の属性で、 <a href="/ja/docs/Web/HTML/Global_attributes">HTML のグローバル属性</a>を含むもの</caption>
  <thead>
   <tr>
    <th scope="col">属性</th>
@@ -306,7 +286,7 @@ translation_of: Web/HTML/Element/input
   <tr>
    <td>{{anch('htmlattrdefdirname', 'dirname')}}</td>
    <td>text, search</td>
-   <td>フォーム送信時に要素の方向性を送信するために使用するフォームフィールドの名前です。</td>
+   <td>フォーム送信時に要素の書字方向を送信するために使用するフォームフィールドの名前</td>
   </tr>
   <tr>
    <td>{{anch('htmlattrdefdisabled', 'disabled')}}</td>
@@ -416,17 +396,17 @@ translation_of: Web/HTML/Element/input
   <tr>
    <td>{{anch('htmlattrdefstep', 'step')}}</td>
    <td>numeric types</td>
-   <td>有効な増分</td>
+   <td>妥当と見なされる増分。</td>
   </tr>
   <tr>
    <td>{{anch('htmlattrdeftype', 'type')}}</td>
    <td>all</td>
-   <td>入力フォームコントロールの型</td>
+   <td>フォームコントロールの型</td>
   </tr>
   <tr>
    <td>{{anch('htmlattrdefvalue', 'value')}}</td>
    <td>all</td>
-   <td>このフォームコントロールの現在の値。名前/値の組の部分としてフォームと一緒に送信される</td>
+   <td>最初、 HTML で明確に指定された場合は初期値。もっと一般的には、このフォームコントロールの現在の値。名前/値の組の部分としてフォームと一緒に送信される。</td>
   </tr>
   <tr>
    <td>{{anch('htmlattrdefwidth', 'width')}}</td>
@@ -438,7 +418,7 @@ translation_of: Web/HTML/Element/input
 
 <p>標準属性の説明に続いて、いくつかの追加の非標準属性を列挙します。</p>
 
-<h3 id="個々の属性">個々の属性</h3>
+<h3 id="Individual_attributes">個々の属性</h3>
 
 <dl>
  <dt id="htmlattrdefaccept">{{htmlattrdef("accept")}}</dt>
@@ -447,11 +427,11 @@ translation_of: Web/HTML/Element/input
  </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>
+ <p><code>image</code> ボタンに対してのみ有効です。 <code>alt</code> 属性は画像の代替テキストを提供し、 <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>(論理属性では<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>
 
@@ -484,16 +464,16 @@ translation_of: Web/HTML/Element/input
  <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><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>
+ <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;
+ <pre>&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;
@@ -546,11 +526,11 @@ translation_of: Web/HTML/Element/input
  <dd>
  <p><code>image</code> 入力型でのみ有効です。 <code>height</code> はグラフィックの送信ボタンの表現を表示するための画像ファイルの高さを示します。 {{HTMLElement("input/image", "image")}} 入力型を参照してください。</p>
  </dd>
- <dt id="htmlattrdefheight">{{htmlattrdef("id")}}</dt>
+ <dt id="htmlattrdefid">{{htmlattrdef("id")}}</dt>
  <dd>
  <p>すべての入力欄を含む、すべての要素で有効なグローバル属性で、文書全体で一意でなければならない一意の識別子 (ID) を定義します。その目的は、リンクする際に要素を識別することです。この値は、ラベルとフォームコントロールをリンクするための {{htmlelement('label')}} の <code>for</code> 属性の値として使用されます。 {{htmlelement('label')}} を参照してください。</p>
  </dd>
- <dt id="htmlattrdefheight">{{htmlattrdef("inputmode")}}</dt>
+ <dt id="htmlattrdefinputmode">{{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>
@@ -558,7 +538,7 @@ translation_of: Web/HTML/Element/input
  <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;
+ <pre class="brush: html hidden">&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;
@@ -601,13 +581,13 @@ translation_of: Web/HTML/Element/input
 
  <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("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>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>
@@ -615,11 +595,11 @@ translation_of: Web/HTML/Element/input
  <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>
+ <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>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>
 
@@ -629,34 +609,34 @@ translation_of: Web/HTML/Element/input
  <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>
+ <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>
+ <p>論理属性の <code>multiple</code> は、設定されている場合、 email 入力欄ではユーザーがウィジェット内でカンマ区切りで複数のメールアドレスを入力できること、また <code>file</code> 入力欄では複数のファイルを選択することができることを意味します。 {{HTMLElement("input/email", "email")}} および {{HTMLElement("input/file", "file")}} 入力型を参照してください。</p>
  </dd>
  <dt id="htmlattrdefname">{{htmlattrdef("name")}}</dt>
  <dd>
  <p>入力コントロールの名前を指定する文字列です。この名前はフォームデータが送信される時に、コントロールの値と共に送信されます。</p>
 
- <h5 id="Whats_in_a_name" name="Whats_in_a_name">name に入れるもの</h5>
+ <h5 id="Whats_in_a_name">name に入れるもの</h5>
 
  <p><code>name</code> は (厳密にはそうではありませんが) 必須の属性と考えてください。入力欄に <code>name</code> が指定されていなかった場合や <code>name</code> が空欄だった場合、その入力欄の値はフォームと一緒に送信されません。 (無効なコントロール、チェックされていないラジオボタン、チェックされていないチェックボックス、リセットボタンも送信されません。)</p>
 
- <p>特殊な場合が2つあります。</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>
+ <h5 id="name_and_radio_buttons">name とラジオボタン</h5>
 
  <p><a href="#htmlattrdefname"><code>name</code></a> 属性はラジオボタンでは独特の動きをします。</p>
 
- <p>同名のラジオボタングループ内で、一度にチェックできるラジオボタンは1つのみです。そのグループ内のラジオボタンを選択すると、同じグループ内の現在選択されているラジオボタンの選択が自動的に解除されます。チェックされたラジオボタンの値は、フォームが送信された場合、名前と一緒に送信されます。</p>
+ <p>同名のラジオボタングループ内で、一度にチェックできるラジオボタンは 1 つのみです。そのグループ内のラジオボタンを選択すると、同じグループ内の現在選択されているラジオボタンの選択が自動的に解除されます。チェックされたラジオボタンの値は、フォームが送信された場合、名前と一緒に送信されます。</p>
 
- <p>同名のラジオボタンが連続したグループにタブ移動した場合、そのうちの1つにチェックが入っていると、それがフォーカスを受け取ります。ソース順でグループ化されていない場合、グループのうちの1つがチェックされていた場合は、タブ移動でグループ内の最初のラジオボタンに出会ったときに、チェックが入っていないラジオボタンをすべてスキップして、そのグループがフォーカスを受け取ります。言い換えれば、1つがチェックされている場合、グループ内のチェックされていないラジオボタンはスキップされます。どれもチェックされていない場合、同名グループの最初のボタンに到達したときに、ラジオボタングループがフォーカスを受け取ります。</p>
+ <p>同名のラジオボタンが連続したグループにタブ移動した場合、そのうちの 1 つにチェックが入っていると、それがフォーカスを受け取ります。ソース順でグループ化されていない場合、グループのうちの 1 つがチェックされていた場合は、タブ移動でグループ内の最初のラジオボタンに出会ったときに、チェックが入っていないラジオボタンをすべてスキップして、そのグループがフォーカスを受け取ります。言い換えれば、 1 つがチェックされている場合、グループ内のチェックされていないラジオボタンはスキップされます。どれもチェックされていない場合、同名グループの最初のボタンに到達したときに、ラジオボタングループがフォーカスを受け取ります。</p>
 
  <p>グループ内のラジオボタンにフォーカスがある場合、矢印キーを使用すれば、ラジオボタンがソースの順序でグループ化されていなくても、同じ名前のすべてのラジオボタンに移動することができます。</p>
 
@@ -664,7 +644,7 @@ translation_of: Web/HTML/Element/input
 
  <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");
+ <pre class="brush: js">let form = document.querySelector("form");
 
 let guestName = form.elements.guest;
 let hatSize = form.elements["hat-size"];
@@ -673,13 +653,13 @@ let hatSize = form.elements["hat-size"];
  <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>
+ <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> 属性は、指定された場合、入力の {{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>
 
@@ -692,57 +672,62 @@ let hatSize = form.elements["hat-size"];
  </dd>
  <dt id="htmlattrdefplaceholder">{{htmlattrdef("placeholder")}}</dt>
  <dd>
- <p><code>placeholder</code> 属性は、フィールドでどのような情報が期待されているかについて、ユーザーに簡単なヒントを与える文字列です。説明的なメッセージではなく、予想されるデータのタイプを示す単語または短いフレーズである必要があります。テキストには、改行を含めては<em>いけません</em>。</p>
+ <p><code>placeholder</code> 属性は、フィールドでどのような情報が期待されているかについて、ユーザーに簡単なヒントを与える文字列です。説明やプロンプトではなく、期待されるデータのタイプのヒントとなる単語や短いフレーズである必要があります。テキストには、改行を含めては<em>いけません</em>。例えば、ユーザーの名前を入力するフィールドで、そのラベルが "First Name" の場合、適切なプレースホルダーは "e.g. Mustafa" となります。</p>
 
  <div class="note">
- <p><strong>注:</strong> <code>placeholder</code> 属性は、フォームを説明するためには他の方法ほど意味的に有用ではなく、コンテンツに予期せぬ技術的な問題を引き起こす可能性があります。詳細は{{SectionOnPage("/ja/docs/Web/HTML/Element/input", "Labels")}}を参照してください。</p>
+ <p><strong>注:</strong> <code>placeholder</code> 属性は、フォームを説明するためには他の方法ほど意味的に有用ではなく、コンテンツに予期せぬ技術的な問題を引き起こす可能性があります。詳細は<a href="#label">ラベル</a>を参照してください。</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>
+ <p>詳しくは <a href="/ja/docs/Web/HTML/Attributes/readonly">HTML 属性: <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>
+ <p>詳しくは{{anch("Client-side validation", "クライアント側検証")}}および <a href="/ja/docs/Web/HTML/Attributes/required">HTML 属性: <code>required</code></a> を参照してください。</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>
+ <dd><code>email</code>, <code>password</code>, <code>tel</code>, <code>text</code> の <code>input</code> 型でのみ有効です。入力内容をどれだけ表示するかを指定します。基本的には、 CSS の <code>width</code> プロパティを設定するのと同じ効果が得られますが、いくつかの特徴があります。値の実際の単位は、入力型によって異なります。 <code>password</code> や <code>text</code> の場合は文字数 (または <code>em</code> 単位) で既定値は <code>20</code>、それ以外の場合はピクセルとなります。 CSS の width は size 属性よりも優先されます。</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>
+ <p><code>image</code> 入力ボタンにのみ有効で、 <code>src</code> は、グラフィカルな送信ボタンを表現するために表示する画像ファイルの URL を指定する文字列です。 {{HTMLElement("input/image", "image")}} 入力型を参照してください。</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>数値入力型、例えば <code>number</code>、日付／時刻入力型、 <code>range</code> 型で有効です。 <code><a href="/ja/docs/Web/HTML/Attributes/step">step</a></code> 属性は、値が準拠すべき粒度を指定する数値です。</p>
+
+ <p>明示的に指定しない場合は次のようになります。</p>
+
+ <ul>
+  <li><code>number</code> と <code>range</code> の場合、 <code>step</code> の既定値は 1 です。</li>
+  <li>日付や時刻の入力型では、 <code>step</code> は秒単位の表現となり、<strong>既定の step は 60 秒</strong>になります。 step の係数は 1000 です (他のアルゴリズムの場合と同様、秒からミリ秒へ変換します)。</li>
+ </ul>
 
- <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>値は、正の整数または浮動小数点実数、または特殊な値 <code>any</code> のいずれかでなければなりません。これは、刻みが考慮されず、あらゆる値が許容されることを意味します (<code>{{anch("min")}}</code> や <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><code>any</code> が明示的に設定されていない場合、 <code>number</code>、日付/時刻、 <code>range</code> の各入力型の妥当な値は、刻みの基数と等しくなります。すなわち <code>{{anch("min")}}</code> の値と、そこから step 値単位で増加させたもの (指定されている場合は <code>{{anch("max")}}</code> まで) です。</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>
+ <p>例えば、 <code>&lt;input type="number" min="10" step="2"&gt;</code> とすると、 <code>10</code> 以上の偶数の整数であればすべて妥当となります。 <code>&lt;input type="number"&gt;</code> のように省略された場合は、整数であれば何でも妥当ですが、浮動小数点実数 (<code>4.2</code> など) は <code>step</code> の既定値が <code>1</code> なので妥当ではありません。 <code>4.2</code> を妥当にするためには、 <code>step</code> に <code>any</code>、0.1、0.2 に設定するか、 <code>min</code> の値を <code>.2</code> で終わる数に (例えば <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>
+ <p><strong>注:</strong> ユーザーが入力したデータが刻みの設定に従っていない場合、その値は制約検証で無効とみなされ、 <code>:invalid</code> 擬似クラスに一致するようになります。</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>
+ <p>詳しくは{{anch("Client-side validation", "クライアント側検証")}}を参照してください。</p>
  </dd>
- <dt id="htmlattrdeftype">{{htmlattrdef("tabindex")}}</dt>
+ <dt id="htmlattrdeftabindex">{{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>
+ <p>すべての要素、すべての入力型で有効なグローバル属性で、要素が入力フォーカスを受けられる (フォーカス可能) かどうかを示す整数属性であり、順次キーボードナビゲーションに加わるべきかどうかを示します。 hidden 型の入力を除くすべての入力型がフォーカス可能であるため、この属性はフォームコントロールに使用すべきではありません。そうすると文書内のすべての要素のフォーカス順序を管理しなければならず、間違って行うとユーザビリティやアクセシビリティを損なう危険性があるからです。</p>
  </dd>
- <dt id="htmlattrdefformenctype">{{htmlattrdef('title')}}</dt>
+ <dt id="htmlattrdeftitle">{{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>
+ <p>すべての要素、すべての入力型で有効なグローバル属性で、所属する要素に関連するアドバイス情報を表すテキストを指定します。このような情報は、ふつうツールチップとしてユーザーに提示されますが、必ずそうとは限りません。 title は、フォームコントロールの目的の主たる説明として使用してはいけません。代わりに {{htmlelement('label')}} 要素を使用し、その <code>for</code> 属性でフォームコントロールの {{htmlattrdef('id')}} 属性を指すようにしてください。下記の{{anch("Labels", "ラベル")}}を参照してください。</p>
  </dd>
  <dt id="htmlattrdeftype">{{htmlattrdef("type")}}</dt>
  <dd>
@@ -756,13 +741,13 @@ let hatSize = form.elements["hat-size"];
  </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>
+ <p><code>image</code> 入力ボタンにのみ有効で、 <code>width</code> にはグラフィックの送信ボタンを表現するために表示する画像ファイルの幅を指定します。 {{HTMLElement("input/image", "image")}} 入力型を参照してください。</p>
  </dd>
 </dl>
 
-<h3 id="Non-standard_attributes" name="Non-standard_attributes">標準外の属性</h3>
+<h3 id="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>
+<p>一部のブラウザーでは、以下の標準外の属性も利用できます。原則として、どうしようもない場合を除き、これらの使用は避けるべきです。</p>
 
 <table class="standard-table">
  <thead>
@@ -774,27 +759,27 @@ let hatSize = form.elements["hat-size"];
  <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>
+   <td>自動補完が <code>on</code> であるか <code>off</code> であるかを示す文字列です。 <strong>Safari のみ。</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>
+   <td>ユーザーがフィールドの値を編集している途中にライブで検索結果を更新できるように、 {{domxref("HTMLInputElement/search_event", "search")}} イベントを繰り返し送信するかどうかを設定します。 <strong>WebKit および Blink のみ (Safari, Chrome, Opera, など)。</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>
+   <td>文字列で、ユーザーがフィールドの編集中に <kbd>Enter</kbd> キーや <kbd>Return</kbd> キーを押したときに実行されるアクションの種類を示す文字列です。仮想キーボード上で、そのキーに対応する適切なラベルを決定するために使用されます。 <strong>Android 版 Firefox のみ</strong>。</td>
   </tr>
   <tr>
    <td><code>{{anch("orient")}}</code></td>
-   <td>Sets the orientation of the range slider. <strong>Firefox only</strong>.</td>
+   <td>範囲のスライダーの向きを設定します。 <strong>Firefox のみ</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>
+   <td>以前の検索クエリーのドロップダウンリストに表示する項目の最大数です。 <strong>Safari のみ。</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>
+   <td>論理属性で、ユーザーがディレクトリー (または <code>{{anch("multiple")}}</code> も存在すれば複数のディレクトリー) を選択できるようにするかどうかを示します。</td>
   </tr>
  </tbody>
 </table>
@@ -805,16 +790,16 @@ let hatSize = form.elements["hat-size"];
  <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>
+ <dd>{{page("/ja/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>
+ <dd>{{page("/ja/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>
+ <dd>{{page("/ja/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>
+ <dd>{{page("/ja/docs/Web/HTML/Element/input/file", "webkitdirectory-include")}}</dd>
 </dl>
 
-<h2 id="Methods" name="Methods">メソッド</h2>
+<h2 id="Methods">メソッド</h2>
 
 <p>以下のメソッドは DOM 内で <code>&lt;input&gt;</code> を表現する {{domxref("HTMLInputElement")}} インターフェイスで提供されます。親インターフェイスである {{domxref("HTMLElement")}}, {{domxref("Element")}}, {{domxref("Node")}}, {{domxref("EventTarget")}} で指定されているメソッドも使用できます。</p>
 
@@ -826,7 +811,7 @@ let hatSize = form.elements["hat-size"];
  <dt>{{domxref("HTMLInputElement.select", "select()")}}</dt>
  <dd>要素が選択可能な場合、 <code>&lt;input&gt;</code> 要素の内容を選択します。選択可能なテキストコンテンツがない要素 (カラーピッカーまたはカレンダー日付入力など) では、このメソッドは何もしません。</dd>
  <dt>{{domxref("HTMLInputElement.setCustomValidity", "setCustomValidity()")}}</dt>
- <dd>入力要素の値が妥当ではないときに表示するカスタムメッセージを設定します。</dd>
+ <dd>入力要素の値が妥当ではないときに表示する独自のメッセージを設定します。</dd>
  <dt>{{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}</dt>
  <dd>入力要素内の文字の指定された範囲のコンテンツを、指定された文字列に設定します。 <code>selectMode</code> 引数を使用して、既存のコンテンツに影響させる方法を制御することができます。</dd>
  <dt>{{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</dt>
@@ -839,12 +824,12 @@ let hatSize = form.elements["hat-size"];
 
 <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>
+<p>置換要素である入力欄には、フォーム要素以外には適用できない特性がいくつかあります。フォームコントロールをその UI の特性に基づいて指定できる CSS セレクターがあり、 UI 擬似クラスとも呼ばれています。また、属性セレクターを使って、 input 要素を型別に指定することもできます。また、特に便利なプロパティもあります。</p>
 
-<h3 id="UI_pseudo-classes" name="UI_pseudo-classes">UI 擬似クラス</h3>
+<h3 id="UI_pseudo-classes">UI 擬似クラス</h3>
 
 <table class="standard-table">
- <caption>Captions super relevant to the {{htmlelement("input")}} element:</caption>
+ <caption>{{htmlelement("input")}} 要素に関連する説明</caption>
  <thead>
   <tr>
    <th>擬似クラス</th>
@@ -854,81 +839,81 @@ let hatSize = form.elements["hat-size"];
  <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>
+   <td>現在有効な要素で、アクティブ化 (選択、クリック、入力など) またはフォーカスを受け受け取ることができ、無効な状態、すなわちアクティブ化やフォーカスを受け取ることができない状態を持つものです。</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>
+   <td>現在無効な要素で、有効な状態、すなわち無効化されていなければアクティブ化 (選択、クリック、入力など) やフォーカス��受け取ることができる状態になることができるものです。</td>
   </tr>
   <tr>
    <td>{{Cssxref(":read-only")}}</td>
-   <td>Element not editable by the user</td>
+   <td>ユーザーが編集することができない要素</td>
   </tr>
   <tr>
    <td>{{Cssxref(":read-write")}}</td>
-   <td>Element that is editable by the user.</td>
+   <td>ユーザーが編集できる要素です。</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>
+   <td>現在<a href="/ja/docs/Web/HTML/Element/input#attr-placeholder">プレイスホルダーのテキスト</a>を表示している要素で、 {{HTMLElement("input")}} や {{HTMLElement("textarea")}} 要素に {{anch('htmlattrdefplaceholder', 'placeholder')}} 属性が付いていて、まだ値がないものを含みます。</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>
+   <td>関連する要素のグループの中で、既定となるフォーム要素です。 {{HTMLElement("input/checkbox", "checkbox")}} や {{HTMLElement("input/radio", "radio")}} の入力型のうち、ページの読み込み時やレンダリング時にチェックされていたものに一致します。</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>
+   <td>{{HTMLElement("input/checkbox", "checkbox")}} や {{HTMLElement("input/radio", "radio")}} の入力型のうち、現在チェックされている (また {{HTMLElement("select")}} の {{HTMLElement("option")}} のうち現在選択されているもの) に一致します。</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>
+   <td>{{HTMLElement("input/checkbox", "checkbox")}} 要素で indeterminate プロパティが JavaScript から true に設定されている場合、 {{HTMLElement("input/radio", "radio")}} 要素で同じ name の値を持つすべてのラジオボタンがチェックされていない場合、 {{HTMLElement("progress")}} 要素が indeterminate の状態にある場合</td>
   </tr>
   <tr>
    <td>{{Cssxref(":valid")}}</td>
-   <td>Form controls that can have constraint validation applied and are currently valid.</td>
+   <td>フォームコントロールのうち、制約検証が適用でき、現在妥当であるもの。</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>
+   <td>制約条件の検証が適用され、現在妥当ではないフォームコントロール。 {{anch('htmlattrdefrequired', 'required')}}, {{anch('htmlattrdefpattern', 'pattern')}} , {{anch('htmlattrdefstep', 'step')}}, {{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>
+   <td>空でない入力欄のうち、現在の値が {{anch('htmlattrdefmin', 'min')}} および {{anch('htmlattrdefmax', 'max')}} 属性、および {{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>
+   <td>空でない入力欄のうち、現在の値が {{anch('htmlattrdefmin', 'min')}} および {{anch('htmlattrdefmax', 'max')}} 属性の範囲内にないか、 {{anch('htmlattrdefstep', 'step')}} の制約に準拠していないもの。</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>
+   <td>{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} の各要素で、 {{ htmlattrxref("required", "input")}} 属性が設定されているもの。必須になる要素のみに一致します。必須にならない要素にこの属性を設定しても、一致するようにはなりません。</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>
+   <td>{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} の各要素で、 {{ htmlattrxref("required", "input")}} 属性が設定されていないもの。必須になることがない属性には一致しません。</td>
   </tr>
   <tr>
    <td>{{Cssxref(":blank")}}</td>
-   <td>{{HTMLElement("input")}} and {{HTMLElement("textarea")}} elements that currently have no value.</td>
+   <td>{{HTMLElement("input")}} および {{HTMLElement("textarea")}} 要素のうち現在値がないものです。</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>
+   <td><code>:invalid</code> と似ていますが、フォーカスを失ったときに適用されます。無効な入力欄に一致しますが、コントロールにフォーカスが移動したり、コントロールから離れたり、無効なコントロールを含むフォームを送信しようとしたときなど、ユーザーの操作があって初めて一致します。</td>
   </tr>
  </tbody>
 </table>
 
-<h4 id="Examples" name="Examples">例</h4>
+<h4 id="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>
+<p>チェックボックスのラベルを、そのチェックボックスがチェックされているかどうかに基づいてスタイル付けすることができます。この例では、 {{cssxref('color')}} と {{cssxref('font-weight')}} でチェックされたボックスの直後にある {{htmlelement('label')}} をスタイル付けしています。 <code>input</code> がチェックされていない場合はスタイルを適用しません。</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 class="brush: html hidden">&lt;input id="checkboxInput" type="checkbox"&gt;
+&lt;label for="checkboxInput"&gt;このチェックボックスのオンとオフを切り替えてください&lt;/label&gt;
 </pre>
 
-<pre class="brush: css notranslate">input:checked + label {
+<pre class="brush: css">input:checked + label {
   color: red;
   font-weight: bold;
 }
@@ -937,131 +922,137 @@ let hatSize = form.elements["hat-size"];
 <p>{{EmbedLiveSample('checkbox_label', 500, 80)}}</p>
 </div>
 
-<h3 id="Attribute_selectors" name="Attribute_selectors">属性セレクター</h3>
+<h3 id="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>
+<p><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性セレクター</a>を使用すると、様々なフォームコントロールの型のターゲットを {{anch('htmlattrdeftype', 'type')}} に基づいて絞ることができます。 CSS の属性セレクターは、属性の有無または属性の値に基づいて要素を照合します。</p>
 
-<pre class="brush: css notranslate">/* matches a password input */
+<pre class="brush: css">/* password 入力欄に一致 */
 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 */
+/* pattern 属性の付いたフォームコントロールに一致 */
  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>
+<p>既定では、プレイスホルダーのテキストは半透明または明るい灰色で表示されます。 {{cssxref('::placeholder')}} 擬似要素は入力欄の <a href="/ja/docs/Learn/Forms#the_placeholder_attribute">プレイスホルダーのテキスト</a>です。これは限定された CSS プロパティでスタイル付けすることができます。</p>
 
-<pre class="brush: css no-line-numbers notranslate">::placeholder {
+<pre class="brush: css no-line-numbers">::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>
+<p>{{cssxref("::first-line")}} 擬似要素に適用できる CSS プロパティのサブセットのみが、セレクターに <code>::placeholder</code> を使用した規則で使用することができます。</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>{{cssxref("appearance")}} プロパティは、 (ほぼ) あらゆる要素をオペレーティングシステムのテーマに基づいたプラットフォームのネイティブのスタイルで表示したり、 <code>none</code> の値でプラットフォームのネイティブのスタイルを削除したりすることができます。</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><code>&lt;div&gt;</code> に <code>div {appearance: radio;}</code> を設定してラジオボタンのように見せたり、 <code>[type="checkbox] {appearance: checkbox;}</code> でチェックボックスのように見せたりすることができますが、やらないでください。</p>
 
-<p>Setting <code>appearance: none</code> removes platform native borders, but not functionality.</p>
+<p><code>appearance: none</code> を設定するとプラットフォームのネイティブの境界が削除されますが、機能は削除されません。</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>
+<p>テキスト入力関連要素に特有のプロパティとして CSS の {{cssxref("caret-color")}} プロパティがあり、テキスト入力欄のキャレットを描くのに使用する色を設定することができます。</p>
 
 <h4 id="HTML">HTML</h4>
 
-<pre class="brush: html notranslate">&lt;label for="textInput"&gt;Note the red caret:&lt;/label&gt;
+<pre class="brush: html">&lt;label for="textInput"&gt;赤いキャレットに注意:&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 {
+<pre class="brush: css">input.custom {
   caret-color: red;
   font: 16px "Helvetica", "Arial", "sans-serif"
 }
 </pre>
 
-<h4 id="Result" name="Result">結果</h4>
+<h4 id="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>
+<h3 id="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>
+<p><code>&lt;input&gt;</code> 要素は特定の場合 (多くはテキスト以外の入力や特殊なインターフェイス) には、<a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a>になることがあります。その場合、 CSS の {{cssxref("object-position")}} および {{cssxref("object-fit")}} プロパティを使って、要素の枠内での大きさと位置を調整することができます。</p>
 
-<h3 id="Styling" name="Styling">スタイル付け</h3>
+<h3 id="Styling">スタイル付け</h3>
 
-<p>For more information about adding color to elements in HTML, see:</p>
+<p>HTML の要素に色を追加することの関する詳しい情報は、次の記事を参照してください。</p>
 
 <ul>
- <li><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a>.</li>
+ <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使った HTML の要素への色の適用</a></li>
 </ul>
 
-<p>Also see:</p>
+<p>こちらも参照してください。</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>
+ <li><a href="/ja/docs/Learn/Forms/Styling_web_forms">HTML フォームへのスタイル設定</a>、<a href="/ja/docs/Learn/Forms/Advanced_form_styling">HTML フォームへの高度なスタイル設定</a>、</li>
+ <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls"> フォームウィジェット向けプロパティ実装状況一覧</a></li>
 </ul>
 
-<h2 id="Additional_features" name="Additional_features">追加機能</h2>
+<h2 id="Additional_features">追加機能</h2>
 
-<h3 id="Labels" name="Labels">ラベル</h3>
+<h3 id="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>
+<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>
+<h4 id="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><code>&lt;input&gt;</code> 要素と <code>&lt;label&gt;</code> 要素を意味的に連携させると、読み上げアプリなどの支援技術に役立ちます。 <code>&lt;label&gt;</code> の {{htmlattrxref("for", "label")}} 属性を使って連携させることで、ラベルと入力欄を結び付け、読み上げアプリがユーザーに入力欄についてより正確に説明できるようになります。</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>
+<p><code>&lt;input&gt;</code> 要素にプレーンテキストが隣接しているだけでは十分ではありません。ユーザビリティとアクセシビリティのためには、暗黙的または明示的な {{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;
+<pre class="brush: html">&lt;!-- アクセシブルではない --&gt;
+&lt;p&gt;名前を入力してください: &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;!-- 暗黙的なラベル --&gt;
+&lt;p&gt;&lt;label&gt;名前を入力してください: &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>
+&lt;!-- 明示的なラベル --&gt;
+&lt;p&gt;&lt;label for="name"&gt;名前を入力してください: &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>最初の例は、プロンプトと <code>&lt;input&gt;</code> 要素の間に関係がないため、アクセシブルではありません。</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>ラベルはアクセシブルな名前を提供するばかりではなく、マウスやタッチパネルのユーザーがクリックしたりタッチしたりする際に、「ヒット」領域を拡大することができます。 <code>&lt;label&gt;</code> と <code>&lt;input&gt;</code> を連携させることで、どちらかをクリックすると <code>&lt;input&gt;</code> にフォーカスが当たります。入力欄の「ラベル」にプレーンテキストを使用した場合、このようなことは起こりません。入力欄のアクティベーション領域にプロンプト部分が含まれていると、運動制御の条件を持つ人には便利です。</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>
+<p>ウェブ開発者として大切なのは、私たちが知っていることを、人々がすべて知っていると思わないことです。ウェブを利用する人々に多様性があるということは、自分のウェブサイトにも及ぶことですが、サイトの訪問者の中には、思考プロセスや状況に何らかの違いがあり、明確で適切なラベルがなければ、あなたのフォームをあなたとは全く異なるように解釈する人がいるということでもあります。</p>
 
-<h4 id="Placeholders_are_not_accessible" name="Placeholders_are_not_accessible">プレイスホルダーはアクセシブルではない</h4>
+<h4 id="Placeholders_are_not_accessible">プレイスホルダーはアクセシブルではない</h4>
 
-<p>{{htmlattrxref("placeholder", "input")}} 属性で、 <code>&lt;input&gt;</code> 要素が空の時にコンテンツ領域に表示されるテキストを指定することができます。プレイスホルダーは、フォームを理解するために必要なものであってはいけません。ラベルではありませんし、その代用として使用すべきではありません。プレイスホルダーは入力例を示すために使用されるものであり、説明やプロンプトではありません。プレイスホルダーは、読み上げソフトがアクセスできないだけでなく、ユーザーがフォームコントロールにテキストを入力したり、フォームコントロールにすでに値があったりする場合、プレイスホルダーはなくなります。自動ページ翻訳機能を持つブラウザーは、翻訳時にこの属性をスキップする、すなわち <code>placeholder</code> が翻訳されないことがあります。</p>
+<p>{{htmlattrxref("placeholder", "input")}} 属性で、 <code>&lt;input&gt;</code> 要素が空の時にコンテンツ領域に表示されるテキストを指定することができます。プレイスホルダーは、フォームを理解するために決して必要なものではありません。プレイスホルダーはラベルではありませんので、代用として使用してはいけません。プレイスホルダーは、入力された値がどのように見えるかのヒントを提供するために使用されるもので、説明やプロンプトではありません。</p>
 
-<div class="blockIndicator note">
-<p>避けることができるのであれば、 {{htmlattrxref("placeholder", "input")}} 属性を使用しないでください。 <code>&lt;input&gt;</code> 要素にラベルを付ける樋津陽があるのであれば、 {{HTMLElement("label")}} 属性を使用してください。</p>
+<p>プレイスホルダーは、読み上げアプリがアクセスできないだけでなく、ユーザーがフォームコントロールにテキストを入力したり、フォームコントロールにすでに値があったりした場合、プレイスホルダーは非表示になります。自動ページ翻訳機能を持つブラウザーは、翻訳時にこの属性をスキップすることがあります。すなわち <code>placeholder</code> は翻訳されないことがあります。</p>
+
+<div class="notecard note">
+<p>避けることができるのであれば、 {{htmlattrxref("placeholder", "input")}} 属性を使用しないでください。 <code>&lt;input&gt;</code> 要素にラベルを付ける必要があるのであれば、 {{HTMLElement("label")}} 属性を使用してください。</p>
 </div>
 
-<h3 id="Client-side_validation" name="Client-side_validation">クライアント側検証</h3>
+<h3 id="Client-side_validation">クライアント側検証</h3>
+
+<div class="notecard warning">
+<p><strong>警告:</strong> クライアント側の検証は便利ですが、サーバーが妥当なデータを受け取ることを保証するものではありません。データが特定の形式でなければならない場合は、必ずサーバー側でも検証を行い、形式が無効な場合は <a href="/ja/docs/Web/HTTP/Status/400">HTTP の 400 レスポンス</a>を返してください。</p>
+</div>
 
-<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>上記の {{anch('UI pseudo-classes', 'UI 擬似クラス')}}の節で述べたように、 CSS を用いて、それぞれの入力欄の現在の状態に基づく {{cssxref(":valid")}} または {{cssxref(":invalid")}} の UI 状態に基づいて入力欄にスタイル付けをすることに加え、フォームを送信 (しようと) したときに、ブラウザーはクライアント側の検証を行います。フォームを送信する時に、制約検証に不合格になったフォームコントロールがある場合、対応しているブラウザーは、最初の無効なフォームコントロールにエラーメッセージを表示します。エラー種別に基づいた既定のメッセージを表示したり、ユーザーが設定したメッセージを表示したりします。</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>一部の入力型やその他の属性によっては、入力に対して妥当な値を制限するものがあります。例えば、 <code>&lt;input type="number" min="2" max="10" step="2"&gt;</code> の場合、2、4、6、8、10 の数値のみが妥当になります。値が 2 より小さい場合は <code>rangeUnderflow</code> エラー、 10 より大きい場合は <code>rangeOverflow</code>、値が 2 から 10 の間の数字で偶数の整数でない (<code>step</code> 属性の要件に合わない) 場合は <code>typeMismatch</code>、値が数字でない場合は <code>typeMismatch</code> など、いくつかの種類のエラーが発生する可能性があります。</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>
+<p>可能な値の範囲が周期的な (つまり、値が取りうる最大値で終了するのではなく、最初に戻る) 入力型では、 {{htmlattrxref("max")}} プロパティと {{htmlattrxref("min")}} プロパティの値を逆にして、許可される値の範囲が <code>min</code> から始まり、可能な最小値まで回り込んで、 <code>max</code> に達するまで続くことを示すことが可能です。これは日付や時刻の場合、例えば午後 8 時から午前 8 時までの範囲を許可したい場合などに特に便利です。</p>
 
-<pre class="brush: html notranslate">&lt;input type="time" min="20:00" max="08:00" name="overnight"&gt;</pre>
+<pre class="brush: html">&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>
+<p>決まった属性と値の組み合わせが、 {{domxref('ValidityState')}} の決まったエラーを発生させます。</p>
 
 <table class="standard-table">
- <caption>Validity object errors depend on the {{htmlelement('input')}} attributes and their values:</caption>
+ <caption>{{htmlelement('input')}} の属性とその値による検証オブジェクトエラー</caption>
  <thead>
   <tr>
    <th scope="col">属性</th>
-   <th scope="col">関連するプロパティ/th&gt;</th>
+   <th scope="col">関連するプロパティ</th>
    <th scope="col">説明</th>
   </tr>
  </thead>
@@ -1069,51 +1060,51 @@ input[min][max] {}
   <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>
+   <td>値が <code>max</code> 属性で定義された最大値よりも大きい場合に発生する</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>
+   <td><code>maxlength</code> プロパティで許可された値よりも文字数が多い場合に発生する</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>
+   <td>値が <code>min</code> 属性で定義された最小値よりも小さい場合には発生する</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>
+   <td><code>minlength</code> プロパティで必要とされる値よりも文字数が少ない場合に発生する</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>
+   <td>pattern 属性に妥当な正規表現が設定されており、 <code>value</code> がそれに一致しない場合に発生する。</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>
+   <td><code>required</code> 属性があるにもかかわらず、値が <code>null</code> であるか、ラジオボタンやチェックボックスがチェックされていない場合に発生する。</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>
+   <td>値が step の増分に一致していない。増分の既定値は <code>1</code> であるため、 <code>type="number"</code> で step が指定されていない場合は整数のみが妥当になります。 <code>step="any"</code> ではこのエラーは発生しません。</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>
+   <td>値が正しい型ではない場合、例えばメールアドレスに <code>@</code> が含まれていない場合や、 URL にプロトコルが含まれていない場合に発生します。</td>
   </tr>
  </tbody>
 </table>
 
-<p>フォームコントロールに <code>required</code> 属性がない場合、値がない場合や空文字列出会った場合は無効にはなりません。 <code>required</code> 以外の上記の属性があった場合も、空文字列でエラーにはなりません。</p>
+<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>どのような値を受け入れることができるかの制限を設けることができるので、対応しているブラウザーはこれらのフォームの値をネイティブに検証し、フォームの送信時に誤りがある場合はユーザーに警告を発します。</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>
+<p>上記の表で説明したエラーに加え、 <code>validityState</code> インターフェイスには <code>badInput</code>, <code>valid</code>, <code>customError</code> の boolean の読み取り専用プロパティがあります。検証オブジェクトに含まれるのは次の通りです。</p>
 
 <ul>
  <li>{{domxref('validityState.valueMissing')}}</li>
@@ -1129,11 +1120,11 @@ input[min][max] {}
  <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>これらの Boolean プロパティではそれぞれ、 <code>true</code> の値で指定された観点の検証に合格しなかった可能性があることを示しますが、 <code>valid</code> プロパティは例外で、その要素の値がすべての検証に合格したときに <code>true</code> になります。</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>
+<p>エラーがあった場合、対応しているブラウザーでは、ユーザーに警告するとともに、フォームの送信を阻止します。注意点としては、独自のエラーに真とみなされる値 (空の文字列や <code>null</code> 以外) が設定されていると、フォームの送信が阻止されます。独自のエラーメッセージがなく、他のどのプロパティも true を返さない場合、 <code>valid</code> は true となり、フォームは送信されます。</p>
 
-<pre class="brush: js notranslate">function validate(input) {
+<pre class="brush: js">function validate(input) {
   let validityState_object = input.validity;
   if(validityState_object.valueMissing) {
      input.setCustomValidity('A value is required');
@@ -1146,11 +1137,11 @@ input[min][max] {}
   }
 }</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>
+<p>最後の行、独自の検証メッセージをエラー文字列に設定することが重要です。ユーザーがエラーを起こし、 validity が設定されている場合、すべての値が妥当であっても、メッセージが <code>null</code> になるまで送信に失敗します。</p>
 
-<h4 id="Example" name="Example">例</h4>
+<h4 id="Example">例</h4>
 
-<p>フィールドの検査に失敗したときに、独自のエラーメッセージを表示させたい場合は、 <code>&lt;input&gt;</code> (および関連する) 要素で利用できる<a href="/ja/docs/Web/API/Constraint_validation#Constraint_validation_interfaces">制約検証機能</a>を使用する必要があります。以下のような形を取ってください。</p>
+<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;
@@ -1158,11 +1149,11 @@ input[min][max] {}
   &lt;button&gt;Submit&lt;/button&gt;
 &lt;/form&gt;</pre>
 
-<p>基本的な HTML フォーム検証機能では、フォームを送信しようとしたときに、有効な値が入力されていなかったり、 <code>pattern</code> と一致しない値が入力されていたりすると、既定のエラーメッセージを生成します。</p>
+<p>基本的な HTML フォーム検証機能では、フォームを送信しようとしたときに、妥当な値が入力されていなかったり、 <code>pattern</code> と一致しない値が入力されていたりすると、既定のエラーメッセージを生成します。</p>
 
 <p>独自のエラーメッセージで代替したい場合は、以下のような JavaScript を使用することができます。</p>
 
-<pre class="brush: js notranslate">const nameInput = document.querySelector('input');
+<pre class="brush: js">const nameInput = document.querySelector('input');
 const form = document.querySelector('form');
 
 nameInput.addEventListener('input', () =&gt; {
@@ -1191,17 +1182,17 @@ nameInput.addEventListener('invalid', () =&gt; {
  <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 class="notecard note">
+	<p><strong>注:</strong> 常に、クライアント側とサーバー側の両方で入力値の制約を検証するようにしてください。制約検証は、<em>サーバー側</em>での検証の必要性をなくすものではありません。古いブラウザーや悪意のある人物によって、無効な値が送信される可能性があります。</p>
 </div>
 
-<div class="blockIndicator note">
-<p><strong>メモ</strong>: Firefox は多くの版で、同様の方法で独自のエラーメッセージを設定することができる、独自のエラー属性 — <code>x-moz-errormessage</code> — に対応していました。これはバージョン66で削除されました ({{bug(1513890)}} を参照)。</p>
+<div class="notecard note">
+<p><strong>注</strong>: Firefox は多くの版で、同様の方法で独自のエラーメッセージを設定することができる、独自のエラー属性 — <code>x-moz-errormessage</code> — に対応していました。これはバージョン66で削除されました ({{bug(1513890)}} を参照)。</p>
 </div>
 
-<h3 id="Localization" name="Localization">ローカライゼーション</h3>
+<h3 id="Localization">ローカライズ</h3>
 
-<p>&lt;input&gt; 型によっては、入力可能な文字列がロケールに依存します。ロケールによっては 1,000.00 が有効な数値である一方、ロケールによっては有効な数値は 1.000,00 です。</p>
+<p>&lt;input&gt; 型によっては、入力可能な文字列がロケールに依存します。ロケールによっては 1,000.00 が妥当な数値である一方、ロケールによっては妥当な数値は 1.000,00 です。</p>
 
 <p>Firefox は (少なくとも <code>type="number"</code> において) ユーザーの入力内容を検証する際に、ロケールを特定するために以下の経験則を使用します。</p>
 
@@ -1211,13 +1202,13 @@ nameInput.addEventListener('invalid', () =&gt; {
  <li>何も指定されていない場合は、ブラウザーのロケール</li>
 </ul>
 
-<h2 id="Technical_summary" name="Technical_summary">技術的概要</h2>
+<h3 id="Technical_summary">技術的概要</h3>
 
 <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>
+   <th scope="row"><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリ</a></th>
+   <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#flow_content">フローコンテンツ</a>、リスト化、サブミット可能、リセット可能、フォーム関連要素、<a href="/ja/docs/Web/Guide/HTML/Content_categories#phrasing_content">記述コンテンツ</a>。{{htmlattrxref("type", "input")}} の値が <code>hidden</code> でない場合はラベル付け可能要素、知覚可能コンテンツ。</td>
   </tr>
   <tr>
    <th scope="row">許可されている内容</th>
@@ -1229,48 +1220,48 @@ nameInput.addEventListener('invalid', () =&gt; {
   </tr>
   <tr>
    <th scope="row">許可されている親要素</th>
-   <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素。</td>
+   <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#phrasing_content">記述コンテンツ</a>を受け入れるすべての要素。</td>
   </tr>
   <tr>
-   <th scope="row">Implicit ARIA role</th>
+   <th scope="row">暗黙の ARIA ロール</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=button</code>: <code><a href="/ja/docsWeb/Accessibility/ARIA/Roles/button_role">button</a></code></li>
+     <li><code>type=checkbox</code>: <code><a href="/ja/docsWeb/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>
+       <li><code>list</code> 属性がない場合: <code><a href="/ja/docsWeb/Accessibility/ARIA/Roles/textbox_role">textbox</a></code></li>
+       <li><code>list</code> 属性がある場合: {{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=image</code>: <code><a href="/ja/docsWeb/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=reset</code>: <code><a href="/ja/docsWeb/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>
+       <li><code>list</code> 属性がない場合: {{ARIARole("searchbox")}}</li>
+       <li><code>list</code> 属性がある場合: {{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=submit</code>: <code><a href="/ja/docsWeb/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>
+       <li><code>list</code> 属性がない場合: <code><a href="/ja/docsWeb/Accessibility/ARIA/Roles/textbox_role">textbox</a></code></li>
+       <li><code>list</code> 属性がある場合: {{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>
+       <li><code>list</code> 属性がない場合: <code><a href="/ja/docsWeb/Accessibility/ARIA/Roles/textbox_role">textbox</a></code></li>
+       <li><code>list</code> 属性がある場合: {{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>
+       <li><code>list</code> 属性がない場合: <code><a href="/ja/docsWeb/Accessibility/ARIA/Roles/textbox_role">textbox</a></code></li>
+       <li><code>list</code> 属性がある場合: {{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>
@@ -1285,7 +1276,7 @@ nameInput.addEventListener('invalid', () =&gt; {
      <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=text</code> で <code>list</code> 属性がない場合: {{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>
@@ -1331,19 +1322,19 @@ nameInput.addEventListener('invalid', () =&gt; {
  </tbody>
 </table>
 
-<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+<h2 id="Accessibility_concerns">アクセシビリティの考慮</h2>
 
-<h3 id="Labels_2" name="Labels_2">ラベル</h3>
+<h3 id="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>入力欄を設定する際、ラベルを一緒に付けることがアクセシビリティ上の要件です。これは、支援技術を使っている人が、何のための入力なのかを知るために必要です。また、ラベルをクリックまたはタッチすると、ラベルに関連付けられたフォームコントロールにフォーカスが設定されます。これにより、目の不自由なユーザーのアクセシビリティとユーザビリティが向上し、ユーザーがクリックまたはタッチしてフォームコントロールを起動できる領域が増えます。この機能は、ラジオボタンやチェックボックスのような小さなフォームコントロールに特に便利です。ラベルの詳細については、{{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;
+<pre>&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>
+<h3 id="Size">大きさ</h3>
 
 <p>フォーム入力欄のような対話型要素は、簡単に有効化できるだけの大きさを持たせてください。これにより、手足の不自由な人や、スタイラスや指のような精度の低い入力方法を使用している人など、様々な人にとって有用です。対話型の大きさとしては、 44×44 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels">CSS ピクセル</a> を最小値とすることが推奨されています。</p>
 
@@ -1353,24 +1344,22 @@ nameInput.addEventListener('invalid', () =&gt; {
  <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>
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
 
 <div>{{Compat("html.elements.input")}}</div>
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+<h2 id="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>
+ <li><a href="/ja/docs/Learn/Forms/Your_first_form">初めての HTML フォーム</a></li>
+ <li><a href="/ja/docs/Learn/Forms/How_to_structure_a_web_form">HTML フォームを構成する方法</a></li>
+ <li><a href="/ja/docs/Learn/Forms/Basic_native_form_controls">ネイティブのフォームウィジェット</a></li>
+ <li><a href="/ja/docs/Learn/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li>
+ <li><a href="/ja/docs/Learn/Forms/Form_validation">フォームデータの検証</a></li>
+ <li><a href="/ja/docs/Learn/Forms/How_to_build_custom_form_controls">カスタムフォームコントロールの作成方法</a></li>
+ <li><a href="/ja/docs/Learn/Forms/HTML_forms_in_legacy_browsers">古いブラウザーでの HTML フォーム</a></li>
+ <li><a href="/ja/docs/Learn/Forms/Styling_web_forms">HTML フォームへのスタイル設定</a></li>
+ <li><a href="/ja/docs/Learn/Forms/Advanced_form_styling">HTML フォームへの高度なスタイル設定</a></li>
+ <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性一覧表</a></li>
 </ul>