XForms 输入控件





XForms 的用户界面使用 XForms 控件。





XForms 控件



XForms 中的用户界面元素被称为 XForms 控件。



最常用的控件元素是 <input> 和 <submit>。



每个控件元素均有 ref 属性指回 XForms 的数据模型。





独立于设备的控件



理解 XForms 用户界面并不会确切地描述如何显示 XForms 控件是很重要。



由于 XForms 是独立于平台和设备的,XForms 把如何显示这些空间的权利留给了浏览器。



正因如此,XForms 可被用于所有类型的设备,个人电脑,移动电话、手持计算机等等。XForms 同时也是为残障人士定义用户界面的完美解决方案。





input 控件



input 控件是最常用的 XForms 控件。它用于输入一行文本:



<input ref="name/fname">
<label>First Name</label>
</input>


大多数时候,input 控件会被显示为类似这样的输入域:




Try it yourself





<label> 元素



<label> 元素是所有 XForms 输入控件的强制子元素。



这一点的原因是为了确保表单可用于所有类型的设备(因为标签可通过不同的方式来处理。)对于语音软件,标签可被读出,而对于某些手持设备,标签必须一屏接一屏的跟随输入。





Secret 控件



Secret 控件是 input 空间的特殊变体,被设计用于输入密码或其他隐藏的信息:



<secret ref="name/password">
<label>Password:</label>
</secret>


大多数时候,secret 控件会显示为这样一个输入域:





Textarea 控件



Textarea 控件用于多行的输入:



<textarea ref="message">
<label>Message</label>
</textarea>


textarea 控件可显示为这样的输入域:





Submit 控件



Submit 控件用于提交数据:



<submit submission="form1">
<label>Submit</label>
</submit>




Trigger 控件



trigger 控件用于触发某个动作:



<trigger ref="calculate">
<label>Calculate!</label>
</trigger>




Output 控件:



output 空间用于显示 XForms 数据:



<p>First Name: <output ref="name/fname" /></p>
<p>Last Name: <output ref="name/lname" /></p>


上面的例子仅仅可输出 XForms XML 文档(XForms 实例)中的 <fname> and <lname> 节点的内容:



<instance>
<person>
<name>
<fname>David</fname>
<lname>Smith</lname>
</name>
</person>
</instance>


显示为这样:



First Name: David
Last Name: Smith


Try it yourself





Upload 控件



upload 控件是为向服务器上传文件而设计的:



<upload bind="name">
<label>File to upload:</label>
<filename bind="file"/>
<mediatype bind="media"/>
</upload>




 


点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

热门产品

历史上的今天:03月29日

热门专题

小程序开发|微信小程序,小程序开发,小程序,小程序制作,微信小程序开发,小程序公司,小程序开发公司,分销,三级分销系统,分销系统
小程序开发
综合高中|云南综合高中,昆明综合高中,综合高中能考本一吗,综合高中和普通高中的区别,综合高中是什么意思,综合高中能参加全国统一高考吗,综合高中可以考哪些大学,综合高中的学籍是什么
综合高中
APP开发|app开发_app开发公司_app软件开发_专业app开发_云南app开发公司_app定制_原生app开发定制
APP开发
金诺幼儿园(春城路金诺幼儿园)|昆明官渡区幼儿园,幼儿园报名,官渡区幼儿园,春城路幼儿园,幼儿园招生,学前班,昆明幼儿园,金诺幼儿园,环城南路幼儿园,石井路幼儿园
金诺幼儿园(春城路金诺幼儿园)
昆明综合高中|昆明综合高中
昆明综合高中
昆明网站建设|昆明网站建设,昆明网站开发,昆明网站建设公司,昆明网站建设价格,昆明网站设计,昆明网站制作,网页设计,高端网站建设,高端网站设计
昆明网站建设
大理科技管理学校|大理科技管理中等职业技术学校,大理市科技管理中等职业技术学校
大理科技管理学校
云南综合高中|云南综合高中
云南综合高中

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部