HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのstep属性とは？数値入力の間隔を指定する方法をわかりやすく解説

HTMLのstep属性は、<input>要素に入力できる数値の間隔（ステップ）を定義するための属性です。例えば「0、4、8、12、16…」のように、一定の間隔で数値を増減させたい場合に使用します。また、min属性やmax属性と組み合わせることで、有効な値の範囲を細かく制御することも可能です。

step属性の基本的な使い方

step属性は、type="number"やtype="range"、type="date"などの入力フィールドで利用できます。値として正の数を指定すると、その数値が入力の刻み幅になります。デフォルト値は「1」です。

使用例：step属性で刻み幅を4に設定する

以下のコードでは、step属性に「4」を指定しています。この場合、有効な入力値は「4、8、12、16…」といった4の倍数になります。それ以外の数値を入力して送信ボタンを押すと、「有効な値を入力してください（Please enter a valid value）」というバリデーションメッセージが表示され、最も近い2つの有効な候補値もあわせて提示されます。

<!DOCTYPE html>
<html>
    <head>
        <title>HTML input step attribute</title>
    </head>
    <body>
        <form action="/cgi-bin/hello_get.cgi" method="get">
            <input type="number" name="points" step="4"><br>
            <input type="submit" value="送信">
        </form>
    </body>
</html>

step属性のポイント

step属性を活用することで、ユーザーが誤った値を入力するのを防ぎ、フォームの入力精度を高めることができます。特に数量の入力や日時の選択など、一定間隔の値だけを許可したい場面で非常に便利です。主要なブラウザ（Chrome、Firefox、Safari、Edgeなど）で広くサポートされているため、安心して利用できます。

  1. HTMLのlist属性とは？datalist要素で入力候補を表示する方法を解説

    HTMLのlist属性とはHTMLでは、<datalist>要素を使用して、あらかじめ定義された選択肢のリストを作成できます。このリストは<input>要素（入力欄）に対して適用され、ユーザーが文字を入力すると、定義済みの選択肢が候補として自動的に表示されます。<input>要素のlist属性は、対応する<datalist>要素のidを参照することで、入力欄と選択肢リストを関連付けます。このlist属性は、HTML5で新たに導入された機能です。list属性の基本的な使い方list属性を使うには、以下の2つのステップを行います。<datali

  2. HTMLの1つのrange入力で異なるstep属性を使い分ける方法

    HTMLのinput要素におけるstep属性は、入力できる数値の間隔（刻み幅）を定義するための属性です。たとえば「0、2、4、6、8、10」のように、一定間隔で数値が増減する仕組みを作れます。また、min属性やmax属性と組み合わせることで、有効な値の範囲を柔軟に設定することも可能です。 本記事では、まずstep属性の基本的な使い方を確認したうえで、1つのrange入力の中で条件に応じて異なるstep属性を動的に切り替える方法を、JavaScript（jQuery）を使った実装例とともに解説します。 step属性の基本的な使い方 次のコードは、step属性を使って数値の刻みを作成するシンプルな