Learn/Forms/Basic_native_form_controls を更新 (#655)

- 2021/03/24 時点の英語版に同期
- 原語併記マクロを削除

1 files changed, 168 insertions, 150 deletions

diff --git a/files/ja/learn/forms/basic_native_form_controls/index.html b/files/ja/learn/forms/basic_native_form_controls/index.html
index c70f746b3b..677455f790 100644
--- a/files/ja/learn/forms/basic_native_form_controls/index.html
+++ b/files/ja/learn/forms/basic_native_form_controls/index.html
@@ -2,12 +2,15 @@
 title: 基本的なネイティブフォームコントロール
 slug: Learn/Forms/Basic_native_form_controls
 tags:
+  - Beginner
+  - Controls
   - Example
   - Forms
   - Guide
   - HTML
-  - Intermediate
+  - Input
   - Web
+  - Widgets
 translation_of: Learn/Forms/Basic_native_form_controls
 original_slug: Learn/Forms/The_native_form_widgets
 ---
@@ -15,13 +18,13 @@ original_slug: Learn/Forms/The_native_form_widgets
 
 <div>{{PreviousMenuNext("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}</div>
 
-<p class="summary"><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_structure_a_web_form">直前の記事</a>では、機能的なウェブフォームの例をマークアップし、いくつかのフォームコントロールとよくある構造要素を導入し、アクセシビリティのベストプラクティスを見てきました。次にさまざまなフォームコントロールやウィジェットの機能を詳しく見ていきます — 色々な種類のデータを集めるのにどんなオプションが使えるのかを見ていきます。とりわけこの記事では、ウェブの初期からある全てのブラウザーで利用できる、オリジナルのフォームコントロールを見ていきます。</p>
+<p class="summary"><a href="/ja/docs/Learn/Forms/How_to_structure_a_web_form">一つ前の記事</a>では、機能的なウェブフォームの例をマークアップし、いくつかのフォームコントロールとよくある構造要素を導入し、アクセシビリティのベストプラクティスを見てきました。次にさまざまなフォームコントロールやウィジェットの機能を詳しく見ていきます。 — 色々な種類のデータを集めるのにどんなオプションが使えるのかを見ていきます。とりわけこの記事では、ウェブの初期からありすべてのブラウザーで利用できる、元からあるフォームコントロールを見ていきます。</p>
 
 <table class="learn-box standard-table">
  <tbody>
   <tr>
    <th scope="row">前提条件:</th>
-   <td>基本的なコンピューターリテラシーと、基本的な <a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の理解</a>。</td>
+   <td>基本的なコンピューターリテラシーと、基本的な <a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の理解</a>。</td>
   </tr>
   <tr>
    <th scope="row">目的:</th>
@@ -30,242 +33,259 @@ original_slug: Learn/Forms/The_native_form_widgets
  </tbody>
 </table>
 
-<p>{{HTMLelement('form')}}, {{HTMLelement('fieldset')}}, {{HTMLelement('legend')}}, {{HTMLelement('textarea')}}, {{HTMLelement('label')}}, {{HTMLelement('button')}},  {{HTMLelement('input')}}といったフォーム要素については既に見てきました。この記事では次を網羅します:</p>
+<p>既にいくつかのフォーム要素を見てきました。 {{HTMLelement('form')}}, {{HTMLelement('fieldset')}}, {{HTMLelement('legend')}}, {{HTMLelement('textarea')}}, {{HTMLelement('label')}}, {{HTMLelement('button')}},  {{HTMLelement('input')}} などです。この記事では、以下の要素を扱います。</p>
 
 <ul>
- <li>{{HTMLelement('input/button', 'button')}}, {{HTMLelement('input/checkbox', 'checkbox')}}, {{HTMLelement('input/file', 'file')}}, {{HTMLelement('input/hidden', 'hidden')}}, {{HTMLelement('input/image', 'image')}}, {{HTMLelement('input/password', 'password')}}, {{HTMLelement('input/radio', 'radio')}}, {{HTMLelement('input/reset', 'reset')}}, {{HTMLelement('input/submit', 'submit')}}, and {{HTMLelement('input/text', 'text')}}といったよくある入力タイプ</li>
+ <li>よく使われる入力型である {{HTMLelement('input/button', 'button')}}, {{HTMLelement('input/checkbox', 'checkbox')}}, {{HTMLelement('input/file', 'file')}}, {{HTMLelement('input/hidden', 'hidden')}}, {{HTMLelement('input/image', 'image')}}, {{HTMLelement('input/password', 'password')}}, {{HTMLelement('input/radio', 'radio')}}, {{HTMLelement('input/reset', 'reset')}}, {{HTMLelement('input/submit', 'submit')}}, {{HTMLelement('input/text', 'text')}}</li>
  <li>すべてのフォームコントロールに共通する属性のいくつか</li>
 </ul>
 
 <div class="note">
-<p><strong>注</strong>: この記事で説明されている機能のほとんどは、ブラウザー間で幅広くサポートされています。これに対する例外に注意しましょう。より正確な詳細が必要な場合は、<a href="/ja/docs/Web/HTML/Element#Forms">HTML フォーム要素のリファレンス</a>、特に広範囲にわたる <a href="/ja/docs/Web/HTML/Element/input">&lt;input&gt; 型</a>の参照を参照してください。</p>
+<p><strong>注</strong>: この記事で取り上げている機能は、すべてのブラウザーが対応していますが、すべてのフォームコントロールに当てはまるわけではありません。次の 2 回分の記事で、 HTML5 で追加された新しいフォームコントロールを取り上げます。より高度なリファレンスを読みたい方は、 <a href="/ja/docs/Web/HTML/Element#forms">HTML フォーム要素のリファレンス</a>、全般的には <a href="/ja/docs/Web/HTML/Element/input">&lt;input&gt; 型</a> のリファレンスを参照してください。</p>
 </div>
 
-<h2 id="Text_input_fields" name="Text_input_fields">テキスト入力フィールド</h2>
+<h2 id="Text_input_fields">テキスト入力フィールド</h2>
 
-<p>テキスト {{htmlelement("input", "入力")}} フィールドは最も基本的なフォームウィジェットです。これらはユーザーがあらゆる種類のデータを入力できるとても便利な方法です。</p>
+<p>テキスト入力 ({{htmlelement("input")}}) フィールドは、最も基本的なフォームウィジェットです。これらはユーザーがあらゆる種類のデータを入力できるとても便利な方法です。</p>
 
 <div class="note">
-<p><strong>注</strong>: HTML フォームのテキストフィールドは単純なプレーンテキストの入力コントロールです。つまり、これらを使って<a href="/ja/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla">リッチエディット</a> (太字、斜体など) を実行することはできません。見かけるすべてのリッチテキストエディタは、HTML、CSS、および JavaScript で作成されたカスタムウィジェットです。</p>
+<p><strong>注</strong>: HTML フォームのテキストフィールドは単純なプレーンテキストの入力コントロールです。つまり、これらを使って<a href="/ja/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla">リッチエディット</a> (太字、斜体など) を実現することはできません。見かけるリッチテキストエディターは、すべて HTML、CSS、JavaScript で作成されたカスタムウィジェットです。</p>
 </div>
 
-<p>すべてのテキストフィールドに共通する動作があります:</p>
+<p>すべてのテキストフィールドに共通する動作があります。</p>
 
 <ul>
- <li>{{htmlattrxref("readonly","input")}} (ユーザーは入力値を変更できないが他のフォーム値とともに送信される) あるいは {{htmlattrxref("disabled","input")}} (入力値は編集できず、値も他のフォームデータとともに送られません) とすることができます。</li>
+ <li>{{htmlattrxref("readonly","input")}} (ユーザーは入力値が変更できないが、他のフォームデータとともに送信される) あるいは {{htmlattrxref("disabled","input")}} (入力値が変更できず、他のフォームデータとともに送られない) とすることができます。</li>
  <li>{{htmlattrxref("placeholder","input")}} を設定することができます。これは、ボックスの目的を簡単に説明する、ボックス内に表示されるテキストです。</li>
- <li><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/size"><code>size</code></a> (ボックスの物理的なサイズ) や <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/maxlength"><code>maxlength</code></a> (ボックスに入力できる最大文字数) による制限が可能です。</li>
- <li>ブラウザーがサポートしていれば、(<a href="/ja/docs/Web/HTML/Global_attributes/spellcheck"><code>spellcheck</code></a>属性を用いて) <a href="/ja/docs/Web/HTML/Element/Input#attr-spellcheck" title="HTML/Element/input#attr-spellcheck">スペルチェック</a>の恩恵を受けられます。</li>
+ <li><a href="/ja/docs/Web/HTML/Attributes/size"><code>size</code></a> (ボックスの物理的な大きさ) や <a href="/ja/docs/Web/HTML/Attributes/maxlength"><code>maxlength</code></a> (ボックスに入力できる最大文字数) による制限が可能です。</li>
+ <li>ブラウザーが対応していれば、<a href="/ja/docs/Web/HTML/Element/input#attr-spellcheck">スペルチェック</a>の便宜を図ることができます (<a href="/ja/docs/Web/HTML/Global_attributes/spellcheck"><code>spellcheck</code></a>属性を用いて)。</li>
 </ul>
 
 <div class="note">
-<p><strong>注</strong>: {{htmlelement("input")}} 要素は、<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/type">type</a></code> 属性によってさまざまなフォームとなるため、、HTML要素の中でも特別です。単一行のテキストフィールド、テキスト入力のないコントロール、時間と日付のコントロール、チェックボックス、カラーピッカー、ボタンといったテキスト入力のないコントロールなど、ほとんどのタイプのフォームウィジェットの作成に使用されます。</p>
+<p><strong>注</strong>: {{htmlelement("input")}} 要素は <code><a href="/ja/docs/Web/HTML/Attributes/type">type</a></code> 属性によってさまざまな形になるため、 HTML 要素の中でも独特です。単一行のテキストフィールド、時間と日付のコントロール、チェックボックス、ラジオボタン、カラーピッカー、ボタンのようなテキスト入力のないコントロールなど、ほとんどの種類のフォームウィジェットの作成に使用されます。</p>
 </div>
 
-<h3 id="Single_line_text_fields" name="Single_line_text_fields">単一行のテキストフィールド</h3>
+<h3 id="Single_line_text_fields">単一行のテキストフィールド</h3>
 
-<p>単一行のテキストフィールドは、{{htmlattrxref("type","input")}} 属性値が <code>text</code> に設定されている {{HTMLElement("input")}} 要素を使用するか、{{htmlattrxref("type","input")}} 属性を指定しない場合( <code>text</code> がデフォルト値になり)に作成されます。{{htmlattrxref("type","input")}} 属性に指定した値がブラウザーに認識されない場合 (たとえば <code>type="color"</code> を指定してブラウザーがネイティブの色ピッカーをサポートしていない場合)、この属性の値のテキストは代替値になります。</p>
+<p>単一行のテキストフィールドを生成するには、 {{HTMLElement("input")}} 要素で {{htmlattrxref("type","input")}} 属性値を <code>text</code> に設定するか、 {{htmlattrxref("type","input")}} 属性を省略するかします (<code>text</code> が既定値です)。この属性の <code>text</code> の値は、 {{htmlattrxref("type","input")}} 属性に指定した値をブラウザーに認識できない場合 (たとえば <code>type="color"</code> を指定した場合で、ブラウザーがネイティブの色ピッカーに対応していない場合) の代替値になります。</p>
 
 <div class="note">
-<p><strong>注</strong>: GitHub の <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/single-line-text-fields.html">single-line-text-fields.html</a> に、すべての単一行テキストフィールドタイプの例があります (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html">こちらも参照してください</a>)。</p>
+<p><strong>注</strong>: GitHub の <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/single-line-text-fields.html">single-line-text-fields.html</a> に、すべての単一行テキストフィールド型の例があります (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html">ライブで確認できます</a>)。</p>
 </div>
 
-<p>これは基本的な単一行のテキストフィールドの例です。</p>
+<p>基本的な単一行のテキストフィールドの例を示します。</p>
 
-<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>comment<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>comment<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>I<span class="punctuation token">'</span>m a text field<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span></code></pre>
+<pre class="brush: html">&lt;input type="text" id="comment" name="comment" value="I'm a text field"&gt;</pre>
 
-<p>単一行のテキストフィールドは、ひとつだけ厳密な制約があります: 改行を含むテキストを入力した場合、ブラウザーはデータを送信する前に改行を取り除きます。</p>
+<p>単一行のテキストフィールドは、ひとつだけ厳密な制約があります。改行を含むテキストを入力した場合、ブラウザーはデータを送信する前に改行を取り除きます。</p>
 
-<p><em>下記のスクリーンショットは macOS での Firefox 71 と Safari と Windows 10 の Chrome 79 と Edge 18 にて、既定の、フォーカスされた、無効にされたテキスト入力を示しています。</em></p>
+<p><em>下記のスクリーンショットは macOS での Firefox 71 と Safari、および Windows 10 の Chrome 79 と Edge 18 において、テキストフィールドが既定の場合、フォーカスされた場合、、無効にされた場合を示しています。</em></p>
 
-<p><img alt="Screenshot of the disabled attribute and default :focus styles on a text input in Firefox, Safari, Chrome and Edge." src="https://mdn.mozillademos.org/files/17021/disabled.png" style="height: 113px; width: 442px;"></p>
+<p><img alt="Firefox、Safari、Chrome、Edge における、テキスト入力の disabled 属性と既定の :focus スタイルを表示したスクリーンショットです。" src="disabled.png"></p>
 
-<div class="blockIndicator note">
-<p>HTML5 では {{htmlattrxref("type","input")}} 属性に専用の値を追加することで、基本的な単一行のテキストフィールドを拡張しています。これらの値もやはり {{HTMLElement("input")}} 要素を単一行のテキストフィールドにしますが、フィールドに対して追加の制約や機能を付加します。</p>
+<div class="notecard note">
+<p><strong>Note</strong>: HTML5 では {{htmlattrxref("type","input")}} 属性に専用の値を追加することで、基本的な単一行のテキストフィールドを拡張しています。これらの値もやはり {{HTMLElement("input")}} 要素を単一行のテキストフィールドにしますが、フィールドに対して追加の制約や機能を付加します。これは次の記事、 <a href="/ja/docs/Learn/Forms/HTML5_input_types">HTML5 の入力型</a>で紹介します。</p>
 </div>
 
-<h4 id="Password_field" name="Password_field">パスワードフィールド</h4>
+<h4 id="Password_field">パスワードフィールド</h4>
 
-<p>このタイプのフィールドは、{{htmlattrxref("type","input")}} 属性の値 <code>password</code> を使用して設定できます:</p>
+<p>元からあった入力型の一つが、 <code>password</code> テキストフィールド型でした。</p>
 
-<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>password<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pwd<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pwd<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span></code></pre>
+<pre class="brush: html">&lt;input type="password" id="pwd" name="pwd"&gt;</pre>
 
-<p><code>password</code> の値は入力したテキストに対する特別な制約は付加しませんが、フィールドの値を隠します(例、ドットやアスタリスク)ので読むことができません。</p>
+<p><code>password</code> の値は、入力されるテキストに特別な制約を加えるものではありませんが、フィールドに入力された値を (ドットやアスタリスクなどで) 不明瞭にして、他の人が簡単に読めないようにします。</p>
 
-<p>これはユーザーインターフェイスの機能でしかないことに注意してください。テキストは JavaScript を使用してあなた自身でエンコードしなければ、平文で送信されてしまい、セキュリティには良くありません — 悪い組織がデータを遮ってパスワードや、クレジットカードデータや、送信したあらゆるものを盗むことがあります。ユーザーからこれを保護するためにはフォームを含むあらゆるページをセキュア通信でホストし (つまり <code>https://</code> ... アドレスにて) 、データ送信前に暗号化することです。</p>
+<p>これはユーザーインターフェイスの機能でしかないことに注意してください。テキストは JavaScript を使用してあなた自身でエンコードしなければ、平文で送信されてしまい、セキュリティ上で好ましくありません。 — 悪意のある第三者がデータを傍受し、パスワードやクレジットカード情報などを盗む可能性があります。このようなことからユーザーを保護する最善の方法は、フォームを含むページを安全な接続 (すなわち、 <code>https://</code> ... のアドレス) でホストし、データを送信する前に暗号化することです。</p>
 
-<p>最近のブラウザーは、安全でない接続を介してフォームデータを送信することによるセキュリティへの影響を認識しており、ユーザーが安全でないフォームを使用しないように警告を実装しています。Firefox が実装しているものの詳細については、<a href="/ja/docs/Web/Security/Insecure_passwords">安全でないパスワード</a>をご覧ください。</p>
+<p>ブラウザーは、安全でない接続でフォームデータを送信することのセキュリティ上の影響を認識しており、ユーザーが安全でないフォームを使用することを抑止するために警告を表示します。 Firefox が実装している機能の詳細については、<a href="/ja/docs/Web/Security/Insecure_passwords">安全でないパスワード</a>を参照してください。</p>
 
-<h3 id="Hidden_content" name="Hidden_content">隠しコンテンツ</h3>
+<h3 id="Hidden_content">hidden コンテンツ</h3>
 
-<p>もう１つのオリジナルなテキストコントロールは <code>hidden</code> 入力タイプです。これは他のフォームデータとともにサーバー送信されるがユーザーからは見えないデータを持つのに使われています — 例えば命令を発行するときにサーバーにタイムスタンプを送りたい場合。これは隠れているので、ユーザーが見ることも、意図せずに値を編集することもなく、フォーカスを得ることもないしスクリーンリーダーが気づくこともありません。</p>
+<p>もう一つの元からあるテキストコントロールは <code>hidden</code> 入力型です。これは、ユーザーには見えないが、送信されると他のフォームデータと一緒にサーバーに送信されるフォームコントロールを作成するために使用されます。 — 例えば、注文が行われた時のタイムスタンプをサーバーに送信したい場合などです。表示されないので、ユーザーは値を見ることも、意図的に編集することもできず、フォーカスを受けることもなく、画面リーダーも知らせることはありません。</p>
 
-<pre class="brush: html notranslate">&lt;input type="hidden" id="timestamp" name="timestamp" value="1286705410"&gt;
+<pre class="brush: html">&lt;input type="hidden" id="timestamp" name="timestamp" value="1286705410"&gt;
 </pre>
 
-<p>このような要素を作成する場合は、<code>name</code> 属性と <code>value</code> 属性の設定が必要です。この値は JavaScript にて動的にセットできます。<code>hidden</code> 入力タイプには関連したラベルはありません。</p>
+<p>このような要素を作成する場合は、 <code>name</code> 属性と <code>value</code> 属性の設定が必要です。この値は JavaScript にて動的にセットできます。<code>hidden</code> 入力型には関連したラベルはありません。</p>
 
-<p>その他のテキストタイプ、{{HTMLElement("input/search", "search")}}, {{HTMLElement("input/url", "url")}}, と{{HTMLElement("input/tel", "tel")}}, は HTML5 で追加されました。これは次のチュートリアルの「HTML5 入力タイプ」にて網羅されます。</p>
+<p>その他のテキスト型、{{HTMLElement("input/search", "search")}}, {{HTMLElement("input/url", "url")}}, {{HTMLElement("input/tel", "tel")}}, は HTML5 で追加されたものです。これは次のチュートリアルの「HTML5 入力型」にて扱います。</p>
 
-<h2 id="Checkable_items" name="Checkable_items">チェック可能アイテム:チェックボックスとラジオボタン</h2>
+<h2 id="Checkable_items">チェック可能項目: チェックボックスとラジオボタン</h2>
 
-<p>チェック可能アイテムは、そのものや、関連したラベルをクリックすることで状態を変更できるコントロールです。チェック可能アイテムは 2 種類あります: チェックボックスとラジオボタンです。どちらもデフォルトでチェックするかを示すために、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes//checked"><code>checked</code></a> 属性を使用します。</p>
+<p>チェック可能項目は、そのものや、関連したラベルをクリックすることで状態を変更できるコントロールです。チェック可能項目は 2 種類あります。チェックボックスとラジオボタンです。どちらもそのウィジェットが既定でチェック状態にするかどうかを示すために、 <a href="/ja/docs/Web/HTML/Attributes/checked"><code>checked</code></a> 属性を使用します。</p>
 
-<p>これらのウィジェットは、他のフォームウィジェットと同じようには動作しない点が特筆されます。ほとんどのフォームウィジェットではフォームを送信すると、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/name"><code>name</code></a> 属性を持つすべてのウィジェットは値がなくても送信します。チェック可能アイテムでは、それらがチェックされている場合にのみ値を送信します。チェックされていない場合は、name も含めて何も送信しません。チェックされているが値がない場合、name が <em>on</em> という値で送信されます。</p>
+<p>これらのウィジェットは、他のフォームウィジェットと同じようには動作しない点が特徴です。ほとんどのフォームウィジェットでは、フォームを送信すると <a href="/ja/docs/Web/HTML/Attributes/name"><code>name</code></a> 属性を持つすべてのウィジェットが、値が入力されていなくても送信されます。チェック可能項目では、チェックされている場合にのみ値が送信されます。チェックされていない場合は、 name も含めて何も送信されません。チェックされているが値がない場合、 name が <em>on</em> という値で送信されます。</p>
 
 <div class="note">
-<p><strong>注</strong>: このセクションの例は、<a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/checkable-items.html">checkable-items.html</a> として GitHub にあります (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html">こちらも参照してください</a>)。</p>
+<p><strong>注</strong>: この節の例は、<a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/checkable-items.html">checkable-items.html</a> として GitHub にあります (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html">ライブで確認できます</a>)。</p>
 </div>
 
-<p>最大限のユーザービリティ/アクセシビリティを実現するために、関連項目の各リストを {{htmlelement("fieldset")}} で囲み、リストの全体的な説明を示す {{htmlelement("legend")}} で囲むことをお勧めします。{{htmlelement("label")}}/{{htmlelement("input")}} 要素の個々のペアは、それぞれ独自のリスト項目 (または同様のもの) に含める必要があります。関連した {{htmlelement('label')}} はラジオボタンやチェックボックスの直後に、{{htmlelement("legend")}}の中身にラジオボタンやチェックボックスのグループの説明が置かれます。これは上の例に示されています。</p>
+<p>最大限のユーザービリティ/アクセシビリティを実現するために、関連項目の各リストを {{htmlelement("fieldset")}} で囲み、リストの全体的な説明を示す {{htmlelement("legend")}} で囲むことをお勧めします。 {{htmlelement("label")}}/{{htmlelement("input")}} 要素の個々のペアは、それぞれ独自のリスト項目 (または同様のもの) に含める必要があります。関連した {{htmlelement('label')}} はラジオボタンやチェックボックスの直後に、 {{htmlelement("legend")}} の中身にラジオボタンやチェックボックスのグループの説明が置かれます。これは上の例に示されています。</p>
 
-<h3 id="Check_box" name="Check_box">チェックボックス</h3>
+<h3 id="Check_box">チェックボックス</h3>
 
-<p>チェックボックスは、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/type"><code>type</code></a> 属性を {{HTMLElement("input/checkbox", "checkbox")}} に設定した {{HTMLElement("input")}} 要素で作成します。</p>
+<p>チェックボックスは、 {{HTMLElement("input")}} 要素で <a href="/ja/docs/Web/HTML/Attributes/type"><code>type</code></a> 属性を {{HTMLElement("input/checkbox", "checkbox")}} に設定して作成します。</p>
 
-<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span> <span class="attr-name token">checked</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>carrots<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>carrots<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>carrots<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span></code></pre>
-
-<p><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/checked">checked</a></code> 属性を含んだチェックボックスはページ読み込み時に自動的にチェックされます。チェックボックスまたはその関連ラベルをチェックするとチェックボックスのオン/オフがトグルされます。</p>
-
-<p>下記のスクリーンショットは macOS での Firefox 71 と Safari と Windows 10 の Chrome 79 と Edge 18 にて、既定の、フォーカスされた、無効にされたチェックボックスを示しています。</p>
-
-<p><img alt="Default, focused and disabled Checkboxes in Firefox 71 and Safari 13 on Mac and Chrome 79 and Edge 18 on Windows 10" src="https://mdn.mozillademos.org/files/17024/checkboxes.png" style="height: 203px; width: 293px;"></p>
+<pre class="brush: html">&lt;input type="checkbox" id="questionOne" name="subscribe" value="yes" checked&gt;
+</pre>
 
-<div class="blockIndicator note">
-<p><strong>注</strong>: <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/checked">checked</a></code> 属性のあるあらゆるチェックボックスやラジオボタンには、チェックされていない場合でも、対応する {{cssxref('<code>:default')}}</code> 仮想クラスがあります。現在チェックされているものには<code>{{cssxref(':checked')}}</code> 仮想クラスがあります。</p>
+<p>関連するチェックボックス項目には、同じ {{htmlattrxref("name","input")}} 属性を使用してください。 <code><a href="/ja/docs/Web/HTML/Attributes/checked">checked</a></code> 属性を含めると、ページが読み込まれたときにチェックボックスが自動的にチェックされます。チェックボックス自体または関連づけられたラベルをクリックすると、チェックボックスのオンとオフが切り替わります。</p>
+
+<pre class="brush: html">&lt;fieldset&gt;
+  &lt;legend&gt;Choose all the vegetables you like to eat&lt;/legend&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;label for="carrots"&gt;Carrots&lt;/label&gt;
+      &lt;input type="checkbox" id="carrots" name="vegetable" value="carrots" checked&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;label for="peas"&gt;Peas&lt;/label&gt;
+      &lt;input type="checkbox" id="peas" name="vegetable" value="peas"&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;label for="cabbage"&gt;Cabbage&lt;/label&gt;
+      &lt;input type="checkbox" id="cabbage" name="vegetable" value="cabbage"&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/fieldset&gt;</pre>
+
+<p>下記のスクリーンショットは macOS での Firefox 71 と Safari、および Windows 10 の Chrome 79 と Edge 18 において、チェックボックスが既定の場合、フォーカスされた場合、、無効にされた場合を示しています。</p>
+
+<p><img alt="Mac での Firefox 71 および Safari 13 と、 Windows 10 での Chrome 79 および Edge 18 の既定、フォーカス、無効状態のチェックボックス" src="checkboxes.png"></p>
+
+<div class="notecard note">
+<p><strong>注</strong>: チェックボックスやラジオボタンで読み込み時に <code><a href="/ja/docs/Web/HTML/Attributes/checked">checked</a></code> 属性が付いていれば、チェック状態が解除されても {{cssxref(':default')}} 擬似クラスに一致します。現在チェックされているものは <code>{{cssxref(':checked')}}</code> 擬似クラスに一致します。</p>
 </div>
 
-<p id="Radio_button">チェックボックスのオンオフ性質により、チェックボックスは、規定のチェックボックスを拡張してトグルスイッチのように見えるボタンを作っている開発者やデザイナーにとって、トグルボタンとして考えられます。<a href="https://mdn.github.io/learning-area/html/forms/toggle-switch-example/">ここで動作する例を</a> 見ることができます(<a href="https://github.com/mdn/learning-area/blob/master/html/forms/toggle-switch-example/index.html">ソースコード</a>も見られます)。</p>
+<p>チェックボックスにはオンとオフになるという性質があるため、チェックボックスはトグルボタンと考えられており、多くの開発者やデザイナーが既定のチェックボックスのスタイルを拡張して、トグルスイッチのように見えるボタンを作成しています。<a href="https://mdn.github.io/learning-area/html/forms/toggle-switch-example/">ここで動作する例を</a>見ることができます　(<a href="https://github.com/mdn/learning-area/blob/master/html/forms/toggle-switch-example/index.html">ソースコード</a>も見られます)。</p>
 
-<h3 id="Radio_button" name="Radio_button">ラジオボタン</h3>
+<h3 id="Radio_button">ラジオボタン</h3>
 
-<p>ラジオボタンは、{{htmlattrxref("type","input")}} 属性を <code>radio</code> に設定した {{HTMLElement("input")}} 要素で作成します。</p>
+<p>ラジオボタンは、 {{HTMLElement("input")}} 要素の {{htmlattrxref("type","input")}} 属性を <code>radio</code> に設定して生成します。</p>
 
-<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">checked</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>soup<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>meal<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span></code></pre>
+<pre class="brush: html">&lt;input type="radio" id="soup" name="meal" checked&gt;</pre>
 
-<p>いくつかのラジオボタンをまとめることができます。{{htmlattrxref("name","input")}} 属性で同じ値を共有すると、それらのラジオボタンは同じボタングループに属するとみなされます。グループ内でボタンは同時に 1 つだけチェックできます。つまり、あるラジオボタンをチェックすると、他のラジオボタンは自動的にチェックが外れます。フォームを送信するときは、チェックしているラジオボタンのみの値を送信します。何もチェックしていない場合はラジオボタンの集まり全体が未知の状態であるとみなし、フォーム送信時は値を送信しません。</p>
+<p>複数のラジオボタンを結びつけることができます。 {{htmlattrxref("name","input")}} 属性の値が同じであれば、同じグループのボタンであるとみなされます。グループ内のボタンは同時に一つしかチェックできません。つまり、あるボタンがチェックされると、他のボタンは自動的にチェックが外されます。フォームが送信される際には、チェックされたラジオボタンの値のみが送信されます。一つもチェックされていない場合、ラジオボタンのグループ全体が未知の状態であるとみなされ、値はフォームと共に送信されません。同じ名前のグループのラジオボタンの一つがチェックされると、ユーザーはフォームをリセットせずに、すべてのボタンのチェックを外すことはできません。</p>
 
-<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>fieldset</span><span class="punctuation token">&gt;</span></span>
-  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>legend</span><span class="punctuation token">&gt;</span></span>What is your favorite meal?<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>legend</span><span class="punctuation token">&gt;</span></span>
-  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>ul</span><span class="punctuation token">&gt;</span></span>
-    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>
-      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>soup<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Soup<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
-      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">checked</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>soup<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>meal<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>soup<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
-    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
-    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>
-      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>curry<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Curry<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
-      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>curry<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>meal<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>curry<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
-    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
-    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>
-      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pizza<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Pizza<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
-      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pizza<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>meal<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pizza<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
-    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
-  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>ul</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>fieldset</span><span class="punctuation token">&gt;</span></span></code></pre>
+<pre class="brush: html">&lt;fieldset&gt;
+  &lt;legend&gt;What is your favorite meal?&lt;/legend&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;label for="soup"&gt;Soup&lt;/label&gt;
+      &lt;input type="radio" id="soup" name="meal" value="soup" checked&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;label for="curry"&gt;Curry&lt;/label&gt;
+      &lt;input type="radio" id="curry" name="meal" value="curry"&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;label for="pizza"&gt;Pizza&lt;/label&gt;
+      &lt;input type="radio" id="pizza" name="meal" value="pizza"&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/fieldset&gt;</pre>
 
-<p>下記のスクリーンショットは macOS での Firefox 71 と Safari と Windows 10 の Chrome 79 と Edge 18 にて、チェックなしとチェックされたラジオボタン、フォーカスされた、また無効でチェックなしとチェックされたラジオボタンを示しています。</p>
+<p>下記のスクリーンショットは macOS での Firefox 71 と Safari、および Windows 10 の Chrome 79 と Edge 18 において、ラジオボタンがチェックされていない場合といる場合、フォーカスがある場合、無効にされていてチェックされていない場合といる場合を示しています。</p>
 
-<p><img alt="Radio buttons on Firefox 71 and Safari 13 on Mac and Chrome 79 and Edge 18 on Windows 10" src="https://mdn.mozillademos.org/files/17022/radios.png" style="height: 142px; width: 196px;"></p>
+<p><img alt="Mac の Firefox 71 と Safari 13 および Windows 10 の Chrome 79 と Edge 18 のラジオボタン" src="radios.png"></p>
 
-<h2 id="Buttons" name="Buttons">ボタン</h2>
+<h2 id="Actual_buttons">実際のボタン</h2>
 
-<p>ラジオボタンはその名に反して、実際のボタンではありません。実際のボタンを見てみましょう! ボタンを生成するには、3 種類の入力タイプがあります:</p>
+<p>ラジオボタンはその名に反して、実際のボタンではありません。実際のボタンを見てみましょう。ボタンを生成するための入力型は 3 種類あります。</p>
 
 <dl>
- <dt>{{原語併記("送信", "Submit")}}</dt>
- <dd>フォームデータをサーバーに送信します。{{HTMLElement("button")}} 要素の場合、<code>type</code> 属性 (または <code>type</code> の無効な値) を省略すると、送信ボタンが表示されます。</dd>
- <dt>{{原語併記("リセット", "Reset")}}</dt>
- <dd>すべてのフォームウィジェットをデフォルト値にリセットします。</dd>
+ <dt><code>submit</code></dt>
+ <dd>フォームデータをサーバーに送信します。{{HTMLElement("button")}} 要素の場合、<code>type</code> 属性を省略した場合 (または <code>type</code> の値が無効であった場合)、送信ボタンが表示されます。</dd>
+ <dt><code>reset</code></dt>
+ <dd>すべてのフォームウィジェットを既定値にリセットします。</dd>
  <dt><code>button</code></dt>
- <dd>自動的な効果のないボタンで、JavaScript コードを用いてカスタマイズできるもの。</dd>
+ <dd>自動的な効果のないボタンで、 JavaScript コードを用いてカスタマイズできるものです。</dd>
 </dl>
 
-<p>それから、{{htmlelement("button")}} 要素それ自体もあります。これは値が <code>submit</code>、<code>reset</code> または <code>button</code> である <code>type</code> 属性をとり、上記の 3 つの <code>&lt;input&gt;</code> 種別を模倣できます。この 2 つの主な違いは実際の <code>&lt;button&gt;</code> 要素の方が多くのスタイル設定できることです。</p>
+<p>また、ボタンそのものを示す {{htmlelement("button")}} 要素もあります。これは <code>type</code> 属性に <code>submit</code>, <code>reset</code>, <code>button</code> の値を取り、上記の 3 つの <code>&lt;input&gt;</code> 型を模倣できます。この 2 つの主な違いは、実際の <code>&lt;button&gt;</code> 要素の方がはるかにスタイル付けしやすいことです。</p>
 
-<div class="blockIndicator note">
-<p><strong>注</strong>: <code>image</code> 入力タイプもボタンとしてレンダリングされます。それはあとで見ます。</p>
+<div class="notecard note">
+<p><strong>注</strong>: <code>image</code> 入力型もボタンとしてレンダリングされます。それについては後で触れます。。</p>
 </div>
 
 <div class="note">
-<p><strong>注</strong>: このセクションの例は <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/button-examples.html">button-examples.html</a> として GitHub にあります (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/button-examples.html">こちらも参照してください</a>)。</p>
+<p><strong>注</strong>: この節の例は <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/button-examples.html">button-examples.html</a> として GitHub にあります (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/button-examples.html">ライブで確認できます</a>)。</p>
 </div>
 
