使用H5设计表单

使用H5设计表单

强大的HTML5,极大地增强了表单的设计能力,实现了很多以前需要大量编码才能实现的功能。下面我们一起来看看吧。

l        传统表单元素

action属性,给出绝对地址,可以指向任何服务器

method属性,查询建议用get方式,增删改建议用post方式

必要属性有name和type,它的类型有text,password,checkbox[复选框],button,radio,reset,submit,hidden,file,image[图像按钮]

url用来输入URL地址的文本框,会自动检测其格式

number输入指定范围数字,有微调控件

range输入指定范围数字,以滑动条展示,

telephone number验证电话号码,必要属性type和patter,

search用来输入搜索关键字的文本框,与text类型仅仅是外观不同

color颜色选择器

日期时间类型:用于输入时间的文本框,type取值有date,month,week,time,datetime,datetime-local例如

l        新增表单属性

autocomplete属性,是否启动自动完成功能,针对输入框默认的on表示启用,off表示不启用

autofocus属性,规定当前页面加载时是否允许某一个输入控件自动获取焦点

disabled属性,使控件变为灰色,不可用状态;readonly仅不可编辑,但依然可以提交数据

form属性使得控件不必放在

标签下,可以在页面任何地方。

list属性是为单行文本框增加的,可以指定预定义选项,list的属性值是某个datalist的id值

multiple属性允许控件输入多个值,如上传控件可以一次选择多个文件上传

placeholder为输入框显示提示信息,空则出现,用则消失

pattern让输入框可以使用正则表达式

required属性检查输入是否为空,强制"必选",否则无法提交表单

l        新增表单元素

datalist元素,选项放在option标签中,作用是辅助文本框的输入,文本框list属性值为datalist的id值。功能类似于

output可以显示不同控件的内容,当它所关联的input控件的值发生变化时,就触发form的oninput事件

optgroup对各种类型的选项进行组合,常用在select标记和option标记之间,对option进行分组

l        提交时的验证处理

自动验证:是表单的默认验证方式,常用到的属性有required,pattern,min,max,step等

显示验证:所有表单控件都可以通过checkValidity()来实现验证,需要提交按钮触发JS函数

自定义验证:所有的input控件可以通过调用setCustomValidity()函数验证

取消验证:所有控件(包括form)都可以通过novalidate="true"来实现避免验证的功能

 

你可能感兴趣的:(HTML5)