XForms/Textarea

      Motivation

      The user may enter more text than used in a typical single line input field and/or the programmer wants to use a large block of multi-line text to capture user input.

      ↑Jump back a section

      Method

      When you have text input that spans multiple lines you can use the <textarea> control. The format of the textarea control is the following:

      <xf:textarea ref="XPathExpression">
   <xf:label>Note:</xf:label>
</xf:textarea>
      ↑Jump back a section

      Screen Image

      Here is a screen image using the FireFox XForms extension:

      XForms textarea control with label

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

      ↑Jump back a section

      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.

      textarea {
   font-family: sans-serif;
   height: 7em;
   width: 500px;
}
      ↑Jump back a section

      Sample Program

      <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:textarea ref="MyTextValue">
         <xf:label>Note:</xf:label>
      </xf:textarea>
   </body>
</html>
      ↑Jump back a section

      Discussion

      One of the challenges is to be able to format the size of the textarea correctly. This is usually done in a style sheet.

      ↑Jump back a section

      Aligning the labels

      Some forms place textareas within tables. These tables put the labels on the left cell and the textarea input box on the right. The following CSS will then align the labels at the top of the row.

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

      Next Page: Textarea with style | Previous Page: Message Types

      Home: XForms

      ↑Jump back a section
      Last modified on 16 October 2010, at 19:22