-<p>ボタンは {{HTMLElement("button")}} 要素か {{HTMLElement("input")}} 要素で作成します。どの種類のボタンを表示するかを指定するのは、{{htmlattrxref("type","input")}} 属性の値です:</p>
+<p>以下に、それぞれのボタンの <code>&lt;input&gt;</code> 型と、同等の <code>&lt;button&gt;</code> 型の例を示します。</p>
 
-<h3 id="submit" name="submit">送信</h3>
+<h3 id="submit">submit</h3>
 
-<pre class="brush: html notranslate">&lt;button type="submit"&gt;
-    This a &lt;br&gt;&lt;strong&gt;submit button&lt;/strong&gt;
+<pre class="brush: html">&lt;button type="submit"&gt;
+    これは&lt;strong&gt;送信ボタン&lt;/strong&gt;です
 &lt;/button&gt;
 
-&lt;input type="submit" value="This is a submit button"&gt;</pre>
+&lt;input type="submit" value="これは送信ボタンです"&gt;</pre>
 
-<h3 id="reset" name="reset">リセット</h3>
+<h3 id="reset">reset</h3>
 
-<pre class="brush: html notranslate">&lt;button type="reset"&gt;
-    This a &lt;br&gt;&lt;strong&gt;reset button&lt;/strong&gt;
+<pre class="brush: html">&lt;button type="reset"&gt;
+    これは&lt;strong&gt;リセットボタン&lt;/strong&gt;です
 &lt;/button&gt;
 
