En este artículo, vamos a aprender cómo establecer un valor mínimo y máximo para un elemento de entrada mediante el uso del atributo HTML <input> min y max . Esto evita que el elemento de entrada acepte valores inferiores al valor mínimo o superiores al máximo.
Enfoque: Esto se puede implementar usando los atributos min y max :
- min: este atributo acepta un valor mínimo para el elemento de entrada.
- max: este atributo acepta un valor mínimo para el elemento de entrada.
Estos parámetros juntos se pueden usar para especificar un rango de números que se pueden aceptar como entrada. Tenga en cuenta que estos atributos solo funcionan en el tipo de entrada de número y fecha .
Sintaxis:
<input type="number" min="min_value" max="max_value">
Ejemplo: En este ejemplo, hemos utilizado dos entradas con diferentes tipos de entrada, una es un tipo de número y la otra es el tipo de fecha. El rango mínimo y máximo del número es de 1 a 100 y las fechas son del 01-01-2020 al 01-01-2021.
HTML
<html>
<head>
<style type="text/css">
label {
font: 18px;
}
input {
margin: 7px;
padding: 2px
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>Set a minimum and maximum value</h3>
<form>
<label for="Number">
Enter Number (between 1 and 100):
</label>
<input type="number" id="Number"
name="Number" min="1" max="100">
<br>
<label for="datemin">Enter a date after
01-01-2020 and before 01-01-2021:
</label>
<input type="date" id="datemin" name="datemin"
min="2020-01-01" max="2021-01-01">
<br>
<input type="submit">
</form>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por darksiderrohan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA