HTML input number 數字控制元件

admin發表於2018-11-17
HTML控制元件

<input> 標籤 type 屬性值設定為 "number" 即可建立一個數字控制元件，HTML5 新增。

顧名思義，數字控制元件專門用於輸入數值內容，否則會報錯。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form method="post" action="#">
  數字:<input type="number" name="number">
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/17/140340qgjrtkgkznbckubh.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.將 type 屬性值設定為 "type" 即可建立一個數字控制元件。

（2）.外觀上與普通文字框無異。

（3）.當滑鼠懸浮或者獲取焦點時，右側出現可點選的上下箭頭。

（4）.預設，數字控制元件內只能輸入數值，否則提交表單時會報錯。

數字控制元件還有很多屬性，下面介紹一下常見屬性：

（1）.autofocus（HTML5）：頁面載入後，數字控制元件自動獲取焦點。

（2）.disabled：將數字控制元件設定為不可用狀態，無法設定值，值也不會被提交。

（3）.form（HTML5）：數字控制元件所屬的form元素的id屬性值。

（4）.list（HTML5）：規定與數字控制元件關聯的datalist，參閱HTML datalist 選項列表一章節。

（5）.min和max（HTML5）：設定數字控制元件可以輸入的最小值與最大值。

（6）.required（HTML5）：規定數字控制元件是必填的。

（7）.step（HTML5）：設定數字每次變化的梯度。

（8）.value：規定數字控制元件的預設數值。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form method="post" action="do.php">
  <input type="number" value="5" disabled name="number">
  <br/>
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

通過disabled屬性將數字控制元件變為不可用。

不可用狀態下的控制元件具有如下特點：

（1）.處於不可用狀態，外觀呈現灰色，且不能寫入值。

（2）.提交表單時，值不會被提交。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form method="post" action="do.php">
  <input type="number" required name="number">
  <br/>
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

required屬性設定數字控制元件是必填的，否則會報錯。

a:3:{s:3:\"pic\";s:43:\"portal/201811/17/140443d6l30wxaoe3v31g1.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form method="post" action="#">
  <input type="number" list="ant" required name="number">
  <datalist id="ant">
    <option  value="2"/>
    <option  value="3"/>
    <option  value="4"/>
    <option  value="5"/>
  </datalist>   
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

通過list屬性可以與datalist關聯起來。

a:3:{s:3:\"pic\";s:43:\"portal/201811/17/140501ik2244oaeg2po44g.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通過datalist可以預定義若干數值，點選下拉箭頭選取即可。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form id="ant" method="post" action="#"> 
  <input type="submit" value="提交表單"/>
</form>
<input form="ant" type="number" name="number"> 
</body>
</html>

通過form屬性可以與指定form表單關聯起來。

即便控制元件位於form元素外邊，也歸於此form元素。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form method="post" action="#">
  <input type="number" name="number"
    min="5"
    max="10"/>
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

通過min與max屬性，可以設定控制元件允許輸入的最小值和最大值。

a:3:{s:3:\"pic\";s:43:\"portal/201811/17/140607cmm97gnbk918sug7.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

如果輸入值不在規定範圍，提交表單會報錯。

同時右側的上下箭頭所能切換到的數值也會受兩個屬性的限制。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form method="post" action="#">
  <input type="number" step="2" name="number">
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

通過 step 設定控制元件中數值變化的梯度是 2。

考慮到篇幅問題，本文不對此屬性做介紹，具體參閱input step 屬性一章節。

相關文章