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>
<PersonGivenName/>
<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>First Name:</xf:label>
<xf:hint>Also known as given name.</xf:hint>
</xf:input>
<br/>
<xf:input ref="PersonSurName" incremental="true">
<xf:label>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 标签嵌套在输入标签中。