数理入力ならhtml input type = number？結局どのtypeを利用したらいいか試してみた

<input type="number" min="0">

<input type="number" max="100">

<label for="quantity">数量：</label>
<input type="number" id="quantity" name="quantity" step="1">

<label for="price">価格：</label>
<input type="number" id="price" name="price" step="0.5">

<label for="quantity">数量：</label>
<input type="number" id="quantity" name="quantity" step="1">

<input type="number" step="0.5">

<input type="number" id="quantity">
<script>
  const inputElement = document.getElementById("quantity");
  inputElement.addEventListener("keydown", function (event) {
    if (event.key === "ArrowUp") {
      this.stepUp(0.5);
      event.preventDefault();
    } else if (event.key === "ArrowDown") {
      this.stepDown(0.5);
      event.preventDefault();
    }
  });
</script>

/* スピンボタンを非表示にする */
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;
}

<label for="price">価格：</label>
<input type="number" id="price" name="price" step="0.01">

<label for="weight">重量（kg）：</label>
<input type="number" id="weight" name="weight" step="0.1" inputmode="decimal">

<label for="temperature">気温（℃）：</label>
<input type="number" id="temperature" name="temperature" min="-10" max="40" step="0.1">

<label for="name">名前：</label>
<input type="text" id="name" name="name" placeholder="お名前を入力してください">

<label for="email">メールアドレス：</label>
<input type="email" id="email" name="email" placeholder="example@example.com">

<label for="quantity">数量：</label>
<input type="number" id="quantity" name="quantity" min="1" max="100" step="1">

<label for="phone">電話番号：</label>
<input type="tel" id="phone" name="phone" placeholder="012-3456-7890">

<label for="quantity">数量：</label>
<input type="number" id="quantity" name="quantity">

/* CSSテクニックを適用するためのスタイル */
    input[type="number"] {
      width: 200px; /* 幅を指定 */
      height: 40px; /* 高さを指定 */
      font-size: 16px; /* フォントサイズを指定 */
      border: 1px solid #ccc; /* ボーダーを追加 */
      background-color: #f9f9f9; /* 背景色を指定 */
      border-radius: 5px; /* 丸みを設定 */
      cursor: pointer; /* ポインターカーソルに変更 */
    }

/* スピンボタンを非表示にする */
    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;
    }

/* フォーカス時のスタイル */
    input[type="number"]:focus {
      outline: none; /* フォーカス時の枠線を非表示 */
      box-shadow: 0 0 2px #00a0e9; /* フォーカス時の影を追加 */
    }