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

【初心者向け】HTMLのmin属性とmax属性の使い方をわかりやすく解説

HTMLにおけるmin属性とmax属性とは？

HTMLのmin属性とmax属性は、要素が取り得る値の「最小値」と「最大値」を指定するための属性です。ユーザーが入力できる数値や日付の範囲を制限することで、不正な値の送信を防ぎ、より信頼性の高いフォームを作成できます。

これらの属性は、以下の3つの要素で使用することができます。

番号 要素名 使用できる属性
1 <input> min / max
2 <meter> min / max
3 <progress> min / max

各要素での役割の違い

<input>要素の場合

type="number" や type="date"、type="range" などと組み合わせて使用します。範囲外の値を入力してフォームを送信しようとすると、ブラウザが自動的にバリデーションエラーを表示し、送信をブロックしてくれます。

<meter>要素の場合

ディスク使用量や投票結果など、既知の範囲内における測定値を表示する際に、スケール全体の下限（min）と上限（max）を定義します。value 属性で現在の値を示します。

<progress>要素の場合

タスクの進捗状況を表す際に、作業量の総量をmax属性で指定します。min属性の初期値は通常「0」です。

実際のコード例

以下のコードを実行すると、HTMLでmin属性とmax属性を使用する方法を確認できます。この例では、「1から20までの数値」のみ入力可能なフォームを作成しています。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML min/max属性のサンプル</title>
   </head>
   <body>
      <form action="" method="get">
         1から20までの数値を入力してください：
         <input type="number" name="num" min="1" max="20"><br>
         <input type="submit" value="送信">
      </form>
   </body>
</html>

まとめ

min属性とmax属性を活用すれば、JavaScriptを書かなくてもHTMLだけで簡単に入力値の範囲チェックを実装できます。特にユーザーからの入力を受け付けるフォームでは、データの品質を保つために積極的に活用しましょう。

  1. ExcelのMIN・MAX・AVERAGE関数の使い方｜平均値・最小値・最大値の求め方

    Excelの関数は、セル範囲に対して数学的な計算を実行するための便利な機能です。特によく使われる関数には、SUM（合計）、AVERAGE（平均）、COUNT（個数）、MIN（最小値）、MAX（最大値）などがあります。データの平均値・最小値・最大値を調べたいときは、AVERAGE、MIN、MAX関数を使えば簡単に求められます。この記事では、Excelでこれらの値を計算する具体的な手順をわかりやすく解説します。 ExcelのAVERAGE・MIN・MAX関数とは AVERAGE関数：指定したセル範囲内の数値の平均値（相加平均）を返します。数値のほか、名前、配列、数値を含むセル参照なども引数として

  2. iPhone XS・XS Max・XRで「簡易アクセス（Reachability）」を使う方法

    iPhone XS Maxは、6.5インチというiPhone史上最大級の大画面ディスプレイを搭載しています。アンドレ・ザ・ジャイアントほどの手の大きさがない限り、片手で持ちながら画面の隅々まで親指を届かせてタップするのは至難の業でしょう。そんな悩みを解決するためにAppleが生み出したのが、非常に便利な「簡易アクセス（Reachability）」機能です。実はこの機能、当時としては大型だった5.5インチディスプレイを備えたiPhone 6 Plusのために初めて搭載されたものですが、画面がどんどん大型化した今こそ、かつてないほど活躍する機能だと言えます。本記事では、iPhone XS Maxに