HTML5新增input类型和属性介绍

1.html5新增input类型

电子邮件类型

功能描述：输入E-mail地址的文本框

语法：<input type="email"/>

注意：输入的内容中必须包含"@"，"@"后面必须具有内容

 

搜索类型

功能描述：输入搜索关键字的文本框

语法：<input type="search"/>

 

URL类型

功能描述：输入WEB站点的文本框

语法：<input type="url"/>

注意：输入的内容中必须包含"http://"，后面必须有内容

 

颜色类型

功能描述：预定义的颜色拾取控件

语法：<input type="color"/>

 

数字类型

功能描述：只能接受数字

语法：<input type="number"/>

属性：min：当前域能接受的最小值

  max：当前域能接受的最大值

  step：决定了域所接受值递增或递减的步长，默认为1

 

范围类型

功能描述：允许用户选择一个范围内的值

语法：<input type="range" min="0" max="100" value="80"/>

属性：min：范围的下限值

  max：范围的上限值

  step：声明该值递增或递减的步长

  value：设置初始值

 

日期类型

功能描述：创建一个日期输入域

语法：<input type="date" />

 

周类型

功能描述：与date类型相似，但只能选择周

语法：<input type="week" />

 

 

月份类型

功能描述：与date类型相似，但只能选择月份

语法：<input type="month" />

 

 

2.html新增属性

placeholder

作用：默认提示

语法：<input type="text" placeholder="请输入用户名"/>

 

multiple

作用：支持在一个域中输入多个值，逗号隔开，一般配合邮箱和URL使用

语法：<input type="email" multiple/>

 

autofocus

作用：自动获取焦点

语法：<input type="text" autofocus/>

 

required

作用：防止域为空提交表单时

语法：<input type="text" required/>

 

minlength和 maxlength

作用：定制元素允许的最小字符数和最大字符数

语法：<input type="text" minlength="6" maxlength="18"/>

 

min和max

作用：定制元素允许的最小数字和最大数字

语法：<input type="number" min=”0” max=”100”/>