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

HTMLのstep属性とは？入力フィールドで数値の間隔（ステップ）を指定する方法

HTMLのstep属性は、入力フィールドに入力できる数値の間隔（刻み幅）を定義するための属性です。例えば、step="5"と指定すると、0、5、10、15、20のように5ずつ増減する数値のみが有効な入力値として認められます。

step属性は、min属性やmax属性と組み合わせて使用することで、有効な数値の範囲を細かく制御できます。これにより、ユーザーが誤った形式のデータを入力するのを防ぎ、フォーム送信時のバリデーションが自動的に行われます。

step属性の基本的な使い方

以下のコード例では、<input type="number">にstep="5"を指定しています。この場合、有効な入力値は5、10、15、20などの5の倍数になります。

もし範囲外の数値（例えば7など）を入力して送信ボタンを押すと、「有効な値を入力してください」というエラーメッセージが表示され、最も近い2つの有効な候補値もあわせて提示されます。

サンプルコード

<!DOCTYPE html>
<html>
    <head>
        <title>HTML input step属性</title>
    </head>

    <body>
        <form action = "" method = "get">
            <input type="number" name="points" step="5"><br>
            <input type="submit" value="送信">
        </form>
    </body>
</html>

step属性のポイント

  • type="number"だけでなく、type="date"やtype="time"などの日付・時刻系の入力タイプでも使用可能です。
  • min属性と組み合わせると、開始値からstep間隔ごとの数値だけが有効になります。
  • 小数点以下の刻みも指定でき、例えばstep="0.01"とすれば金額入力などに便利です。
  • 任意の値を許可したい場合はstep="any"を指定します。

step属性を活用することで、JavaScriptによる独自のバリデーションを実装しなくても、HTMLだけで入力値の制御が可能になり、ユーザビリティの高いフォームを簡単に作成できます。

  1. HTMLで年のみを入力させる方法｜jQuery Datepickerを使った実装手順

    HTMLでは、<input type=month> を使うことで「月」の入力フィールドを簡単に作成できます。この入力タイプを利用すると、ユーザーは月と年を選択できます。しかし、「年だけ」を選択できるポップアップを表示したい場合はどうすればよいのでしょうか？実は、HTML標準仕様には「年」専用の入力タイプ（type=year）は用意されていません。 jQuery Datepickerで年の入力を実現する 年の入力を実現するには、jQueryのDatepicker（デートピッカー）を活用します。テキスト入力タイプ（<input type=text>）と組み合わせてDatep

  2. HTML入力フィールドのオートコンプリート（自動補完）を無効にする方法

    はじめにHTMLの入力フィールドでは、ブラウザのオートコンプリート（自動補完）機能によって、過去に入力した内容が候補として表示されることがあります。この機能を無効にしたい場合は、<input>要素にautocomplete属性を指定します。「off」を設定すれば無効になり、「on」を設定すれば有効になります。サンプルコード以下は、姓の入力欄ではオートコンプリートを無効にし、名の入力欄では有効にする例です。<!DOCTYPE html> <html> <head> <style> input{ font-size