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