El tipo de entrada "número" no cambia de tamaño

¿Por qué mi entrada no cambia de tamaño cuando cambio el tipo a type="number"pero funciona type="text"?

EJEMPLO

    Email: <input type="text" name="email" size="10"><br/>
  number: <input type="number" name="email" size="10">

Parece que el inputtipo numberno admite sizeatributos o no es compatible con los navegadores, puede configurarlo a través de CSS en su lugar:

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

Violín actualizado

Uso incorrecto.

Número de tipo de entrada está hecho para tener un valor seleccionable mediante flechas hacia arriba y hacia abajo.

Básicamente, lo que busca es un estilo CSS de "ancho".

Históricamente, el texto de entrada está formateado con una fuente monoespaciada, por lo que el tamaño también es el ancho que toma.

El número de entrada es nuevo y la propiedad "tamaño" no tiene ningún sentido *. Un uso típico:

<input type="number" name="quantity" min="1" max="5">

w3c docs

para arreglar, agregue un estilo:

<input type="number" name="email" style="width: 7em">

EDITAR: si quieres un rango, tienes que configurar type="range"y no="number"

EDIT2: * el tamaño no es un valor permitido (entonces, no tiene sentido). Consulte las especificaciones oficiales del W3C

Nota: El atributo de tamaño funciona con los siguientes tipos de entrada: texto, búsqueda, teléfono, url, correo electrónico y contraseña.

Consejo: Para especificar el número máximo de caracteres permitidos en el elemento, use el atributo maxlength.

En lugar de establecer la longitud, establezca los valores máximo y mínimo para la entrada del número.

Luego, el cuadro de entrada cambia de tamaño para ajustarse al valor válido más largo.

Si desea permitir un número de 3 dígitos, establezca 999 como el máximo

 <input type="number" name="quantity" min="0" max="999">

Porque <input type=number>, por HTML5 CR, el sizeatributo no está permitido. Sin embargo, en Características obsoletas dice: “Los autores no deben, pero pueden a pesar de los requisitos en contrario en otras partes de esta especificación, especificar los atributos de longitud máxima y tamaño en elementos de entrada cuyos atributos de tipo están en el estado Número. Una razón válida para usar estos atributos de todos modos es ayudar a los agentes de usuario heredados que no admiten elementos de entrada con type = "number" a representar el campo de texto con un ancho útil ".

Por lo tanto, el sizeatributo puede ser utilizado, pero que sólo afecta a los navegadores antiguos que no son compatibles type=number, por lo que el elemento cae de nuevo a un control de texto simple, <input type=text>.

La razón detrás de esto es que se espera que el navegador proporcione una interfaz de usuario que tenga en cuenta los otros atributos, para una buena usabilidad. Como las implementaciones pueden variar, cualquier tamaño impuesto por un autor puede estropear las cosas. (Esto también se aplica a la configuración del ancho del control en CSS).

La conclusión es que debe utilizarlo <input type=number>en una configuración más o menos fluida que no haga suposiciones sobre las dimensiones del elemento.

Lo que quieres es maxlength.

Para Válido text, search, url, tel, email, y password, se define el número máximo de caracteres (como unidades de código UTF-16), el usuario puede entrar en el campo. Debe ser un valor entero 0 o superior. Si no se especifica una longitud máxima o se especifica un valor no válido, el campo no tiene una longitud máxima. Este valor también debe ser mayor o igual que el valor de minlength.

Podría considerar usar uno de estos inputtipos.

Utilice un evento onkeypress. Ejemplo de un cuadro de código postal. Permite un máximo de 5 caracteres y comprueba que la entrada sea solo números.

Por supuesto, nada supera a una validación del lado del servidor, pero esta es una forma ingeniosa de hacerlo.

function validInput(e) {
  e = (e) ? e : window.event;
  a = document.getElementById('zip-code');
  cPress = (e.which) ? e.which : e.keyCode;

  if (cPress > 31 && (cPress < 48 || cPress > 57)) {
    return false;
  } else if (a.value.length >= 5) {
    return false;
  }

  return true;
}

#zip-code {
  overflow: hidden;
  width: 60px;
}

<label for="zip-code">Zip Code:</label>
<input type="number" id="zip-code" name="zip-code" onkeypress="return validInput(event);" required="required">

cambiar tipo = "número" a tipo = "tel"