files/ca/web/html/element/option/index.html


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

---
title: <option>
slug: Web/HTML/Element/option
tags:
  - Element
  - Forms
  - HTML
  - HTML forms
  - Reference
  - Web
translation_of: Web/HTML/Element/option
---
<div>{{HTMLRef}}</div>

<p>En un formulari web, l'element HTML &lt;option&gt; s'utilitza per crear un control que representa un element dins d'un {{HTMLElement("select")}}, un {{HTMLElement("optgroup")}} o un element d'HTML5 {{HTMLElement("datalist")}}.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
   <td>Cap.</td>
  </tr>
  <tr>
   <th scope="row">Contingut permès</th>
   <td>Text amb caràcters escapats provisionals (això és <code>&amp;eacute;</code>).</td>
  </tr>
  <tr>
   <th scope="row">Omissió de l'etiqueta</th>
   <td><span id="result_box" lang="ca"><span>L'etiqueta</span> <span>d'inici és</span> <span>obligatòria.</span> <span>L'etiqueta</span> <span>de tancament</span> <span>és</span> <span>opcional si</span> <span>aquest</span> <span>element</span> <span>és seguit</span> <span>immediatament</span> <span>per un altre</span> <span>element</span> <code><span>&lt;</span><span>option</span><span>&gt;</span></code> <span>o</span> <span>{</span><span>{</span><span>HTMLElement</span> <span>(</span><span>"</span><span>optgroup</span><span>"</span><span>)</span><span>}</span><span>}</span><span>,</span> <span>o</span> <span>si l'element</span> <span>pare no</span> <span>té</span> <span>més</span> <span>contingut.</span></span></td>
  </tr>
  <tr>
   <th scope="row">Elements pares permesos</th>
   <td>Un {{HTMLElement("select")}}, un {{HTMLElement("optgroup")}} o un element  {{HTMLElement("datalist")}}.</td>
  </tr>
  <tr>
   <th scope="row">Interfície DOM</th>
   <td>{{domxref("HTMLOptionElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Atributs">Atributs</h2>

<p>Aquest element inclou els <a href="/en-US/docs/Web/HTML/Global_attributes">atributs globals</a>.</p>

<dl>
 <dt>{{htmlattrdef("disabled")}}</dt>
 <dd>Si aquest atribut booleà s'estableix, aquesta opció no és comprovable.<br>
 Sovint, els navegadors no habiliten aquest control i no reben cap esdeveniment de navegació, com clics del ratolí o els relacionats amb l'enfocament. Si aquest atribut no està establert, l'element encara es pot desactivar si un dels seus ancestres és un element {{HTMLElement("optgroup")}} deshabilitat.</dd>
 <dt>{{htmlattrdef("label")}}</dt>
 <dd>Aquest atribut és el text de l'etiqueta que indica el significat de l'opció. Si no es defineix l'atribut <code>label</code>, el seu valor és la del contingut del text de l'element.</dd>
 <dt>{{htmlattrdef("selected")}}</dt>
 <dd>Si és present, aquest atribut booleà indica que l'opció està seleccionada inicialment. Si l'element <code>&lt;option&gt;</code> és el descendent d'un element {{HTMLElement ("select")}} en que el seu atribut {{htmlattrxref("multiple", "select")}} no està establert, només una sola <code>&lt;option&gt;</code> d'aquest element {{HTMLElement("select")}} té l'atribut <code>selected</code>.</dd>
 <dt>{{htmlattrdef("value")}}</dt>
 <dd>El contingut d'aquest atribut representa el valor que s'ha de presentar amb el formulari, si està seleccionada aquesta opció. Si s'omet aquest atribut, el valor es pren del contingut de text de l'element option.</dd>
</dl>

<h2 id="Exemples">Exemples</h2>

<p>Veure exemples de {{HTMLElement("select")}}.</p>

<h2 id="Especificacions">Especificacions</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-option-element', '&lt;option&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'forms.html#the-option-element', '&lt;option&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;option&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>Definció incial</td>
  </tr>
 </tbody>
</table>

<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.0")}}<sup>[1][2]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Gecko no mostra el valor de l'atribut <code>label</code> com a text d'opció si el contingut de l'element està buit. Veure {{bug("1205213")}}.</p>

<p>[2] Històricament, Firefox ha permès que els esdeveniments de teclat i ratolí és generin des de l'element <code>&lt;option&gt;</code> al element pare {{HTMLElement("select")}}. Això no succeeix en Chrome, encara que aquest comportament és incoherent en molts navegadors.Per a una millor compatibilitat web (i per raons tècniques), quan Firefox està en modalitat multi-procés l'element <code>&lt;select&gt;</code> es mostra com una llista desplegable. El comportament no té canvis si &lt;select&gt; es presenta en línia i té l'atribut <code>multiple</code> definit o un atribut <code>size</code> ajustat a més de 1.<br>
 En lloc d'observar elements <code>&lt;option&gt;</code> per a esdeveniments, heu d'estar atents els esdeveniments {event("change")}} en {{HTMLElement("select")}}. Veure {{bug(1090602)}} per a més informació.</p>

<h2 id="Veure">Veure</h2>

<ul>
 <li>Altres elements relacionats amb formualris: {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li>
</ul>