SYNCERのロゴ
アイキャッチ画像

数値の入力フォームを作る方法

数値を入力するためのフォームを作成する方法を説明します。

サンプルコード

input要素のtype属性をnumberにすると、数値の入力フォームになります。

<input type="number">

デモ

数値の入力フォーム

input要素のtype属性に"number"を指定すると、数値を入力するためのフォームになります。デスクトップでは右側に増減コントローラが表示されます。

<!-- このコードは編集できます。 -->

<p>数値を入力するためのフォームです。</p>

<input type="number">

最小値と最大値

min属性で最小値、max属性で最大値を指定できます。

<!-- このコードは編集できます。 -->

<p>10000〜10050の間で入力します。</p>

<input type="number" min="10000" max="10050">

ステップ値

step属性で、数値の間隔を指定できます。

<!-- このコードは編集できます。 -->

<p>100の間隔で入力します。</p>

<input type="number" step="100">
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年6月22日 (木)
コンテンツを公開しました。