diff options
Diffstat (limited to 'files/es/web/html/attributes/min/index.html')
| -rw-r--r-- | files/es/web/html/attributes/min/index.html | 162 |
1 files changed, 162 insertions, 0 deletions
diff --git a/files/es/web/html/attributes/min/index.html b/files/es/web/html/attributes/min/index.html new file mode 100644 index 0000000000..4060bd81f4 --- /dev/null +++ b/files/es/web/html/attributes/min/index.html @@ -0,0 +1,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> |