Which specific tag is used for describing the range of numbers in HTML Form ?
Last Updated :
30 Jan, 2022
The HTML input tag is used for describing the range of numbers in HTML form. The <input> tag is used to define an input field where users enter data. It is used within <form> elements. The input format for the user can be of various types depending on the value of the type attribute of <input> tag.
Describing the range of numbers in HTML Form : The <input> type attribute specifies the type of <input> element to display. “text” is the default value of type attribute of<input>. For describing the range of numbers, the value of type attribute of <input> element is “range“.
Syntax:
<input type = "range" >
It defines the control for a number entered by the user whose exact value is not important( more like a slider control). Its default range varies from 0 to 100.
Restrictions can be set on what numbers are accepted by using additional attributes such as:
- step – it specifies the legal number intervals, the default value is 1
- value – it specifies the default value
- max – it specifies the maximum value allowed. The default is 100
- min – it specifies the minimum value allowed, the default is 0
Note: If range type is not supported by the user’s browser, it will be treated as text input.
Example :
In this example <input type=”range”> is used for describing range . The user can choose from values 1 to 10 by increasing a step of value 2, by default value kept here is 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 >
|
Output :
Share your thoughts in the comments
Please Login to comment...