Input的类型(type)

Posted 2020-09-27 萌新上路

html5 新的 Input 类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

本章全面介绍这些新的输入类型：

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。

<form action="demo_form.php" method="get">
<input type="number" name="points" min="0" max="10" step="3" value="6">  //数字框里默认值为6(value值)
<input type="submit">

 

使用下面的属性来规定对数字类型的限定：

属性	描述
disabled	规定输入字段是禁用的
max	规定允许的最大值
maxlength	规定输入字段的最大字符长度
min	规定允许的最小值
pattern	规定用于验证输入字段的模式
readonly	规定输入字段的值无法修改
required	规定输入字段的值是必需的
size	规定输入字段中的可见字符数
step	规定输入字段的的合法数字间隔
value	规定输入字段的默认值

 

range类型

0<input type="range" id="a" value="50">100

等效于

<input type="range" id="a" value="50" min="0‘ max="100">