Unidad 8. Formularios (V)



8.7. Tipo number

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>

 

Cantidad:

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>

Edad:

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 }

Edad:


Enero-2019 (V 2.0)
Pág. 8.5
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.