首页 > 代码库 > Input的类型(type)

Input的类型(type)

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=http://www.mamicode.com/"6">  //数字框里默认值为6(value值)
<input type="submit">

 

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

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

 

range类型

0<input type="range" id="a" value=http://www.mamicode.com/"50">100

等效于

<input type="range" id="a" value=http://www.mamicode.com/"50" min="0‘ max="100">

 

Input的类型(type)