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

HTMLの入力フィールドに値の範囲制限を設定する方法（min属性・max属性）

HTMLの<input>タグは、ユーザーからデータを受け取るためのフォーム部品を作成する際に使用します。数値や日付などの入力フィールドに「入力できる値の範囲」を制限したい場合は、min属性とmax属性を活用しましょう。

min属性には入力フィールドで許容される最小値を、max属性には最大値をそれぞれ指定します。この2つの属性は、以下の入力タイプ（type属性）と組み合わせて使用できます。

  • number（数値）
  • range（レンジスライダー）
  • date（日付）
  • datetime / datetime-local（日時）
  • month（月）
  • time（時刻）
  • week（週）

記述例

次のサンプルコードでは、「1〜10までの整数」のみ入力できる数値フィールドを作成しています。範囲外の値を入力して送信しようとすると、ブラウザの標準バリデーションによってエラーメッセージが表示され、送信が阻止されます。

<!DOCTYPE html>
<html>
    <head>
        <title>HTML input number</title>
    </head>
    <body>
        <form action = "" method = "get">
            1〜10の間で任意の数字を入力してください
            <input type="number" name="num" min="1" max="10"><br>
            <input type="submit" value="送信">
        </form>
    </body>
</html>

このようにmin属性とmax属性を指定するだけで、サーバーサイドの処理に頼らず、ブラウザ側で簡単に入力値の範囲チェックを実現できます。より厳密なバリデーションが必要な場合は、JavaScriptやサーバー側での検証と組み合わせると安心です。

  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