La etiqueta de entrada HTML se utiliza para describir el rango de números en formato HTML. La etiqueta <input> se usa para definir un campo de entrada donde los usuarios ingresan datos. Se utiliza dentro de los elementos <form>. El formato de entrada para el usuario puede ser de varios tipos según el valor del atributo de tipo de la etiqueta <input> .
Describiendo el rango de números en el formulario HTML: El atributo de tipo <input> especifica el tipo de elemento <input> para mostrar. “ texto ” es el valor predeterminado del atributo de tipo de <entrada>. Para describir el rango de números, el valor del atributo de tipo del elemento <input> es » rango «.
Sintaxis:
<input type = "range" >
Define el control para un número ingresado por el usuario cuyo valor exacto no es importante (más como un control deslizante). Su rango predeterminado varía de 0 a 100.
Se pueden establecer restricciones sobre qué números se aceptan mediante el uso de atributos adicionales como:
- paso : especifica los intervalos de números legales, el valor predeterminado es 1
- value – especifica el valor por defecto
- max – especifica el valor máximo permitido. El valor predeterminado es 100
- min – especifica el valor mínimo permitido, por defecto es 0
Nota: Si el tipo de rango no es compatible con el navegador del usuario, se tratará como entrada de texto .
Ejemplo :
En este ejemplo, <input type=”range”> se usa para describir el rango. El usuario puede elegir entre los valores 1 a 10 aumentando un paso de valor 2, por defecto el valor guardado aquí es 1.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Describing Range of Numbers in HTML Form</title>
<style>
.container {
height: 250px;
width: 300px;
background-color: green;
text-align: center;
margin: auto;
}
.container div {
margin-top: 15px;
}
</style>
</head>
<body>
<div class="container">
<h2>GeeksforGeeks</h2>
<form>
<div>
<label for="username">
Username
</label><br>
<input type="text"
id="username"
name="username">
</div>
<div>
<label for="password">
Password
</label><br>
<input type="password"
id="password"
name="password">
</div>
<div>
<label for="gfg_range">
Choose from the range
</label>
<br>
<input type="range"
id="gfg_range"
min="1"
value="1"
max="10"
step="2">
</div>
</form>
</div>
</body>
</html>
Producción :
Publicación traducida automáticamente
Artículo escrito por siddharthredhu01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA