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