Unidad 8. Formularios (VI)

8.8. Tipo range

range. Sirve para introducir números entre un rango mediante un deslizador. Por defecto el rango va de 0 a 100, con incrementos de uno en uno, pero podemos cambiar estos valores con los atributos min, max y step que ya hemos visto en esta unidad. Introducir valores con el deslizador puede ser un poco impreciso si el rango es amplio por lo que suele utilizarse para introducir valores aproximados, como la valoración de un producto, o para rangos pequeños. El formato del mando deslizador varía ligeramente según cada navegador web.

Por ejemplo, el siguiente código pide valorar un producto entre 10 y 100 con incrementos de 5:

Volumen (10-100):

Podemos incluir valores concretos utilizando el atributo list que vimos en el punto anterior.

8.9. Tipo password

password. Sirve para introducir claves y contraseñas, la diferencia principal respecto a un campo de texto es que cuando el usuario está escribiendo no se ven los caracteres para evitar que alguien pueda copiarlos. Un ejemplo sencillo es el siguiente:

<p>Contraseña: <input type="password" name="clave" ></p>

Contraseña:

Vamos a aprovechar para explicar un atributo genérico que se suele colocar en el primer campo de un formulario, se trata del atributo autofocus. Cuando se carga un formulario el foco o cursor no se sitúa en ningún campo del formulario por lo que el usuario debe hacer clic en el campo que desea rellenar (normalmente el primer campo) antes de poder escribir nada, si queremos evitarle este clic inicial podemos añadir el atributo autofocus, de esta forma el cursor irá directamente a ese campo. En este este ejemplo puedes comprobar cómo, al cargarse la página, el cursor se coloca en el campo Contraseña, mientras que en el formulario anterior no aparece el cursor:

<p>Contraseña: <input type="password" name="clave" autofocus ></p>

Contraseña:

También se puede añadir el atributo inputmode que permite que el dispositivo muestre un modo de entrada (teclado) distinto del estándar. Esto puede ser especialmente interesante si queremos introducir números ya que al poner inputmode="numeric" se debe abrir el teclado numérico en los teléfonos móviles. Por defecto el inputmode tiene el valor verbatin para caracteres alfanuméricos.