files/ca/web/html/element/datalist/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: <datalist>
slug: Web/HTML/Element/datalist
translation_of: Web/HTML/Element/datalist
---
<h2 id="Sumari">Sumari</h2>

<p>L'<em>Element HTML Datalist</em> (<strong>&lt;datalist&gt;</strong>) conté un conjunt d'elements {{HTMLElement("option")}} que representen els valors disponibles per a altres controls.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categories de contingut</a></th>
   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contingut dinàmic</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>.</td>
  </tr>
  <tr>
   <th scope="row">Contingut permès</th>
   <td>Qualsevol <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a> o zero o més elements {{HTMLElement("option")}}.</td>
  </tr>
  <tr>
   <th scope="row">Omissió de l'etiqueta</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Elements pares permesos</th>
   <td>Qualsevol element que accepti <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
  </tr>
  <tr>
   <th scope="row">Interfície DOM</th>
   <td>{{domxref("HTMLDataListElement")}}</td>
  </tr>
 </tbody>
</table>

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

<p><span id="result_box" lang="ca"><span>Aquest</span> <span>element no</span> <span>té altres</span> <span>atributs que els</span></span> <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">atributs globals</a>, <span id="result_box" lang="ca"><span>comuns a</span> <span>tots</span> <span>els</span> <span>elements.</span></span></p>

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

<pre class="brush: html">&lt;label&gt;Choose a browser from this list:
&lt;input list="browsers" name="myBrowser" /&gt;&lt;/label&gt;
&lt;datalist id="browsers"&gt;
  &lt;option value="Chrome"&gt;
  &lt;option value="Firefox"&gt;
  &lt;option value="Internet Explorer"&gt;
  &lt;option value="Opera"&gt;
  &lt;option value="Safari"&gt;
  &lt;option value="Microsoft Edge"&gt;
&lt;/datalist&gt;
</pre>

<h3 id="Resultat" style="line-height: 24px; font-size: 1.71428571428571rem;">Resultat</h3>

<p>{{EmbedLiveSample("Examples")}}</p>

<dl>
 <dt><span id="result_box" lang="ca"><span>Utilitzant el</span> <span>resultat</span></span></dt>
</dl>

<p>L'atribut <strong>name</strong> de l'element &lt;input&gt; especifica el nom del control, que es presenta amb les dades del formulari.<strong><code> </code></strong></p>

<p>Aquest formulari de dades passa a estar disponible al servidor de la petició http: String myBrowser = request.getParameter("myBrowser");</p>

<h2 id="Specifications" name="Specifications">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-datalist-element', '&lt;datalist&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'forms.html#the-datalist-element', '&lt;datalist&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Polyfill">Polyfill</h2>

<p><a href="https://github.com/mfranzke/datalist-polyfill">datalist-polyfill</a></p>

<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</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>20</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>10</td>
   <td>9.5</td>
   <td>{{CompatNo}}</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 Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>33</td>
   <td>{{CompatGeckoMobile("2.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>10</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

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

<ul>
 <li class="last">L'element {{HTMLElement("input")}}, i més concretament l'atribut {{htmlattrxref("list", "input")}};</li>
 <li class="last">L'element {{HTMLElement("option")}}.</li>
</ul>

<p class="last">{{HTMLRef}}</p>