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.