本文介绍了HTML5中新的表单元素和表单属性。首先说下html5中表单的一个新功能。在我们之前的html中,表单元素必须放在表单元素内部。在html5中,它们可以写在页面的任意位置,然后给这个元素添加一个form属性,form属性的值为form表单的id,如下:在form元素中form元素不需要添加form属性。如果要使用表单获取所有表单元素的值,那么表单元素之外的表单元素必须添加form属性。input、select、textarea等元素都满足这个功能。接下来介绍html5新的表单元素,所有的例子都在谷歌浏览器中展示。新增表单元素email:提交表单时,验证输入值是否符合email格式url:提交表单时,验证输入值是否符合email格式urlnumber:提供根据您的设置选择数字的功能,其中min为最小值,max为最大值,value为默认值,step为点击箭头时改变数字,max、Min、step、value可以省略,目前部分浏览器不支持。range:包含一定范围内的数值的输入域将以一个滑块,max为最大值,min为最小值,value为默认值。如果不设置max和min,则默认值为1-100日期时间类型date:选择日、月,年月:选择月、年周:选择周、年time:选择时、分datetime:选择时、日、月、年(UTC时间)(我这里的浏览器没有显示效果)datetime-local:选择时间、日、月、年(本地时间)搜索:用于搜索字段,如果加上result="s"属性,会在搜索框前面加一个搜索图标(我这里的浏览器不显示效果)tel:验证输入的是否是电话号码格式(我的浏览器这里不显示效果)color:颜色type会提供一个拾色器供用户选择颜色,并用用户选择的颜色填充元素。添加一个input属性(部分易懂无代码演示),后面是支持该属性的元素autofocus:使元素在页面打开时自动获得焦点//input,button,select,textareaplaceholder:用户输入时提示located,所属的表单可以获取元素的值//input,output,button,select,textarea,fieldsetrequired:表示需要元素,提交表单时,会自动校验是否为内容元素不为空//input,textareamax/min/step:限制值的输入范围和值的变化程度在上面新的number元素中介绍。//inputautocomplete:使form元素或input元素具有自动完成功能,不仅记录用户之前输入的值,关闭时关闭,默认开启。//form,inputform重写属性://inputformaction:重写表单的action属性formenctype:重写表单的enctype属性。enctype属性管理表单的MIME编码。MIME是电子邮件传输的Internet标准,指示传输信息的类型和编码。可选值有3个:1、application/x-www-form-urlencoded(默认),设置表单传输的编码。2、multipart/form-data,指定传输的特殊数据类型,主要上传非文本内容,如文件、图片等。3.text/plain,明文传输。formmethod:重写表单的method属性formnovalidate:重写表单的novalidate属性formtarget:重写表单的target属性。例如:姓名:
密码:
multiple:指定输入框可以选择多个值//input,selectlist:list属性的值为datalist元素的id。datalist元素类似于一个选择框,当文本框获得焦点时显示为输入提示。如下:姓名:张三李四Wangerpattern:验证输入字段的格式,即正则表达式。