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

HTMLの入力フィールドに有効な数値の間隔を指定する方法

HTMLの入力フィールドで有効な数値の間隔（刻み幅）を指定するには、step属性を使用します。step属性は、ユーザーが入力できる数値の間隔を定義する属性です。たとえば「0、5、10、15、20」のように、一定の間隔で数値を入力させたい場合に活用できます。

さらに、min属性（最小値）やmax属性（最大値）と組み合わせることで、有効な値の範囲をより細かく制御することが可能です。

使用例

以下のコードを実行すると、step属性の実際の動作を確認できます。

<!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属性に「5」を設定しているため、入力フィールドには5ずつ増減する数値（0、5、10、15…）のみが有効な値として受け付けられます。それ以外の数値を入力してフォームを送信すると、ブラウザが自動的にバリデーションエラーを表示します。

  1. HTMLのinput要素の幅を文字数で指定する方法【size属性の使い方】

    HTMLの<input>要素の幅を文字数を基準に指定したい場合は、size属性を使用します。size属性に数値を設定すると、その数値分の平均的な文字が表示できる幅が確保されます。 size属性の基本構文 <input type=text name=sub size=10> 上記のように記述すると、半角文字約10文字分の幅を持つテキストボックスが表示されます。size属性を省略した場合の既定値は「20」です。 使用例 次の例では、size属性とmaxlength属性を組み合わせて、表示幅と入力可能な最大文字数を同時に指定しています。 <!DOCTYPE html

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

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