【HTML】step属性の使い方を解説！入力値の間隔（きざみ幅）を指定する方法
HTMLのstep属性は、<input>要素に入力できる値の間隔（きざみ幅）を定義するための属性です。主にtype="number"などの数値入力フィールドで使用され、値が増減するときのステップ（刻み値）を指定できます。これにより、ユーザーが意図しない細かい数値を入力してしまうのを防ぎ、フォームの入力ミスを減らすことができます。
構文（シンタックス）
step属性の基本的な書式は以下のとおりです。
<input step="number">
「number」には任意の正の数値を指定します。たとえば step="5" と設定すれば、入力値は5単位（0、5、10、15…）で増減します。また、step="any" を指定すると、小数点を含む任意の値を許可できます。
HTML step属性のサンプルコード
それでは、実際にstep属性を使った例を見てみましょう。
コード例
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
</style>
<body>
<h1>HTML step デモ</h1>
<p>注文数を入力してください：</p>
<input type="number" step="5" value="0">
</body>
</html>
実行結果
上記のコードを実行すると、初期値が「0」の数値入力欄が表示されます。
この状態で任意の数値を入力し、上下の矢印キー（↑↓）やスピナーのボタンを使って値を増減させてみてください。
step="5" が指定されているため、矢印キーで値を操作すると「0 → 5 → 10 → 15…」のように5ずつ増減することが確認できます。もしstep属性を指定しなかった場合、既定値である1単位ずつの増減となります。
step属性が使える主なinputタイプ
step属性は、次のような入力タイプで利用できます。
type="number"：数値入力type="range"：スライダー（レンジ）type="date"：日付type="time"：時刻type="datetime-local"：日時type="month"：月type="week"：週
まとめ
step属性を使えば、フォームの入力値に一定の間隔を持たせることができ、ユーザーにとって分かりやすく、かつ妥当性の高い入力フォームを作成できます。特に数量や金額など、特定の単位で入力させたい場面でぜひ活用してみてください。
-
HTMLのrequired属性とは？使い方とサンプルコードをわかりやすく解説
HTMLのrequired属性は、フォームを送信する前に該当要素の入力または選択が必須であることを指定するためのブール型属性です。この属性は、input、select、textarea の各要素に適用できます。required属性が設定されたフィールドが空のままフォームを送信しようとすると、ブラウザが自動的にバリデーションを行い、「このフィールドは必須です」といったエラーメッセージを表示して送信を阻止します。JavaScriptを使わずに簡単な入力チェックを実現できるため、フォーム作成時には非常に便利な属性です。構文（シンタックス）required属性の基本的な構文は以下の通りです。<t
-
HTML pattern属性とは？使い方とサンプルコードをわかりやすく解説
HTMLのpattern属性は、<input>要素に入力された値が、あらかじめ指定した正規表現に一致するかどうかを検証するための属性です。この属性を活用すれば、JavaScriptを書かなくてもブラウザ側で手軽に入力チェック（バリデーション）を実装でき、フォームの利便性を高めることができます。pattern属性を指定した入力欄に正規表現と一致しない値が入力された場合、フォーム送信時にエラーメッセージが表示され、送信がブロックされます。利用できるのはtext・search・tel・url・email・passwordなどのテキスト系入力タイプです。構文pattern属性の基本構文は次