-&lt;input type="reset" value="This is a reset button"&gt;</pre>
+&lt;input type="reset" value="これはリセットボタンです"&gt;</pre>
 
-<h3 id="anonymous" name="anonymous">無名</h3>
+<h3 id="anonymous">ただのボタン</h3>
 
-<pre class="brush: html notranslate">&lt;button type="button"&gt;
-    This an &lt;br&gt;&lt;strong&gt;anonymous button&lt;/strong&gt;
+<pre class="brush: html">&lt;button type="button"&gt;
+    これは&lt;strong&gt;ただのボタン&lt;/strong&gt;です
 &lt;/button&gt;
 
-&lt;input type="button" value="This is an anonymous button"&gt;</pre>
+&lt;input type="button" value="これはただのボタンです"&gt;</pre>
 
-<p>ボタンは {{HTMLElement("button")}} 要素でも {{HTMLElement("input")}} 要素でも、常に同じ動作になります。上記のサンプルでわかるように、{{HTMLElement("button")}} 要素はラベルとして HTML コンテンツを使用できて、これは開始と終了の<code>&lt;button&gt;</code>タグの間に挿入されます。一方で{{HTMLElement("input")}} 要素は空要素です。つまり <code>value</code> 属性の中にラベルが挿入され、このためプレーンテキストのコンテンツのみ使用できます。</p>
+<p>ボタンは {{HTMLElement("button")}} 要素と {{HTMLElement("input")}} 要素のどちらを使用しても常に同じ動作になります。しかし、上記の例で分かるように、{{HTMLElement("button")}} 要素は中身として HTML を使用することができ、これが <code>&lt;button&gt;</code> の開始・終了タグの間に挿入されます。一方で{{HTMLElement("input")}} 要素は空要素です。つまり <code>value</code> 属性に中身が挿入され、したがってプレーンテキストのコンテンツのみ使用できます。</p>
 
-<p>下記の例は macOS での Firefox 71 と Safari と Windows 10 の Chrome 79 と Edge 18 にて、既定の、フォーカスされた、無効なボタンを示しています。</p>
+<p>下記の例は macOS での Firefox 71 と Safari 13、および Windows 10 の Chrome 79 と Edge 18 にて、ボタンの既定、フォーカス、無効状態を示しています。</p>
 
-<p><img alt="Default, focused and disabled button input types in Firefox 71 and Safari 13 on Mac and Chrome 79 and Edge 18 on Windows 10" src="https://mdn.mozillademos.org/files/17023/buttons.png" style="height: 182px; width: 286px;"></p>
+<p><img alt="Mac 版の Firefox 71 と Safari 13、 Windows 版の Chrome 79 と Edge 18 の既定、フォーカス、無効状態の button 入力型" src="buttons.png"></p>
 
-<h3 id="Image_button" name="Image_button">画像ボタン</h3>
+<h3 id="Image_button">画像ボタン</h3>
 
 <p><strong>画像ボタン</strong>コントロールは {{HTMLElement("img")}} 要素とまったく同じように表示されますが、ユーザーがクリックすると送信ボタン (前述) のように動作します。</p>
 
-<p>画像ボタンは、{{htmlattrxref("type","input")}} 属性を <code>image</code> に設定した {{HTMLElement("input")}} 要素で作成します。</p>
-
-<p>この要素は {{HTMLElement("img")}} 要素とまったく同じ属性をサポートして、さらにフォームボタンがサポートする属性もすべてサポートします。</p>
+<p>画像ボタンは、 {{HTMLElement("input")}} 要素の{{htmlattrxref("type","input")}} 属性を <code>image</code> に設定することで作成します。この要素は {{HTMLElement("img")}} 要素とまったく同じ属性に対応しており、さらに他のフォームボタンが対応している属性にもすべて対応しています。</p>
 
-<pre class="brush: html notranslate">&lt;input type="image" alt="Click me!" src="my-img.png" width="80" height="30" /&gt;</pre>
+<pre class="brush: html">&lt;input type="image" alt="Click me!" src="my-img.png" width="80" height="30"&gt;</pre>
 
-<p>画像ボタンをフォームの送信に使用する際にこのウィジェットは自身の値を送信しませんが、代わりに画像上でクリックした位置の X 座標と Y 座標を送信します (座標は画像に対して相対的、つまり画像の左上隅が座標 0, 0 になります)。座標は 2 つのキーと値の組として送信されます。</p>
+<p>画像ボタンをフォームの送信に使用する場合、このウィジェットは自身の値を送信しませんが、代わりに画像上でクリックした位置の X 座標と Y 座標を送信します (座標は画像に対して相対的、つまり画像の左上隅が座標 (0, 0) になります)。座標は 2 つのキーと値の組として送信されます。</p>
 
 <ul>
  <li>X 値のキーは {{htmlattrxref("name","input")}} 属性の値の後ろに文字列 "<em>.x</em>" をつけたもの、</li>
  <li>Y 値のキーは {{htmlattrxref("name","input")}} 属性の値の後ろに文字列 "<em>.y</em>" をつけたものです。</li>
 </ul>
 
-<p>サンプルをご覧ください。フォームの画像上の座標 (123, 456) でクリックすると、 <code>get</code> メソッド経由で送信されて、以下のような値の追加された URL が送信されます:</p>
+<p>サンプルをご覧ください。フォームの画像上の座標 (123, 456) でクリックすると、 <code>get</code> メソッド経由で送信されて、以下のような値の追加された URL が送信されます。</p>
 
-<pre class="notranslate">http://foo.com?pos.x=123&amp;pos.y=456</pre>
+<pre>http://foo.com?pos.x=123&amp;pos.y=456</pre>
 
-<p>これは "hot map" を作成するためにとても便利な手段です。これらの値がどのように送信あるいは取得されるかについては、<a href="https://developer.mozilla.org/ja/docs/HTML/Forms/Sending_and_retrieving_form_data" title="HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a>の記事で詳しく説明します。</p>
+<p>これは「ホットマップ」を作成するためにとても便利な手段です。これらの値がどのように送信あるいは取得されるかについては、<a href="/ja/docs/Learn/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a>の記事で詳しく説明します。</p>
 
-<h2 id="File_picker" name="File_picker">ファイルピッカー</h2>
+<h2 id="File_picker">ファイルピッカー</h2>
 
-<p>初期のHTMLであった最後の <code>&lt;input&gt;</code> タイプがあります: ファイル入力タイプです。フォームで、ファイルをサーバーに送信できます。この特定操作については以下の記事で詳しく説明します: <a href="/ja/docs/HTML/Forms/Sending_and_retrieving_form_data" title="HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a>。ファイルピッカーウィジェットで、ユーザーは送信するファイルを 1 つ以上選択できます。</p>
+<p>初期の HTML にあった <code>&lt;input&gt;</code> 型がもう一つあります。ファイル入力型です。フォームで、ファイルをサーバーに送信することができます (この具体的な操作については、<a href="/ja/docs/Learn/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a>の記事でも詳しく触れます)。ファイルピッカーウィジェットで、ユーザーは送信するファイルを 1 つ以上選択することができます。</p>
 
-<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file">ファイルピッカーウィジェット</a>を作成するには、{{htmlattrxref("type","input")}} 属性を <code>file</code> に設定した {{HTMLElement("input")}} 要素を使用します。{{htmlattrxref("accept","input")}} 属性を使用して、受け入れるファイルの種類を制限できます。加えて、ユーザーが複数のファイルを選択できるようにしたい場合は、{{htmlattrxref("multiple","input")}} 属性を付加します。</p>
+<p><a href="/ja/docs/Web/HTML/Element/input/file">ファイルピッカーウィジェット</a>を作成するには、 {{HTMLElement("input")}} 要素の {{htmlattrxref("type","input")}} 属性を <code>file</code> に設定します。 {{htmlattrxref("accept","input")}} 属性を使用して、受け入れるファイルの種類を制限することができます。加えて、ユーザーが複数のファイルを選択できるようにしたい場合は、 {{htmlattrxref("multiple","input")}} 属性を付加します。</p>
 
-<h4 id="Example_3" name="Example_3">例</h4>
+<h4 id="Example">例</h4>
 
 <p>以下の例では、画像ファイルを要求するファイルピッカーを作成しています。ユーザーは複数のファイルを指定できます。</p>
 
-<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">accept</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>image/*<span class="punctuation token">"</span></span> <span class="attr-name token">multiple</span><span class="punctuation token">&gt;</span></span></code></pre>
+<pre class="brush: html">&lt;input type="file" name="file" id="file" accept="image/*" multiple&gt;</pre>
 
-<p>いくつかのモバイルデバイスでは、ファイルピッカーは、次のようにキャプチャー情報を <code>accept</code> 属性に追加することで、端末のカメラやマイクでキャプチャーされた写真、動画、オーディオにアクセスできます:</p>
+<p>いくつかのモバイル端末では、ファイルピッカーは、次のようにキャプチャー情報を <code>accept</code> 属性に追加することで、端末のカメラやマイクでキャプチャーされた写真、動画、音声にアクセスすることができます。</p>
 
-<pre class="notranslate">&lt;input type="file" accept="image/*;capture=camera"&gt;
+<pre>&lt;input type="file" accept="image/*;capture=camera"&gt;
 &lt;input type="file" accept="video/*;capture=camcorder"&gt;
 &lt;input type="file" accept="audio/*;capture=microphone"&gt;</pre>
 
-<h2 id="Common_attributes" name="Common_attributes">共通属性</h2>
+<h2 id="Common_attributes">共通の属性</h2>
 
-<p>フォームウィジェットを定義するために使用される要素の多くは、独自の属性をいくつか持っています。ただし、すべてのフォーム要素に共通の一連の属性があり、それによりウィジェットをある程度制御できます。共通属性のリストは以下のとおりです。</p>
+<p>フォームコントロールの定義に使われる要素の多くは、それぞれ固有の属性を持っています。しかし、すべてのフォーム要素に共通する属性があります。これらの属性のいくつかはすでに見たことがあると思いますが、参考までに共通の属性を以下に列挙します。</p>
 
 <table>
  <thead>
@@ -277,64 +297,62 @@ original_slug: Learn/Forms/The_native_form_widgets
  </thead>
  <tbody>
   <tr>
-   <td><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/autofocus">autofocus</a></code></td>
+   <td><code><a href="/ja/docs/Web/HTML/Attributes/autofocus">autofocus</a></code></td>
    <td>false</td>
-   <td>この真偽値属性を使用すると、ユーザーがページをロードするときに、たとえば別のコントロールを入力して上書きしない限り、要素に自動的に入力フォーカスするように指定できます。この属性を指定できるのは、文書内の 1 つのフォーム関連要素だけです。</td>
+   <td>この論理属性を使用すると、ページ読み込み時に自動的に要素に入力フォーカスを設定するように指定できます。この属性を指定できるのは、文書内の 1 つのフォーム関連要素だけです。</td>
   </tr>
   <tr>
-   <td><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/disabled">disabled</a></code></td>
+   <td><code><a href="/ja/docs/Web/HTML/Attributes/disabled">disabled</a></code></td>
    <td>false</td>
-   <td>この真偽値属性は、ユーザーが要素と対話できないことを示します。この属性が指定されていない場合、要素はそれを含む要素 (例えば {{HTMLElement("fieldset")}}) からその設定を継承します。<code>disabled</code><span class="tlid-translation translation" lang="ja"><span title=""> 属性が設定されている包含要素がない場合は、その要素が有効になります。</span></span></td>
+   <td>この論理属性は、ユーザーが要素と対話できないことを示します。この属性が指定されていない場合、要素はそれを含む要素 (例えば {{HTMLElement("fieldset")}}) からその設定を継承します。<code>disabled</code> 属性が設定されている包含要素がない場合は、その要素が有効になります。</td>
   </tr>
   <tr>
-   <td><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/form">form</a></code></td>
+   <td><code><a href="/ja/docs/Web/HTML/Attributes/form">form</a></code></td>
    <td></td>
-   <td>ウィジェットが関連付けられている <code>&lt;form&gt;</code> 要素。属性の値は、同じ文書内の {{HTMLElement("form")}} 要素の <code>id</code> 属性でなければなりません。理論的には、フォームウィジェットを {{HTMLElement("form")}} 要素の外側に設定できます。しかし実際には、その機能をサポートするブラウザーはありません。</td>
+   <td>ウィジェットが関連付けられている <code>&lt;form&gt;</code> 要素で、そのフォーム内に含まれていない場合に使用されます。属性の値は、同じ文書内の {{HTMLElement("form")}} 要素の <code>id</code> 属性でなければなりません。これにより、フォームコントロールをフォームに外側から、他のフォーム要素の中にあったとしても、関連付けることができます。</td>
   </tr>
   <tr>
-   <td><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/name">name</a></code></td>
+   <td><code><a href="/ja/docs/Web/HTML/Attributes/name">name</a></code></td>
    <td></td>
    <td>要素の名前。これはフォームデータとともに送信されます。</td>
   </tr>
   <tr>
-   <td><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/value">value</a></code></td>
+   <td><code><a href="/ja/docs/Web/HTML/Attributes/value">value</a></code></td>
    <td></td>
-   <td>要素の初期値</td>
+   <td>要素の初期値です。</td>
   </tr>
  </tbody>
 </table>
 
-<h2 id="スキルをテストしましょう!">スキルをテストしましょう!</h2>
-
-<p>この記事の最後に到着しましたが、最も大事な情報を覚えていますか？ 次に進む前に、この情報を保持しているか検証するテストがあります — <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Test_your_skills:_Basic_controls">Test your skills: Basic controls</a> を見てください。</p>
+<h2 id="Test_your_skills!">スキルをテストしましょう!</h2>
 
-<h2 id="Conclusion" name="Conclusion">まとめ</h2>
+<p>この記事の最後に到着しましたが、もっとも大事な情報を覚えていますか？ 次に進む前に、この情報を保持しているか検証するテストがあります — <a href="/ja/docs/Learn/Forms/Test_your_skills:_Basic_controls">Test your skills: Basic controls</a> を見てください。</p>
 
-<p>上で見たように、利用可能なフォーム要素には多くの異なるタイプがあります。一度にこれらの詳細の全てを覚えておく必要はありません。詳細について調べるために好きなだけこの記事に戻ることができます 。</p>
+<h2 id="Summary">まとめ</h2>
 
-<p>この記事では古い入力タイプをカバーしてきました — これは HTML の初期の頃に導入されたオリジナルで、すべてのブラウザーでよくサポートされます。次のセクションでは、HTML 5 で追加された新しい <code>type</code> 属性の値を見ていきます。</p>
+<p>この記事では古い入力型を扱ってきました。 — これは HTML の初期の頃に導入された元からのもので、すべてのブラウザーがよく対応しています。次の節では、HTML 5 で追加された新しい <code>type</code> 属性の値を見ていきます。</p>
 
 <p>{{PreviousMenuNext("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}</p>
 
-<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
+<h2 id="In_this_module">このモジュール</h2>
 
 <ul>
- <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li>
- <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li>
- <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li>
- <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li>
- <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li>
- <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li>
- <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li>
- <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li>
- <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li>
- <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li>
+ <li><a href="/ja/docs/Learn/Forms/Your_first_form">初めてのフォーム</a></li>
+ <li><a href="/ja/docs/Learn/Forms/How_to_structure_a_web_form">フォームの構築方法</a></li>
+ <li><a href="/ja/docs/Learn/Forms/Basic_native_form_controls">基本的なネイティブフォームコントロール</a></li>
+ <li><a href="/ja/docs/Learn/Forms/HTML5_input_types">HTML5 の入力型</a></li>
+ <li><a href="/ja/docs/Learn/Forms/Other_form_controls">その他のフォームコントロール</a></li>
+ <li><a href="/ja/docs/Learn/Forms/Styling_web_forms">ウェブフォームへのスタイル付け</a></li>
+ <li><a href="/ja/docs/Learn/Forms/Advanced_form_styling">フォームへの高度なスタイル設定</a></li>
+ <li><a href="/ja/docs/Learn/Forms/UI_pseudo-classes">UI の擬似クラス</a></li>
+ <li><a href="/ja/docs/Learn/Forms/Form_validation">クライアント側のフォーム検証</a></li>
+ <li><a href="/ja/docs/Learn/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li>
 </ul>
 
-<h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3>
+<h3 id="Advanced_Topics">上級トピック</h3>
 
 <ul>
- <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_build_custom_form_controls" rel="noopener">カスタムフォームコントロールの作成方法</a></li>
- <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_forms_through_JavaScript" rel="noopener">JavaScript によるフォームの送信</a></li>
- <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets" rel="noopener">フォームウィジェット向けプロパティ実装状況一覧</a></li>
+ <li><a href="/ja/docs/Learn/Forms/How_to_build_custom_form_controls">カスタムフォームコントロールの作成方法</a></li>
+ <li><a href="/ja/docs/Learn/Forms/Sending_forms_through_JavaScript">JavaScript によるフォームの送信</a></li>
+ <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">フォームウィジェット向けプロパティ実装状況一覧</a></li>
 </ul>