path: root/files/es/web/html/element/input/number/index.html

---
title: <input type="number">
slug: Web/HTML/Element/input/number
tags:
  - Elemento
  - Elemento de entrada
  - Formulários HTML
  - HTML
  - Número
  - Referencia
  - Tipo de entrada
  - formulários
translation_of: Web/HTML/Element/input/number
original_slug: Web/HTML/Elemento/input/number
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary">Elementos {{HTMLElement("input")}} del tipo <strong><code>number</code></strong> son usados para permitir al usuario ingresar un número. Éstos incluyen validación incorporada para rechazar entradas no numéricas.</span> El navegador puede optar por proveer flechas de pasos para permitir al usuario incrementar y decrementar el valor usando su ratón o símplemente pulsando con la punta del dedo.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/input-number.html", "tabbed-shorter")}}</div>

<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>

<p>En navegadores que no soportan entradas de tipo <code>number</code>, una entrada <code>number</code> recurre al tipo <code>text</code>.</p>

<table class="properties">
 <tbody>
  <tr>
   <td><strong>{{anch("Value")}}</strong></td>
   <td>Un {{jsxref("Number")}} representando un número, o vacío.</td>
  </tr>
  <tr>
   <td><strong>Eventos</strong></td>
   <td>{{domxref("HTMLElement/change_event", "change")}} e {{domxref("HTMLElement/input_event", "input")}}</td>
  </tr>
  <tr>
   <td><strong>Atributos comunes que soporta</strong></td>
   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}</td>
  </tr>
  <tr>
   <td><strong>Atributos IDL</strong></td>
   <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code></td>
  </tr>
  <tr>
   <td><strong>Métodos</strong></td>
   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Valor">Valor</h2>

<p>Un {{jsxref("Number")}} representando el valor del número ingresado en la entrada. Tú puedes colocar el valor por omisión para la entrada incluyendo un número dentro del atributo {{htmlattrxref("value", "input")}}, de esta manera:</p>

<pre class="brush: html">&lt;input id="number" type="number" value="42"&gt;</pre>

<p>{{EmbedLiveSample('Value', 600, 40)}}</p>

<h2 id="Atributos_adicionales">Atributos adicionales</h2>

<p>Además de los atributos comúnmente soportados por todos los tipos de {{HTMLElement("input")}}, las entradas de tipo <code>number</code> soportan estos atributos:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Atributo</th>
   <th scope="col">Descripción</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>{{anch("list")}}</code></td>
   <td>El <code>id</code> del elemento {{HTMLElement("datalist")}} que contiene las opciones predefinidas de autocompletado.</td>
  </tr>
  <tr>
   <td><code>{{anch("max")}}</code></td>
   <td>El valor máximo a aceptar para esta entrada</td>
  </tr>
  <tr>
   <td><code>{{anch("min")}}</code></td>
   <td>El valor mínimo a aceptar para esta entrada</td>
  </tr>
  <tr>
   <td><code>{{anch("placeholder")}}</code></td>
   <td>Un valor de ejemplo para mostrar dentro del campo cuando esté vacío</td>
  </tr>
  <tr>
   <td><code>{{anch("readonly")}}</code></td>
   <td>Un atributo Booleano indicando si el valor es de solo lectura</td>
  </tr>
  <tr>
   <td><code>{{anch("step")}}</code></td>
   <td>El intervalo de paso a usar cuando se usen las flechas arriba y abajo para ajustar el valor, así como para su validación</td>
  </tr>
 </tbody>
</table>

