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 標籤巢狀在輸入標籤中。