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

HTMLで最大値を設定する方法｜max属性の使い方をわかりやすく解説

HTMLで入力欄に最大値（上限値）を設定するには、<input>要素のmax属性を使用します。max属性を指定することで、ユーザーが入力できる数値や日付の上限を制限でき、不正な値の送信を防ぐことができます。

max属性の基本

max属性は、type="number"、type="range"、type="date"などの入力タイプと組み合わせて使われます。例えば「1〜10までの数値のみ入力させたい」場合は、min属性とmax属性を併用します。

コード例

以下は、max属性を使って最大値を設定するサンプルコードです。ランキング（順位）を1〜10の範囲で入力できるフォームを作成しています。

<!DOCTYPE html>
<html>
   <body>
      <form action="">
         Rank:
         <input type = "number" name = "rank" min = "1" max = "10"><br>
         <input type = "submit">
      </form>
   </body>
</html>

解説

このコードでは、<input type="number">に対して min="1" と max="10" を指定しています。これにより、ユーザーが入力またはスピナー（上下ボタン）で選択できる値は1から10の間に制限されます。

  • min属性： 入力できる最小値を指定します。
  • max属性： 入力できる最大値を指定します。

もしユーザーが範囲外の値（例：11）を入力してフォームを送信すると、ブラウザの標準機能によってバリデーションエラーが表示され、送信がブロックされます。なお、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で要素に値を追加するには？value属性の使い方を解説

    HTMLで要素に値を設定するには、value属性を使用します。value属性は、フォーム送信時にサーバーへ送られる初期値や、要素が持つ現在の値を指定するために使われます。 value属性が使用できる要素 value属性は、以下のHTML要素で利用できます。 <button> … ボタンのラベルとして送信される値 <input> … 入力フィールドの初期値 <li> … 順序付きリスト（<ol>）内での項目の開始番号 <option> … 選択肢としてサーバーへ送信される値 <meter> … 計測範囲内における現在の値