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/Elemento/option
tags:
- Elemento
- Formulários HTML
- Referencia
- Web
- formulários
- htmls
translation_of: Web/HTML/Element/option
---
<div>{{HTMLRef}}</div>
<p>En un formulario Web , el <strong>elemento</strong> <strong>HTML<em> </em><code><option></code><em> </em></strong>se usa para representar un item dentro de un {{HTMLElement("select")}}, un {{HTMLElement("optgroup")}} o un elemento HTML5 {{HTMLElement("datalist")}} .</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Contenido de las categorías</a></th>
<td>Ninguna</td>
</tr>
<tr>
<th scope="row">Contenido permitido</th>
<td>Texto con, eventualmente, caracteres especiales (como <code>&eacute;</code>).</td>
</tr>
<tr>
<th scope="row">Omisión de etiqueta</th>
<td>La etiqueta de inicio es obligatoria. La etiqueta de finalización es opcional siempre que el elemento esté inmediatamente seguido por otro elemento<code> <option></code> , por un {{HTMLElement("optgroup")}}, o si el elemento padre tiene no tiene más contenido</td>
</tr>
<tr>
<th scope="row">Elementos padre permitidos</th>
<td> {{HTMLElement("select")}}, o {{HTMLElement("optgroup")}} o un elemento {{HTMLElement("datalist")}} element.</td>
</tr>
<tr>
<th scope="row">Interfaz DOM</th>
<td>{{domxref("HTMLOptionElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Atributos">Atributos</h2>
<p>Este elemento posee los <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globales</a>.</p>
<dl>
<dt>{{htmlattrdef("disabled")}}</dt>
<dd>Si está establecido el elemento no se puede seleccionar. A menudo los navegadores ponen en gris el elemento y de esa manera no recibirá ningún evento de navegación como clicks de ratón o eventos relacionados con la obtención del foco. Si este atributo no está definido el elemento puede ser aún deshabilitado si uno de sus ancestros es un elemento {{HTMLElement("optgroup")}} deshabilitado.</dd>
<dt>{{htmlattrdef("label")}}</dt>
<dd>Este atributo es el texto para la etiqueta que determina el significado de la opción. Si el atributo <code><strong>label</strong></code> no está definidio su valor será el texto del contenido del elemento
<div class="note"><em>Nota de Uso: </em>El atributo <strong>label</strong> está diseñado para contener una etiqueta corta que se usará típicamente en un menú jerárquico. El <strong><code>atributo value</code></strong> describe una etiqueta más larga para ser usada, por ejemplo, cerca de un radio button</div>
</dd>
<dt>{{htmlattrdef("selected")}}</dt>
<dd>Si está presente, este atributo booleano indica si esta opción es la inicialmente seleccionada. Si el elemento <code><option> es descendiente de un elemento </code>{{HTMLElement("select")}} cuyo atributo {{htmlattrxref("multiple", "select")}} no esté definidio únicamente un sólo <code><option></code> de este elemento {{HTMLElement("select")}} puede tener este atributo <strong>selected</strong> attribute.</dd>
<dt>{{htmlattrdef("value")}}</dt>
<dd>El contenido de este atributo representa el valor que será enviado al enviar el formulario si una determinada opción está seleccionada. Si se omite el atributo el valor se tomará del texto del contenido del elemento option.</dd>
</dl>
<h2 id="Ejemplos">Ejemplos</h2>
<p>Ver los ejemplos {{HTMLElement("select")}}.</p>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-option-element', '<option>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'forms.html#the-option-element', '<option>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<option>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td>
<p>Definición inicial</p>
</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>1.0</td>
<td>{{CompatGeckoMobile("1.0")}}<sup>[1]</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>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</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 muestra el valor del atributo label como texto de la opción en caso de que el contenido del elemento esté vacío. Ver {{bug("1205213")}}.</p>
<h2 id="Ver_también">Ver también</h2>
<ul>
<li>Otro elemento relacionados con formularios: {{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>
|
