Open In App

Which specific tag is used for describing the range of numbers in HTML Form ?

Improve
Improve
Like Article
Like
Save
Share
Report

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 : 



Last Updated : 30 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads