XForms/输入

基本表单输入

网页表单中最常见的用户界面控件之一是简单的单行文本区域。在这个例子中，我们有一个非常简单的表单，有两个输入字段。每个输入在输入字段的左侧都有自己的标签。

链接到 XForms 应用程序

程序结构

我们的程序分为两个部分，模型和视图。模型包含实例数据，用于存储用户在表单中输入的值。视图是 HTML 文档主体中呈现的一部分。

示例程序

<html
 xmlns="http://www.w3.org/1999/xhtml"
 xmlns:xf="http://www.w3.org/2002/xforms">
   <head>
      <title>XForms inputs with labels</title>
      <xf:model>
         <xf:instance xmlns="">
            <data>
               <guru/>
               <PersonSurName/>
            </data>
         </xf:instance>
      </xf:model>
   </head>
   <body>
      <p>Enter your first name, and last name.</p>
         <xf:input ref="PersonGivenName" incremental="true">
            <xf:label>Input First-Name:</xf:label>
            <xf:hint>Also known as given name.</xf:hint>
         </xf:input>
         <br/>
         <xf:input ref="PersonSurName" incremental="true">
            <xf:label>Input Last Name:</xf:label>
            <xf:hint>Also known as sur name or family name.</xf:hint>
         </xf:input>
         <br/>
         <br/>
         Output First Name: <b><xf:output ref="PersonGivenName"/></b>
         <br/>
         Output Last Name: <b><xf:output ref="PersonSurName"/></b>
      <p>Note that as you type the model output will be updated.</p>
   </body>
</html>

提示

您还可以使用 <xf:hint> 元素为用户提供数据输入提示。

讨论

请注意，当您键入时，输出会立即更新。这是因为 XForms 输入控件具有 incremental="true" 属性。

我们的模型很简单，只是一个人的姓和名。

请注意，label 和 hint 标签嵌套在输入标签中。

参考文献

W3C XForms 输入控件规范

下一页：地址 | 上一页：加法器
主页： XForms