number. Sirve para introducir números. Por defecto sólo permite introducir números enteros (números sin decimales, positivos y negativos) pero con el atributo step podemos permitir los decimales que queramos, por ejemplo con step=0.1 permitimos un decimal, con step=0.01 dos decimales. En realidad el atributo step establece el incremento que puede haber entre un valor y el siguiente, por ejemplo, si escribimos step=10 sólo estamos permitiendo múltiplos de 10. Los navegadores suelen mostrar dos pequeñas flechas en la parte derecha del campo de entrada para ir disminuyendo o aumentando el número en la cantidad indicada por el atributo step, si no indicamos el atributo step, toma el valor 1. Según el navegador y el idioma se admite la coma decimal, el punto decimal, o ambos.
Por ejemplo, para permitir un decimal escribimos:
<p>Cantidad: <input type="number" name="numero" step="0.1"/p>
Observa que si intentas escribir letras, no te dejará, el campo tomará un valor rojo en su marco, o se pondrá en color amarillo el fondo, según el navegador.
Con los atributos min y max podemos controlar el rango del número, por ejemplo, si queremos que escriban una edad entre 18 y 65 años, escribiríamos: min="18" y max="65", además podemos usar el atributo placeholder, que ya vimos anteriormente, para mostrar un mensaje:
<p>Edad: <input type="number" name="edad" min="18" max="65" placeholder="18-65" /p>
Este tipo number no admite el atributo size para definir la longitud del campo, pero podemos utilizar hojas de estilo para controlar el tamaño. Para ello debemos dar un identificador a la etiqueta input con el atributo id, por ejemplo id="idEdad".
<input type="number" name="edad" min="18" max="65" placeholder="Entre 18 y 65" id="idEdad" >
Y luego declarar un estilo para idEdad con el valor de anchura que deseemos:
#idEdad {
width: 7em }
Cursos Informática Gratuitos Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.