<p id="htmlattrdeflist">{{page("/en-US/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p>

<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3>

<p>El valor máximo a aceptar para esta entrada. Si el {{htmlattrxref("value", "input")}} ingresado en el elemento excede éste, el elemento falla la <a href="https://developer.mozilla.org/es/docs/HTML/HTML5/Validacion_de_restricciones">validación de restricciones</a>. Si el valor del atributo <code>max</code> no es un número, entonces el elemento no tiene un valor máximo.</p>

<p>Este valor debe ser mayor que o igual al valor del atributo <code>min</code>.</p>

<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3>

<p>El valor mínimo a aceptap para esta entrada. Si el {{htmlattrxref("value", "input")}} del elemento es menor que éste, el elemento falla la <a href="https://developer.mozilla.org/es/docs/HTML/HTML5/Validacion_de_restricciones">validación de restricciones</a>. Si un valor es especificado para <code>min</code> que no sea un número valido, la entrada no tiene un valor mínimo.</p>

<p>Este valor debe ser menor que o igual al valor del atributo <code>max</code>.</p>

<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p>

<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>

<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3>

<div id="step-include">
<p>El atributo <code>step</code> es un número que especifica la granularidad a la que debe adherirse el valor, o el valor especial <code>any</code>, el cual es descrito abajo. Solo valores que sean iguales a la base del escalonado (<code>{{anch("min")}}</code> si es especificado, si no {{htmlattrxref("value", "input")}}, y un valor por omisión apropiado si ninguno de esos es provisto) son válidos.</p>

<p>Una valor de cadena <code>any</code> significa que ningún escalonado es implicado, y cualquier valor es permitido (salvo otras restricciones, tales como <code>{{anch("min")}}</code> y <code>{{anch("max")}}</code>).</p>

<div class="note">
<p><strong>Nota:</strong> Cuando los datos ingresados por el usuario no se adhieran a la configuración de escalonado, el {{Glossary("user agent")}} puede redondear al valor válido más cercano, prefiriendo numeros en la dirección positiva cuando hayan dos opciones igualmente cercanas.</p>
</div>
</div>

<p>El valor por omisión de paso para entradas <code>number</code> es <code>1</code>, permitiendo solo enteros ser ingresados—<em>a menos que</em> la base del escalonado no sea un entero.</p>

<h2 id="Usar_entradas_numéricas">Usar entradas numéricas</h2>

<p>Elementos <code>&lt;input type="number"&gt;</code> pueden ayudar a simplificar tu trabajo al construir la interfaz de usuario y la lógica para ingresar números en un formulario. Cuando creas una entrada numérica con el valor apropiado para <code>type</code>, <code>number</code>, obtienes validación automática para que el texto sea un número, y usualmente un juego de botones arriba y abajo para subir y bajar el valor.</p>

<div class="warning">
<p><strong>Importante</strong>: Ten en mente que, lógicamente, no deberías poder ingresar otros caracteres que no sean números dentro de una entrada numérica. Parece haber algo de desacuerdo acerca de esto entre navegadores; ver {{bug(1398528)}}.</p>
</div>

<div class="note">
<p><strong>Nota</strong>: Es crucial recordar que un usuario puede jugar con tu HTML tras bambalinas, así que tu sitio<em> no debe</em> usar validación simple del lado del cliente para ningún fin de seguridad. Tú <em>debes</em> verificar en el lado del servidor cualquier transacción en la cual el valor provisto pueda tener alguna implicación de seguridad de cualquier tipo.</p>
</div>

<p>Los navegadores de móviles ayudan más con la experiencia de usuario mostrando un teclado especial mejor adaptado para ingresar números cuando el usuario intente ingresar un valor. La siguiente captura de pantalla es tomada de Firefox para Android:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14963/number-keyboard-fxa.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>

<h3 id="Una_entrada_numérica_simple">Una entrada numérica simple</h3>

<p>En su forma más básica, una entrada numérica puede ser implementada así:</p>

<pre class="brush: html">&lt;label for="ticketNum"&gt;Number of tickets you would like to buy:&lt;/label&gt;
&lt;input id="ticketNum" type="number" name="ticketNum" value="0"&gt;</pre>

<p>{{EmbedLiveSample('A_simple_number_input', 600, 40)}}</p>

<p>Una entrada numérica es considerada válida cuando está vacía y cuando un único número es ingresado, pero por lo demás es inválida. Si el atributo xxxx es usado, la entrada ya no es considerada válida cuando esté vacía.</p>

<div class="note">
<p><strong>Nota</strong>: Cualquier número es un valor aceptable, mientras que sea un <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number">número de punto flotante válido</a> (eso es, no <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a> o <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Infinity">Infinity</a>).</p>
</div>

<h3 id="Marcas_de_lugar_Placeholders">Marcas de lugar (Placeholders)</h3>

<p>Algunas veces es de ayuda ofrecer una indicación en contexto en cuanto a qué forma deben tomar los datos de entrada. Esto puede ser especialmente importante si el diseño de la página no ofrece etiquetas descriptivas para cada {{HTMLElement("input")}}. Es aquí donde entran las <strong>marcas de lugar</strong>. Una marca de lugar es un valor comúnmente usado para proveer un indicio en cuanto al formato que la entrada debe tomar por <code>value</code>. Este es mostrado dentro de la caja de edición cuando el <code>value</code> del elemento es <code>""</code>. Una vez que los datos son ingresados dentro de la caja, la marca de lugar desaparece; si la caja es vaciada, la marca de lugar reaparece.</p>

<p>Aquí, tenemos una entrada <code>number</code> con la marca de lugar "<code>Multiple of 10</code>". Nota cómo la marca de lugar desaparece y reaparece conforme manipulas el contenido del campo de edición.</p>

<pre class="brush: html">&lt;input type="number" placeholder="Multiple of 10"&gt;</pre>

<p>{{EmbedLiveSample('Placeholders', 600, 40)}}</p>

<h3 id="Controlar_el_tamaño_del_escalón">Controlar el tamaño del escalón</h3>

<p>Por omisión, los botones arriba y abajo provistos para que pases el número de arriba a abajo pasarán por 1 el valor arriba y abajo. Puedes cambiar esto proveyendo un atributo {{htmlattrxref("step", "input")}}, el cual toma como valor un número que especifica la cantidad de escalones. Nuestro ejemplo arriba contiene una marca de lugar diciendo que el valor debe ser un múltiplo de 10, por lo tanto tiene sentido agregar un valor a <code>step</code> de <code>10</code>:</p>

<pre class="brush: html">&lt;input type="number" placeholder="multiple of 10" step="10"&gt;</pre>

<p>{{EmbedLiveSample('Controlling_step_size', 600, 40)}}</p>

<p>En este ejemplo, debes hallar que las flechas de subir y bajar escalón incrementan y decrementan el valor por 10 cada vez, y no por 1. Aún puedes ingresar manualmente un número que no sea múltiplo de 10, pero este será considerado inválido.</p>

<h3 id="Especificar_valores_máximo_y_mínimo">Especificar valores máximo y mínimo</h3>

<p>Puedes usar los atributos {{htmlattrxref("min", "input")}} y {{htmlattrxref("max", "input")}} para especificar un valor mínimo y máximo que pueda tener el campo. Por ejemplo, demos a nuestro ejemplo un mínimo de <code>0</code>, y un máximo de <code>100</code>:</p>

<pre class="brush: html">&lt;input type="number" placeholder="multiple of 10" step="10" min="0" max="100"&gt;</pre>

<p>{{EmbedLiveSample('Specifying_minimum_and_maximum_values', 600, 40)}}</p>

<p>En esta versión actualizada, debes hallar que los botones para subir y bajar escalón no te permitirán ir bajo 0 o sobre 100. Tú aún puedes ingresar manualmente un número fuera de estos límites, pero este será considerado inválido.</p>

<h3 id="Permitir_valores_decimales">Permitir valores decimales</h3>

<p>Un problema con las entradas numéricas es que su tamaño de escalón por omisión es 1. Si tratas de ingresar un número con un decimal (tal como "1.0"), este será considerado como inválido. Si quieres ingresar un valor que requiere decimales, necesitarás reflejar esto en el valor <code>step</code> (p.ej. <code>step="0.01"</code> para permitir hasta dos dígitos en la parte decimal). Aquí hay un ejemplo simple:</p>

<pre class="brush: html">&lt;input type="number" placeholder="1.0" step="0.01" min="0" max="10"&gt;</pre>

<p>{{EmbedLiveSample("Allowing_decimal_values", 600, 40)}}</p>

<p>Note que este ejemplo permite cualquier valor entre <code>0.0</code> y <code>10.0</code>, con decimales a dos cifras. Por ejemplo, "9.52" es válido, pero "9.521" no lo es.</p>

<h3 id="Controlar_el_tamaño_de_la_entrada">Controlar el tamaño de la entrada</h3>

<p>Los elementos {{HTMLElement("input")}} de tipo <code>number</code> no soportan atributos de dimensión tales como {{htmlattrxref("size", "input")}}. Necesitarás recurrir a <a href="/en-US/docs/Web/CSS">CSS</a> para cambiar el tamaño de estos controles.</p>

<p>Por ejemplo, para ajustar el ancho de la entrada para que sea tan ancho como se necesita para ingresar un número de tres dígitos, podemos cambiar nuestro HTML para incluir un xxxx y acortar nuestra marca de lugar (placeholder) ya que el campo estará demasiado angosto para el texto que hemos estado usando hasta ahora:</p>

<pre class="brush: html">&lt;input type="number" placeholder="x10" step="10" min="0" max="100" id="number"&gt;</pre>

<p>Entonces agregamos algo de CSS para reducir el ancho del elemento con el selector de <code>id</code>, <code>#number</code>:</p>

<pre class="brush: css">#number {
  width: 3em;
}</pre>

<p>El resultado se ve así:</p>

<p>{{EmbedLiveSample('Controlling_input_size', 600, 40)}}</p>

<h3 id="Ofrecer_valores_sugeridos">Ofrecer valores sugeridos</h3>

<p>Tú puedes proveer una lista de las opciones por defecto de las cuales el usuario puede seleccionar especificando el atributo {{htmlattrxref("list", "input")}}, el cual contiene como su valor el {{htmlattrxref("id")}} de un {{HTMLElement("datalist")}}, el cual a su vez contiene un elemento {{HTMLElement("option")}} por valor sugerido. El <code>value</code> de cada <code>option</code> es el valor sugerido correspondiente para la caja de entrada numérica.</p>

<pre class="brush: html">&lt;input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers"&gt;
&lt;span class="validity"&gt;&lt;/span&gt;

&lt;datalist id="defaultNumbers"&gt;
  &lt;option value="10045678"&gt;
  &lt;option value="103421"&gt;
  &lt;option value="11111111"&gt;
  &lt;option value="12345678"&gt;
  &lt;option value="12999922"&gt;
&lt;/datalist&gt;</pre>

<p>{{EmbedLiveSample("Offering_suggested_values", 600, 40)}}</p>

<div class="note">
<p>El uso del atributo {{htmlattrxref("list", "input")}} con entradas <code>number</code> no está soportado en todos los navegadores. Funciona en Chrome y Opera, por ejemplo, pero no en Firefox.</p>
</div>

<h2 id="Validación">Validación</h2>

<p>Ya hemos mencionado una serie de características de validación para entradas <code>number</code>, pero revisémoslas ahora:</p>

<ul>
 <li>Elementos <code>&lt;input type="number"&gt;</code> automáticamente invalidan cualquier entrada que no sea un número (o vacío, a menos que se especifique <code>required</code> ).</li>
 <li>Puedes usar el atributo {{htmlattrxref("required", "input")}} para invalidar una entrada vacía. (En otras palabras, la entrada <em>debe</em> ser llenada).</li>
 <li>Puedes usar el atributo {{htmlattrxref("step", "input")}} para restringir valores válidos a cierto conjunto de escalones (p.ej. múltiplos de 10).</li>
 <li>Puedes usar los atributos {{htmlattrxref("min", "input")}} y {{htmlattrxref("max", "input")}} para restringir los límites inferior y superior de los valores válidos.</li>
</ul>

<p>El siguiente ejemplo presenta todas las características anteriores, así como el uso de CSS para mostrar íconos de validez o invalidez, dependiendo del valor del <code>input</code>:</p>

<pre class="brush: html">&lt;form&gt;
  &lt;div&gt;
    &lt;label for="balloons"&gt;Number of balloons to order (multiples of 10):&lt;/label&gt;
    &lt;input id="balloons" type="number" name="balloons" step="10" min="0" max="100" required&gt;
    &lt;span class="validity"&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;input type="submit"&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>

<p>{{EmbedLiveSample("Validation", 600, 80)}}</p>

<p>Intenta enviar el formulario con diferentes valores inválidos ingresados — p.ej., siv valor; un valor abajo de 0 o arriba de 100; un valor que no sea múltiplo de 10; o un valor no numérico — y mira cómo los mensajes de error que te da el navegador difieren con estos.</p>

<p>El CSS aplicado a este ejemplo es el siguiente:</p>

<pre class="brush: css">div {
  margin-bottom: 10px;
}

input:invalid+span:after {
  content: '✖';
  padding-left: 5px;
}

input:valid+span:after {
  content: '✓';
  padding-left: 5px;
}</pre>

<p>Aquí utilizamos las pseudo clases {{cssxref(":invalid")}} y {{cssxref(":valid")}} para mostrar un ícono apropiado de invalidez o validez como contenido generado en el elemento adyacente {{htmlelement("span")}}, como un indicador visual.</p>

<p>Lo colocamos en un elemento separado <code>&lt;span&gt;</code> para mayor flexibilidad. Algunos navegadores no muestran contenido generado muy eficientemente en algunos tipos o entradas de formulario. (Lee, por ejemplo, la sección sobre <a href="/es/docs/Web/HTML/Element/input/date#Validation">validación de <code>&lt;input type="date"&gt;</code></a>).</p>

<div class="warning">
<p><strong>Importante</strong>: ¡La validación de formularios HTML <em>no</em> es un substituto de scripts del lado del servidor que asegure que los datos estén en el formato apropiado!</p>

<p>Es demasiado fácil para alguien hacer ajustes al HTML que le prmita evitar la validación, o removerla completamente. También es posible para alguien evadir tu HTML y enviar los datos directamente a tu servidor.</p>

<p>Si tu código del lado del servidor falla el validar los datos que recibe, el desastre podría azotar cuando datos que no están formateados apropiadamente sean enviados (o cuando los datos son demasiado grandes, o son del tipo incorrecto, y así sucesivamente).</p>
</div>

<h3 id="Validación_de_patron">Validación de patron</h3>

<p>Elementos <code>&lt;input type="number"&gt;</code> no soportan el uso del atributo {{htmlattrxref("pattern", "input")}} para hacer que los valores ingresados se ajusten a un patrón de expresión regular específico.</p>

<p>La fundamentación para esto es que las entradas numéricas no serán válidas si contienen cualquier cosa excepto números, y tú puedes restringir el número mínimo y máximo de dígitos válidos usando los atributos {{htmlattrxref("min", "input")}} y {{htmlattrxref("max", "input")}} (a como se explica arriba).</p>

<h2 id="Ejemplos">Ejemplos</h2>

<p>Ya hemos cubierto el hecho de que por defecto, el incremento es <code>1</code>, y tú puedes usar el atributo {{htmlattrxref("step", "input")}} para permitir entradas decimales. Echemos un vistazo más de cerca.</p>

<p>En el siguiente ejemplo hay un formulario para ingresar la estatura del usuario. Por defecto acepta la estatura en metros, pero puedes hacer click en el botón apropiado para cambiar el formulario a que acepte pies y pulgadas. La entrada para la estatura en metros acepta decimales a dos posiciones.</p>

<p>{{EmbedLiveSample("Examples", 600, 100)}}</p>

<p>El HTML se ve así:</p>

<pre class="brush: html">&lt;form&gt;
    &lt;div class="metersInputGroup"&gt;
        &lt;label for="meters"&gt;Enter your height — meters:&lt;/label&gt;
        &lt;input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="e.g. 1.78" required&gt;
        &lt;span class="validity"&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="feetInputGroup" style="display: none;"&gt;
        &lt;span&gt;Enter your height — &lt;/span&gt;
        &lt;label for="feet"&gt;feet:&lt;/label&gt;
        &lt;input id="feet" type="number" name="feet" min="0" step="1"&gt;
        &lt;span class="validity"&gt;&lt;/span&gt;
        &lt;label for="inches"&gt;inches:&lt;/label&gt;
        &lt;input id="inches" type="number" name="inches" min="0" max="11" step="1"&gt;
        &lt;span class="validity"&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;input type="button" class="meters" value="Enter height in feet and inches"&gt;
    &lt;/div&gt;
    &lt;div&gt;
        &lt;input type="submit" value="Submit form"&gt;
    &lt;/div&gt;
&lt;/form&gt;</pre>

<p>Verás que estamos usando muchos de los atributos que ya hemos visto antes en el artículo. Como queremos que acepte un valor de medida en centímetros, hemos colocado el valor de <code>step</code> a <code>0.01</code>, de manera que valores como <em>1.78</em> no sean vistos como inválidos. También hemos provisto una marca de lugar (placeholder) para esa entrada.</p>

<p>Hemos escondido las entradas de pies y pulgadas inicialmente usando <code>style="display: none;"</code>, de manera que metros sea el tipo de entrada preseleccionado.</p>

<p>Ahora, al CSS. Este se ve muy similar al estilo de validación que vimos antes; nada extraordinario aquí.</p>

<pre class="brush: css">div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid+span:after {
  position: absolute;
  content: '✖';
  padding-left: 5px;
}

input:valid+span:after {
  position: absolute;
  content: '✓';
  padding-left: 5px;
}</pre>

<p>Y finalmente, el JavaScript:</p>

<pre class="brush: js">let metersInputGroup = document.querySelector('.metersInputGroup')
let feetInputGroup = document.querySelector('.feetInputGroup')
let metersInput = document.querySelector('#meters')
let feetInput = document.querySelector('#feet')
let inchesInput = document.querySelector('#inches')
let switchBtn = document.querySelector('input[type="button"]')

switchBtn.addEventListener('click', function() {
  if(switchBtn.getAttribute('class') === 'meters') {
    switchBtn.setAttribute('class', 'feet')
    switchBtn.value = 'Enter height in meters'

    metersInputGroup.style.display = 'none'
    feetInputGroup.style.display = 'block'

    feetInput.setAttribute('required', '')
    inchesInput.setAttribute('required', '')
    metersInput.removeAttribute('required')

    metersInput.value = ''
  } else {
    switchBtn.setAttribute('class', 'meters')
    switchBtn.value = 'Enter height in feet and inches'

    metersInputGroup.style.display = 'block'
    feetInputGroup.style.display = 'none'

    feetInput.removeAttribute('required')
    inchesInput.removeAttribute('required')
    metersInput.setAttribute('required', '')

    feetInput.value = ''
    inchesInput.value = ''
  }
});</pre>

<p>Después de declarar unas pocas variables, un manejador de eventos s agredgado al <code>button</code> para controlar el mecanismo interruptor. Esto es bastante simple, principalmente involucra cambiar las {{HTMLElement("label")}} y <code>class</code> del botón, y actualizar los valores de muestra de los dos conjuntos de entradas cuando el botón sea presionado.</p>

<p>(Nota que aquí no estamos convirtiendo de aquí para allá entre metros y pies/pulgadas, lo que probablemente haría una aplicación web en la vida real.)</p>

<div class="note">
<p><strong>Nota:</strong> Cuando el usuario haga click en el botón, el(los) atributo(s) <code>required</code> de la(s) entradas que estemos ocultando son removidos, y vaciará el <code>value</code> del(los) atributo(s). Esto es de manera que el formulario pueda ser enviado si ambos conjuntos de entradas no están llenas. También asegura que el formulario no enviará datos que el usuario no quiera.</p>

<p>¡Si no hicieras eso, tendrías que llenar ambos pies/pulgadas <strong>y</strong> metros para enviar el formulario!</p>
</div>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'forms.html#number-state-(type=number)', '&lt;input type="number"&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Definición inicial</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'sec-forms.html#number-state-typenumber', '&lt;input type="number"&gt;')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>Definición inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>



<p>{{Compat("html.elements.input.input-number")}}</p>

<h2 id="Ver_también">Ver también</h2>

<ul>
 <li><a href="/es/docs/Learn/HTML/Forms">Guía de formularios HTML</a></li>
 <li>{{HTMLElement("input")}}</li>
 <li><code><a href="/es/docs/Web/HTML/Element/input/tel">&lt;input type="tel"&gt;</a></code></li>
 <li><a href="/es/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Compatibilidad de propiedades CSS</a></li>
</ul>