html表单新增类型,HTML5表单设计——新增输入类型和新增表单属性

新增输入类型

email类型

用来输入邮箱地址的文本框。该文本框与普通文本框在页面显示时没有任何区别，专门用于接收Email地址信息。提交表单时自动验证是否符合Email地址格式，如果不符合，将提示相应的错误信息

search类型

用来输入搜索关键字的文本框。该类型与text类型仅仅在外观上有区别，它的输入框为圆角矩形文本框，但是也可以通过css样式表进行修改。用户开始输入时，它的右边会有一个“×”按钮，点击这个按钮可以快速清除文本框中的内容

url类型

用来输入URL地址的文本框，浏览器兼容的情况下type=“url”类型的文本框能够正确提交符合URL地址格式的内容。当提交表单时自动验证url文本框中的值，如果不合法则浏览器不允许提交，并且提示错误信息

number类型

用来输入数字的文本框，提交时会检测其中的内容是否为数字。number类型的属性如下所示：

min：指定输入框可以接受的最小值

max：指定输入框可以接受的最大值

step：输入域合法的间隔，如果不设置，则默认值是1

value：规定默认值

设置好以上属性后，输入框右侧就会有一个微调控件，向上增加值，向下减少值

telephone number类型

用来验证电话号码之类的文本框，需要与pattern属性结合使用：

type的值可以是tel也可以是telephone，还可以是telephone number，三者的用法是一样的

range类型

用来得到一定范围内数字值的文本框，它和number类型稍有不同，number类型在页面输入框中添加微调控件，而range类型则是以滑动条的形式显示数字，通过滑动条实现数字的改变。range的属性与number类型相同

color类型

用来选取颜色，提供一个颜色选择器，但是有些浏览器不支持color类型

时间日期类型

用于显示时间和日期的文本框，用户单击文本框时弹出一个时间选择器，之后关闭选择器便会将所选择的时间和日期显示在文本框中

HTML5拥有多种可供选择的日期和时间的新输入类型，如下所示：

date：选取为年、月、日

month：选取月和年

week：选取周和年

time：选取时间(小时和分钟)

datetime：选取时间、日、月、年(UTC时间)

datetime-local：选取时间、日、月、年(本地时间)

有些浏览器不支持时间日期类型

新增表单属性

autocomplete属性

规定form或input域是否启用自动完成功能。该属性有两个值on和off，默认值为on

autofocus属性

规定当页面加载时input元素应该自动获得焦点，该属性值为布尔类型

disable属性

使浏览器中内容变为灰色，如果使用该属性，则会禁用输入字段。

使用disable属性的元素是不可以同表单一起提交的，它们的值对服务器的表单处理是不可用的。如果想要该值不能被编辑，同时也可以提交给服务器，可以使用readonly属性

form属性

为表单之外的元素指定form属性后单击按钮，不仅会提交表单内元素的值，也会提交该元素的值，此时form属性的值是想要一同提交的表单的id的值

list属性

为单行文本框增加了list属性，该属性的值为某个datalist元素的id。list属性引用对象列表，其中那个包含输入字段的预定义项，list属性规定输入域的datalist，datalist是输入域的选项列表。有的浏览器不支持list属性

multiple属性

规定输入域中可以选择多个值，定义multiple=“multiple”

min、max和step属性

规定输入的最小值、最大值和增减梯度

placeholder属性

使用placeholder属性可以在输入框中提示输入信息，属性值即为提示信息。输入框为空时，提示信息就会出现。当输入字段时，提示信息就会消失

pattern属性

提供一种正则表达式，用来验证输入字段与正则表达式是否匹配

required属性

用于检测输入文本框是否为空。required属性为布尔类型属性。只有文本内容不为空时，返回true，才能提交表单。required=“required”

readonly属性

有disabled属性的效果类似。使用readonly属性的字段不能接受焦点也不能进行编辑。但是与disabled不同的是readonly属性的值可以与表单一起提交