如何在HTML中使用min和max屬性？

HTML中的min和max屬性用於指定<input>元素的可接受值範圍。max屬性設定<input>元素的最大值，而min屬性設定<input>元素的最小值。

對於輸入限制，min和max屬性與數字和日期輸入型別一起使用。

語法

以下是使用min和max屬性的語法

<input type="number" min="min_value" max="max_value">

讓我們深入研究以下示例，以清楚地瞭解如何在HTML中使用min和max屬性。

使用min和max屬性

HTML中的min和max屬性用於設定<input>元素的值範圍。min屬性定義了包含該屬性的輸入可接受和有效的最小值。max屬性定義了包含該屬性的輸入可接受和有效的最大值。

示例

在以下示例中，我們使用min和max屬性來設定輸入的最小值和最大值。

<!DOCTYPE html>
<html>
<body>
   <form>
      <label for="min">Date Of Birth:</label>
      <input id="min" name="min" type="date" min="1995-12-31"><br><br>
      <label for="max">Age:</label>
      <input type="number" id="max" name="max" max="50">
      <input type="submit" value="Submit">
   </form>
</body>
</html>

執行上述指令碼後，它將生成包含出生日期和年齡輸入欄位的輸出，其中出生日期設定為最小值，年齡設定為最大值，以及一個提交按鈕。

使用<form> action屬性

HTML中的<form> action屬性用於指定提交表單時處理輸入控制元件的檔案的URL。

示例

在以下示例中，我們使用min和max屬性以及<form> action和get方法。

<!DOCTYPE html>
<html>
<body>
   <form action = "tutorialspoint/.com" method = "get">
      Select number between 1-50:
      <input type = "number" name="num" min = "1" max = "50"><br>
      <input type = "submit" value = "Submit">
   </form>
</body>
</html>

指令碼執行後，它將生成包含文字和文字框以及提交按鈕的輸出。

更新於：2022年10月12日

4K+ 次瀏覽

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告