- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set float input type in HTML5?
Sometimes, we must provide an input field that accepts float value. There are two ways to do so, suppose you design a form where you have asked for the CGPA of any student to fill the form or a form where you have asked for the CTC these numbers could be a floating number.
What is the float input type?
A number with a decimal place is referred to as a float or floating-point number. Floats are used when we need to increase accuracy.
Approachs to set the float input Type
That being said, HTML5 does not support the "float" input type. Official HTML specifications do not include the "float" input type. It's not necessary to adopt these ideals in this way, though.
Using HTML inputmode Attribute
In this approach, you must use inputmode="decimal" on the input element. So this will allow the user to put the floating or decimal value in the field.
When the HTML inputmode attribute is set to "decimal," a numeric keypad is displayed on mobile devices by the browser. We have made use to enable decimal input, the pattern attribute is set to a regular expression that accepts any number of digits, optionally followed by a comma or decimal point.
Example
<!DOCTYPE html>
<html>
<body>
<h2>Set Float input Type</h2>
<input type="text" inputmode="decimal"
pattern="[0-9]*[.,]?[0-9]*">
</body>
</html>
Using HTML step Attribute
In this approach, you must use step="0.01" on the input element. So this will allow the user to put the floating or decimal value in the field.
The increment at which the value can be increased or lowered is specified by the step attribute, and it is 0.01. This enables the price input value to be entered in floating-point numbers.
To know more about the HTML step Attribute follow the attached link.
Example
<!DOCTYPE html>
<html>
<body>
<h2>Set Float input Type</h2>
<input type="number" id="price" name="price"
min="0" max="1000" step="0.01" />
</body>
</html>
0 Views
