How to set float input type in HTML5 ?
Last Updated : 17 Mar, 2023
HTML5 is the latest version of Hypertext Markup Language (HTML), the standard language for creating web pages and web applications. With HTML5, new input types were introduced to make web form creation easier and more accessible. These input types include text, password, checkbox, radio, submit, reset, button, image, file, hidden, date, time, datetime-local, month, week, number, range, email, url, search, tel, and color.
However, "float" is not a valid input type in HTML5. The "float" input type is not a part of the official HTML specification. However, there are other ways to accept these types of values.
Approaches to accept floating-point numbers in HTML:
Using the step attribute: This attribute is used to specify the increment at which a value can be increased or decreased. By setting the step attribute to a decimal value, floating-point numbers can be accepted as input.
This approach is commonly used with input types such as numbers or ranges:
- The step attribute specifies the increment at which the value can be increased or decreased.
- The min attribute specifies the minimum value that can be entered.
- The max attribute specifies the maximum value that can be entered.
Example 1: The below example demonstrates the above approach. The input type is set to "number" to indicate that it accepts numeric values. The min attribute specifies the minimum value that can be entered, which is 0 in this case. The max attribute specifies the maximum value that can be entered, which is 1000. The step attribute specifies the increment at which the value can be increased or decreased, which is 0.01. This allows for floating-point numbers to be entered as the value for the price input.
HTML <!DOCTYPE html> <html lang="en"> <head> <title>Using step attribute</title> </head> <body> <h1 style="color:green"> GeeksforGeeks </h1> <label for="price"> Price: </label> <input type="number" id="price" name="price" min="0" max="1000" step="0.01" /> </body> </html>
Output:
Using the inputmode attribute: This attribute is used to specify the type of keyboard that should be used for a given input. By setting the inputmode attribute to "decimal" the numeric keyboard with a decimal point is used. This approach is more flexible and can be used with any input type that accepts text input.
Example 2: The below example demonstrates the above approach. In this example, the inputmode attribute is set to "decimal" which tells the browser to display a numeric keypad on mobile devices. The pattern attribute is set to a regular expression that allows any number of digits followed by an optional decimal point or comma, allowing for decimal input.
HTML <!DOCTYPE html> <html lang="en"> <body> <h1 style="color:green"> GeeksforGeeks </h1> <label for="float-input"> Enter a float number: </label> <input type="text" inputmode="decimal" id="float-input" name="float-input" pattern="[0-9]*[.,]?[0-9]*"> </body> </html>
Output:
Note: However, this code allows characters to be typed into the input field. To prevent characters from being entered, you can use JavaScript to validate the input and display an error message if the input is not a valid number.
Conclusion: While "float" is not a valid input type in HTML5, there are above two approaches to accept floating-point numbers as input using the step attribute or using the inputmode attribute. It's important to use the correct approach for the input type being used and to ensure that the code is compliant and up-to-date with the latest standards.
Similar Reads
How to Change input type="date" Format in HTML ?
The <input> element with type="date" is used to allow the user to choose a date. By default, the date format displayed in the input field is determined by the user's browser and operating system settings. However, it is possible to change the format of the date displayed in the input field usi
4 min read
Explain the form new input types in HTML5 ?
In this article, we will discuss the functionality of the newer form input types provided by HTML5. Sometimes, while filling the registration form or any online form, it would require to follow the proper format to fill the particular data. Now it's easy to use the webform to fill up the common data
4 min read
How to Set input type date in dd-mm-yyyy format using HTML?
In HTML, you can use the <input> element with the type date to allow users to pick a date. However, the format used for displaying the date may vary depending on the browser and the user's locale settings. By default, the browser uses the ISO format (yyyy-mm-dd), which is not the same as dd-mm
2 min read
How to set Placeholder Value for Input Type Date in HTML?
To set a placeholder value for the input type date in HTML5, use the placeholder attribute. The placeholder attribute doesn't work well with input type "date." Use onfocus="(this.type='date')" for a custom placeholder, enabling a date selection dropdown. Using OnfocusThe On-focus approach changes th
2 min read
HTML <input type="tel">
The HTML <input type="tel"> element creates a telephone number input field, specifically designed for entering phone numbers. It provides features like input validation for telephone numbers and may include special characters like parentheses and hyphens for formatting. This element helps ensu
1 min read
How to define media type of style tag in HTML5 ?
In this article, we learn how to define the media type of the style tag in HTML5. In HTML5, the media type of a style tag can be defined using the "media" attribute. By specifying the media type, such as "screen" for displaying on a screen or "print" for printing, the style rules within the style ta
2 min read
How to define keyboard input in HTML5 ?
The phrase tag is used to define the keyboard input. The text enclosed by <kbd> tag is typically displayed in the browser’s default monospace font. In this article, we define the keyboard input by using various types of tags like <kbd>, <code>, <em>, <var>, and <samp
1 min read
How to Create Color Picker input box in HTML ?
In this article, we will know about the HTML color picker & will understand its implementation through the example. The <input> element of type color in HTML provides the user with an interface to select a color from the default color-picker to interface or design their own color by giving
2 min read
HTML <input type="image">
The HTML <input type="image"> element defines an image as a submit button within a form. When the image is clicked, the form is submitted, similar to a regular submit button. It allows for more visually appealing form submissions, as the image can serve as the button instead of a plain text or
2 min read
HTML | DOM Input Date type Property
The Input Date type property is used for returning the type of form element the date field is. The Input Date type property returns a string that represents the type of form element the date field is. Syntax: inputdateObject.type Return Values: It returns a string value that represents the type of f
1 min read