mozilla

Revision 351755 of select 要素

  • リビジョンの URL スラグ: HTML/Element/select
  • リビジョンのタイトル: <select>
  • リビジョンの ID: 351755
  • 作成日:
  • 作成者: sii
  • 現行リビジョン いいえ
  • コメント Translated from English into Japanese

このリビジョンの内容

概要

HTML の select 要素(<select>)は、選択式のメニューを提供するコントロールを表します。メニューの中にある選択肢は、 {{ HTMLElement("optgroup") }} 要素でグループ化することのできる、 {{ HTMLElement("option") }} 要素で表されます。ユーザーのため、選択肢をあらかじめ選択しておくことができます。

使用可能な場所

コンテンツカテゴリ フローコンテンツフレージングコンテンツインタラクティブコンテンツリスト化ラベル付け可能リセット可能、およびサブミット可能フォーム関連コンテンツ要素
許可された内容 0 個以上の {{ HTMLElement("option") }} 要素または {{ HTMLElement("optgroup") }} 要素。
タグの省略 不可。開始タグと終了タグの両方が必要です。
許可された親要素 フレージングコンテンツを受け入れる全ての要素。
標準文書 HTML5, section 4.10.9 (HTML4.01, section 17.6)

属性

この要素はグローバル属性を持っています。

{{ htmlattrdef("autofocus") }} {{ HTMLVersionInline("5") }}
この属性は、例えば異なるコントロールで入力していることによってユーザーがそれを覆すような場合を除き、ページが読み込まれた際、フォームコントロールが入力フォーカスを持つべきことを指定できるようにします。文書内の 1 つのフォーム要素のみが、真偽値である、 autofocus 属性を持つことができます。
{{ htmlattrdef("disabled") }}
この真偽値属性は、ユーザーがそのコントロールを利用することができないことを示します。もしこの属性が指定されていない場合、コントロールはその設定を親要素、例えば fieldset 要素から継承します。もし親要素に disabled 属性を持つものが無ければ、そのコントロールは利用可能です。
{{ htmlattrdef("form") }} {{ HTMLVersionInline("5") }}
その select 要素が関連付けられた form 要素(フォームの所有者)です。属性値は同じ文書内の form 要素の ID でなければなりません。もしこの属性が指定されていない場合、その select 要素は form 要素の子孫でなければなりません。この属性によって、 select 要素を、 form 要素の子孫としてだけでなく、文書内の任意の場所に置くことができます。
{{ htmlattrdef("multiple") }}
この真偽値属性は、リストの複数の選択肢を選択することができることを示します。指定されていない場合は、一度に選択することができるのは 1 つの選択肢のみです。
{{ htmlattrdef("selectedIndex") }}
選択された {{ HTMLElement("option") }} 要素の添え字です。
{{ htmlattrdef("name") }}
コントロールの名前です。
{{ htmlattrdef("required") }} {{ HTMLVersionInline("5") }}
空ではない文字列の値の選択肢を選択しなければならないことを示す真偽値属性です。
{{ htmlattrdef("size") }}
もしコントロールがスクロールリストボックスとして表される場合、この属性は一度に見えるべきリストの行数を表します。ブラウザは、 select 要素をスクロールリストボックスとして提供する必要はありません。初期値は 0 です。
Firefox の注意: HTML5 の仕様によると、 size 属性の初期値は 1 であるべきとされています。しかしながら、実際のところは、このことによっていくつかの Web サイトを壊してしまうことがわかり、他のブラウザでも現在そうしているものは無く、 Mozilla は当分の間、 Firefox でも 0 を返し続けることを選択しました。

DOM インターフェース

この要素は、 HTMLSelectElement インターフェースを実装しています。

<!-- 最初に 2 番目の値が選択されます。 -->
<select name="select">
  <option value="value1">Value 1</option> 
  <option value="value2" selected>Value 2</option>
  <option value="value3">Value 3</option>
</select>

結果

注意

この要素の内容は静的で、編集可能ではありません。もし、ラジオボタンテキストボックスを持った {{HTMLElement("fieldset")}} ( JavaScript を使わず、純粋な CSS で書かれている)を使って、編集可能な select 要素をエミュレートしたい場合は、こちらの例をご覧下さい。

互換性

