files/es/web/html/element/fieldset/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

---
title: fieldset
slug: Web/HTML/Element/fieldset
tags:
  - HTML
  - HTML:Elemento
  - Todas_las_Categorías
translation_of: Web/HTML/Element/fieldset
original_slug: Web/HTML/Elemento/fieldset
---
<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>

<p>El elemento <a href="/es/HTML/Elemento/fieldset" title="es/HTML/Elemento/fieldset">fieldset</a> (grupo de campos) permite organizar en grupos los campos de un formulario.</p>

<dl>
 <dd><strong>Sus etiquetas son</strong>: &lt;fieldset&gt; y &lt;/fieldset&gt; (ambas obligatorias).</dd>
</dl>

<dl>
 <dd><strong>Crea una caja</strong>: <a href="/es/HTML/Elemento/Tipos_de_elementos#en_bloque" title="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a>.</dd>
</dl>

<dl>
 <dd><strong>Está definido como</strong>: <a href="/es/HTML/Elemento/Tipos_de_elementos#en_bloque" title="es/HTML/Elemento/Tipos_de_elementos#en_bloque">Elemento en bloque</a>.</dd>
</dl>

<dl>
 <dd><strong>Puede contener</strong>: un elemento <a href="/es/HTML/Elemento/legend" title="es/HTML/Elemento/legend">legend</a> (opcional), y despues cero o más elementos <a href="/es/HTML/Elemento/Tipos_de_elementos#en_bloque" title="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a> o <a href="/es/HTML/Elemento/Tipos_de_elementos#en_linea" title="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd>
</dl>

<h4 id="Atributos" name="Atributos">Atributos</h4>

<table class="standard-table">
 <tbody>
  <tr>
   <th>Atributo</th>
   <th colspan="2">valor</th>
   <th>descripción</th>
  </tr>
  <tr>
   <th colspan="4">Genéricos</th>
  </tr>
  <tr>
   <td><code style="color: green;">title</code></td>
   <td>texto</td>
   <td>implícito</td>
   <td>título consultivo del elemento.</td>
  </tr>
  <tr>
   <td><code style="color: green;">style</code></td>
   <td>reglas de estilo</td>
   <td>implícito</td>
   <td>información de estilo en línea.</td>
  </tr>
  <tr>
   <td><code style="color: green;">id</code></td>
   <td>ID</td>
   <td>implícito</td>
   <td>identificador único a nivel de documento.</td>
  </tr>
  <tr>
   <td><code style="color: green;">class</code></td>
   <td>lista de clases separadas por espacios</td>
   <td>implícito</td>
   <td>identificador a nivel de documento</td>
  </tr>
  <tr>
   <td><code style="color: green;">dir</code></td>
   <td>uno de los siguientes:"ltr" o "rtl"</td>
   <td>implícito</td>
   <td>dirección del texto débil/neutral</td>
  </tr>
  <tr>
   <td><code style="color: green;">lang</code></td>
   <td>código de idioma</td>
   <td>implícito</td>
   <td>información sobre el idioma</td>
  </tr>
  <tr>
   <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</code></td>
  </tr>
  <tr>
   <th colspan="4">Específicos</th>
  </tr>
  <tr>
   <td colspan="4">No tiene</td>
  </tr>
  <tr>
   <th colspan="4">de transición</th>
  </tr>
  <tr>
   <td colspan="4">No tiene</td>
  </tr>
  <tr>
   <th>Atributo</th>
   <th colspan="2">valor</th>
   <th>descripción</th>
  </tr>
 </tbody>
</table>

<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>

<p>El siguiente código:</p>

<pre>&lt;form&gt;

 &lt;fieldset&gt;
  &lt;legend&gt;Información Personal&lt;/legend&gt;
  Nombre: &lt;input name='nombre' type='text' tabindex='1'&gt;
  Apellidos: &lt;input name='apellidos' type='text' tabindex='2'&gt;
 &lt;/fieldset&gt;

 &lt;fieldset&gt;
  &lt;legend&gt;edad&lt;/legend&gt;
  &lt;input type='checkbox' tabindex='20'
            name='edad' value='20-39' &gt; 20-39
  &lt;input type='checkbox' tabindex='21'
            name='edad' value='40-59' &gt; 40-59
  &lt;input type='checkbox' tabindex='22'
            name='edad' value='60-79' &gt; 60-79
 &lt;/fieldset&gt;

&lt;/form&gt;
</pre>