1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
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"><input type="email" <strong>multiple</strong> name="emails" id="emails"></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"><input type="file" <strong>multiple</strong> name="uploads" id="uploads"></pre>
<p>この属性を省略した場合は、 <code><input></code> あたりに1つのファイルしか選択することができません。</p>
<p><code>multiple</code> 属性を {{HTMLElement("select")}} 要素に設定すると、選択肢のリストから 0 個以上の選択肢を選択するためのコントロールを表します。それ以外の場合、 {{HTMLElement("select")}} 要素は、選択肢のリストから単一の {{HTMLElement("option")}} を選択するためのコントロールを表します。</p>
<pre class="brush: html notranslate"><select multiple name="drawfs" id="drawfs">
<option>Grumpy</option>
<option>Happy</option>
<option>Sleepy</option>
<option>Bashful</option>
<option>Sneezy</option>
<option>Dopey</option>
<option>Doc</option>
</select></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"><label for="emails">誰にメールしますか？</label>
<input type="email" multiple name="emails" id="emails" list="drawfemails" required size="64">
<datalist id="drawfemails">
<option value="grumpy@woodworkers.com">Grumpy</option>
<option value="happy@woodworkers.com">Happy</option>
<option value="sleepy@woodworkers.com">Sleepy</option>
<option value="bashful@woodworkers.com">Bashful</option>
<option value="sneezy@woodworkers.com">Sneezy</option>
<option value="dopey@woodworkers.com">Dopey</option>
<option value="doc@woodworkers.com">Doc</option>
</datalist></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"><form method="post" enctype="multipart/form-data">
<p>
<label for="uploads">
アップロードする画像を選択してください:
</label>
<input type="file" id="uploads" name="uploads" accept=".jpg, .jpeg, .png, .svg, .gif" multiple>
</p>
<p>
<label for="text">アップロードするテキストファイルを選択してください: </label>
<input type="file" id="text" name="text" accept=".txt">
</p>
<p>
<input type="submit" value="Submit">
</p>
</form></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&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"><form method="get" action="#">
<p>
<label for="dwarfs">好きな木こりを選ぶ:</label>
<select multiple name="drawfs" id="drawfs">
<option>grumpy@woodworkers.com</option>
<option>happy@woodworkers.com</option>
<option>sleepy@woodworkers.com</option>
<option>bashful@woodworkers.com</option>
<option>sneezy@woodworkers.com</option>
<option>dopey@woodworkers.com</option>
<option>doc@woodworkers.com</option>
</select>
</p>
<p>
<label for="favoriteOnly">好きなものを選ぶ:</label>
<select name="favoriteOnly" id="favoriteOnly">
<option>grumpy@woodworkers.com</option>
<option>happy@woodworkers.com</option>
<option>sleepy@woodworkers.com</option>
<option>bashful@woodworkers.com</option>
<option>sneezy@woodworkers.com</option>
<option>dopey@woodworkers.com</option>
<option>doc@woodworkers.com</option>
</select>
</p>
<p>
<input type="submit" value="Submit">
</p>
</form></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><select></code> 要素の中で複数のオプションを選択する方法がいくつかあります。オペレーティングシステムに応じて、マウスを使用する人は <kbd>Ctrl</kbd>、<kbd>Command</kbd>、または <kbd>Shift</kbd> キーを押したまま、複数のオプションをクリックして、それらを選択／選択解除することができます。キーボードユーザは <code><select></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>
|