{{ CompatibilityTable() }}

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 {{ CompatGeckoDesktop("1.0") }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
required 属性 {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("2.0") }} 10 {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート {{ CompatVersionUnknown() }} {{ CompatGeckoMobile("1.0") }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
required 属性 {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("2.0") }} {{ CompatNo() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}

参照

  • フォームに関連する他の要素。 {{ HTMLElement("form") }}、 {{ HTMLElement("legend") }}、 {{ HTMLElement("label") }}、 {{ HTMLElement("button") }}、 {{ HTMLElement("option") }}、 {{ HTMLElement("datalist") }}、 {{ HTMLElement("optgroup") }}、 {{ HTMLElement("fieldset") }}、 {{ HTMLElement("textarea") }}、 {{ HTMLElement("keygen") }} 、 {{ HTMLElement("input") }}、 {{ HTMLElement("output") }}、 {{ HTMLElement("progress") }} and {{ HTMLElement("meter") }}。

このリビジョンのソースコード

<h2 id="Summary">概要</h2>
<p>HTML の <em>select</em> 要素(<code>&lt;select&gt;</code>)は、選択式のメニューを提供するコントロールを表します。メニューの中にある選択肢は、 <code>{{ HTMLElement("optgroup") }} 要素でグループ化することのできる、 </code><code>{{ HTMLElement("option") }} 要素で表されます。ユーザーのため、選択肢をあらかじめ選択しておくことができます。</code></p>
<h2 id="Usage_content">使用可能な場所</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <td><a href="/ja/docs/HTML/Content_categories">コンテンツカテゴリ</a></td>
      <td><a href="/ja/docs/HTML/Content_categories#flow_content" title="/ja/docs/HTML/Content categories#flow content">フローコンテンツ</a>、<a href="/ja/docs/HTML/Content_categories#phrasing_content" title="/ja/docs/HTML/Content categories#phrasing content">フレージングコンテンツ</a>、<a href="/ja/docs/HTML/Content_categories#interactive_content" title="/ja/docs/HTML/Content categories#interactive content">インタラクティブコンテンツ</a>、<a href="/ja/docs/HTML/Content_categories#form_listed" title="/ja/docs/HTML/Content categories#form listed">リスト化</a>、<a href="/ja/docs/HTML/Content_categories#form_labelable" title="/ja/docs/HTML/Content categories#form labelable">ラベル付け可能</a>、<a href="/ja/docs/HTML/Content_categories#form_resettable" title="/ja/docs/HTML/Content categories#form resettable">リセット可能</a>、および<a href="/ja/docs/HTML/Content_categories#form_submittable" title="/ja/docs/HTML/Content categories#form submittable">サブミット可能</a>な<a href="/ja/docs/HTML/Content_categories#form-associated_" title="/ja/docs/HTML/Content categories#form-associated ">フォーム関連コンテンツ</a>要素</td>
    </tr>
    <tr>
      <td>許可された内容</td>
      <td>0 個以上の {{ HTMLElement("option") }} 要素または {{ HTMLElement("optgroup") }} 要素。</td>
    </tr>
    <tr>
      <td>タグの省略</td>
      <td>不可。開始タグと終了タグの両方が必要です。</td>
    </tr>
    <tr>
      <td>許可された親要素</td>
      <td>フレージングコンテンツを受け入れる全ての要素。</td>
    </tr>
    <tr>
      <td>標準文書</td>
      <td><a class="external" href="http://dev.w3.org/html5/spec/the-button-element.html#the-select-element" rel="external nofollow" target="_blank" title="http://dev.w3.org/html5/spec/the-button-element.html#the-select-element">HTML5, section 4.10.9</a> (<a class="external" href="http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.6" title="http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.6">HTML4.01, section 17.6</a>)</td>
    </tr>
  </tbody>
</table>
<h2 id="Attributes">属性</h2>
<p>この要素は<a href="/ja/docs/HTML/Global_attributes" title="/ja/docs/HTML/Global_attributes">グローバル属性</a>を持っています。</p>
<dl>
  <dt>
    {{ htmlattrdef("autofocus") }} {{ HTMLVersionInline("5") }}</dt>
  <dd>
    この属性は、例えば異なるコントロールで入力していることによってユーザーがそれを覆すような場合を除き、ページが読み込まれた際、フォームコントロールが入力フォーカスを持つべきことを指定できるようにします。文書内の 1 つのフォーム要素のみが、真偽値である、 <code>autofocus</code> 属性を持つことができます。</dd>
  <dt>
    {{ htmlattrdef("disabled") }}</dt>
  <dd>
    この真偽値属性は、ユーザーがそのコントロールを利用することができないことを示します。もしこの属性が指定されていない場合、コントロールはその設定を親要素、例えば <code>fieldset</code> 要素から継承します。もし親要素に <code>disabled</code> 属性を持つものが無ければ、そのコントロールは利用可能です。</dd>
  <dt>
    {{ htmlattrdef("form") }} {{ HTMLVersionInline("5") }}</dt>
  <dd>
    その select 要素が関連付けられた form 要素(フォームの所有者)です。属性値は同じ文書内の form 要素の ID でなければなりません。もしこの属性が指定されていない場合、その select 要素は form 要素の子孫でなければなりません。この属性によって、 select 要素を、 form 要素の子孫としてだけでなく、文書内の任意の場所に置くことができます。</dd>
  <dt>
    {{ htmlattrdef("multiple") }}</dt>
  <dd>
    この真偽値属性は、リストの複数の選択肢を選択することができることを示します。指定されていない場合は、一度に選択することができるのは 1 つの選択肢のみです。</dd>
  <dt>
    {{ htmlattrdef("selectedIndex") }}</dt>
  <dd>
    選択された {{ HTMLElement("option") }} 要素の添え字です。</dd>
  <dt>
    {{ htmlattrdef("name") }}</dt>
  <dd>
    コントロールの名前です。</dd>
  <dt>
    {{ htmlattrdef("required") }} {{ HTMLVersionInline("5") }}</dt>
  <dd>
    空ではない文字列の値の選択肢を選択しなければならないことを示す真偽値属性です。</dd>
  <dt>
    {{ htmlattrdef("size") }}</dt>
  <dd>
    もしコントロールがスクロールリストボックスとして表される場合、この属性は一度に見えるべきリストの行数を表します。ブラウザは、 select 要素をスクロールリストボックスとして提供する必要はありません。初期値は 0 です。</dd>
</dl>
<div class="note">
  <strong>Firefox の注意: </strong>HTML5 の仕様によると、 size 属性の初期値は 1 であるべきとされています。しかしながら、実際のところは、このことによっていくつかの Web サイトを壊してしまうことがわかり、他のブラウザでも現在そうしているものは無く、 Mozilla は当分の間、 Firefox でも 0 を返し続けることを選択しました。</div>
<dl>
</dl>
<h2 id="DOM.C2.A0Interface">DOM インターフェース</h2>
<p>この要素は、 <code><a href="/ja/docs/DOM/HTMLSelectElement" title="/ja/docs/DOM/select">HTMLSelectElement</a></code> インターフェースを実装しています。</p>
<h2 id="Examples">例</h2>
<pre class="brush: html">
&lt;!-- 最初に 2 番目の値が選択されます。 --&gt;
&lt;select name="select"&gt;
&nbsp; &lt;option value="value1"&gt;Value 1&lt;/option&gt; 
&nbsp;&nbsp;&lt;option value="value2" selected&gt;Value 2&lt;/option&gt;
&nbsp; &lt;option value="value3"&gt;Value 3&lt;/option&gt;
&lt;/select&gt;
</pre>
<h4 id="Result">結果</h4>
<p><select name="select"><option value="value1">Value 1</option><option selected="selected" value="value2">Value 2</option><option value="value3">Value 3</option></select></p>
<h3 id="Notes">注意</h3>
<p>この要素の内容は静的で、<a href="/ja/docs/HTML/Content_Editable" title="/ja/docs/HTML/Content_Editable">編集可能</a>ではありません。もし、<a href="/ja/docs/HTML/Element/Input" title="/ja/docs/HTML/Element/Input">ラジオボタン</a>や<a href="/ja/docs/HTML/Element/Input" title="/ja/docs/HTML/Element/Input">テキストボックス</a>を持った {{HTMLElement("fieldset")}} ( JavaScript を使わず、<strong>純粋な CSS で書かれている</strong>)を使って、編集可能な select 要素をエミュレートしたい場合は、<a href="/files/4563/editable_select.html" title="Simulating an editable select through a fieldset of radioboxes and textboxes">こちらの例をご覧下さい。</a></p>
<h3 id="Compatibility">互換性</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>機能</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>基本サポート</td>
        <td>1.0</td>
        <td>{{ CompatGeckoDesktop("1.0") }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td><code>required</code> 属性</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("2.0") }}</td>
        <td>10</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>機能</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>基本サポート</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoMobile("1.0") }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td><code>required</code> 属性</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("2.0") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">参照</h2>
<ul>
  <li>フォームに関連する他の要素。 {{ HTMLElement("form") }}、 {{ HTMLElement("legend") }}、 {{ HTMLElement("label") }}、 {{ HTMLElement("button") }}、 {{ HTMLElement("option") }}、 {{ HTMLElement("datalist") }}、 {{ HTMLElement("optgroup") }}、 {{ HTMLElement("fieldset") }}、 {{ HTMLElement("textarea") }}、 {{ HTMLElement("keygen") }}
、 {{ HTMLElement("input") }}、 {{ HTMLElement("output") }}、 {{ HTMLElement("progress") }} and {{ HTMLElement("meter") }}。</li>
</ul>
このリビジョンへ戻す