XForms/Textarea

動機

使用者可能輸入比典型單行輸入欄位中使用的文字更多，或者程式設計師想要使用大塊多行文字來捕獲使用者輸入。

方法

當您有多行文字輸入時，可以使用 <textarea> 控制元件。文字區域控制元件的格式如下

<xf:textarea ref="XPathExpression">
   <xf:label>Note:</xf:label>
</xf:textarea>
</source >

== Screen Image ==
Here is a screen image using the FireFox XForms extension:

[[Image:XForms-textarea.jpg|center|frame|XForms textarea control with label]]

Note that the label is aligned at the bottom of the left edge.

== Sample Style Sheet ==
Here is some sample CSS code that changes all of the text areas in a form to be 7 characters high and 500 pixels wide.
<syntaxhighlight lang="css">
textarea {
   font-family: sans-serif;
   height: 8em;
   width: 600px;
}
</source >

== Sample Program ==
<syntaxhighlight lang="xml">
<html 
   xmlns="http://www.w3.org/1999/xhtml" 
   xmlns:xf="http://www.w3.org/2002/xforms">
   <head>
      <title>XForms textarea</title>
      <xf:model>
         <xf:instance xmlns="">
            <data>
               <MyTextValue />
            </data>
         </xf:instance>
      </xf:model>
   </head>
   <body>

<xf:input ref="Name" incremental="true">
            <xf:label> Name:</xf:label>
</xf:output ref="Name">
      <xf:textarea ref="MyTextValue">
         <xf:label>Note:</xf:label>
      </xf:textarea>
   </body>
</html>

討論

其中一個挑戰是能夠正確地格式化文字區域的大小。這通常在樣式表中完成。

對齊標籤

某些表單將文字區域放置在表格中。這些表格將標籤放在左側單元格，將文字區域輸入框放在右側。然後，以下 CSS 將在行的頂部對齊標籤。

/* align the label at the top of the left area */
xf|textarea > xf|label {
   vertical-align: top;
}

下一頁：帶樣式的文字區域 | 上一頁：訊息型別
主頁： XForms