Learn HTML Range Input with Practical Examples
how to create range input in html
<input type="range">
The defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the attributes below. max - specifies the maximum value allowed.
range input in HTML is created <input type="range">
Create a slider control that allows user to select a value with specific range.
how to create range input in html
Example
<!doctype html>
<html>
<body>
<h2>Range type</h2>
Age: <input type="number" size="6" name="age" min="18" max="99" value="21"><br>
Satisfaction: <input type="range" size="2"
name="satisfaction min="1" max="5" value="3">
</Body>
</html>
how to create range input in html
Explain program
Step 1 ]
<!Doctype html>
- <!doctype html> always be the first line of any HTML document.
<!Doctype html>
- <!doctype html> always be the first line of any HTML document.
Step 2 ]
<html> and </html>
html is the root element.
<html> and </html>
html is the root element.
Step 3 ]
<body> and </body>
body is main content area.
All visible content inside to the <body> tag
<body> and </body>
body is main content area.
All visible content inside to the <body> tagStep 4]
Age: <input type="number" size="6" name="age" min="18" max="99" value="21"><br>
Satisfaction: <input type="range" size="2" name="satisfaction min="1" max="5"
value="3">
input type = number :- create number input field
size = "6" :- set width of the input
name = "age" :- name use form submitted
min = "18", max="99" :- entered to between 18 &99
Value ="21" :- default value shown the page loads 21
how to create range input in html
output
Related Post :-
Post a Comment