initial commit

1 files changed, 185 insertions, 0 deletions

diff --git a/files/ja/web/html/attributes/multiple/index.html b/files/ja/web/html/attributes/multiple/index.html
new file mode 100644
index 0000000000..da54459d50
--- /dev/null
+++ b/files/ja/web/html/attributes/multiple/index.html
@@ -0,0 +1,185 @@
+---
+title: 'HTML 属性: multiple'
+slug: Web/HTML/Attributes/multiple
+tags:
+  - Attribute
+  - Attributes
+  - Constraint validation
+  - HTML
+translation_of: Web/HTML/Attributes/multiple
+---
+<p>{{HTMLSidebar}}</p>
+
+<p>論理属性の <strong><code>multiple</code></strong> 属性は、設定されている場合、フォームコントロールが1つ以上の値を受け入れることを意味します。 {{HTMLElement("input/email", "email")}} と {{HTMLElement("input/file", "file")}} の入力型と {{HTMLElement("select")}} に対して有効で、ユーザーが複数の値を選択する方法はフォームコントロールに依存します。</p>
+
+<p>型によっては、<code>multiple</code> 属性が設定されている場合、フォームコントロールの外観が変わる場合があります。 file 入力型については、ブラウザーが提供するネイティブのメッセージが異なります。 Firefox では、ファイルが選択されていないとき、この属性が設定されていると「ファイルが選択されていません」、設定されていない場合は「ファイルが選択されていません」となります（訳注：英語では file と files の違いがありますが、日本語ではメッセージの違いはありません）。ほとんどのブラウザーでは、 {{HTMLElement("select")}} コントロールに <code>multiple</code> 属性が設定されていると、スクロールするリストボックスを表示するのに対し、設定されていない場合は単一行のドロップダウンを表示します。 {{HTMLElement("input/email", "email")}} 入力は同じ表示ですが、この属性が設定されていない場合は、カンマ区切りで複数のメールアドレスが設定されていると {{cssxref(':invalid')}} 擬似クラスに一致します。</p>
+
+<p><code>multiple</code> が {{HTMLElement("input/email", "email")}} 入力型に設定されている場合、ユーザーは0個 (<code><a href="/ja/docs/Web/HTML/Attributes/required">required</a></code> がない場合)、1個、またはそれ以上のカンマ区切りのメールアドレスを入れることができます。</p>
+
+<pre class="brush: html notranslate">&lt;input type="email" <strong>multiple</strong> name="emails" id="emails"&gt;</pre>
+
+<p><code>multiple</code> 属性が指定された場合のみ、値はカンマで区切られた適切な形式のメールアドレスのリストになります。リスト内の各アドレスから、末尾と先頭の空白はすべて削除されます。</p>
+
+<p><code>multiple</code> が {{HTMLElement("input/file", "file")}} 入力型に設定された場合、ユーザーは 1 つ以上のファイルを選択することができます。ユーザーはファイルピッカーから複数のファイルを、選択したプラットフォームが許可する任意の方法 (<kbd>Shift</kbd> か <kbd>Control</kbd> を押したまま、それからクリックするなど) で選択することができます。</p>
+
+<pre class="brush: html notranslate">&lt;input type="file" <strong>multiple</strong> name="uploads" id="uploads"&gt;</pre>
+
+<p>この属性を省略した場合は、 <code>&lt;input&gt;</code> あたりに1つのファイルしか選択することができません。</p>
+
+<p><code>multiple</code> 属性を {{HTMLElement("select")}} 要素に設定すると、選択肢のリストから 0 個以上の選択肢を選択するためのコントロールを表します。それ以外の場合、 {{HTMLElement("select")}} 要素は、選択肢のリストから単一の {{HTMLElement("option")}} を選択するためのコントロールを表します。</p>
+
+<pre class="brush: html notranslate">&lt;select multiple name="drawfs" id="drawfs"&gt;
+  &lt;option&gt;Grumpy&lt;/option&gt;
+  &lt;option&gt;Happy&lt;/option&gt;
+  &lt;option&gt;Sleepy&lt;/option&gt;
+  &lt;option&gt;Bashful&lt;/option&gt;
+  &lt;option&gt;Sneezy&lt;/option&gt;
+  &lt;option&gt;Dopey&lt;/option&gt;
+  &lt;option&gt;Doc&lt;/option&gt;
+&lt;/select&gt;</pre>
+
+<p><code>multiple</code> を指定すると、ほとんどのブラウザーでは 1 行のドロップダウンではなく、スクロールするリストボックスが表示されます。</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+
+<p>ユーザーがフォームに記入する方法を理解し、個々のフォームコントロールを使用するための指示を提供してください。入力が必須であるか任意であるか、データの書式、その他の関連する情報です。 <code>multiple</code> 属性を使用する場合は、ユーザーに複数の値が許可されていることを知らせ、「複数のメールアドレスをカンマ区切りで入力してください」などのように、複数の値を入力する方法を指示してください。</p>
+
+<p>複数選択で <code><a href="/ja/docs/Web/HTML/Attributes/size">size</a>="1"</code> を設定すると、ブラウザーによっては単一選択として表示されることがありますが、その場合はフォーカスが拡大されず、使い勝手が悪くなってしまいます。そのようなことはしないでください。 select の外観を変更する場合、また変更しない場合でも、別の方法で複数のオプションを選択できることをユーザーに知らせるようにしてください。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="email_input" name="email_input">email 入力型</h3>
+
+<pre class="brush: html notranslate">&lt;label for="emails"&gt;誰にメールしますか？&lt;/label&gt;
+&lt;input type="email" multiple name="emails" id="emails" list="drawfemails" required size="64"&gt;
+
+&lt;datalist id="drawfemails"&gt;
+  &lt;option value="grumpy@woodworkers.com"&gt;Grumpy&lt;/option&gt;
+  &lt;option value="happy@woodworkers.com"&gt;Happy&lt;/option&gt;
+  &lt;option value="sleepy@woodworkers.com"&gt;Sleepy&lt;/option&gt;
+  &lt;option value="bashful@woodworkers.com"&gt;Bashful&lt;/option&gt;
+  &lt;option value="sneezy@woodworkers.com"&gt;Sneezy&lt;/option&gt;
+  &lt;option value="dopey@woodworkers.com"&gt;Dopey&lt;/option&gt;
+  &lt;option value="doc@woodworkers.com"&gt;Doc&lt;/option&gt;
+&lt;/datalist&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">input:invalid {border: red solid 3px;}</pre>
+</div>
+
+<p><code>multiple</code> 属性が指定された場合のみ、値はカンマで区切られた適切な形式のメールアドレスのリストになります。リスト内の各アドレスから、末尾の空白と先頭の空白はすべて削除されます。 <code><a href="/ja/docs/Web/HTML/Attributes/required">required</a></code> 属性が存在する場合、少なくとも1つのメールアドレスが必要です。</p>
+
+<p>ブラウザーによっては、 <code>multiple</code> が存在する場合に関連付けられた {{htmlelement('datalist')}} から配下のメール会アドレスのためにオプションの <code><a href="/en-US/docs/Web/HTML/Attributes/list">list</a></code> を表示することがあります。他のブラウザーは対応していません。</p>
+
+<p>{{EmbedLiveSample("email_input", 600, 80) }}</p>
+
+<h3 id="file_input" name="file_input">file 入力型</h3>
+
+<p><code>multiple</code> が {{HTMLElement("input/file", "file")}} 入力型に設定されている場合、1つ以上のファイルを選択することができます。</p>
+
+<pre class="brush: html notranslate">&lt;form method="post" enctype="multipart/form-data"&gt;
+  &lt;p&gt;
+    &lt;label for="uploads"&gt;
+       アップロードする画像を選択してください:
+    &lt;/label&gt;
+    &lt;input type="file" id="uploads" name="uploads" accept=".jpg, .jpeg, .png, .svg, .gif" multiple&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="text"&gt;アップロードするテキストファイルを選択してください: &lt;/label&gt;
+    &lt;input type="file" id="text" name="text" accept=".txt"&gt;
+ &lt;/p&gt;
+  &lt;p&gt;
+    &lt;input type="submit" value="Submit"&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample("file_input", 600, 80) }}</p>
+
+<p><code>multiple</code> が設定された <code>file</code> 入力欄と、設定されていない入力欄との外見の違いに注意してください。</p>
+
+<p>フォームが送信されたとき、 <code><a href="/ja/docs/Web/HTML/Element/form">method="get"</a></code> を使用していれば、選択された各ファイルの名前が URL パラメータに<code>?uploads=img1.jpg&amp;uploads=img2.svg</code> のように追加されていたはずです。しかし、<a href="/ja/docs/Web/API/XMLHttpRequest/multipart">マルチパート</a>のフォームデータを送信しているので、post を多用しています。詳しくは {{htmlelement('form')}} 要素と<a href="/ja/docs/Learn/Forms/Sending_and_retrieving_form_data#The_method_attribute">フォームデータの送信</a>を参照してください。</p>
+
+<h3 id="select">select</h3>
+
+<p>{{HTMLElement("select")}} 要素の <code>multiple</code> 属性は、選択肢のリストから 0 個以上の選択肢を選択するための制御を表します。そうでなければ、{{HTMLElement("select")}} 要素は、選択肢のリストから単一の {{HTMLElement("option")}} を選択するための制御を表します。一般的に、このコントロールは複数の属性の存在に基づいて異なる外観を持ち、属性が存在する場合には、ほとんどのブラウザは、一行のドロップダウンではなくスクロールするリストボックスを表示します。</p>
+
+<pre class="brush: html notranslate">&lt;form method="get" action="#"&gt;
+&lt;p&gt;
+ &lt;label for="dwarfs"&gt;好きな木こりを選ぶ:&lt;/label&gt;
+  &lt;select multiple name="drawfs" id="drawfs"&gt;
+    &lt;option&gt;grumpy@woodworkers.com&lt;/option&gt;
+    &lt;option&gt;happy@woodworkers.com&lt;/option&gt;
+    &lt;option&gt;sleepy@woodworkers.com&lt;/option&gt;
+    &lt;option&gt;bashful@woodworkers.com&lt;/option&gt;
+    &lt;option&gt;sneezy@woodworkers.com&lt;/option&gt;
+    &lt;option&gt;dopey@woodworkers.com&lt;/option&gt;
+    &lt;option&gt;doc@woodworkers.com&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/p&gt;
+&lt;p&gt;
+ &lt;label for="favoriteOnly"&gt;好きなものを選ぶ:&lt;/label&gt;
+  &lt;select name="favoriteOnly" id="favoriteOnly"&gt;
+    &lt;option&gt;grumpy@woodworkers.com&lt;/option&gt;
+    &lt;option&gt;happy@woodworkers.com&lt;/option&gt;
+    &lt;option&gt;sleepy@woodworkers.com&lt;/option&gt;
+    &lt;option&gt;bashful@woodworkers.com&lt;/option&gt;
+    &lt;option&gt;sneezy@woodworkers.com&lt;/option&gt;
+    &lt;option&gt;dopey@woodworkers.com&lt;/option&gt;
+    &lt;option&gt;doc@woodworkers.com&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/p&gt;
+&lt;p&gt;
+  &lt;input type="submit" value="Submit"&gt;
+&lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample("select", 600, 120) }}</p>
+
+<p>2つのフォームコントロール間の外観の違いに注意してください。</p>
+
+<pre class="brush: css notranslate">/* この CSS のコメントを解除して、マルチプルがシングルと同じ高さになるようにします。 */
+
+/*
+select[multiple] {
+  height: 1.5em;
+  vertical-align: top;
+}
+select[multiple]:focus,
+select[multiple]:active {
+  height: auto;
+}
+*/</pre>
+
+<p>複数の属性を持つ <code>&lt;select&gt;</code> 要素の中で複数のオプションを選択する方法がいくつかあります。オペレーティングシステムに応じて、マウスを使用する人は <kbd>Ctrl</kbd>、<kbd>Command</kbd>、または <kbd>Shift</kbd> キーを押したまま、複数のオプションをクリックして、それらを選択／選択解除することができます。キーボードユーザは <code>&lt;select&gt;</code> 要素に焦点を当てて、カーソルキーの <kbd>Up</kbd> と <kbd>Down</kbd> を使って選択したい範囲の上部または下部にある項目を選択して、オプションを上下に移動することで、複数の連続した項目を選択することができます。連続していない項目の選択はあまりサポートされていません: <kbd>Space</kbd> キーを押すことで項目の選択と選択解除ができるはずですが、サポートはブラウザによって異なります。</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'input.html#attr-input-multiple', 'multiple attribute')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'input.html#attr-input-multiple', 'multiple attribute')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{htmlelement('input')}}</li>
+ <li>{{htmlelement('select')}}</li>
+ <li><a href="/ja/docs/Web/HTML/Element/input/email#Allowing_multiple_e-mail_addresses">複数のメールアドレスの許可</a></li>
+</ul>