您的位置:首页> 前端教程> HTML教程
文章导航

HTML input number 数字控件

2018-11-17 14:02| 作者: admin| 查看: 5435| 评论: 0|来自: 蚂蚁部落

此将<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 属性一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部