HTML 屬性:min
min 屬性定義了包含該屬性的輸入控制元件可接受和有效的最小值。如果元素的 value 小於此值,則該元素將 驗證失敗。此值必須小於或等於 max 屬性的值。
某些輸入型別有預設最小值。如果輸入控制元件沒有預設最小值,並且為 min 指定的值無法轉換為有效數字(或者沒有設定最小值),則該輸入控制元件沒有最小值。
以下輸入型別支援此屬性:date、month、week、time、datetime-local、number 和 range 型別,以及 <meter> 元素。
語法
| 輸入型別 | 語法 | 示例 |
|---|---|---|
| 日期 | yyyy-mm-dd |
<input type="date" min="2019-12-25" step="1"> |
| 月份 | yyyy-mm |
<input type="month" min="2019-12" step="12"> |
| 周 | yyyy-W## |
<input type="week" min="2019-W23" step=""> |
| 時間 | HH:mm |
<input type="time" min="09:00" step="900"> |
| datetime-local | yyyy-mm-ddTHH:mm |
<input type="datetime-local" min="2019-12-25T19:30">
|
| 數字 | <number> |
<input type="number" min="0" step="5" max="100">
|
| range | <number> |
<input type="range" min="60" step="5" max="100">
|
注意: 當用戶輸入的資料不符合設定的最小值時,該值在約束驗證中被視為無效,並將匹配 :invalid 和 :out-of-range 偽類。
有關更多資訊,請參閱 客戶端驗證 和 rangeUnderflow。
對於 <meter> 元素,min 屬性定義了測量範圍的下限。如果指定了 max 屬性,則此值必須小於 max 屬性的值。在這兩種情況下,如果省略,則值預設為 1。
對 step 的影響
min 和 step 的值定義了有效值,即使 step 屬性未包含,因為 step 預設為 0。
我們在無效輸入周圍添加了一個大的紅色邊框
input:invalid {
border: solid red 3px;
}
然後定義一個最小值設為 7.2 的輸入控制元件,省略 step 屬性,此時 step 預設為 1。
<input id="myNumber" name="myNumber" type="number" min="7.2" value="8" />
由於 step 預設為 1,有效值包括 7.2、8.2、9.2 等。值 8 是無效的。因為我們包含了一個無效值,支援此功能的瀏覽器將把該值顯示為無效。
如果未顯式包含,step 對於 number 和 range 型別預設為 1,對於日期/時間輸入型別,則預設為 1 個單位型別(秒、周、月、天)。
可訪問性考慮
提供說明以幫助使用者理解如何填寫表單以及使用各個表單控制元件。指明任何必填和選填的輸入、資料格式以及其他相關資訊。在使用 min 屬性時,請確保使用者理解此最小要求。在 <label> 中提供說明可能就足夠了。如果提供標籤外的說明(這允許更靈活的定位和設計),可以考慮使用 aria-labelledby 或 aria-describedby。
規範
| 規範 |
|---|
| HTML # attr-input-min |
| HTML # attr-meter-max |
瀏覽器相容性
html.elements.input.min
載入中…
html.elements.meter.min
載入中…