Logo
Back

Is there a float input type in HTML5?

There isn’t an explicit <input type="float"> in HTML5. Instead, HTML5 offers <input type="number">, which accepts numeric input (including decimal values) by default. If you want to allow floating-point (decimal) numbers, set appropriate attributes—like step, min, and max—to control which values users can input.

<input type="number" step="0.01" min="0" max="100" name="price" />

Why No type="float"?

  • type="number" is designed to handle both integers and decimals.
  • By specifying step="0.01", for instance, you allow decimals to two decimal places (commonly used for prices).
  • If you don’t set a step value, the default is 1, meaning the browser might not allow decimal input (depending on the implementation).

Browser Support and Behavior

  • In modern browsers, <input type="number"> often shows numeric-specific UI controls (like spin buttons or numeric keyboards on mobile).
  • To remove spin buttons, you can use a small CSS hack: 
    input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield; /* Firefox */
}
  • For broader validation (e.g., restricting input to 2 decimal places), you might rely on JavaScript or server-side validation, especially if some browsers handle numeric steps differently.

Further Web Development Insights

If you’re looking to deepen your front-end knowledge (including how to work effectively with HTML forms and JavaScript), check out these courses on DesignGurus.io:

They help build solid foundations and prepare you for real-world development challenges. For additional insights into web best practices, coding interviews, and system design, explore the DesignGurus.io YouTube channel.

CONTRIBUTOR
TechGrind