HTML - max 屬性



HTML 的max屬性用於定義輸入欄位可接受和有效的最大值。

輸入的值必須小於或等於 max 值。如果表單輸入欄位值大於 max 屬性值,則在提交表單時會顯示一些警告。

語法

<input max="number|date">

應用於

以下列出的元素允許使用 HTML max 屬性

元素 描述
<input> HTML <input> 標籤用於接受使用者輸入的各種型別。
<progress> HTML <progress> 標籤用於顯示任務完成進度的指示器
<meter> HTML <meter> 標籤用於在給定範圍內呈現資料。

HTML max 屬性示例

以下示例將說明 HTML low 屬性,以及我們應該在哪裡以及如何使用此屬性!

設定數字輸入的最大值

在以下示例中,我們使用 max 屬性和 input type=number 來指定數字輸入的最大值為 5。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML max attribute</title>
</head>

<body>
   <form> 
      Enter Number: 
      <input type="number" max="5">
      <button>Submit</button>
   </form>
</body>

</html>

設定日期輸入的最大值

考慮另一種情況,我們將使用 max 屬性和 input type=date 來設定日期輸入的最大允許值。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML max attribute</title>
</head>

<body>
   <form> Enter the date before 2021-02-02: 
   <br>
   <input type="date" max="2021-02-02">
      <button>Submit</button>
   </form>
</body>
</html>

設定進度條的最大值

在以下示例中,我們定義一個進度條並將其最大值設定為 100,以便以百分比顯示當前進度。

<!DOCTYPE html>
<html>
<body>

<h1>The progress Bar</h1>

<label for="file">
   Loading progress:
</label>
<progress id="file" 
          value="32" 
          max="100"> 
</progress>

</body>
</html>

設定儀表元素的最大值

在以下示例中,我們將建立一個儀表元素並將最大值設定為 100 以顯示百分比進度。

<!DOCTYPE html>
<html lang="en">
<body>
      <h3>HTML low Attribute</h3>
      <label for="server-load">
         Room 1: Server Load
      </label> 
      <meter id="server-load" 
             value="40" 
             min="0" 
             max="100" 
             low="50" 
             high="90" 
             optimum="0.5">
      </meter>
</body>

</html>

支援的瀏覽器

屬性 Chrome Edge Firefox Safari Opera
max 是 5.0 是 10.0 是 16.0 是 5.1 是 10.6
html_attributes_reference.htm
廣告