From 3912276599171effe0befe299c9777619f36b2ae Mon Sep 17 00:00:00 2001
From: jbranchaud <jbranchaud@gmail.com>
Date: Sat, 4 Oct 2025 10:24:36 -0500
Subject: [PATCH] Add Allow Number Input To Accept Decimal Values as an HTML
 TIL

---
 README.md                                     |  3 +-
 ...w-number-input-to-accept-decimal-values.md | 39 +++++++++++++++++++
 2 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 html/allow-number-input-to-accept-decimal-values.md

diff --git a/README.md b/README.md
index d9dd7f5..07e866f 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@ pairing with smart people at Hashrocket.
 
 For a steady stream of TILs, [sign up for my newsletter](https://crafty-builder-6996.ck.page/e169c61186).
 
-_1658 TILs and counting..._
+_1659 TILs and counting..._
 
 See some of the other learning resources I work on:
 - [Get Started with Vimium](https://egghead.io/courses/get-started-with-vimium~3t5f7)
@@ -484,6 +484,7 @@ If you've learned something here, support my efforts writing daily TILs by
 ### HTML
 
 - [Adding Alt Text To An Image](html/adding-alt-text-to-an-image.md)
+- [Allow Number Input To Accept Decimal Values](html/allow-number-input-to-accept-decimal-values.md)
 - [Determine Which Button Submitted The Form](html/determine-which-button-submitted-the-form.md)
 - [Disable Auto-Completion For A Form Input](html/disable-auto-completion-for-a-form-input.md)
 - [Disclose Additional Details](html/disclose-additional-details.md)
diff --git a/html/allow-number-input-to-accept-decimal-values.md b/html/allow-number-input-to-accept-decimal-values.md
new file mode 100644
index 0000000..2c3209a
--- /dev/null
+++ b/html/allow-number-input-to-accept-decimal-values.md
@@ -0,0 +1,39 @@
+# Allow Number Input To Accept Decimal Values
+
+Here is a number input element:
+
+```html
+<input type="number" id="amount" required class="border" />
+```
+
+This renders an empty number input box with up and down arrows which will, by
+default, increment or decrement the value by **1**.
+
+Of course, I can manually edit the input typing in a value like `1.25`.
+
+However, when I submit that via an HTML form, the submission will be prevented
+and the browser will display a validation error.
+
+> Please enter a valid value. The two nearest valid values are 1 and 2.
+
+If I want to be able to input a decimal value like this, I need to change the
+`step` value. It defaults to `1`, but I could change it to `2`, `10`, or in
+this case to `0.01`.
+
+```html
+<input type="number" step="0.01" id="amount" required class="border" />
+```
+
+Notice now that as you click the up and down arrows, the value is incremented
+and decremented by **0.01** at a time.
+
+If I want to maintain the step value of `1` while allowing decimal values, I
+can instead set the `step` value to be `any`.
+
+```html
+<input type="number" step="any" id="amount" required class="border" />
+```
+
+See the [MDN docs on number
+inputs](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number)
+for more details.