HTML input number 數字控制元件
此將<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>
程式碼執行效果截圖如下:
程式碼分析如下:
(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屬性設定數字控制元件是必填的,否則會報錯。
[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關聯起來。
通過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屬性,可以設定控制元件允許輸入的最小值和最大值。
如果輸入值不在規定範圍,提交表單會報錯。
同時右側的上下箭頭所能切換到的數值也會受兩個屬性的限制。
[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 屬性一章節。
相關文章
- HTML input time calendar 控制元件HTML控制元件
- 限制HTML的input只能輸入數字、英文、漢字...HTML
- HTML input datetime calendar控制元件HTML控制元件
- HTML input week帶周calendar控制元件HTML控制元件
- HTML input month帶月calendar控制元件HTML控制元件
- Python Number(數字)Python
- react input[type='number']React
- 移除HTML5 input在type="number"時的上下小箭頭HTML
- 去掉input number的上下箭頭
- 征服number型別的input框型別
- HTML input rangeHTML
- 知識點5:神奇數字(magic number)
- input 限制字數輸入時候 限制字數會出現負數
- vue中自定義指令,限制input值為number和小數點的位數Vue
- <input type="number" >用法簡單介紹
- input 輸入框只能輸入數字
- JS控制input僅能輸入數字JS
- Flex的數字控制元件Flex控制元件
- HTML input 元素概述HTML
- HTML input date calendarHTML
- HTML input url域HTML
- vue element el-input輸入限制數字Vue
- [CareerCup] 7.7 The Number with Only Prime Factors 只有質數因子的數字
- HTML input image按鈕HTML
- HTML input image 按鈕HTML
- HTML input button按鈕HTML
- HTML input button 按鈕HTML
- HTML input submit 按鈕HTMLMIT
- Python學習筆記——Python Number(數字)Python筆記
- [CareerCup] 5.5 Number of Converted Bits 轉換數字所需的位數
- js利用Number()函式將字串轉換為數字JS函式字串
- [LeetCode] Palindrome Number 驗證迴文數字LeetCode
- HTML input reset 重置按鈕HTML
- HTML input tel 撥號域HTML
- HTML input search搜尋域HTML
- HTML input color 拾色器HTML
- HTML input password密碼框HTML密碼
- HTML input password 密碼框HTML密碼