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
151
152
153
154
155
156
157
158
159
160
161
162
|
---
title: 'HTML el atributo: min'
slug: Web/HTML/Atributos/min
tags:
- Atributos
- Restricción de validación
- atributo
- min
translation_of: Web/HTML/Attributes/min
---
<div id="step-include">
<p><span class="seoSummary">El atributo {{HTMLAttrxRef("min", "input")}} define el valor mínimo que es aceptable y válido para el {{HTMLElement("input")}} que contiene el atributo. Si el {{web.link("/es/docs/Web/HTML/Element/input#attr-value", "value")}} del elemento es menor que esto, el elemento falla la {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricción de validación")}}. Este valor debe ser menor o igual que el valor del atributo {{HTMLAttrxRef("max", "input")}}. Si se especifica un valor para {{HTMLAttrxRef("min", "input")}} que no es un número válido, la entrada no tiene un valor mínimo.</span></p>
<p>Válido para los tipos de entrada numérica, incluidos los tipos {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}} y {{HTMLElement("input/range", "range")}}, y el elemento {{htmlelement('meter')}}, el atributo {{HTMLAttrxRef("min", "input")}} es un número que especifica el valor mínimo de un control de formulario para ser considerado válido.</p>
<h3 id="Sintaxis">Sintaxis</h3>
<div id="step-include">
<p>Si <code>any</code> no se establece explícitamente, los valores válidos para el <code>número</code>, los tipos de entrada de fecha/hora y los tipos de entrada de <code>range</code> son iguales a la base de paso a paso: el valor {{HTMLAttrxRef("min", "input")}} y los incrementos del valor del paso, hasta el valor {{web.link("/es/docs/Web/HTML/Attributes/max", "max")}}, si se especifica. Por ejemplo, si tienes <code><input type="number" min="10" step="2"></code>, cualquier entero par, 10 o mayor, es válido. Si se omite, <code><input type="number"></code>, cualquier número entero es válido, pero los flotantes, como 4.2, no son válidos, ya que el <code>step</code> predeterminado es 1. Para que 4.2 sea válido, <code>step</code> se debería haber configurado en <code>any</code>, 0.1, 0.2, o cualquiera, el valor mínimo tendría que ser un número terminado en 0.2 , como <code><input type="number" min="-5.2"></code></p>
<table class="standard-table">
<caption>Sintaxis para valores {{HTMLAttrxRef("min", "input")}} por <code><input type="" /></code></caption>
<thead>
<tr>
<th>Tipo del <code>input</code></th>
<th>Ejemplo</th>
<th>Ejemplo</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{HTMLElement("input/date", "date")}}</td>
<td><code class="brush: html">yyyy-mm-dd</code></td>
<td><code class="brush: html"><input type="date" min="2019-12-25" step="1"></code></td>
</tr>
<tr>
<td>{{HTMLElement("input/month", "month")}}</td>
<td><code class="brush: html">yyyy-mm</code></td>
<td><code class="brush: html"><input type="month" min="2019-12" step="12"></code></td>
</tr>
<tr>
<td>{{HTMLElement("input/week", "week")}}</td>
<td><code class="brush: html">yyyy-W##</code></td>
<td><code class="brush: html"><input type="week" min="2019-W23" step=""></code></td>
</tr>
<tr>
<td>{{HTMLElement("input/time", "time")}}</td>
<td><code class="brush: html">hh:mm</code></td>
<td><code class="brush: html"><input type="time" min="09:00" step="900"></code></td>
</tr>
<tr>
<td>{{HTMLElement("input/datetime-local", "datetime-local")}}</td>
<td><code>yyyy-mm-ddThh:mm</code></td>
<td><code class="brush: html"><input type="datetime-local" min="2019-12-25T19:30"></code></td>
</tr>
<tr>
<td>{{HTMLElement("input/number", "number")}}</td>
<td>{{web.link("/es/docs/Web/CSS/number", "number")}}</td>
<td><code class="brush: html"><input type="number" min="0" step="5" max="100"></code></td>
</tr>
<tr>
<td>{{HTMLElement("input/range", "range")}}</td>
<td>{{web.link("/es/docs/Web/CSS/number", "number")}}</td>
<td><code class="brush: html"><input type="range" min="60" step="5" max="100"></code></td>
</tr>
</tbody>
</table>
<div class="note">
<p><strong>Nota</strong>: Cuando los datos ingresados por el usuario no se adhieren al valor mínimo establecido, el valor se considera inválido en la restricción de validación y coincidirá con la pseudoclase <code>:invalid</code></p>
</div>
</div>
<p>Consulta {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "Validación del lado del cliente")}} y {{DOMxRef("ValidityState.rangeUnderflow", "rangeUnderflow")}} para más información.</p>
<p>Para el elemento {{HTMLElement('meter')}}, el atributo {{HTMLAttrxRef("min", "input")}} define el límite numérico inferior del rango medido. Debe ser menor que el valor mínimo (atributo {{web.link("/es/docs/Web/HTML/Attributes/max", "max")}}), si se especifica. En ambos casos, si se omite, el valor predeterminado es 1.</p>
<table class="standard-table">
<caption>Sintaxis para valores {{HTMLAttrxRef("min", "input")}} para otros elementos</caption>
<thead>
<tr>
<th>Tipo del <code>input</code></th>
<th>Sintaxis</th>
<th>Ejemplo</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{HTMLElement("meter")}}</td>
<td>{{web.link("/es/docs/Web/CSS/number", "number")}}</td>
<td><code><meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"> at 40/100</meter></code></td>
</tr>
</tbody>
</table>
<h3 id="Impacto_en_step">Impacto en <code>step</code></h3>
<p>Los valores de {{HTMLAttrxRef("min", "input")}} y <code>step</code> definen cuáles son los valores válidos, incluso si el atributo <code>step</code> no está incluido, como el <code>step</code> predeterminado de <code>0</code>.</p>
<p>Agrega un gran borde rojo alrededor de los {{HTMLElement("input")}}s no válidos:</p>
<pre class="brush: css notranslate">input:invalid {
border: solid red 3px;
}</pre>
<p>Luego define un {{HTMLElement("input")}} con un valor mínimo de 7.2, omitiendo el atributo <code>step</code>, en donde el valor predeterminado es 1.</p>
<pre class="brush: html notranslate"><input id="myNumber" name="myNumber" type="number" min="7.2" value="8"></pre>
<p>Dado que <code>step</code> tiene el valor predeterminado de 1, los valores válidos incluyen <code>7.2</code>, <code>8.2</code>, <code>9.2</code> y así sucesivamente. El valor 8 no es válido. Dado que incluye un valor no válido, los navegadores compatibles mostrarán el valor como no válido.</p>
<p>{{EmbedLiveSample("Impacto_en_step",200,55)}}</p>
<p>Si no se incluye explícitamente, <code>step</code> tiene como valor predeterminado 1 para <code>número</code> y <code>range</code>, y 1 tipo de unidad (segundo, semana, mes, día) para los {{HTMLElement("input")}}s de tipo fecha/hora.</p>
</div>
<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
<p>{{Compat("html.elements.attributes.min")}}</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', 'input.html#the-min-and-max-attributes', 'min attribute')}}</td>
<td>{{ Spec2('HTML WHATWG') }}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'input.html#the-min-and-max-attributes', 'min attribute')}}</td>
<td>{{ Spec2('HTML5 W3C') }}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Problemas_de_accesibilidad">Problemas de accesibilidad</h2>
<p>Proporciona instrucciones para ayudar a los usuarios a comprender cómo completar el formulario y utilizar controles de formulario individuales. Indica cualquier entrada requerida y opcional, formatos de datos y otra información relevante. Cuando utilices el atributo {{HTMLAttrxRef("min", "input")}}, asegúrate de que el usuario comprenda este requisito mínimo. Posiblemente sea suficiente proporcionar instrucciones dentro de un {{HTMLElement('label')}}. Si proporcionas instrucciones fuera de las etiquetas, lo cual permite un posicionamiento y un diseño más flexibles, considera usar {{web.link("/es/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute", "aria-labelledby")}} o {{web.link("/es/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-descriptionsby_attribute", "aria-describedby")}}.</p>
<h2 id="Ve_también">Ve también</h2>
<ul>
<li>{{web.link("/es/docs/Web/HTML/Attributes/step", "step")}}</li>
<li>{{web.link("/es/docs/Web/HTML/Attributes/max", "max")}}</li>
<li>{{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricciones de validación")}}</li>
<li>{{DOMxRef('Constraint_validation')}}</li>
<li>{{DOMxRef('validityState.rangeUnderflow')}}</li>
<li>{{CSSxRef(':out-of-range')}}</li>
<li>{{HTMLElement('input')}}</li>
<li>Los tipos {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}}, {{HTMLElement("input/range", "range")}} y {{htmlelement('meter')}}</li>
</ul>
|
